[WB-1814.5] Refactor IconButton to use semantic colors #2449
Conversation
🦋 Changeset detectedLatest commit: d6ca781 The changes in this PR will be included in the next version bump. This PR includes changesets to release 8 packages
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: +169 B (+0.17%) Total Size: 98.3 kB
ℹ️ View Unchanged
|
A new build was pushed to Chromatic! 🚀https://5e1bf4b385e3fb0020b7073c-ivorftyuqi.chromatic.com/ Chromatic results:
|
| buttonColor: ButtonColor, | ||
| disabled: boolean, | ||
| kind: Kind, | ||
| light: boolean, | ||
| buttonColor: string, | ||
| theme: IconButtonThemeContract, |
There was a problem hiding this comment.
note: Just reordered the arguments alphabetically.
| ) { | ||
| switch (kind) { |
There was a problem hiding this comment.
note: Changed from switch to if as constants cannot be redefined within switch statements. I did this as I wanted to be able to reuse const themeVariant etc for better readability.
| } | ||
|
|
||
| const _generateStyles = ( | ||
| buttonColor = "default", | ||
| kind: "primary" | "secondary" | "tertiary", | ||
| buttonColor: ButtonColor = "default", |
There was a problem hiding this comment.
note: Same here related to reordering args alphabetically.
There was a problem hiding this comment.
note: Modified the structure to make it really closer to semanticColor.action. Note that this time used primary, secondary, etc instead of filled, outlinedto be able to map the keys to the props defined inIconButton(e.g.kind="primary"`). Still undecided with which approach to take. Any thoughts are completely welcome!
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 (be24a2f) 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="PR2449"Packages can also be installed manually by running: yarn add @khanacademy/wonder-blocks-<package-name>@PR2449 |
Summary:
Next step is to refactor the
IconButtoncomponent to use semantic colors.Besides the migration, this PR also includes the following changes:
getStylesByKind).borderto all the states to prepare the work for Polaris as theseicon buttons will look similar to the Button ones.
Implementation plan:
Issue: WB-1814
Test plan:
Verify that the Chromatic snapshots are unchanged.
URL:
/?path=/story/packages-iconbutton-all-variants--default