From 0b4eecf981de5104bdc54051c117a044a7152493 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Thu, 25 Feb 2021 10:48:01 -0500 Subject: [PATCH 1/3] LG-4226: Improve support for unstyled button The unstyled button variant had previously existed in that it was inherited from USWDS, though it was not documented, and did not always display correctly, particularly in hover, active, and focus states. These changes improve this support, and adds documentation for the unstyled option. --- CHANGELOG.md | 1 + docs/_components/buttons.md | 14 +++++++ docs/_includes/helpers/unstyled-button.html | 16 ++++++++ src/scss/components/_buttons.scss | 44 +++++++++++++++++++++ 4 files changed, 75 insertions(+) create mode 100644 docs/_includes/helpers/unstyled-button.html diff --git a/CHANGELOG.md b/CHANGELOG.md index 2f3a2e0d..a1fd73aa 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,6 +13,7 @@ - Link hover and active colors are now distinct. - Before: Hover and active colors are both `primary-darker`. - After: Hover is `primary-dark`, and active is `primary-darker`. +- Improved support for "Unstyled" button variant ([see documentation](https://design.login.gov/components/buttons/)) ### Bug Fixes diff --git a/docs/_components/buttons.md b/docs/_components/buttons.md index f8882806..723a0bf2 100644 --- a/docs/_components/buttons.md +++ b/docs/_components/buttons.md @@ -48,3 +48,17 @@ Use the standard button styles to convey the most important action on you want t + +##### Unstyled + +```html + + + + + diff --git a/src/scss/components/_buttons.scss b/src/scss/components/_buttons.scss index 180efacf..9a90be41 100644 --- a/src/scss/components/_buttons.scss +++ b/src/scss/components/_buttons.scss @@ -27,6 +27,50 @@ } } +.usa-button--unstyled { + position: relative; + text-underline-offset: 3px; + + // In USWDS, unstyled button styles are applied last to take precedence over base button styles. + // Since we override base button styles, we must re-apply the unstyled button styles. + &.usa-button { + @include button-unstyled; + } + + // Hover colors are already applied by USWDS via `typeset-link`, but this does not include the + // button modifier classes. + &:hover, + &.usa-button--hover { + color: color($theme-link-hover-color); + } + + &:active, + &.usa-button--active { + color: color($theme-link-active-color); + } + + &:disabled { + color: color('disabled'); + } + + &.usa-button:not([disabled]):focus, + &.usa-button:not([disabled]).usa-focus { + box-shadow: none; + + &::before { + border-radius: .125rem; + bottom: -5px; + box-shadow: 0 0 0 $theme-focus-width color($theme-focus-color); + content: ''; + left: -5px; + pointer-events: none; + position: absolute; + right: -5px; + top: -5px; + } + } +} + .usa-button:not([disabled]):focus, .usa-button:not([disabled]).usa-focus { @include disable-default-focus-styles; From 7b9a0748d755dca682fb43a1f90e397f7bb719a5 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Thu, 25 Feb 2021 13:54:50 -0500 Subject: [PATCH 2/3] Fix button heading hierarchy Don't skip heading levels https://dequeuniversity.com/rules/axe/3.5/heading-order --- docs/_components/buttons.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/_components/buttons.md b/docs/_components/buttons.md index 723a0bf2..61803c9e 100644 --- a/docs/_components/buttons.md +++ b/docs/_components/buttons.md @@ -13,7 +13,7 @@ subnav: Use the standard button styles to convey the most important action on you want the users to take. See the [USWDS Button Usage](https://v2.designsystem.digital.gov/components/button/) for more on how to use buttons. -##### Primary +### Primary ```html -##### Secondary +### Secondary ```html -##### Danger +### Danger ```html -##### Unstyled +### Unstyled ```html - +
- +