[WB-1814.5] Refactor IconButton to use semantic colors #2449
Conversation
🦋 Changeset detectedLatest commit: e7b02f3 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.5 kB
ℹ️ View Unchanged
|
A new build was pushed to Chromatic! 🚀https://5e1bf4b385e3fb0020b7073c-whryhodlfs.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 (7ed03e7) 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 |
| autodocs: false, | ||
| }, | ||
| }, | ||
| tags: ["!autodocs"], |
There was a problem hiding this comment.
praise: I didn't know you could do this! Nice!
| @@ -101,6 +104,7 @@ const IconButtonCore: React.ForwardRefExoticComponent< | |||
| const renderInner = (router: any): React.ReactNode => { | |||
| const buttonStyles = _generateStyles( | |||
| color, | |||
| !!disabled, | |||
There was a problem hiding this comment.
question: Is the boolean coercion of disabled meant to handle an undefined case?
There was a problem hiding this comment.
That's correct, this is mostly required b/c that prop is optional.
| */ | ||
| function getActionType(buttonColor: ButtonColor, disabled: boolean) { | ||
| const actionType = | ||
| buttonColor === "destructive" ? "destructive" : "progressive"; |
There was a problem hiding this comment.
question: could you use nullish coalescing here? (out of curiosity)
const actionType = buttonColor === "destructive" ?? "progressive";
There was a problem hiding this comment.
In this case it wouldn't work because the left-hand operand would return true if the condition is fulfilled.
const actionType = buttonColor === "destructive" ?? "progressive";
// when `buttonColor=destructive` => actionType=true
// when `buttonColor=default` => actionType="progressive"
Apologies if I'm being too literal 😅, but maybe I'm missing something in the expression (this could still use nullish coalescing here, which would be cool).
| * will apply the same styles as Button. | ||
| */ | ||
| const baseColorStates = { | ||
| ...semanticColor.action.outlined, |
There was a problem hiding this comment.
question: what case does this spread token cover? Could you add a comment for it?
There was a problem hiding this comment.
Good point! I'll add it.
| @@ -18,6 +18,9 @@ import { | |||
| IconButtonThemeContract, | |||
| } from "../themes/themed-icon-button"; | |||
|
|
|||
| type Kind = "primary" | "secondary" | "tertiary"; | |||
| type ButtonColor = "default" | "destructive"; | |||
There was a problem hiding this comment.
question: Where does progressive come in? Should that be included here among the options?
There was a problem hiding this comment.
ahh great question..... so the thing is that historically we have called the "blue" color version as default, but this is changing with Polaris. This is a change that it is being proposed in Figma (which makes sense IMO). So we have to make that mapping (default -> progressive), but the goal is to align on the naming later. I'll add a note in the code to clarify that.
There was a problem hiding this comment.
I created a ticket to address this later. I'll add the TODO comment to point to it. Thanks again for raising this question.
| : theme.color.stroke.action.default; | ||
|
|
||
| const buttonType = `${color}-${kind}-${light}-${size}-${themeName}`; | ||
| const buttonType = `${buttonColor}-d_${disabled}-${kind}-l_${light}-${size}-${themeName}`; |
There was a problem hiding this comment.
question: What does the -d_ mean in the buttonType name?
There was a problem hiding this comment.
Disabled, but that's just to be able to cache this string properly.
This is mostly for debugging purposes if needed.
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #2449 +/- ##
============================
============================
Continue to review full report in Codecov by Sentry.
|
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