From ddb38d9eda34fbf33f58015eb56f7fb75c045658 Mon Sep 17 00:00:00 2001 From: Cory Dransfeldt Date: Mon, 21 Oct 2024 07:43:48 -0700 Subject: [PATCH 1/6] chore(clear button): resolve conflict --- components/clearbutton/index.css | 28 ++++++++++++--- components/clearbutton/metadata/metadata.json | 35 ++++++++++++------- 2 files changed, 45 insertions(+), 18 deletions(-) diff --git a/components/clearbutton/index.css b/components/clearbutton/index.css index 541c424c519..3ebddac773d 100644 --- a/components/clearbutton/index.css +++ b/components/clearbutton/index.css @@ -65,13 +65,25 @@ --mod-clear-button-icon-color-down: var(--spectrum-disabled-content-color); --mod-clear-button-background-color: var(--mod-clear-button-background-color-disabled, transparent); } + + &.spectrum-ClearButton--staticWhite { + --spectrum-clear-button-icon-color-disabled: var(--spectrum-disabled-static-white-content-color); + } + + &.spectrum-ClearButton--staticBlack { + --spectrum-clear-button-icon-color-disabled: var(--spectrum-disabled-static-black-content-color); + } } +/* stylelint-disable-next-line no-duplicate-selectors */ .spectrum-ClearButton { block-size: var(--mod-clear-button-height, var(--spectrum-clear-button-height)); inline-size: var(--mod-clear-button-width, var(--spectrum-clear-button-width)); border-radius: 100%; - cursor: pointer; + + &:not(:disabled) { + cursor: pointer; + } background-color: var(--mod-clear-button-background-color, transparent); margin: 0; @@ -86,7 +98,7 @@ margin-inline: auto; } - &:hover { + &:not(:disabled):hover { color: var(--highcontrast-clear-button-icon-color-hover, var(--mod-clear-button-icon-color-hover, var(--spectrum-clear-button-icon-color-hover))); .spectrum-ClearButton-fill { @@ -94,7 +106,7 @@ } } - &:active { + &:not(:disabled):active { color: var(--mod-clear-button-icon-color-down, var(--spectrum-clear-button-icon-color-down)); .spectrum-ClearButton-fill { @@ -102,8 +114,8 @@ } } - &:focus-visible, - &:focus-within { + &:not(:disabled):focus-visible, + &:not(:disabled):focus-within { color: var(--mod-clear-button-icon-color-key-focus, var(--spectrum-clear-button-icon-color-key-focus)); .spectrum-ClearButton-fill { @@ -112,6 +124,12 @@ } } +.spectrum-ClearButton:disabled { + .spectrum-ClearButton-icon { + color: var( --highcontrast-clear-button-icon-color-disabled, var(--mod-clear-button-icon-color-disabled, var(--spectrum-clear-button-icon-color-disabled))); + } +} + .spectrum-ClearButton-fill { background-color: var(--mod-clear-button-background-color, var(--spectrum-clear-button-background-color)); diff --git a/components/clearbutton/metadata/metadata.json b/components/clearbutton/metadata/metadata.json index 7940af65364..b34f8a6c8ee 100644 --- a/components/clearbutton/metadata/metadata.json +++ b/components/clearbutton/metadata/metadata.json @@ -1,8 +1,8 @@ { "sourceFile": "index.css", "selectors": [ - ".js-focus-within .spectrum-ClearButton[focus-within]", - ".js-focus-within .spectrum-ClearButton[focus-within] .spectrum-ClearButton-fill", + ".js-focus-within .spectrum-ClearButton:not(:disabled)[focus-within]", + ".js-focus-within .spectrum-ClearButton:not(:disabled)[focus-within] .spectrum-ClearButton-fill", ".spectrum-ClearButton", ".spectrum-ClearButton > .spectrum-Icon", ".spectrum-ClearButton--overBackground:focus-visible", @@ -13,18 +13,21 @@ ".spectrum-ClearButton.spectrum-ClearButton--sizeL", ".spectrum-ClearButton.spectrum-ClearButton--sizeS", ".spectrum-ClearButton.spectrum-ClearButton--sizeXL", - ".spectrum-ClearButton:active", - ".spectrum-ClearButton:active .spectrum-ClearButton-fill", + ".spectrum-ClearButton.spectrum-ClearButton--staticBlack", + ".spectrum-ClearButton.spectrum-ClearButton--staticWhite", ".spectrum-ClearButton:disabled", - ".spectrum-ClearButton:focus-visible", - ".spectrum-ClearButton:focus-visible .spectrum-ClearButton-fill", - ".spectrum-ClearButton:focus-within", - ".spectrum-ClearButton:focus-within .spectrum-ClearButton-fill", - ".spectrum-ClearButton:hover", - ".spectrum-ClearButton:hover .spectrum-ClearButton-fill", + ".spectrum-ClearButton:disabled .spectrum-ClearButton-icon", ".spectrum-ClearButton:not(:disabled)", - ".spectrum-ClearButton[focus-within].js-focus-within", - ".spectrum-ClearButton[focus-within].js-focus-within .spectrum-ClearButton-fill" + ".spectrum-ClearButton:not(:disabled):active", + ".spectrum-ClearButton:not(:disabled):active .spectrum-ClearButton-fill", + ".spectrum-ClearButton:not(:disabled):focus-visible", + ".spectrum-ClearButton:not(:disabled):focus-visible .spectrum-ClearButton-fill", + ".spectrum-ClearButton:not(:disabled):focus-within", + ".spectrum-ClearButton:not(:disabled):focus-within .spectrum-ClearButton-fill", + ".spectrum-ClearButton:not(:disabled):hover", + ".spectrum-ClearButton:not(:disabled):hover .spectrum-ClearButton-fill", + ".spectrum-ClearButton:not(:disabled)[focus-within].js-focus-within", + ".spectrum-ClearButton:not(:disabled)[focus-within].js-focus-within .spectrum-ClearButton-fill" ], "modifiers": [ "--mod-clear-button-background-color", @@ -48,6 +51,7 @@ "--spectrum-clear-button-background-color-key-focus", "--spectrum-clear-button-height", "--spectrum-clear-button-icon-color", + "--spectrum-clear-button-icon-color-disabled", "--spectrum-clear-button-icon-color-down", "--spectrum-clear-button-icon-color-hover", "--spectrum-clear-button-icon-color-key-focus", @@ -60,6 +64,8 @@ "--spectrum-component-height-300", "--spectrum-component-height-75", "--spectrum-disabled-content-color", + "--spectrum-disabled-static-black-content-color", + "--spectrum-disabled-static-white-content-color", "--spectrum-gray-200", "--spectrum-gray-300", "--spectrum-gray-400", @@ -79,5 +85,8 @@ "--system-spectrum-clearbutton-spectrum-clear-button-background-color-key-focus" ], "passthroughs": [], - "high-contrast": ["--highcontrast-clear-button-icon-color-hover"] + "high-contrast": [ + "--highcontrast-clear-button-icon-color-disabled", + "--highcontrast-clear-button-icon-color-hover" + ] } From 76e3f35ec8d724f0dd30cc6cc130ae7b115b1ee2 Mon Sep 17 00:00:00 2001 From: Cory Dransfeldt Date: Tue, 22 Oct 2024 13:47:51 -0700 Subject: [PATCH 2/6] chore(clear button): adds changeset --- .changeset/silly-donkeys-remember.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/silly-donkeys-remember.md diff --git a/.changeset/silly-donkeys-remember.md b/.changeset/silly-donkeys-remember.md new file mode 100644 index 00000000000..2c3a2736320 --- /dev/null +++ b/.changeset/silly-donkeys-remember.md @@ -0,0 +1,5 @@ +--- +"@spectrum-css/clearbutton": minor +--- + +Improves the visibility of the clear button disabled variant on static color backgrounds by more closely aligning styles with close button. From e7b56109872447c8c515f29b0d7c3ccd74980513 Mon Sep 17 00:00:00 2001 From: Cory Dransfeldt Date: Wed, 23 Oct 2024 08:52:05 -0700 Subject: [PATCH 3/6] chore(clear button): remove declaration + unnecessary stylelint --- components/clearbutton/index.css | 5 ----- components/clearbutton/metadata/metadata.json | 2 -- 2 files changed, 7 deletions(-) diff --git a/components/clearbutton/index.css b/components/clearbutton/index.css index 3ebddac773d..0959fe1a865 100644 --- a/components/clearbutton/index.css +++ b/components/clearbutton/index.css @@ -69,13 +69,8 @@ &.spectrum-ClearButton--staticWhite { --spectrum-clear-button-icon-color-disabled: var(--spectrum-disabled-static-white-content-color); } - - &.spectrum-ClearButton--staticBlack { - --spectrum-clear-button-icon-color-disabled: var(--spectrum-disabled-static-black-content-color); - } } -/* stylelint-disable-next-line no-duplicate-selectors */ .spectrum-ClearButton { block-size: var(--mod-clear-button-height, var(--spectrum-clear-button-height)); inline-size: var(--mod-clear-button-width, var(--spectrum-clear-button-width)); diff --git a/components/clearbutton/metadata/metadata.json b/components/clearbutton/metadata/metadata.json index b34f8a6c8ee..da7908d3799 100644 --- a/components/clearbutton/metadata/metadata.json +++ b/components/clearbutton/metadata/metadata.json @@ -13,7 +13,6 @@ ".spectrum-ClearButton.spectrum-ClearButton--sizeL", ".spectrum-ClearButton.spectrum-ClearButton--sizeS", ".spectrum-ClearButton.spectrum-ClearButton--sizeXL", - ".spectrum-ClearButton.spectrum-ClearButton--staticBlack", ".spectrum-ClearButton.spectrum-ClearButton--staticWhite", ".spectrum-ClearButton:disabled", ".spectrum-ClearButton:disabled .spectrum-ClearButton-icon", @@ -64,7 +63,6 @@ "--spectrum-component-height-300", "--spectrum-component-height-75", "--spectrum-disabled-content-color", - "--spectrum-disabled-static-black-content-color", "--spectrum-disabled-static-white-content-color", "--spectrum-gray-200", "--spectrum-gray-300", From f6ed47fdc2ce76473121ae91ba04d31aeffc1bdf Mon Sep 17 00:00:00 2001 From: Cory Dransfeldt Date: Thu, 24 Oct 2024 13:43:11 -0700 Subject: [PATCH 4/6] chore(clear button): add .spectrum-ClearButton.is-disabled selector --- components/clearbutton/index.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/components/clearbutton/index.css b/components/clearbutton/index.css index 0959fe1a865..0924211d167 100644 --- a/components/clearbutton/index.css +++ b/components/clearbutton/index.css @@ -119,7 +119,8 @@ } } -.spectrum-ClearButton:disabled { +.spectrum-ClearButton:disabled, +.spectrum-ClearButton.is-disabled { .spectrum-ClearButton-icon { color: var( --highcontrast-clear-button-icon-color-disabled, var(--mod-clear-button-icon-color-disabled, var(--spectrum-clear-button-icon-color-disabled))); } From 92bb8393d9d625282923072043befba1a5bd514d Mon Sep 17 00:00:00 2001 From: Cory Dransfeldt Date: Thu, 24 Oct 2024 13:46:56 -0700 Subject: [PATCH 5/6] chore(clear button): add .spectrum-ClearButton--staticWhite selectors --- components/clearbutton/index.css | 2 ++ components/clearbutton/metadata/metadata.json | 2 ++ 2 files changed, 4 insertions(+) diff --git a/components/clearbutton/index.css b/components/clearbutton/index.css index 0924211d167..89f24c5db0d 100644 --- a/components/clearbutton/index.css +++ b/components/clearbutton/index.css @@ -46,6 +46,7 @@ --mod-clear-button-background-color-key-focus: transparent; } + &.spectrum-ClearButton--staticWhite, &.spectrum-ClearButton--overBackground { --mod-clear-button-icon-color: var(--spectrum-white); --mod-clear-button-icon-color-hover: var(--spectrum-white); @@ -138,6 +139,7 @@ justify-content: center; } +.spectrum-ClearButton--staticWhite, .spectrum-ClearButton--overBackground { &:focus-visible { outline: none; diff --git a/components/clearbutton/metadata/metadata.json b/components/clearbutton/metadata/metadata.json index da7908d3799..6410450768d 100644 --- a/components/clearbutton/metadata/metadata.json +++ b/components/clearbutton/metadata/metadata.json @@ -6,8 +6,10 @@ ".spectrum-ClearButton", ".spectrum-ClearButton > .spectrum-Icon", ".spectrum-ClearButton--overBackground:focus-visible", + ".spectrum-ClearButton--staticWhite:focus-visible", ".spectrum-ClearButton-fill", ".spectrum-ClearButton.is-disabled", + ".spectrum-ClearButton.is-disabled .spectrum-ClearButton-icon", ".spectrum-ClearButton.spectrum-ClearButton--overBackground", ".spectrum-ClearButton.spectrum-ClearButton--quiet", ".spectrum-ClearButton.spectrum-ClearButton--sizeL", From 104209868956deef5f57f5bacbc03f3f51512beb Mon Sep 17 00:00:00 2001 From: Cory Dransfeldt Date: Mon, 28 Oct 2024 10:20:47 -0700 Subject: [PATCH 6/6] chore(clear button): update changelog --- .changeset/silly-donkeys-remember.md | 6 ++++++ components/clearbutton/index.css | 2 ++ 2 files changed, 8 insertions(+) diff --git a/.changeset/silly-donkeys-remember.md b/.changeset/silly-donkeys-remember.md index 2c3a2736320..362012bb06d 100644 --- a/.changeset/silly-donkeys-remember.md +++ b/.changeset/silly-donkeys-remember.md @@ -3,3 +3,9 @@ --- Improves the visibility of the clear button disabled variant on static color backgrounds by more closely aligning styles with close button. + +- Adds `.spectrum-ClearButton--staticWhite` to the mod declarations associated with `.spectrum-ClearButton--overBackground` in advance of the latter being deprecated. The same class has been added to the `:focus` declaration for `spectrum-ClearButton--overBackground`. +- Adds `--spectrum-clear-button-icon-color-disabled: var(--spectrum-disabled-static-white-content-color);` custom property for `.spectrum-ClearButton--staticWhite`. +- Enables `cursor: pointer` for `.spectrum-ClearButton` when it is not disabled. +- Disables hover, active, focus and focus-within states for `:disabled` `.spectrum-ClearButton` elements. +- Adds color styles for `:disabled` and `.is-disabled` `.spectrum-ClearButton` `:disabled` icons. diff --git a/components/clearbutton/index.css b/components/clearbutton/index.css index 89f24c5db0d..4edf5d961e5 100644 --- a/components/clearbutton/index.css +++ b/components/clearbutton/index.css @@ -46,6 +46,7 @@ --mod-clear-button-background-color-key-focus: transparent; } + /* @deprecated .spectrum-ClearButton--overBackground */ &.spectrum-ClearButton--staticWhite, &.spectrum-ClearButton--overBackground { --mod-clear-button-icon-color: var(--spectrum-white); @@ -139,6 +140,7 @@ justify-content: center; } +/* @deprecated .spectrum-ClearButton--overBackground */ .spectrum-ClearButton--staticWhite, .spectrum-ClearButton--overBackground { &:focus-visible {