feat(button): add "featured" variant #1857
Conversation
✅ Deploy Preview for stacks ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
When filled/selected buttons were hovered, the currentColor would be used for the border color. This commit ensures the correct border color is used on filled/selected buttons
dancormier
changed the title
|
|
||
| {% header "h3", "Featured" %} | ||
| <!-- TODO add featured button description --> | ||
| <p class="stacks-copy">Featured buttons are…</p> |
There was a problem hiding this comment.
@CGuindon Here's where the description for the "featured" buttons would go. Feel free to make a commit or pass a description along to me and I'll plug it in.
There was a problem hiding this comment.
I can't push to Stacks so here you go — let me know what you think. I looked at the other buttons and the color purple description in the color fundamentals:
Featured buttons are a secondary button style, used to visually draw attention to something new or temporary, usually as part of onboarding or to announce a new feature. These should be used sparingly, and permanent placements should be avoided
| @@ -35,6 +35,26 @@ | |||
| } | |||
| ] | |||
| } | |||
| ] | |||
| , | |||
| "featured": [ | |||
There was a problem hiding this comment.
I went with featured for this variant name.
I figured it's best to avoid coupling naming with visual that could change (purple) and new felt too restrictive since I could see this button being used just to grab some attention generally. featured felt like the best fit but I'm glad to change it if you feel differently @CGuindon.
There was a problem hiding this comment.
Overall looks good, there is only a minor docs correction to do I left in comment.
Nice to see the PPCP abstraction making our lives easier here.
Well done @dancormier ❤️
Addresses #1857 (comment) and similar
There was a problem hiding this comment.
Ok so the only thing I don't love is that in HC mode, the filled default state is the same color as the filled selected state (no difference).
Because we had to bump the background color from 400 to 500 for HC filled, and because 500 and 600 are the same in HC, we end up with no difference there.
For Base and Danger we have a modified red-400 and blue-400 just for HC mode. Those colors were modified from Light/Dark so that they meet the 7:1 ratio (they're pretty close but not quite otherwise). And so for those variants we're able to keep the 400 stop as the background color for filled default and therefore have a color difference with the selected state.
So....
I'm proposing we modify HC modes purple 400 color to meet a 7:1 ratio with white.
Change the selected state back to using purple-400 but with this new color (in dark mode the purple 400 already passes 7:1 ratio.
- HC Light purple-400 would become #3B41BA (Figma where I played with this)
- HC Dark purple-400 would become NO CHANGE NEEDED? since it already passes the 7:1 ratio?
STACKS-680
TODO
Note
I've opened this PR up for review but there's a couple of outstanding items that need to be resolved:
This PR adds a "featured" (purple) variant to the button component.
Screenshots
Light
Dark
Light high contrast
Dark high contrast
Testing
/product/components/buttons/#featuredNotable changes
High contrast filled background color
To meet accessibility requirements, the featured filled variant background color has been set to
--purple-500(normally--purple-400).Borders on filled, selected buttons
This PR includes a minor fix to button border colors when hovered and filled and/or selected. Previously, the value of
--bu-bc(currentColor) was applied and now the border color applied is equal to--bu-bg, ensuring the border and button background are unified.Button group visual regression test images
There are six visual regression tests (all on
s-btn-group-highcontrast-*in Chromium runs) that have been updated. They are visually identical to me but there could be extremely slight differences due to 838e25a.