Skip to content

Commit 3cbb8d8

Browse files
thisisdanothisisdano
authored
Merge pull request #5398 from uswds/jm-enhancement-button-icons
USWDS - Button: Add basic support for usa-icon in buttons
2 parents 090a9ee + b630276 commit 3cbb8d8

File tree

5 files changed

+76
-16
lines changed

5 files changed

+76
-16
lines changed

‎packages/usa-button/src/styles/_usa-button.scss

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,14 @@ $button-stroke: inset 0 0 0 units($theme-button-stroke-width);
1111
@include typeset($theme-button-font-family, null, 1);
1212
@include set-text-and-bg("primary", $context: $button-context);
1313
appearance: none;
14+
align-items: center;
1415
border: 0;
1516
border-radius: radius($theme-button-border-radius);
1617
cursor: pointer;
17-
display: inline-block;
18+
column-gap: units($theme-button-icon-gap);
19+
display: inline-flex;
1820
font-weight: font-weight("bold");
21+
justify-content: center;
1922
margin-right: units(1);
2023
padding: units(1.5) units(2.5);
2124
text-align: center;
@@ -52,6 +55,10 @@ $button-stroke: inset 0 0 0 units($theme-button-stroke-width);
5255
@include button-disabled;
5356
}
5457

58+
.usa-icon {
59+
flex-shrink: 0; // Avoid shrinking on small screens.
60+
}
61+
5562
@media (forced-colors: active) {
5663
&:not(.usa-button--unstyled) {
5764
border: $border-high-contrast;

‎packages/usa-button/src/usa-button.stories.js

Lines changed: 29 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,17 +12,22 @@ import {
1212
UnstyledContent,
1313
} from "./content";
1414

15+
import { icons } from "../../usa-icon/src/usa-icon.json";
16+
17+
const iconItems = icons.items;
18+
const iconNames = iconItems.map((item) => item.name);
19+
1520
export default {
1621
title: "Components/Button",
1722
argTypes: {
1823
modifier: {
1924
name: "Variant",
2025
},
2126
text: {
22-
name: "Text string",
27+
name: "Text",
2328
},
2429
is_demo: {
25-
name: "Show all button states",
30+
name: "View all states",
2631
defaultValue: true,
2732
type: "boolean",
2833
},
@@ -32,6 +37,20 @@ export default {
3237
options: ["button", "reset", "submit"],
3338
control: { type: "radio" },
3439
},
40+
add_icon: {
41+
name: "Add icon",
42+
defaultValue: false,
43+
type: "boolean",
44+
},
45+
icon_name: {
46+
name: "Icon name",
47+
control: {
48+
type: "select",
49+
options: iconNames,
50+
defaultValue: "add_circle_outline",
51+
},
52+
if: { arg: "add_icon" },
53+
},
3554
},
3655
};
3756

@@ -53,6 +72,14 @@ Base.args = BaseContent;
5372
export const Big = Template.bind({});
5473
Big.args = BigContent;
5574

75+
export const Icon = Template.bind({});
76+
Icon.args = {
77+
...DefaultContent,
78+
add_icon: true,
79+
// Specifying name to preselect value in StorybookJS control.
80+
icon_name: "add_circle_outline",
81+
};
82+
5683
export const Outline = Template.bind({});
5784
Outline.args = OutlineContent;
5885

‎packages/usa-button/src/usa-button.twig

Lines changed: 35 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,45 @@
1+
{% macro usaButton(label, modifier, type, additional_class, additional_attributes) %}
2+
<button
3+
class="usa-button {{ modifier }} {{ additional_class | default("") }}"
4+
type="{{ type ? type : "button" }}"
5+
{{ additional_attributes }}
6+
>
7+
{{- label -}}
8+
{% if add_icon %}{{- icon -}}{% endif %}
9+
</button>
10+
{% endmacro %}
11+
12+
{# Twig loader requirement for macro to work. #}
13+
{% import _self as button %}
14+
115
{% if 'usa-button--outline usa-button--inverse' in modifier %}
216
<div class="bg-base-darkest padding-1" style="max-width: fit-content">
317
{% endif %}
418

19+
{% set icon %}
20+
<!-- @TODO: Allow size to be passed as a argument. -->
21+
<!-- Example: usa-icon--size-{3-9} -->
22+
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
23+
<use xlink:href="./img/sprite.svg#{{ icon_name | default("add_circle_outline") }}"></use>
24+
</svg>
25+
{% endset %}
26+
527
{% if is_demo and 'usa-button--big' not in modifier %}
6-
<button type="{{ type }}" class="usa-button {{ modifier }}">Default</button>
7-
<button type="{{ type }}" class="usa-button {{ modifier }} usa-button--hover">Hover</button>
8-
<button type="{{ type }}" class="usa-button {{ modifier }} usa-button--active">Active</button>
9-
<button type="{{ type }}" class="usa-button {{ modifier }} usa-focus">Focus</button>
10-
<button type="{{ type }}" class="usa-button {{ modifier }}" disabled>Disabled</button>
11-
<button type="{{ type }}" class="usa-button {{ modifier }}" aria-disabled="true">aria-disabled</button>
12-
<button type="{{ type }}" class="usa-button {{ modifier }} usa-button--unstyled">Unstyled button</button>
28+
{{ button.usaButton('Default', modifier, type) }}
29+
{{ button.usaButton('Hover', modifier, type, "usa-button--hover") }}
30+
{{ button.usaButton('Active', modifier, type, "usa-button--active") }}
31+
{{ button.usaButton('Focus', modifier, type, "usa-focus") }}
32+
{{ button.usaButton('Disabled', modifier, type, null, 'disabled') }}
33+
{{ button.usaButton('aria-disabled', modifier, type, null, 'aria-disabled="true"') }}
34+
{{ button.usaButton('Unstyled button', modifier, type, 'usa-button--unstyled') }}
35+
1336
{% else %}
14-
<button type="{{ type }}" class="usa-button {{ modifier }}">{{ text }}</button>
37+
{{ button.usaButton('Default', modifier, type) }}
38+
1539
{% if is_demo and 'usa-button--big' in modifier %}
16-
<button type="{{ type }}" class="usa-button {{ modifier }}" disabled>Disabled</button>
17-
<button type="{{ type }}" class="usa-button {{ modifier }}" aria-disabled="true">aria-disabled</button>
18-
<button type="{{ type }}" class="usa-button {{ modifier }} usa-button--unstyled">Unstyled button</button>
40+
{{ button.usaButton('Disabled', modifier, type, null, 'disabled') }}
41+
{{ button.usaButton('aria-disabled', modifier, type, null, 'aria-disabled="true"') }}
42+
{{ button.usaButton('Unstyled button', modifier, type, 'usa-button--unstyled') }}
1943
{% endif %}
2044
{% endif %}
2145

‎packages/uswds-core/src/styles/mixins/general/button-unstyled.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,10 @@
1010
border-radius: 0;
1111
box-shadow: none;
1212
font-weight: font-weight("normal");
13+
justify-content: normal;
14+
text-align: left;
1315
margin: 0;
1416
padding: 0;
15-
text-align: left;
1617

1718
&:hover,
1819
&.usa-button--hover,

‎packages/uswds-core/src/styles/settings/_settings-components.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,8 +53,9 @@ $theme-breadcrumb-padding-x: 0 !default;
5353
$theme-breadcrumb-separator-color: "base" !default;
5454

5555
// Button
56-
$theme-button-font-family: "ui" !default;
5756
$theme-button-border-radius: "md" !default;
57+
$theme-button-font-family: "ui" !default;
58+
$theme-button-icon-gap: 1 !default;
5859
$theme-button-small-width: 6 !default;
5960
$theme-button-stroke-width: 2px !default;
6061

0 commit comments

Comments
 (0)