Skip to content

Commit

Permalink
Button: Update disabled state to be without background. (#50496)
Browse files Browse the repository at this point in the history
* Button: Update disabled state to be without background.

* Update changelog.

* Merge changelog section

* Remove outdated TODO comment

---------

Co-authored-by: Lena Morita <[email protected]>
  • Loading branch information
jasmussen and mirka authored May 15, 2023
1 parent d66e670 commit 6c83e67
Show file tree
Hide file tree
Showing 2 changed files with 6 additions and 12 deletions.
1 change: 1 addition & 0 deletions packages/components/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
### Bug Fix

- `NavigableContainer`: do not trap focus in `TabbableContainer` ([#49846](https://github.com/WordPress/gutenberg/pull/49846)).
- Update `<Button>` component to have a transparent background for its tertiary disabled state, to match its enabled state. ([#50496](https://github.com/WordPress/gutenberg/pull/50496)).

### Internal

Expand Down
17 changes: 5 additions & 12 deletions packages/components/src/button/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -118,21 +118,14 @@
outline: 1px solid transparent;

&:active:not(:disabled) {
background: $components-color-gray-300;
color: $components-color-accent-darker-10;
box-shadow: none;
}

&:hover:not(:disabled) {
color: $components-color-accent-darker-10;
}

&:disabled,
&[aria-disabled="true"],
&[aria-disabled="true"]:hover {
// TODO: Prepare for theming (https://github.com/WordPress/gutenberg/pull/45466/files#r1030872724)
color: lighten($gray-700, 5%);
background: lighten($gray-300, 5%);
color: $gray-600;
background: transparent;
transform: none;
opacity: 1;
box-shadow: none;
Expand Down Expand Up @@ -165,12 +158,12 @@
color: $components-color-accent;
background: transparent;

&:hover:not(:disabled) {
&:hover:not(:disabled, [aria-disabled="true"]) {
// TODO: Prepare for theming (https://github.com/WordPress/gutenberg/pull/45466/files#r1030872724)
background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
}

&:active:not(:disabled) {
&:active:not(:disabled, [aria-disabled="true"]) {
// TODO: Prepare for theming (https://github.com/WordPress/gutenberg/pull/45466/files#r1030872724)
background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
}
Expand Down Expand Up @@ -239,7 +232,7 @@
}
}

&:not([aria-disabled="true"]):active {
&:not(:disabled, [aria-disabled="true"]):active {
color: $components-color-foreground;
}

Expand Down

0 comments on commit 6c83e67

Please sign in to comment.