diff --git a/packages/components/src/components/button/_button.scss b/packages/components/src/components/button/_button.scss index b0d536004d80..185ca961a803 100644 --- a/packages/components/src/components/button/_button.scss +++ b/packages/components/src/components/button/_button.scss @@ -18,57 +18,6 @@ /// @access private /// @group button @mixin button { - // button set styles - .#{$prefix}--btn-set { - display: flex; - } - - .#{$prefix}--btn-set--stacked { - flex-direction: column; - } - - .#{$prefix}--btn-set .#{$prefix}--btn { - width: 100%; - // 196px from design kit - max-width: rem(196px); - - &:not(:focus) { - box-shadow: rem(-1px) 0 0 0 $button-separator; - } - - &:first-of-type:not(:focus) { - box-shadow: inherit; - } - } - - .#{$prefix}--btn-set .#{$prefix}--btn:focus + .#{$prefix}--btn { - box-shadow: inherit; - } - - .#{$prefix}--btn-set--stacked .#{$prefix}--btn:not(:focus) { - box-shadow: 0 rem(-1px) 0 0 $button-separator; - } - - .#{$prefix}--btn-set--stacked .#{$prefix}--btn:first-of-type:not(:focus) { - box-shadow: inherit; - } - - .#{$prefix}--btn-set .#{$prefix}--btn.#{$prefix}--btn--disabled { - box-shadow: rem(-1px) 0 0 0 $disabled-03; - - &:first-of-type { - box-shadow: none; - } - } - - .#{$prefix}--btn-set--stacked .#{$prefix}--btn.#{$prefix}--btn--disabled { - box-shadow: 0 rem(-1px) 0 0 $disabled-03; - - &:first-of-type { - box-shadow: none; - } - } - .#{$prefix}--btn { @include button-base; } @@ -130,6 +79,7 @@ } &:active { + background-color: $active-tertiary; border-color: transparent; } @@ -139,7 +89,7 @@ &.#{$prefix}--btn--disabled, &.#{$prefix}--btn--disabled:hover, &.#{$prefix}--btn--disabled:focus { - color: $disabled; + color: $disabled-03; background: transparent; outline: none; } @@ -177,7 +127,7 @@ &.#{$prefix}--btn--disabled, &.#{$prefix}--btn--disabled:hover, &.#{$prefix}--btn--disabled:focus { - color: $disabled; + color: $disabled-03; background: transparent; border-color: transparent; outline: none; @@ -221,11 +171,22 @@ } } + .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger:active:not([disabled]) { + border-color: transparent; + } + .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger:focus svg { outline-color: transparent; } + .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger[disabled]:hover, + .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger[disabled]:focus, + .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger[disabled]:active { + cursor: not-allowed; + fill: $disabled-03; + } + .#{$prefix}--btn--icon-only--top { @include tooltip--trigger('icon', 'top'); @include tooltip--placement('icon', 'top', 'center'); @@ -282,7 +243,7 @@ .#{$prefix}--btn__icon, .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--btn--ghost[disabled]:hover .#{$prefix}--btn__icon { - fill: $disabled-02; + fill: $disabled-03; // Windows, Firefox HCM Fix @media screen and (-ms-high-contrast: active), @@ -339,6 +300,57 @@ width: rem(150px); } + + // button set styles + .#{$prefix}--btn-set { + display: flex; + } + + .#{$prefix}--btn-set--stacked { + flex-direction: column; + } + + .#{$prefix}--btn-set .#{$prefix}--btn { + width: 100%; + // 196px from design kit + max-width: rem(196px); + + &:not(:focus) { + box-shadow: rem(-1px) 0 0 0 $button-separator; + } + + &:first-of-type:not(:focus) { + box-shadow: inherit; + } + } + + .#{$prefix}--btn-set .#{$prefix}--btn:focus + .#{$prefix}--btn { + box-shadow: inherit; + } + + .#{$prefix}--btn-set--stacked .#{$prefix}--btn:not(:focus) { + box-shadow: 0 rem(-1px) 0 0 $button-separator; + } + + .#{$prefix}--btn-set--stacked .#{$prefix}--btn:first-of-type:not(:focus) { + box-shadow: inherit; + } + + .#{$prefix}--btn-set .#{$prefix}--btn.#{$prefix}--btn--disabled { + box-shadow: rem(-1px) 0 0 0 $disabled-03; + + &:first-of-type { + box-shadow: none; + } + } + + .#{$prefix}--btn-set--stacked .#{$prefix}--btn.#{$prefix}--btn--disabled { + box-shadow: 0 rem(-1px) 0 0 $disabled-03; + + &:first-of-type { + box-shadow: none; + } + } } @include exports('button') { diff --git a/packages/components/src/components/button/_mixins.scss b/packages/components/src/components/button/_mixins.scss index 3af793ae7d6b..0066b2ac4c29 100644 --- a/packages/components/src/components/button/_mixins.scss +++ b/packages/components/src/components/button/_mixins.scss @@ -81,7 +81,7 @@ &:focus { border-color: $focus; box-shadow: inset 0 0 0 $button-outline-width $focus, - inset 0 0 0 $button-border-width $ui-02; + inset 0 0 0 $button-border-width $ui-background; // Windows, Firefox HCM Fix @media screen and (-ms-high-contrast: active), @@ -91,17 +91,6 @@ } } - &:disabled:hover, - &:disabled:focus, - &:hover.#{$prefix}--btn--disabled, - &:focus.#{$prefix}--btn--disabled { - color: $ui-04; - text-decoration: none; - background-color: $disabled-02; - border-color: $disabled-02; - box-shadow: none; - } - &:active { background-color: $active-color; } diff --git a/packages/components/src/globals/scss/_tooltip.scss b/packages/components/src/globals/scss/_tooltip.scss index 54babd620833..f7e9444016cf 100644 --- a/packages/components/src/globals/scss/_tooltip.scss +++ b/packages/components/src/globals/scss/_tooltip.scss @@ -202,6 +202,12 @@ opacity: 0; animation: none; } + + &.#{$prefix}--btn--disabled.#{$prefix}--tooltip--a11y::before, + &.#{$prefix}--btn--disabled.#{$prefix}--tooltip--a11y::after, + &.#{$prefix}--btn--disabled .#{$prefix}--assistive-text { + display: none; + } } // Tooltip diff --git a/packages/react/src/components/Button/Button-story.js b/packages/react/src/components/Button/Button-story.js index 372175d05d25..a90cee04867a 100644 --- a/packages/react/src/components/Button/Button-story.js +++ b/packages/react/src/components/Button/Button-story.js @@ -78,6 +78,7 @@ const props = { 'Secondary button (secondary)': 'secondary', 'Tertiary button (tertiary)': 'tertiary', 'Ghost button (ghost)': 'ghost', + 'Danger button (danger)': 'danger', }, 'primary' ),