From 1693da076152d53f35a4fff9ad1bed84177429c7 Mon Sep 17 00:00:00 2001 From: Kim Johannesen Date: Fri, 29 Mar 2019 13:33:00 +0100 Subject: [PATCH] Corrects class name used for disabled buttons --- src/assets/scss/elements/ys-button.scss | 14 ++-- src/elements/02-elements/button/README.md | 82 +++++++++++------------ 2 files changed, 48 insertions(+), 48 deletions(-) diff --git a/src/assets/scss/elements/ys-button.scss b/src/assets/scss/elements/ys-button.scss index 5b0851791..c5f974803 100644 --- a/src/assets/scss/elements/ys-button.scss +++ b/src/assets/scss/elements/ys-button.scss @@ -33,7 +33,7 @@ // Disabled button — use with caution &:disabled, - &.ys-disabled { + &.ys-button--disabled { background-color: $ys-color-grey-94; color: $ys-color-grey-64; box-shadow: none; @@ -44,7 +44,7 @@ outline: 0; // disable the focus ring when the button is clicked with a mouse } - &:not(:disabled):not(.ys-disabled):hover { + &:not(:disabled):not(.ys-button--disabled):hover { box-shadow: inset 0 0 0 0 $ys-color-grey-28, 0 0 0 2px $ys-color-digital-grass; color: $ys-color-grey-28; } @@ -65,7 +65,7 @@ &--light { color: $ys-color-white; - &:not(:disabled):not(.ys-disabled):hover { + &:not(:disabled):not(.ys-button--disabled):hover { color: $ys-color-white; } } @@ -76,7 +76,7 @@ color: $ys-color-white; box-shadow: inset 0 0 0 0 transparent, 0 0 0 0 transparent; - &:not(:disabled):not(.ys-disabled):hover { + &:not(:disabled):not(.ys-button--disabled):hover { color: $ys-color-white; } } @@ -87,7 +87,7 @@ color: $ys-color-white; box-shadow: inset 0 0 0 transparent; - &:not(:disabled):not(.ys-disabled):hover { + &:not(:disabled):not(.ys-button--disabled):hover { box-shadow: inset 0 0 0 0 transparent, 0 0 0 2px $ys-color-grey-28; color: $ys-color-white; } @@ -99,7 +99,7 @@ color: $ys-color-grey-28; box-shadow: inset 0 0 0 0 transparent; - &:not(:disabled):not(.ys-disabled):hover { + &:not(:disabled):not(.ys-button--disabled):hover { box-shadow: inset 0 0 0 0 transparent, 0 0 0 2px $ys-color-white; color: $ys-color-grey-28; } @@ -120,7 +120,7 @@ background-color: transparent; box-shadow: 0 0 0 0 transparent; - &:not(:disabled):not(.ys-disabled):hover { + &:not(:disabled):not(.ys-button--disabled):hover { color: $ys-color-digital-grass; box-shadow: none; } diff --git a/src/elements/02-elements/button/README.md b/src/elements/02-elements/button/README.md index 085860746..9ee7798e9 100644 --- a/src/elements/02-elements/button/README.md +++ b/src/elements/02-elements/button/README.md @@ -1,41 +1,41 @@ -# Button -## Variants -Buttons come in seven different colorways: -- **Default** (transparent with dark border and text) -- **Light** (transparent with light border and text) -- **CTA** (green) -- **Solid Dark** (solid with dark background and light text) -- **Solid Light** (solid with light background and dark text) -- **Stripped Dark** (transparent with dark text) -- **Stripped Light** (transparent with light text) - -Which can be combined with three different shapes - - **pill shaped** (default shape) - - **pill shaped with icon** - - **circle with icon only** - -Furthermore there is also the option of making the button 100% wide relative to it's container element: - - **block** - - The colorsways can be combined with the shapes in all thinkable ways, so a button can be both **Solid Dark** _AND_ **circle with icon only**. - - Lastly there is the **Neutral Button**, which has no visual appearance at all — this is meant for those cases where you want to display a clickable icon without any other design. Please be careful when using this, as it should be obvious for any user what's clickable. This button has no size by nature but will size itself according to the content. - -### Disabled buttons -The button will change it's visual appearance if you add the `ys-disabled` class or if you use the HTML attribute `disabled`. - -## UX and Design Guidelines -### CTA Usage -The **CTA** button should only be used for the MAIN or IMPORTANT calls to action on a page. - -### Disabled buttons -Please be careful when using disabled buttons. Usability research shows that disabled buttons can confuse users: [Disabled Buttons suck](https://axesslab.com/disabled-buttons-suck/) - -### How to combine buttons -- Buttons should be side-by-side and have a horizontal margin between them of at least 16px -- Never use more than one **CTA** button in a group -- When two buttons are side by side and perform opposing actions, ie. "Cancel" and "OK", the affirmative/positive action should always be displayed on the right - - ## HTML Guidelines - - Only `` and `