feat(button): add "featured" variant #1857
Conversation
❌ Deploy Preview for stacks failed. Why did it fail? →
|
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.
| @@ -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.
| @@ -14,8 +14,8 @@ describe("button", () => { | |||
| /s-btn-(light|dark).*?badge/, | |||
| // matches tests with a badge in highcontrast-light modes, excluding filled, danger, github, facebook, sm, or xs | |||
| /s-btn-highcontrast-light-(?!.*(filled|danger|github|facebook|sm|xs)).*?badge/, | |||
| // matches tests with a badge in highcontrast-light modes, are muted and/or outlined, and are sm or xs | |||
| /s-btn-highcontrast-light-(?:muted-outlined-|muted-|outlined-)?(?:sm|xs).*?badge/, | |||
| // matches tests with a badge in highcontrast-light modes, are muted or featured and/or outlined, and are sm or xs | |||
There was a problem hiding this comment.
Out of curiosity what's the contrast ratio for the failing tests?
By glancing at the UI it doesn't seem we are a lot off from the 7:1 target.
There was a problem hiding this comment.
Yeah, the featured variant seems to land at 6.61 in the failing cases. It's from the button badge opacity being set to .8 in high contrast mode.
Personally, I'd be fine to bump that to .85 or 1, but we'd either need to add an exception for the featured variant for this or change the button badge opacity for all buttons in HC mode. I'd prefer the latter but I'd want to get approval from design before making either change. Thoughts?
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
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.