-
Notifications
You must be signed in to change notification settings - Fork 90
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
chore(button-group): update design #1630
Conversation
✅ Deploy Preview for stacks ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
@dancormier — if I understood the concern correctly, no, not as part of this change. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Not sure if this is a Stacks thing or a Radio thing — in the last button group example, the hover state is different on the active button. We don't have that now... so is that on purpose? Our other active states don't have a hover, should this new version maintain that?
Screen.Recording.2024-02-06.at.4.15.25.PM.mov
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I really struggle to accept that consumers will have to write the same text twice (see the data-text
attribute) with this approach. I would be ok with it in a fully componentized world where those are only implementation details (but that's not the case for Stacks Classic - all of this markup will be copy/pasted in several places with the risk of typing mismatch between the 2 texts).
Have we considered alternative approaches like text-shadow
? It's not exactly bold but it could serve the same purpose of distinguishing the active state in a way that should be way cheaper for us to implement. Perhaps something worth discussing with the design team as a compromise?
Thoughts?
I don't view text-shadow as the equivalent to bolded text. Bolded fonts are custom designs of a given font whereas text shadow is a bit of a blunt instrument. We'd lose crisp edges and wind up with kinda a blobby look to the selected element. Using text shadowUsing boldMy desired approach (that's not yet supported) FWIWEventually, browsers will support |
Ah, this is a bug. We have hover styles applied when a button does not have the |
Ok, I figured out the hover issue on radio-based button groups (the solution is pretty simple but was surprising tricky to get to). This should be ready for review now 🎉 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks good to me @dancormier. Nice work.
Once this PR is merged - what's the plan?
- Cut Stacks Classic 2.4.0
- Perform the upgrade in Core (ourselves given that this can be considered an a11y fix and we have this new mandate now?)
- (???) Upgrade the Razor library markup
Stacks Classic 2.3.0 I believe, but yep
I'm comfortable with us performing this upgrade
Yep, though this is by no means a rush. Currently the ButtonGroup Razor component is not referenced in Core. |
STACKS-554
This PR contains updates to the button group component.
Updates to markup
Button styles
In order to leverage existing
.s-btn
styles as much as possible, this component does not significantly modify button borders. Consumers should remove any existing.s-btn__outlined
from buttons within.s-btn-group
.Preventing layout shift w/ the
.s-btn--text
elementConsumers will need to wrap text in a
span.s-btn--text[data-text="[button text]"]
element to prevent layout shift. Without it, the component will mostly render as expected by may shrink/grow a few pixels horizontally.Remaining concerns @CGuindon
Do we need to consider hover/active states specifically for these buttons in the context of button group?Specifically, the hover state is very subtle for the.s-btn__muted
with the border color removedOriginal notes for posterity (Feb 2, 2024)
@CGuindon This PR has a preliminary version of the updated button group component. There are a quirks that are probably worth discussing.
:before
pseudo-element approach that I've taken.s-btn__muted
with the border color removeds-btn__outlined
from any existing buttons within button groups.data-text=[button text]
attribute to the button