From 240ca9608d3709dd873dd65526cef2293d938402 Mon Sep 17 00:00:00 2001 From: Kevin Batdorf Date: Fri, 23 Sep 2022 14:56:01 -0400 Subject: [PATCH 1/7] Change color on destructive button focus state --- packages/components/src/button/style.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss index bb0bed82239d54..c9a6881a1fd931 100644 --- a/packages/components/src/button/style.scss +++ b/packages/components/src/button/style.scss @@ -182,7 +182,7 @@ } &:focus:not(:disabled) { - color: var(--wp-admin-theme-color); + color: darken($alert-red, 20%); } &:active:not(:disabled) { @@ -200,6 +200,10 @@ background: darken($alert-red, 20%); box-shadow: inset 0 0 0 $border-width darken($alert-red, 20%); } + + &:focus:not(:disabled) { + color: #fff; + } } &.is-destructive.is-tertiary { From b92f90f1e8e83939cf267b1e93124feaf85cecc4 Mon Sep 17 00:00:00 2001 From: Kevin Batdorf Date: Fri, 21 Oct 2022 18:18:11 -0400 Subject: [PATCH 2/7] Update changelog --- packages/components/CHANGELOG.md | 1 + packages/components/src/button/style.scss | 37 ++++++++++------------- 2 files changed, 17 insertions(+), 21 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 8b72c8f62fa7b6..f765a8ca278cef 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -8,6 +8,7 @@ ### Bug Fix +- `Button`: Normalize button primary, link, and default variants in relation to the destructive state ([#44427](https://github.com/WordPress/gutenberg/pull/44427)). - `Button`: Fix RTL alignment for buttons containing an icon and text ([#44787](https://github.com/WordPress/gutenberg/pull/44787)). - `FontSizePicker`: Fallback to font size `slug` if `name` is undefined ([#45041](https://github.com/WordPress/gutenberg/pull/45041)). diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss index bc4a3d9d417609..305f427f10b7e8 100644 --- a/packages/components/src/button/style.scss +++ b/packages/components/src/button/style.scss @@ -52,15 +52,14 @@ // Show the boundary of the button, in High Contrast Mode. outline: 1px solid transparent; - &:hover:not(:disabled) { + &:hover:not(:disabled), + &:focus:not(:disabled) { background: $components-color-accent-darker-20; color: $white; } - &:focus:not(:disabled), &:active:not(:disabled) { - background: $components-color-accent-darker-20; - border-color: $components-color-accent-darker-20; + background: $components-color-accent; color: $white; } @@ -176,14 +175,14 @@ color: $alert-red; box-shadow: inset 0 0 0 $border-width $alert-red; - &:hover:not(:disabled) { + &:hover:not(:disabled), + &:focus:not(:disabled) { color: darken($alert-red, 20%); box-shadow: inset 0 0 0 $border-width darken($alert-red, 20%); } - &:focus:not(:disabled), &:active:not(:disabled) { - color: alert-red; + color: $alert-red; } } @@ -192,19 +191,15 @@ background: $alert-red; box-shadow: inset 0 0 0 $border-width $alert-red; - &:hover:not(:disabled) { + &:hover:not(:disabled), + &:focus:not(:disabled) { color: #fff; background: darken($alert-red, 20%); box-shadow: inset 0 0 0 $border-width darken($alert-red, 20%); } - &:focus:not(:disabled) { - background: $alert-red; - color: #fff; - } - &:active:not(:disabled) { - background: darken($alert-red, 20%); + background: $alert-red; color: #fff; } } @@ -244,11 +239,12 @@ @include reduce-motion("transition"); height: auto; - &:hover:not(:disabled) { + &:hover:not(:disabled), + &:focus:not(:disabled) { color: $components-color-accent-darker-20; } - &:active:not(:disabled), - &:focus:not(:disabled) { + + &:active:not(:disabled) { color: $components-color-accent; } @@ -260,13 +256,12 @@ &.is-destructive { color: $alert-red; - &:hover:not(:disabled) { + &:hover:not(:disabled), + &:focus:not(:disabled) { color: darken($alert-red, 20%); - background: transparent; } - &:active:not(:disabled), - &:focus:not(:disabled) { + &:active:not(:disabled) { color: $alert-red; } } From ff3a71dca76b6e59b9d9b2451de32894656bacff Mon Sep 17 00:00:00 2001 From: Kevin Batdorf Date: Fri, 21 Oct 2022 18:24:48 -0400 Subject: [PATCH 3/7] revert arbitrary formatting change --- packages/components/src/button/style.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss index 305f427f10b7e8..72191227fbf1ee 100644 --- a/packages/components/src/button/style.scss +++ b/packages/components/src/button/style.scss @@ -79,7 +79,9 @@ outline: none; &:focus:enabled { - box-shadow: 0 0 0 $border-width $white, 0 0 0 3px $components-color-accent; + box-shadow: + 0 0 0 $border-width $white, + 0 0 0 3px $components-color-accent; } } From 68566ff9ea194211479f186ec258369bf62c8818 Mon Sep 17 00:00:00 2001 From: Kevin Batdorf Date: Mon, 24 Oct 2022 13:31:45 -0400 Subject: [PATCH 4/7] Update focus styling --- packages/components/src/button/style.scss | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss index 72191227fbf1ee..50f1ab9fbf0aa1 100644 --- a/packages/components/src/button/style.scss +++ b/packages/components/src/button/style.scss @@ -180,7 +180,9 @@ &:hover:not(:disabled), &:focus:not(:disabled) { color: darken($alert-red, 20%); - box-shadow: inset 0 0 0 $border-width darken($alert-red, 20%); + } + &:focus:not(:disabled) { + box-shadow: 0 0 0 var(--wp-admin-border-width-focus) darken($alert-red, 20%); } &:active:not(:disabled) { @@ -197,7 +199,9 @@ &:focus:not(:disabled) { color: #fff; background: darken($alert-red, 20%); - box-shadow: inset 0 0 0 $border-width darken($alert-red, 20%); + } + &:focus:not(:disabled) { + box-shadow: inset 0 0 0 1px $white, 0 0 0 var(--wp-admin-border-width-focus) darken($alert-red, 20%); } &:active:not(:disabled) { From da32853afa8b4df81e21192381cf3dd16fbdbe21 Mon Sep 17 00:00:00 2001 From: Kevin Batdorf Date: Tue, 25 Oct 2022 15:01:13 -0400 Subject: [PATCH 5/7] Revert non destructive styling --- packages/components/CHANGELOG.md | 2 +- packages/components/src/button/style.scss | 23 +++++++---------------- 2 files changed, 8 insertions(+), 17 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index f8ce9b68f38b8b..b4841ef2c9b6ad 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -12,7 +12,7 @@ ### Bug Fix -- `Button`: Normalize button primary, link, and default variants in relation to the destructive state ([#44427](https://github.com/WordPress/gutenberg/pull/44427)). +- `Button`: Tweak the destructive button primary, link, and default variants ([#44427](https://github.com/WordPress/gutenberg/pull/44427)). - `UnitControl`: Fix `disabled` style is overridden by core `form.css` style ([#45250](https://github.com/WordPress/gutenberg/pull/45250)). - `Button`: Fix RTL alignment for buttons containing an icon and text ([#44787](https://github.com/WordPress/gutenberg/pull/44787)). - `TabPanel`: Call `onSelect()` on every tab selection, regardless of whether it was triggered by user interaction ([#44028](https://github.com/WordPress/gutenberg/pull/44028)). diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss index 50f1ab9fbf0aa1..97b794c7441590 100644 --- a/packages/components/src/button/style.scss +++ b/packages/components/src/button/style.scss @@ -52,14 +52,14 @@ // Show the boundary of the button, in High Contrast Mode. outline: 1px solid transparent; - &:hover:not(:disabled), - &:focus:not(:disabled) { - background: $components-color-accent-darker-20; + &:hover:not(:disabled) { + background: $components-color-accent-darker-10; color: $white; } &:active:not(:disabled) { - background: $components-color-accent; + background: $components-color-accent-darker-20; + border-color: $components-color-accent-darker-20; color: $white; } @@ -115,13 +115,13 @@ &:active:not(:disabled) { background: $gray-300; - color: $components-color-accent-darker-20; + color: $components-color-accent-darker-10; box-shadow: none; } &:hover:not(:disabled) { - color: $components-color-accent-darker-20; - box-shadow: inset 0 0 0 $border-width $components-color-accent-darker-20; + color: $components-color-accent-darker-10; + box-shadow: inset 0 0 0 $border-width $components-color-accent-darker-10; } &:disabled, @@ -245,15 +245,6 @@ @include reduce-motion("transition"); height: auto; - &:hover:not(:disabled), - &:focus:not(:disabled) { - color: $components-color-accent-darker-20; - } - - &:active:not(:disabled) { - color: $components-color-accent; - } - &:focus { border-radius: $radius-block-ui; } From c264be0dc7fc7e150e44fad33bee03f8eca4cb0c Mon Sep 17 00:00:00 2001 From: Kevin Batdorf Date: Tue, 25 Oct 2022 15:01:51 -0400 Subject: [PATCH 6/7] Remove added appearance rule --- packages/components/src/button/style.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss index 97b794c7441590..abd327348d6f32 100644 --- a/packages/components/src/button/style.scss +++ b/packages/components/src/button/style.scss @@ -7,7 +7,6 @@ margin: 0; border: 0; cursor: pointer; - appearance: none; -webkit-appearance: none; background: none; transition: box-shadow 0.1s linear; From 52899abf997d3bcc16493e60227083e01969d3e3 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Wed, 26 Oct 2022 12:16:32 -0400 Subject: [PATCH 7/7] patch from Lena Morita --- packages/components/src/button/style.scss | 72 +++++------------------ 1 file changed, 15 insertions(+), 57 deletions(-) diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss index abd327348d6f32..29b8d4aa2cba92 100644 --- a/packages/components/src/button/style.scss +++ b/packages/components/src/button/style.scss @@ -171,55 +171,27 @@ /** * Destructive buttons. */ - &.is-destructive { - color: $alert-red; - box-shadow: inset 0 0 0 $border-width $alert-red; - - &:hover:not(:disabled), - &:focus:not(:disabled) { - color: darken($alert-red, 20%); - } - &:focus:not(:disabled) { - box-shadow: 0 0 0 var(--wp-admin-border-width-focus) darken($alert-red, 20%); - } + --wp-components-color-accent: #{$alert-red}; + --wp-components-color-accent-darker-10: #{darken($alert-red, 10%)}; + --wp-components-color-accent-darker-20: #{darken($alert-red, 20%)}; - &:active:not(:disabled) { + // Only the default variant is styled differently from the non-destructive counterparts. + &:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link) { color: $alert-red; - } - } - - &.is-destructive.is-primary { - color: #fff; - background: $alert-red; - box-shadow: inset 0 0 0 $border-width $alert-red; - - &:hover:not(:disabled), - &:focus:not(:disabled) { - color: #fff; - background: darken($alert-red, 20%); - } - &:focus:not(:disabled) { - box-shadow: inset 0 0 0 1px $white, 0 0 0 var(--wp-admin-border-width-focus) darken($alert-red, 20%); - } - - &:active:not(:disabled) { - background: $alert-red; - color: #fff; - } - } + box-shadow: inset 0 0 0 $border-width $alert-red; - &.is-destructive.is-tertiary { - box-shadow: none; + &:hover:not(:disabled) { + color: darken($alert-red, 20%); + } - &:hover:not(:disabled) { - box-shadow: inset 0 0 0 $border-width $alert-red; - color: $alert-red; - } + &:focus:not(:disabled) { + box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $alert-red; + } - &:focus:not(:disabled) { - box-shadow: inset 0 0 0 1px $white, 0 0 0 var(--wp-admin-border-width-focus) $alert-red; - color: $alert-red; + &:active:not(:disabled) { + background: $gray-400; + } } } @@ -247,20 +219,6 @@ &:focus { border-radius: $radius-block-ui; } - - // Link buttons that are red to indicate destructive behavior. - &.is-destructive { - color: $alert-red; - - &:hover:not(:disabled), - &:focus:not(:disabled) { - color: darken($alert-red, 20%); - } - - &:active:not(:disabled) { - color: $alert-red; - } - } } &:not([aria-disabled="true"]):active {