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.

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

feat(tokens): use @adobe/[email protected] + apply CJK typography changes #3167

Open
wants to merge 4 commits into
base: main
Choose a base branch
from

Conversation

pfulton
Copy link
Collaborator

@pfulton pfulton commented Sep 26, 2024

Description

Takes in the 12.27.0 release of @adobe/spectrum-tokens which includes additions and changes for CJK typography. While there are 27 additions or changes in that release, the downstream scope of changes is much more broad, as these changes will impact any consumer using Typography styles for CJK locales, the Illustrated Message component for CJK locales, and the Drop Zone component for CJK locales.

Affected components:

  • Typography
  • Illustrated message (via tokens-only)
  • Drop zone (uses Illustrated message) - (via tokens-only)

Visual testing
Unfortunately, we don't have visual tests that cover these changes, so Chromatic isn't detecting any changes.

How and where has this been tested?

Please tag yourself on the tests you've marked complete to confirm the tests have been run by someone other than the author.

Validation steps

  1. Check that the deployed, localized Typography story renders with a smaller font (now 18px) compared to production which uses --spectrum-body-font-size and renders at 20px.
  2. Given the links in step 1, generally compare the two URLs: everything in the deploy URL should look smaller and have less visual space compared to the production URL.
  3. Compare the deploy URL for Illustrated message vs. the production URL - and observe that the deploy URL's typography should be smaller and have less space compared to the production URL (similar to what you saw on the Typography component pages).
  4. Compare the deploy URL for Drop zone vs. the production URL - and observe that the deploy URL's typography should be smaller and have less space compared to the production URL (similar to what you saw on the Typography component pages).

Regression testing

Validate:

  1. The documentation pages for at least two other components are still loading, including:
  • The pages render correctly, are accessible, and are responsive.
  1. If components have been modified, VRTs have been run on this branch:
  • VRTs have been run and looked at.
  • Any VRT changes have been accepted (by reviewer and/or PR author), or there are no changes.

Screenshots

BEFORE (current production, XL size):
Screenshot 2024-09-27 at 11 13 32 AM

AFTER (deploy URL, XL size):
Screenshot 2024-09-27 at 11 13 23 AM

To-do list

  • I have read the contribution guidelines.
  • I have updated relevant storybook stories and templates.
  • I have tested these changes in Windows High Contrast mode.
  • If my change impacts other components, I have tested to make sure they don't break.
  • If my change impacts documentation, I have updated the documentation accordingly.
  • ✨ This pull request is ready to merge. ✨

Copy link

changeset-bot bot commented Sep 26, 2024

🦋 Changeset detected

Latest commit: 88d0984

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages
Name Type
@spectrum-css/typography Major
@spectrum-css/tokens Major
@spectrum-css/preview Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@pfulton pfulton added the run_vrt For use on PRs looking to kick off VRT label Sep 26, 2024
Copy link
Contributor

github-actions bot commented Sep 26, 2024

🚀 Deployed on https://pr-3167--spectrum-css.netlify.app

Copy link
Contributor

github-actions bot commented Sep 26, 2024

File metrics

Summary

Total size: 4.31 MB*
Total change (Δ): 🔴 ⬆ 4.25 KB (0.10%)

Table reports on changes to a package's main file. Other changes can be found in the collapsed Details section below.

Package Size Δ
typography 41.02 KB 🔴 ⬆ 0.90 KB
tokens 407.32 KB 🔴 ⬆ 0.82 KB

Details

typography

Filename Head Compared to base
index-base.css 41.02 KB 🔴 ⬆ 0.90 KB (2.19%)
index-vars.css 41.02 KB 🔴 ⬆ 0.90 KB (2.19%)
index.css 41.02 KB 🔴 ⬆ 0.90 KB (2.19%)

tokens

