Improve styling for segmented "big" button group #359
Conversation
|
@aduth - I have an item to run by you In the screenshots below, the "button extra" button is misaligned with others because of the length of its button content, extending the vertical height. We could provide a caveat or text guidance to it, mitigating this kind of misalignment scenario. Or, If it is possible, for buttons to be vertically aligned, regardless of text length. Open to ideas.
|
|
@nickttng I forgot that I copied an example I put together which forced the line breaks. Long story short, this is an issue I'm already proposing an upstream fix for at uswds/uswds#5324, and which I've already incorporated into the changes at 18F/identity-idp#8542 . So it'll technically be an issue in the design system 'til uswds/uswds#5324 is resolved, but shouldn't practically impact anybody in the current IdP usage. |
) * LG-9973: Implement new default Sign In page from A/B test results changelog: User-Facing Improvements, Sign In, Update layout of Sign In page to reflect results of recent A/B test * Improve mobile appearance of tab navigation * Add upstream reference * Incorporate upstream button styling improvements See: 18F/identity-design-system#359
Why? LGDS styles default button stroke width as 1px, and has custom styles to override stroke width to 2px for big buttons. USWDS button group styles use the stroke width, but are not aware of our customizations to double the width for big buttons, so we need to manually override these styles.
aduth
force-pushed
the
aduth-button-groups-border
branch
from
fec43b9 to
008cc18
Compare
|
Build failure is from visual regression, partially expected from the addition of the new "Button Groups" documentation preview page. Looks like there's also some strange text encoding in one of the versions' content for accordions, hoping it's just a flakey issue.
|
Merges to (blocked by) #356Why? LGDS styles default button stroke width as 1px, and has custom styles to override stroke width to 2px for big buttons. USWDS button group styles use the stroke width, but are not aware of our customizations to double the width for big buttons, so we need to manually override these styles.
In practice, this makes a small difference on the appearance of a borders buttons.
Live preview URL: https://federalist-340d8801-aa16-4df5-ad22-b1e3e731098e.sites.pages.cloud.gov/preview/18f/identity-design-system/aduth-button-groups-border/components/button-groups/
Related IdP usage: 18F/identity-idp#8542
LGDS big button customizations:
identity-design-system/src/scss/packages/_usa-button.scss
Line 4 in 1a488ef
Relevant USWDS styles: https://github.com/uswds/uswds/blob/8736f9305ee7547b7828fc1d625d83f458c6b44c/packages/usa-button-group/src/styles/_usa-button-group.scss#L80-L99