Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[WALL-1371][BpkText] Add Larken TextStyles to Backpack #3435

Merged
merged 10 commits into from
May 14, 2024
Merged

[WALL-1371][BpkText] Add Larken TextStyles to Backpack #3435

merged 10 commits into from
May 14, 2024

Conversation

youngji0827
Copy link
Contributor

@youngji0827 youngji0827 commented May 13, 2024 •
edited

Details

Editorial text (for the Custom News Pages) require the new brand Larken font.

New font-family token added here: Skyscanner/backpack-foundations#310

This PR creates the 3 new text styles (Editorial 1/2/3) with styles defined in the Typography Token updates.

TextStyle Font Weight Transform Size Line-height Letter-Spacing
Editorial 1 Larken Light Normal None 48 56 na
Editorial 2 Larken Light Normal None 32 40 na
Editorial 3 Larken Regular Normal None 20 28 na

Screenshot of the changes all made locally for now

image

Remember to include the following changes:

  • Ensure the PR title includes the name of the component you are changing so it's clear in the release notes for consumers of the changes in the version e.g [KOA-123][BpkButton] Updating the colour
  • README.md (If you have created a new component)
  • Component README.md
  • Tests
  • Storybook examples created/updated
  • For breaking changes or deprecating components/properties, migration guides added to the description of the PR. If the guide has large changes, consider creating a new Markdown page inside the component's docs folder and link it here

@youngji0827 youngji0827 added the minor Non breaking change label May 13, 2024
@github-actions GitHub Actions
Copy link

Visit https://backpack.github.io/storybook-prs/3435 to see this build running in a browser.

@github-actions GitHub Actions
Copy link

github-actions bot commented May 13, 2024 •
edited

Warnings
⚠️

Package source files (e.g. packages/package-name/src/Component.js) were updated, but snapshots weren't. Have you checked that the tests still pass?
⚠️

Package source files (e.g. packages/package-name/src/Component.tsx) were updated, but type files weren't. Have you checked that no types have changed?

Browser support

If this is a visual change, make sure you've tested it in multiple browsers.

Generated by 🚫 dangerJS against e943cf1

@github-actions GitHub Actions
Copy link

Visit https://backpack.github.io/storybook-prs/3435 to see this build running in a browser.

@github-actions GitHub Actions
Copy link

Visit https://backpack.github.io/storybook-prs/3435 to see this build running in a browser.

@github-actions GitHub Actions
Copy link

Visit https://backpack.github.io/storybook-prs/3435 to see this build running in a browser.

youngji0827
youngji0827 commented May 13, 2024
View reviewed changes
packages/bpk-mixins/_typography.scss Outdated
@mixin bpk-editorial-1 {
font-family: $bpk-font-family-larken;

@include _bpk-text-factory($bpk-font-size-xxxxl, $bpk-line-height-xxxxl, 300);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The Figma has the Editorial 1 and Editorial 2 texts with a font-weight of 300, but this font-weight doesn't exist as a token in bpk-foundations.

image

Should this also be added in as new $bpk-font-weight-light?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think that is a good idea for us to add a new weight token for this

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added as new token here Skyscanner/backpack-foundations#313

@youngji0827 youngji0827 changed the title [WIP] [WALL-1371][BpkText] Add Larken TextStyles to Backpack [WALL-1371][BpkText] Add Larken TextStyles to Backpack May 13, 2024
@youngji0827 youngji0827 marked this pull request as ready for review May 14, 2024 08:43
@olliecurtis olliecurtis self-requested a review May 14, 2024 11:08
@youngji0827 youngji0827 mentioned this pull request May 14, 2024
Merged
4 tasks
@github-actions GitHub Actions
Copy link

Visit https://backpack.github.io/storybook-prs/3435 to see this build running in a browser.

@github-actions GitHub Actions
Copy link

Visit https://backpack.github.io/storybook-prs/3435 to see this build running in a browser.

@olliecurtis olliecurtis merged commit 540598b into main May 14, 2024
9 checks passed
@olliecurtis olliecurtis deleted the WALL-1371_Larken branch May 14, 2024 14:17
FireRedNinja pushed a commit that referenced this pull request May 22, 2024
@youngji0827 @FireRedNinja
[WALL-1371][BpkText] Add Larken TextStyles to Backpack (#3435)
0696b7d 
[WALL-1371][BpkText] Add Larken TextStyles to Backpack (#3435)

* Add Larken TextStyles to Backpack
* Update typo in README
* bump bpk-foundations
* BpkText test and add to VR test
* test to use RTL queries and remove snaps
* fix VR test
* use the factory
* use new font-weight token
* Update package-lock.json
KathyWang0208 pushed a commit that referenced this pull request May 27, 2024
@youngji0827 @Kathy0208
[WALL-1371][BpkText] Add Larken TextStyles to Backpack (#3435)
c043081 
[WALL-1371][BpkText] Add Larken TextStyles to Backpack (#3435)

* Add Larken TextStyles to Backpack
* Update typo in README
* bump bpk-foundations
* BpkText test and add to VR test
* test to use RTL queries and remove snaps
* fix VR test
* use the factory
* use new font-weight token
* Update package-lock.json
KathyWang0208 pushed a commit that referenced this pull request May 27, 2024
@youngji0827 @Kathy0208
[WALL-1371][BpkText] Add Larken TextStyles to Backpack (#3435)
77e71a6 
[WALL-1371][BpkText] Add Larken TextStyles to Backpack (#3435)

* Add Larken TextStyles to Backpack
* Update typo in README
* bump bpk-foundations
* BpkText test and add to VR test
* test to use RTL queries and remove snaps
* fix VR test
* use the factory
* use new font-weight token
* Update package-lock.json
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@olliecurtis olliecurtis olliecurtis approved these changes

Assignees
No one assigned
Labels
minor Non breaking change
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
2 participants
@youngji0827 @olliecurtis