USWDS - Button: Collapse unstyled button width at small viewport sizes #5631
Conversation
brunerae
added
Needs: Discussion
aduth
force-pushed
the
aduth-unstyled-width
branch
from
a02a674 to
0fa3d4d
Compare
For discussionThis is a legacy style. Should unstyled buttons be inline at small screen sizes too? |
|
@mejiaj If the goal of these buttons are to replicate the look and feel of links, it makes sense to me that these would be inline. From what I can tell in the codebase and our site, there shouldn't be any visual regressions. We used the unstyled button for the unstyled language selector but it appears to be unaffected by this change |
mahoneycm
removed
the
Needs: Discussion
|
Hey there @aduth Thank you for contributing this work and providing the screenshots in the related issue you linked. It really helped to showcase the current state of the button and why we'd benefit from updating. We've added this to the |
There was a problem hiding this comment.
Thanks for this submission @aduth! The change looks good to me.
A few of notes for follow-on tasks with this PR:
- We should mark this as a breaking change in the PR description and release notes. This PR will change the default visual styles of "unstyled" buttons, and we should note that users should confirm the display of this variant in their projects.
- We should consider adding a note to the in the PR description, release notes, and/or button component page that the pattern of using buttons styled as links is currently under review with our accessibility and UX teams, and might not be a recommended practice.
- We should create follow-on issue that tests the target height of unstyled buttons to make sure they are compliant with WCAG 2.5.8.
We should create a changelog for this PR.Update: I have drafted a PR for this changelog and have included a link to it in the PR description
There was a problem hiding this comment.
A small, but impactful change. Thanks for the PR!
Wanted to note that the unstyled button is also used in language selector [develop].
|
@amyleadem Can you create the issue you mentioned in your review?
|
|
Good catch @thisisdano! Opened #6091 to follow-up on the touch target size of the unstyled button variant. |
Summary
Unstyled buttons no longer appear as full width at narrow viewport sizes. This brings the button into alignment with expectation of it being used in plain text contexts.
Breaking change
This may be considered a breaking change if someone had come to rely on the previous behavior. However, I'd argue that this behavior should have never been considered expected, and therefore fits the definition of a bug fix.
Related PR
Changelog PR
Preview link
Preview link: http://localhost:6006/?path=/story/components-button--unstyled
Problem statement
We often use unstyled buttons as visually equivalent to a link. Therefore, we've encountered issues where the unstyled button occupies full width at mobile viewport sizes, causing line breaks in content.
See screenshots at 18F/identity-idp#9632 for example effect.
Solution
The solution proposed here resets the
width: 100%applied to buttons by default at mobile viewport sizes, specifically for the unstyled button.