From 0ea61b984f4e276b383b7c8092fca2d85949734d Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Thu, 30 Nov 2023 16:30:38 -0500 Subject: [PATCH 1/4] Add variant support for danger outline buttons --- CHANGELOG.md | 4 +++ docs/_components/buttons.md | 28 +++++++++++++++++++ .../packages/usa-button/src/_overrides.scss | 21 ++++++++++++++ 3 files changed, 53 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 714e36e2..d293006c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,9 @@ ## Unreleased +### New Features + +- Add variant support for danger outline buttons. + ### Dependencies - Update USWDS from v3.6.1 to v3.7.0. ([#381](https://github.com/18F/identity-style-guide/pull/381)) diff --git a/docs/_components/buttons.md b/docs/_components/buttons.md index a637a681..7c14f2c8 100644 --- a/docs/_components/buttons.md +++ b/docs/_components/buttons.md @@ -57,6 +57,20 @@ subnav: +### Danger Outline + +```html + + + + + + + ### Unstyled ```html @@ -115,6 +129,20 @@ subnav: +### Danger Outline + +```html + + + + + + + ### Unstyled ```html diff --git a/src/scss/packages/usa-button/src/_overrides.scss b/src/scss/packages/usa-button/src/_overrides.scss index 265b18e4..493dcebd 100644 --- a/src/scss/packages/usa-button/src/_overrides.scss +++ b/src/scss/packages/usa-button/src/_overrides.scss @@ -94,6 +94,27 @@ $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, .usa-button--disabled) { + 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'); + } + + &:active, + &.usa-button--active { + background-color: color('secondary-lighter'); + color: color('secondary-dark'); + } + } } .usa-button--inverse { From 3bf4c7402ccbd470aee80d30fd6bd719eec47c6d Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Thu, 30 Nov 2023 16:48:03 -0500 Subject: [PATCH 2/4] Sync active border color --- src/scss/packages/usa-button/src/_overrides.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/scss/packages/usa-button/src/_overrides.scss b/src/scss/packages/usa-button/src/_overrides.scss index 493dcebd..a333d840 100644 --- a/src/scss/packages/usa-button/src/_overrides.scss +++ b/src/scss/packages/usa-button/src/_overrides.scss @@ -112,6 +112,7 @@ $button-stroke-big: inset 0 0 0 units($theme-button-stroke-width * 2); &:active, &.usa-button--active { background-color: color('secondary-lighter'); + box-shadow: inset 0 0 0 $theme-button-stroke-width color('secondary-dark'); color: color('secondary-dark'); } } From e2ba4b96af534a606168edff072fa54985ac6069 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Fri, 1 Dec 2023 08:54:31 -0500 Subject: [PATCH 3/4] Improve consistency for disabled buttons --- CHANGELOG.md | 7 ++- .../packages/usa-button/src/_overrides.scss | 44 ++++++++++++------- 2 files changed, 34 insertions(+), 17 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d293006c..09e0dca5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,7 +2,12 @@ ### New Features -- Add variant support for danger outline buttons. +- 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 diff --git a/src/scss/packages/usa-button/src/_overrides.scss b/src/scss/packages/usa-button/src/_overrides.scss index a333d840..029e54f5 100644 --- a/src/scss/packages/usa-button/src/_overrides.scss +++ b/src/scss/packages/usa-button/src/_overrides.scss @@ -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'); } @@ -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'); } @@ -95,25 +95,37 @@ $button-stroke-big: inset 0 0 0 units($theme-button-stroke-width * 2); background-color: color('secondary-darkest'); } - &.usa-button--outline:not(:disabled, .usa-button--disabled) { - background-color: color('white'); - box-shadow: inset 0 0 0 $theme-button-stroke-width color('secondary'); - color: color('secondary'); + &.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'); - } + &.usa-button--big { + box-shadow: $button-stroke-big color('secondary'); + } - &:hover, - &.usa-button--hover { - background-color: color('secondary-lightest'); + &:hover, + &.usa-button--hover { + background-color: color('secondary-lightest'); + } } &:active, &.usa-button--active { - background-color: color('secondary-lighter'); - box-shadow: inset 0 0 0 $theme-button-stroke-width color('secondary-dark'); - color: color('secondary-dark'); + &, + &: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-dark'); + color: color('secondary-dark'); + + &.usa-button--big { + box-shadow: $button-stroke-big color('secondary'); + } + } } } } @@ -139,7 +151,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'); } From 261c83e3643a41239165ab0960437017dbe9d09f Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Fri, 1 Dec 2023 09:33:39 -0500 Subject: [PATCH 4/4] Use secondary-dark for hover, secondary-darker for active See: https://gsa-tts.slack.com/archives/C01JVKYE4KD/p1701440996466949?thread_ts=1701377756.302139&cid=C01JVKYE4KD Co-Authored-By: Annie Hirshman (she/her) <66273797+anniehirshman-gsa@users.noreply.github.com> --- src/scss/packages/usa-button/src/_overrides.scss | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/src/scss/packages/usa-button/src/_overrides.scss b/src/scss/packages/usa-button/src/_overrides.scss index 029e54f5..cc6d0c2e 100644 --- a/src/scss/packages/usa-button/src/_overrides.scss +++ b/src/scss/packages/usa-button/src/_overrides.scss @@ -108,6 +108,12 @@ $button-stroke-big: inset 0 0 0 units($theme-button-stroke-width * 2); &: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'); + } } } @@ -119,11 +125,11 @@ $button-stroke-big: inset 0 0 0 units($theme-button-stroke-width * 2); &:hover, &.usa-button--hover { background-color: color('secondary-lighter'); - box-shadow: inset 0 0 0 $theme-button-stroke-width color('secondary-dark'); - color: color('secondary-dark'); + 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'); + box-shadow: $button-stroke-big color('secondary-darker'); } } }