fix(button): prevent hover on disabled buttons in g90/g100 theme
MODIFY
packages/components/docs/sass.md
packages/components/docs/sass.md
@@ -6279,7 +6279,6 @@ $ui-04: if(
- **Type**: `{undefined}`
- **Used by**:
- [carbon--theme [mixin]](#carbon--theme-mixin)
- - [button-theme [mixin]](#button-theme-mixin)
- [date-picker [mixin]](#date-picker-mixin)
- [dropdown [mixin]](#dropdown-mixin)
- [file-uploader [mixin]](#file-uploader-mixin)
@@ -7669,7 +7668,6 @@ $disabled-02: if(
- [carbon--theme [mixin]](#carbon--theme-mixin)
- [button [mixin]](#button-mixin)
- [button-base [mixin]](#button-base-mixin)
- - [button-theme [mixin]](#button-theme-mixin)
- [checkbox [mixin]](#checkbox-mixin)
- [combo-box [mixin]](#combo-box-mixin)
- [content-switcher [mixin]](#content-switcher-mixin)
@@ -13211,11 +13209,16 @@ Button base styles
margin: 0;
&:disabled,
- &.#{$prefix}--btn--disabled {
+ &:hover:disabled,
+ &:focus:disabled,
+ &.#{$prefix}--btn--disabled,
+ &.#{$prefix}--btn--disabled:hover,
+ &.#{$prefix}--btn--disabled:focus {
cursor: not-allowed;
color: $disabled-03;
background: $disabled-02;
border-color: $disabled-02;
+ box-shadow: none;
}
.#{$prefix}--btn__icon {
@@ -13263,17 +13266,6 @@ Button variant styles
($button-border-width + $button-outline-width) $ui-02;
}
- &:disabled:hover,
- &:disabled:focus,
- &:hover.#{$prefix}--btn--disabled,
- &:focus.#{$prefix}--btn--disabled {
- color: $ui-04;
- background-color: $disabled-02;
- border-color: $disabled-02;
- text-decoration: none;
- box-shadow: none;
- }
-
&:active {
background-color: $active-color;
}
@@ -13292,8 +13284,6 @@ Button variant styles
- [focus [variable]](#focus-variable)
- [ui-02 [variable]](#ui-02-variable)
- [prefix [variable]](#prefix-variable)
- - [ui-04 [variable]](#ui-04-variable)
- - [disabled-02 [variable]](#disabled-02-variable)
- **Used by**:
- [button [mixin]](#button-mixin)

MODIFY
packages/components/src/components/button/_mixins.scss
packages/components/src/components/button/_mixins.scss
margin: 0;
&:disabled,
- &.#{$prefix}--btn--disabled {
+ &:hover:disabled,
+ &:focus:disabled,
+ &.#{$prefix}--btn--disabled,
+ &.#{$prefix}--btn--disabled:hover,
+ &.#{$prefix}--btn--disabled:focus {
cursor: not-allowed;
color: $disabled-03;
background: $disabled-02;
border-color: $disabled-02;
+ box-shadow: none;
}
.#{$prefix}--btn__icon {
inset 0 0 0 ($button-border-width + $button-outline-width) $ui-02;
}
- &:disabled:hover,
- &:disabled:focus,
- &:hover.#{$prefix}--btn--disabled,
- &:focus.#{$prefix}--btn--disabled {
- color: $ui-04;
- background-color: $disabled-02;
- border-color: $disabled-02;
- text-decoration: none;
- box-shadow: none;
- }
-
&:active {
background-color: $active-color;
}

fix(button): prevent hover on disabled buttons in g90/g100 theme (#5678)

Co-authored-by: TJ Egan <tw15egan@gmail.com>