Button.counter does not have disabled styles #1955
Conversation
🦋 Changeset detectedLatest commit: b9a29d9 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-limit report 📦
|
src/Button/styles.ts
Outdated
| @@ -22,7 +22,11 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme | |||
| }, | |||
| '&:disabled': { | |||
| color: 'primer.fg.disabled', | |||
| backgroundColor: 'btn.disabledBg' | |||
| backgroundColor: 'btn.disabledBg', | |||
| '[data-component="ButtonCounter"]': { | |||
There was a problem hiding this comment.
optional: If it helps to make the code look nicer, you don't need the quotes:
[data-component="ButtonCounter"] is equivalent to [data-component=ButtonCounter]
There was a problem hiding this comment.
Nice! I guess the quotes are only needed if there's special characters in the selector there.
| @@ -22,7 +22,11 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme | |||
| }, | |||
| '&:disabled': { | |||
| color: 'primer.fg.disabled', | |||
| backgroundColor: 'btn.disabledBg' | |||
There was a problem hiding this comment.
btn.disabledBg doesn't exist 🤔 , it falls back to btn.bg which is the right background anyways, so we can remove this line :)
src/Button/styles.ts
Outdated
| @@ -89,6 +96,7 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme | |||
| backgroundColor: 'btn.danger.disabledBg', | |||
| borderColor: 'btn.danger.disabledBorder', | |||
| '[data-component="ButtonCounter"]': { | |||
| color: 'btn.danger.disabledText', | |||
There was a problem hiding this comment.
Optional: As this is the same as the disabled button color, we could use color: inherit so that matches the parent even when we change the color value for the parent
pksjce
force-pushed
the
pk/button-counter
branch
from
4dd4a08
to
5ce7323
Compare
* Add disabled styles to counter and add storybook * Update with PR review comments * Create yellow-planes-decide.md
Describe your changes here.
Add disabled color and background to
Button.Counter.Screenshots
Before
After
Please provide before/after screenshots for any visual changes
Merge checklist
Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.