Skip to content

USWDS - Button: Add basic support for usa-icon in buttons #5398

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.

Sign up for GitHub

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

Merged
merged 17 commits into from
Feb 26, 2024
Merged

USWDS - Button: Add basic support for usa-icon in buttons #5398

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
7fa6bda
Add basic support for usa-icon in buttons
Jul 20, 2023
110559a
Improve label for icon name control
Jul 21, 2023
c32391d
Merge branch 'develop' of github.com:uswds/uswds into jm-enhancement-…
Sep 7, 2023
eb23a05
Update button story labels
Sep 8, 2023
87fc766
Create a macro to fix display inconsistencies
Sep 8, 2023
aacb83b
Update packages/usa-button/src/usa-button.stories.js
Sep 8, 2023
3c3684e
Add note about duplicate icon name in icon control
Sep 8, 2023
03082ea
Use flexbox for button alignment
Sep 11, 2023
558ba4f
Merge branch 'develop' of github.com:uswds/uswds into jm-enhancement-…
Sep 11, 2023
e943206
Use justify-content in favor of text align
Sep 11, 2023
77d9316
Reset unstyled button content
Sep 11, 2023
b71814e
Fix button attributes
Sep 11, 2023
e157121
Fix regression in header's nav link buttons
Sep 11, 2023
a5854af
Rename button gap setting
Sep 25, 2023
fe2eaea
Add centered text back into buttons
Sep 25, 2023
94cd0f4
Update name of icon setting in storybookJS
Sep 25, 2023
b630276
Merge branch 'develop' into jm-enhancement-button-icons
thisisdano Dec 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Use flexbox for button alignment 
Includes new setting $theme-button-column-gap, which takes units for the inner spacing.
  • Loading branch information
James Mejia committed Sep 11, 2023
commit 03082ea8986444314b787dee2883614820e9754f
9 changes: 4 additions & 5 deletions packages/usa-button/src/styles/_usa-button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,12 @@ $button-stroke: inset 0 0 0 units($theme-button-stroke-width);
@include typeset($theme-button-font-family, null, 1);
@include set-text-and-bg("primary", $context: $button-context);
appearance: none;
align-items: center;
border: 0;
border-radius: radius($theme-button-border-radius);
cursor: pointer;
display: inline-block;
column-gap: units($theme-button-column-gap);
display: inline-flex;
font-weight: font-weight("bold");
margin-right: units(1);
padding: units(1.5) units(2.5);
Expand Down Expand Up @@ -52,11 +54,8 @@ $button-stroke: inset 0 0 0 units($theme-button-stroke-width);
@include button-disabled;
}

// @TODO: Use `:has()` selector once browser support improves.
// https://developer.mozilla.org/en-US/docs/Web/CSS/:has#browser_compatibility
.usa-icon {
margin-top: -0.1em; // Similar pattern to _usa-breadcrumb.scss:14.
vertical-align: middle;
flex-shrink: 0; // Avoid shrinking on small screens.
}

@media (forced-colors: active) {
Expand Down
1 change: 1 addition & 0 deletions packages/uswds-core/src/styles/settings/_settings-components.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ $theme-breadcrumb-separator-color: "base" !default;
// Button
$theme-button-font-family: "ui" !default;
$theme-button-border-radius: "md" !default;
$theme-button-column-gap: 1 !default;
$theme-button-small-width: 6 !default;
$theme-button-stroke-width: 2px !default;

Expand Down