Filename Head Compared to base
css/components/bridge/actionbutton.css 12.05 KB -
css/components/bridge/actiongroup.css 0.97 KB -
css/components/bridge/alertbanner.css 0.78 KB -
css/components/bridge/assetcard.css 0.76 KB -
css/components/bridge/button.css 35.45 KB -
css/components/bridge/checkbox.css 1.01 KB -
css/components/bridge/clearbutton.css 1.14 KB -
css/components/bridge/closebutton.css 1.06 KB -
css/components/bridge/combobox.css 1.11 KB -
css/components/bridge/datepicker.css 0.74 KB -
css/components/bridge/index.css 64.71 KB -
css/components/bridge/infieldbutton.css 1.96 KB -
css/components/bridge/picker.css 1.87 KB -
css/components/bridge/pickerbutton.css 1.75 KB -
css/components/bridge/popover.css 0.73 KB -
css/components/bridge/radio.css 1.56 KB -
css/components/bridge/rating.css 1.00 KB -
css/components/bridge/search.css 2.03 KB -
css/components/bridge/slider.css 2.11 KB -
css/components/bridge/stepper.css 3.00 KB -
css/components/bridge/switch.css 1.51 KB -
css/components/bridge/tabs.css 0.72 KB -
css/components/bridge/tag.css 3.51 KB -
css/components/bridge/textfield.css 1.20 KB -
css/components/bridge/toast.css 0.75 KB -
css/components/bridge/tooltip.css 0.77 KB -
css/components/express/actionbutton.css 8.96 KB -
css/components/express/actiongroup.css 0.93 KB -
css/components/express/alertbanner.css 0.77 KB -
css/components/express/assetcard.css 0.73 KB -
css/components/express/button.css 29.37 KB -
css/components/express/checkbox.css 0.95 KB -
css/components/express/clearbutton.css 1.03 KB -
css/components/express/closebutton.css 0.96 KB -
css/components/express/combobox.css 1.01 KB -
css/components/express/datepicker.css 0.73 KB -
css/components/express/index.css 51.93 KB -
css/components/express/infieldbutton.css 1.67 KB -
css/components/express/picker.css 1.51 KB -
css/components/express/pickerbutton.css 1.51 KB -
css/components/express/popover.css 0.69 KB -
css/components/express/radio.css 1.35 KB -
css/components/express/rating.css 1.02 KB -
css/components/express/search.css 1.93 KB -
css/components/express/slider.css 1.78 KB -
css/components/express/stepper.css 2.33 KB -
css/components/express/switch.css 1.29 KB -
css/components/express/tabs.css 0.72 KB -
css/components/express/tag.css 3.28 KB -
css/components/express/textfield.css 1.08 KB -
css/components/express/toast.css 0.75 KB -
css/components/express/tooltip.css 0.76 KB -
css/components/spectrum/actionbutton.css 9.15 KB -
css/components/spectrum/actiongroup.css 0.82 KB -
css/components/spectrum/alertbanner.css 0.77 KB -
css/components/spectrum/assetcard.css 0.72 KB -
css/components/spectrum/button.css 29.43 KB -
css/components/spectrum/checkbox.css 0.94 KB -
css/components/spectrum/clearbutton.css 1.00 KB -
css/components/spectrum/closebutton.css 0.95 KB -
css/components/spectrum/combobox.css 1.02 KB -
css/components/spectrum/datepicker.css 0.72 KB -
css/components/spectrum/index.css 52.13 KB -
css/components/spectrum/infieldbutton.css 1.69 KB -
css/components/spectrum/picker.css 1.60 KB -
css/components/spectrum/pickerbutton.css 1.47 KB -
css/components/spectrum/popover.css 0.72 KB -
css/components/spectrum/radio.css 1.35 KB -
css/components/spectrum/rating.css 1.01 KB -
css/components/spectrum/search.css 1.84 KB -
css/components/spectrum/slider.css 1.75 KB -
css/components/spectrum/stepper.css 2.29 KB -
css/components/spectrum/switch.css 1.28 KB -
css/components/spectrum/tabs.css 0.71 KB -
css/components/spectrum/tag.css 3.30 KB -
css/components/spectrum/textfield.css 1.08 KB -
css/components/spectrum/toast.css 0.75 KB -
css/components/spectrum/tooltip.css 0.76 KB -
css/dark-vars.css 25.19 KB -
css/darkest-vars.css 25.14 KB -
css/express/custom-large-vars.css 1.10 KB -
css/express/custom-medium-vars.css 1.09 KB -
css/express/custom-vars.css 0.67 KB -
css/express/dark-vars.css 1.11 KB -
css/express/darkest-vars.css 1.11 KB -
css/express/global-vars.css 3.02 KB -
css/express/index.css 9.86 KB -
css/express/large-vars.css 3.58 KB -
css/express/light-vars.css 1.15 KB -
css/express/medium-vars.css 3.56 KB -
css/global-vars.css 39.58 KB 🔴 ⬆ 0.76 KB (1.91%)
css/large-vars.css 25.10 KB 🔴 ⬆ 0.03 KB (0.12%)
css/light-vars.css 25.16 KB -
css/medium-vars.css 25.03 KB 🔴 ⬆ 0.03 KB (0.13%)
css/spectrum/custom-large-vars.css 5.18 KB -
css/spectrum/custom-medium-vars.css 5.43 KB -
css/spectrum/custom-vars.css 2.58 KB -
css/spectrum/dark-vars.css 3.88 KB -
css/spectrum/darkest-vars.css 3.88 KB -
css/spectrum/global-vars.css 5.31 KB -
css/spectrum/index.css 28.65 KB -
css/spectrum/large-vars.css 7.49 KB -
css/spectrum/light-vars.css 3.87 KB -
css/spectrum/medium-vars.css 7.72 KB -
index.css 200.03 KB 🔴 ⬆ 0.82 KB (0.40%)
* Size determined by adding together the size of the main file for all packages in the library.
* Results are not gzipped or minified.
* An ASCII character in UTF-8 is 8 bits or 1 byte.

@pfulton pfulton removed the run_vrt For use on PRs looking to kick off VRT label Sep 26, 2024
@pfulton pfulton force-pushed the pfulton/s1-cjk-fix branch 3 times, most recently from 3bc94b0 to 0de5d00 Compare September 27, 2024 14:12
@pfulton pfulton added the run_vrt For use on PRs looking to kick off VRT label Sep 27, 2024
@pfulton pfulton marked this pull request as ready for review September 27, 2024 15:20
@pfulton pfulton added size-1 XS ~1-6hrs; nearly trivial, a few hours, could do more than one in a single day. s1 labels Sep 27, 2024
Copy link
Collaborator

@rise-erpelding rise-erpelding left a comment

Choose a reason for hiding this comment

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

CJK Typography looks as expected given the changes in the tokens!

Updates the typography styles to introduce specialized font
sizes for cjk at different t-shirt sizes. Additionally,
changes the weight and letter-spacing for some of those styles.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
run_vrt For use on PRs looking to kick off VRT s1 size-1 XS ~1-6hrs; nearly trivial, a few hours, could do more than one in a single day.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants