[WB-1814.3] Refactor Switch to use semantic colors #2441
Conversation
…d Radio components
…to use semanticColor tokens
🦋 Changeset detectedLatest commit: aac58bd The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
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 |
|
Size Change: +77 B (+0.08%) Total Size: 98.1 kB
ℹ️ View Unchanged
|
A new build was pushed to Chromatic! 🚀https://5e1bf4b385e3fb0020b7073c-ryinsuinyy.chromatic.com/ Chromatic results:
|
…e `semanticColor` tokens instead of `color`. This will prepare the component for supporting a more global theming approach in the future.
…est now that we use Chromatic snapshots for all variants
There was a problem hiding this comment.
note: As we have been discussing, this is a new file to run visual regression tests on all variants of a component. I auto-approved the first version in Chromatic so reviewers can compare the baseline with the semanticColor changes.
| expect(switchWithIcon).toHaveStyle( | ||
| "background-color: rgba(33, 36, 44, 0.5)", | ||
| ); | ||
| expect(switchWithIcon).toHaveStyle( | ||
| "outline: 2px solid rgb(24, 101, 242)", | ||
| ); |
There was a problem hiding this comment.
note: Removed these assertions now that we fully check this via Chromatic snapshots
| ":focus-within": { | ||
| outline: `solid ${theme.size.width.small}px ${theme.color.outline.default}`, | ||
| outlineOffset: theme.size.offset.default, | ||
| }, |
There was a problem hiding this comment.
note: I noticed that this was missing to display the focus outline on disabled switches.
GeraldRequired Reviewers
Don't want to be involved in this pull request? Comment |
npm Snapshot: Published🎉 Good news!! We've packaged up the latest commit from this PR (e2b0b50) and published all packages with changesets to npm. You can install the packages in webapp by running: ./services/static/dev/tools/deploy_wonder_blocks.js --tag="PR2441"Packages can also be installed manually by running: yarn add @khanacademy/wonder-blocks-<package-name>@PR2441 |
Summary:
Continuing with the semantic colors migration, this PR covers the
Switchcomponent.
Switchthemes to use semantic colors.All Variantsstory to switch.Implementation plan:
Issue: WB-1814
Test plan: