Skip to content
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

Jump to bottom

Add variant support for danger outline buttons #383

Merged
merged 4 commits into from
Dec 4, 2023
Merged

Add variant support for danger outline buttons #383

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0ea61b9
Add variant support for danger outline buttons
aduth Nov 30, 2023
3bf4c74
Sync active border color
aduth Nov 30, 2023
e2ba4b9
Improve consistency for disabled buttons
aduth Dec 1, 2023
261c83e
Use secondary-dark for hover, secondary-darker for active
aduth Dec 1, 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
9 changes: 9 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,14 @@
## Unreleased

### New Features

- Add variant support for danger outline buttons. ([#383](https://github.com/18F/identity-style-guide/pull/383))

### Bug Fixes

- Improve consistency with USWDS disabled buttons styles. ([#383](https://github.com/18F/identity-style-guide/pull/383))
- [USWDS v3.5.0](https://github.com/uswds/uswds/releases/tag/v3.5.0) removed `.usa-button--disabled` styling in favor of `[aria-disabled="true"]`. This wasn't documented as a breaking change, and it's expected the any `.usa-button--disabled` usage would not be stylized correctly since those changes. You should replace any usage of `usa-button--disabled` with either the `[disabled]` or `[aria-disabled="true"]` attributes.

### Dependencies

- Update USWDS from v3.6.1 to v3.7.0. ([#381](https://github.com/18F/identity-style-guide/pull/381))
Expand Down
28 changes: 28 additions & 0 deletions docs/_components/buttons.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,20 @@ subnav:
<button class="usa-button usa-button--danger" disabled>Disabled</button>
</div>

### Danger Outline

```html
<button class="usa-button usa-button--danger usa-button--outline">
```

<div>
<button class="usa-button usa-button--danger usa-button--outline">Default</button>
<button class="usa-button usa-button--danger usa-button--outline usa-button--hover">Hover</button>
<button class="usa-button usa-button--danger usa-button--outline usa-button--active">Active</button>
<button class="usa-button usa-button--danger usa-button--outline usa-focus">Focus</button>
<button class="usa-button usa-button--danger usa-button--outline" disabled>Disabled</button>
</div>

### Unstyled

```html
Expand Down Expand Up @@ -115,6 +129,20 @@ subnav:
<button class="usa-button usa-button--big usa-button--danger" disabled>Disabled</button>
</div>

### Danger Outline

```html
<button class="usa-button usa-button--big usa-button--danger usa-button--outline">
```

<div>
<button class="usa-button usa-button--big usa-button--danger usa-button--outline">Default</button>
<button class="usa-button usa-button--big usa-button--danger usa-button--outline usa-button--hover">Hover</button>
<button class="usa-button usa-button--big usa-button--danger usa-button--outline usa-button--active">Active</button>
<button class="usa-button usa-button--big usa-button--danger usa-button--outline usa-focus">Focus</button>
<button class="usa-button usa-button--big usa-button--danger usa-button--outline" disabled>Disabled</button>
</div>

### Unstyled

```html
Expand Down
46 changes: 43 additions & 3 deletions src/scss/packages/usa-button/src/_overrides.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ $button-stroke-big: inset 0 0 0 units($theme-button-stroke-width * 2);
}

&:disabled,
&.usa-button--disabled {
&[aria-disabled='true'] {
background-color: color('white');
color: color('disabled');
}
Expand All @@ -62,7 +62,7 @@ $button-stroke-big: inset 0 0 0 units($theme-button-stroke-width * 2);
}

&:disabled,
&.usa-button--disabled {
&[aria-disabled='true'] {
box-shadow: $button-stroke-big color('disabled');
}

Expand Down Expand Up @@ -94,6 +94,46 @@ $button-stroke-big: inset 0 0 0 units($theme-button-stroke-width * 2);
&.usa-button--active {
background-color: color('secondary-darkest');
}

&.usa-button--outline {
&:not(:disabled, [aria-disabled='true']) {
background-color: color('white');
box-shadow: inset 0 0 0 $theme-button-stroke-width color('secondary');
color: color('secondary');

&.usa-button--big {
box-shadow: $button-stroke-big color('secondary');
}

&:hover,
&.usa-button--hover {
background-color: color('secondary-lightest');
box-shadow: inset 0 0 0 $theme-button-stroke-width color('secondary-dark');
color: color('secondary-dark');

&.usa-button--big {
box-shadow: $button-stroke-big color('secondary-dark');
}
}
}

&:active,
&.usa-button--active {
&,
&:focus,
&.usa-button--focus,
&:hover,
&.usa-button--hover {
background-color: color('secondary-lighter');
box-shadow: inset 0 0 0 $theme-button-stroke-width color('secondary-darker');
color: color('secondary-darker');

&.usa-button--big {
box-shadow: $button-stroke-big color('secondary-darker');
}
}
}
}
}

.usa-button--inverse {
Expand All @@ -117,7 +157,7 @@ $button-stroke-big: inset 0 0 0 units($theme-button-stroke-width * 2);
}

&:disabled,
&.usa-button--disabled {
&[aria-disabled='true'] {
background-color: color('disabled');
color: color('white');
}
Expand Down