chore: css typography token unit tests #697
Draft
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
📖 Storybook Preview |
| @@ -11,14 +11,6 @@ describe('Typography', () => { | |||
|
|
|||
There was a problem hiding this comment.
Moved to separate PR #699
7 tasks
georgewrmarshall
force-pushed
the
fix/css-type-tests
branch
from
f5a4d25 to
34446fa
Compare
📖 Storybook Preview |
georgewrmarshall
force-pushed
the
fix/css-type-tests
branch
from
34446fa to
3987c3a
Compare
| @@ -33,7 +33,7 @@ export const AvatarBase = forwardRef<HTMLDivElement, AvatarBaseProps>( | |||
|
|
|||
| const mergedClassName = twMerge( | |||
| // Base styles | |||
| 'inline-flex items-center justify-center overflow-hidden bg-section', | |||
| 'bg-section inline-flex items-center justify-center overflow-hidden', | |||
There was a problem hiding this comment.
Prettier fix after rebase from main
georgewrmarshall
force-pushed
the
fix/css-type-tests
branch
from
3987c3a to
9673ecb
Compare
| @@ -92,11 +92,11 @@ | |||
| --typography-s-body-xs-medium-font-size: var(--font-size-2); | |||
| --typography-s-body-xs-medium-line-height: var(--line-height-2); | |||
| --typography-s-body-xs-medium-font-weight: var(--font-weight-medium); | |||
| --typography-s-body-xs-medium-letter-spacing: var(--letter-spacing-0); | |||
| --typography-s-body-xs-medium-letter-spacing: var(--letter-spacing-1); | |||
There was a problem hiding this comment.
Fix from unit tests to align with figma!
📖 Storybook Preview |
📖 Storybook Preview |
georgewrmarshall
force-pushed
the
fix/css-type-tests
branch
from
9673ecb to
a900074
Compare
📖 Storybook Preview |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
This PR adds comprehensive CSS typography tests to ensure consistency between Figma design tokens and the generated CSS variables. The tests validate that all typography-related CSS variables (font sizes, line heights, font weights, letter spacing, and font families) match their corresponding values in the Figma tokens.
What is the reason for the change?
We needed automated testing to verify that our CSS typography variables are correctly generated from the Figma design tokens and remain consistent across updates.
What is the improvement/solution?
typography.test.tsthat validates all typography CSS variables against their Figma token counterpartsletter-spacing-0toletter-spacing-1)Related issues
Fixes: #158
Manual testing steps
yarn workspace @metamask/design-tokens testto execute the new typography testsScreenshots/Recordings
Before
No automated testing for CSS typography variables - potential for inconsistencies between Figma tokens and CSS output to go unnoticed.
After
Comprehensive test suite with 100% coverage ensuring typography CSS variables match Figma design tokens:
Pre-merge author checklist
Pre-merge reviewer checklist