From d827c379462930856d543b013284c71fb67a996b Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Wed, 2 Apr 2025 20:06:48 +0000 Subject: [PATCH 1/4] chore: update dependency @spectrum-css/clearbutton to v7.2.0 --- .../src/clear-button-overrides.css | 50 +----------- .../src/spectrum-clear-button.css | 81 ++++++++++++++----- .../styles/tokens-v2/system-theme-bridge.css | 32 +------- .../tokens/express/system-theme-bridge.css | 32 +------- .../tokens/spectrum/system-theme-bridge.css | 32 +------- 5 files changed, 75 insertions(+), 152 deletions(-) diff --git a/packages/clear-button/src/clear-button-overrides.css b/packages/clear-button/src/clear-button-overrides.css index 85fa771490..8355fe52d3 100644 --- a/packages/clear-button/src/clear-button-overrides.css +++ b/packages/clear-button/src/clear-button-overrides.css @@ -16,52 +16,10 @@ governing permissions and limitations under the License. --spectrum-clear-button-background-color-hover: var(--system-clear-button-background-color-hover); --spectrum-clear-button-background-color-down: var(--system-clear-button-background-color-down); --spectrum-clear-button-background-color-key-focus: var(--system-clear-button-background-color-key-focus); - --spectrum-clear-button-height: var(--system-clear-button-height); - --spectrum-clear-button-width: var(--system-clear-button-width); - --spectrum-clear-button-padding: var(--system-clear-button-padding); - --spectrum-clear-button-icon-color: var(--system-clear-button-icon-color); - --spectrum-clear-button-icon-color-hover: var(--system-clear-button-icon-color-hover); - --spectrum-clear-button-icon-color-down: var(--system-clear-button-icon-color-down); - --spectrum-clear-button-icon-color-key-focus: var(--system-clear-button-icon-color-key-focus); } -:host([size="s"]) { - --spectrum-clear-button-height: var(--system-clear-button-size-s-height); - --spectrum-clear-button-width: var(--system-clear-button-size-s-width); -} - -:host([size="l"]) { - --spectrum-clear-button-height: var(--system-clear-button-size-l-height); - --spectrum-clear-button-width: var(--system-clear-button-size-l-width); -} - -:host([size="xl"]) { - --spectrum-clear-button-height: var(--system-clear-button-size-xl-height); - --spectrum-clear-button-width: var(--system-clear-button-size-xl-width); -} - -:host .spectrum-ClearButton--quiet { - --spectrum-clear-button-background-color: var(--system-clear-button-quiet-background-color); - --spectrum-clear-button-background-color-hover: var(--system-clear-button-quiet-background-color-hover); - --spectrum-clear-button-background-color-down: var(--system-clear-button-quiet-background-color-down); - --spectrum-clear-button-background-color-key-focus: var(--system-clear-button-quiet-background-color-key-focus); -} - -:host([variant="overBackground"]) { - --spectrum-clear-button-icon-color: var(--system-clear-button-over-background-icon-color); - --spectrum-clear-button-icon-color-hover: var(--system-clear-button-over-background-icon-color-hover); - --spectrum-clear-button-icon-color-down: var(--system-clear-button-over-background-icon-color-down); - --spectrum-clear-button-icon-color-key-focus: var(--system-clear-button-over-background-icon-color-key-focus); - --spectrum-clear-button-background-color: var(--system-clear-button-over-background-background-color); - --spectrum-clear-button-background-color-hover: var(--system-clear-button-over-background-background-color-hover); - --spectrum-clear-button-background-color-down: var(--system-clear-button-over-background-background-color-down); - --spectrum-clear-button-background-color-key-focus: var(--system-clear-button-over-background-background-color-key-focus); -} - -:host([disabled]), -:host([disabled]) { - --spectrum-clear-button-icon-color: var(--system-clear-button-disabled-icon-color); - --spectrum-clear-button-icon-color-hover: var(--system-clear-button-disabled-icon-color-hover); - --spectrum-clear-button-icon-color-down: var(--system-clear-button-disabled-icon-color-down); - --spectrum-clear-button-background-color: var(--system-clear-button-disabled-background-color); +:host .spectrum-ClearButton--staticWhite { + --spectrum-clear-button-background-color-hover: var(--system-clear-button-static-white-background-color-hover); + --spectrum-clear-button-background-color-down: var(--system-clear-button-static-white-background-color-down); + --spectrum-clear-button-background-color-key-focus: var(--system-clear-button-static-white-background-color-key-focus); } diff --git a/packages/clear-button/src/spectrum-clear-button.css b/packages/clear-button/src/spectrum-clear-button.css index c44308ba7f..481fc50805 100644 --- a/packages/clear-button/src/spectrum-clear-button.css +++ b/packages/clear-button/src/spectrum-clear-button.css @@ -12,10 +12,15 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { + --spectrum-clear-button-height: var(--spectrum-component-height-100); + --spectrum-clear-button-width: var(--spectrum-component-height-100); + --spectrum-clear-button-padding: var(--spectrum-in-field-button-edge-to-fill); + --spectrum-clear-button-icon-color: var(--spectrum-neutral-content-color-default); + --spectrum-clear-button-icon-color-hover: var(--spectrum-neutral-content-color-hover); + --spectrum-clear-button-icon-color-down: var(--spectrum-neutral-content-color-down); + --spectrum-clear-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus); block-size: var(--mod-clear-button-height, var(--spectrum-clear-button-height)); inline-size: var(--mod-clear-button-width, var(--spectrum-clear-button-width)); - cursor: pointer; - background-color: initial; background-color: var(--mod-clear-button-background-color, transparent); padding: var(--mod-clear-button-padding, var(--spectrum-clear-button-padding)); color: var(--mod-clear-button-icon-color, var(--spectrum-clear-button-icon-color)); @@ -24,47 +29,84 @@ governing permissions and limitations under the License. margin: 0; } +:host([size="s"]) { + --spectrum-clear-button-height: var(--spectrum-component-height-75); + --spectrum-clear-button-width: var(--spectrum-component-height-75); +} + +:host([size="l"]) { + --spectrum-clear-button-height: var(--spectrum-component-height-200); + --spectrum-clear-button-width: var(--spectrum-component-height-200); +} + +:host([size="xl"]) { + --spectrum-clear-button-height: var(--spectrum-component-height-300); + --spectrum-clear-button-width: var(--spectrum-component-height-300); +} + +:host .spectrum-ClearButton--quiet { + --mod-clear-button-background-color: transparent; + --mod-clear-button-background-color-hover: transparent; + --mod-clear-button-background-color-down: transparent; + --mod-clear-button-background-color-key-focus: transparent; +} + +:host .spectrum-ClearButton--staticWhite { + --mod-clear-button-icon-color: var(--spectrum-white); + --mod-clear-button-icon-color-hover: var(--spectrum-white); + --mod-clear-button-icon-color-down: var(--spectrum-white); + --mod-clear-button-icon-color-key-focus: var(--spectrum-white); + --mod-clear-button-icon-color-disabled: var(--spectrum-disabled-static-white-content-color); + --mod-clear-button-background-color: transparent; +} + +:host([disabled]), +:host([disabled]) { + --mod-clear-button-icon-color: var(--mod-clear-button-icon-color-disabled, var(--spectrum-disabled-content-color)); + --mod-clear-button-icon-color-hover: var(--spectrum-disabled-content-color); + --mod-clear-button-icon-color-down: var(--spectrum-disabled-content-color); + --mod-clear-button-background-color: var(--mod-clear-button-background-color-disabled, transparent); +} + +:host:not(:disabled) { + cursor: pointer; +} + .icon { margin-block: 0; margin-inline: auto; } @media (hover: hover) { - :host(:hover) { + :host: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))); } - :host(:hover) .fill { + :host:not(:disabled):hover .fill { background-color: var(--mod-clear-button-background-color-hover, var(--spectrum-clear-button-background-color-hover)); } } -:host(:is(:active, [active])) { +:host(:is(:active, [active])):not(:disabled) { color: var(--mod-clear-button-icon-color-down, var(--spectrum-clear-button-icon-color-down)); } -:host(:is(:active, [active])) .fill { +:host(:is(:active, [active])):not(:disabled) .fill { background-color: var(--mod-clear-button-background-color-down, var(--spectrum-clear-button-background-color-down)); } -:host([focus-within]) .js-focus-within, -:host(:focus-visible), -:host:focus-within, -:host([focus-within]) .js-focus-within { +:host:not(:disabled):focus-visible, +:host:not(:disabled):focus-within { color: var(--mod-clear-button-icon-color-key-focus, var(--spectrum-clear-button-icon-color-key-focus)); } -:host([focus-within]) .js-focus-within .fill, -:host(:focus-visible) .fill, -:host:focus-within .fill, -:host([focus-within]) .js-focus-within .fill { +:host:not(:disabled):focus-visible .fill, +:host:not(:disabled):focus-within .fill { background-color: var(--mod-clear-button-background-color-key-focus, var(--spectrum-clear-button-background-color-key-focus)); } -:host([disabled]), -:host([disabled]) { - --spectrum-clear-button-icon-color: var(--mod-clear-button-icon-color-disabled, var(--spectrum-disabled-content-color)); - --spectrum-clear-button-background-color: var(--mod-clear-button-background-color-disabled, transparent); +.spectrum-ClearButton-icon { + color: inherit; } .fill { @@ -77,7 +119,8 @@ governing permissions and limitations under the License. display: flex; } -:host([variant="overBackground"]:focus-visible) { +:host([variant="overBackground"]:focus-visible), +.spectrum-ClearButton--staticWhite:focus-visible { outline: none; } diff --git a/tools/styles/tokens-v2/system-theme-bridge.css b/tools/styles/tokens-v2/system-theme-bridge.css index 2ab1aa83de..719be44a5a 100644 --- a/tools/styles/tokens-v2/system-theme-bridge.css +++ b/tools/styles/tokens-v2/system-theme-bridge.css @@ -187,35 +187,9 @@ --system-clear-button-background-color-hover: transparent; --system-clear-button-background-color-down: transparent; --system-clear-button-background-color-key-focus: transparent; - --system-clear-button-height: var(--spectrum-component-height-100); - --system-clear-button-width: var(--spectrum-component-height-100); - --system-clear-button-padding: var(--spectrum-in-field-button-edge-to-fill); - --system-clear-button-icon-color: var(--spectrum-neutral-content-color-default); - --system-clear-button-icon-color-hover: var(--spectrum-neutral-content-color-hover); - --system-clear-button-icon-color-down: var(--spectrum-neutral-content-color-down); - --system-clear-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus); - --system-clear-button-size-s-height: var(--spectrum-component-height-75); - --system-clear-button-size-s-width: var(--spectrum-component-height-75); - --system-clear-button-size-l-height: var(--spectrum-component-height-200); - --system-clear-button-size-l-width: var(--spectrum-component-height-200); - --system-clear-button-size-xl-height: var(--spectrum-component-height-300); - --system-clear-button-size-xl-width: var(--spectrum-component-height-300); - --system-clear-button-quiet-background-color: var(--spectrum-clear-button-background-color-quiet, transparent); - --system-clear-button-quiet-background-color-hover: var(--spectrum-clear-button-background-color-hover-quiet, transparent); - --system-clear-button-quiet-background-color-down: var(--spectrum-clear-button-background-color-down-quiet, transparent); - --system-clear-button-quiet-background-color-key-focus: var(--spectrum-clear-button-background-color-key-focus-quiet, transparent); - --system-clear-button-over-background-icon-color: var(--spectrum-clear-button-icon-color-over-background, var(--spectrum-white)); - --system-clear-button-over-background-icon-color-hover: var(--spectrum-clear-button-icon-color-hover-over-background, var(--spectrum-white)); - --system-clear-button-over-background-icon-color-down: var(--spectrum-clear-button-icon-color-down-over-background, var(--spectrum-white)); - --system-clear-button-over-background-icon-color-key-focus: var(--spectrum-clear-button-icon-color-key-focus-over-background, var(--spectrum-white)); - --system-clear-button-over-background-background-color: var(--spectrum-clear-button-background-color-over-background, transparent); - --system-clear-button-over-background-background-color-hover: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-400)); - --system-clear-button-over-background-background-color-down: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-500)); - --system-clear-button-over-background-background-color-key-focus: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-400)); - --system-clear-button-disabled-icon-color: var(--spectrum-disabled-content-color); - --system-clear-button-disabled-icon-color-hover: var(--spectrum-clear-button-icon-color-hover-disabled, var(--spectrum-disabled-content-color)); - --system-clear-button-disabled-icon-color-down: var(--spectrum-clear-button-icon-color-down-disabled, var(--spectrum-disabled-content-color)); - --system-clear-button-disabled-background-color: transparent; + --system-clear-button-static-white-background-color-hover: var(--spectrum-transparent-white-400); + --system-clear-button-static-white-background-color-down: var(--spectrum-transparent-white-500); + --system-clear-button-static-white-background-color-key-focus: var(--spectrum-transparent-white-400); --system-close-button-background-color-default: transparent; --system-close-button-background-color-hover: var(--spectrum-gray-100); --system-close-button-background-color-down: var(--spectrum-gray-200); diff --git a/tools/styles/tokens/express/system-theme-bridge.css b/tools/styles/tokens/express/system-theme-bridge.css index a5bde1ea16..66fbf99c3f 100644 --- a/tools/styles/tokens/express/system-theme-bridge.css +++ b/tools/styles/tokens/express/system-theme-bridge.css @@ -188,35 +188,9 @@ --system-clear-button-background-color-hover: var(--spectrum-gray-300); --system-clear-button-background-color-down: var(--spectrum-gray-400); --system-clear-button-background-color-key-focus: var(--spectrum-gray-300); - --system-clear-button-height: var(--spectrum-component-height-100); - --system-clear-button-width: var(--spectrum-component-height-100); - --system-clear-button-padding: var(--spectrum-in-field-button-edge-to-fill); - --system-clear-button-icon-color: var(--spectrum-neutral-content-color-default); - --system-clear-button-icon-color-hover: var(--spectrum-neutral-content-color-hover); - --system-clear-button-icon-color-down: var(--spectrum-neutral-content-color-down); - --system-clear-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus); - --system-clear-button-size-s-height: var(--spectrum-component-height-75); - --system-clear-button-size-s-width: var(--spectrum-component-height-75); - --system-clear-button-size-l-height: var(--spectrum-component-height-200); - --system-clear-button-size-l-width: var(--spectrum-component-height-200); - --system-clear-button-size-xl-height: var(--spectrum-component-height-300); - --system-clear-button-size-xl-width: var(--spectrum-component-height-300); - --system-clear-button-quiet-background-color: var(--spectrum-clear-button-background-color-quiet, transparent); - --system-clear-button-quiet-background-color-hover: var(--spectrum-clear-button-background-color-hover-quiet, transparent); - --system-clear-button-quiet-background-color-down: var(--spectrum-clear-button-background-color-down-quiet, transparent); - --system-clear-button-quiet-background-color-key-focus: var(--spectrum-clear-button-background-color-key-focus-quiet, transparent); - --system-clear-button-over-background-icon-color: var(--spectrum-clear-button-icon-color-over-background, var(--spectrum-white)); - --system-clear-button-over-background-icon-color-hover: var(--spectrum-clear-button-icon-color-hover-over-background, var(--spectrum-white)); - --system-clear-button-over-background-icon-color-down: var(--spectrum-clear-button-icon-color-down-over-background, var(--spectrum-white)); - --system-clear-button-over-background-icon-color-key-focus: var(--spectrum-clear-button-icon-color-key-focus-over-background, var(--spectrum-white)); - --system-clear-button-over-background-background-color: var(--spectrum-clear-button-background-color-over-background, transparent); - --system-clear-button-over-background-background-color-hover: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-300)); - --system-clear-button-over-background-background-color-down: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-400)); - --system-clear-button-over-background-background-color-key-focus: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-300)); - --system-clear-button-disabled-icon-color: var(--spectrum-disabled-content-color); - --system-clear-button-disabled-icon-color-hover: var(--spectrum-clear-button-icon-color-hover-disabled, var(--spectrum-disabled-content-color)); - --system-clear-button-disabled-icon-color-down: var(--spectrum-clear-button-icon-color-down-disabled, var(--spectrum-disabled-content-color)); - --system-clear-button-disabled-background-color: transparent; + --system-clear-button-static-white-background-color-hover: var(--spectrum-transparent-white-300); + --system-clear-button-static-white-background-color-down: var(--spectrum-transparent-white-400); + --system-clear-button-static-white-background-color-key-focus: var(--spectrum-transparent-white-300); --system-close-button-background-color-default: transparent; --system-close-button-background-color-hover: var(--spectrum-gray-300); --system-close-button-background-color-down: var(--spectrum-gray-400); diff --git a/tools/styles/tokens/spectrum/system-theme-bridge.css b/tools/styles/tokens/spectrum/system-theme-bridge.css index 2a1ab6eb9c..c075e7ab1a 100644 --- a/tools/styles/tokens/spectrum/system-theme-bridge.css +++ b/tools/styles/tokens/spectrum/system-theme-bridge.css @@ -188,35 +188,9 @@ --system-clear-button-background-color-hover: transparent; --system-clear-button-background-color-down: transparent; --system-clear-button-background-color-key-focus: transparent; - --system-clear-button-height: var(--spectrum-component-height-100); - --system-clear-button-width: var(--spectrum-component-height-100); - --system-clear-button-padding: var(--spectrum-in-field-button-edge-to-fill); - --system-clear-button-icon-color: var(--spectrum-neutral-content-color-default); - --system-clear-button-icon-color-hover: var(--spectrum-neutral-content-color-hover); - --system-clear-button-icon-color-down: var(--spectrum-neutral-content-color-down); - --system-clear-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus); - --system-clear-button-size-s-height: var(--spectrum-component-height-75); - --system-clear-button-size-s-width: var(--spectrum-component-height-75); - --system-clear-button-size-l-height: var(--spectrum-component-height-200); - --system-clear-button-size-l-width: var(--spectrum-component-height-200); - --system-clear-button-size-xl-height: var(--spectrum-component-height-300); - --system-clear-button-size-xl-width: var(--spectrum-component-height-300); - --system-clear-button-quiet-background-color: var(--spectrum-clear-button-background-color-quiet, transparent); - --system-clear-button-quiet-background-color-hover: var(--spectrum-clear-button-background-color-hover-quiet, transparent); - --system-clear-button-quiet-background-color-down: var(--spectrum-clear-button-background-color-down-quiet, transparent); - --system-clear-button-quiet-background-color-key-focus: var(--spectrum-clear-button-background-color-key-focus-quiet, transparent); - --system-clear-button-over-background-icon-color: var(--spectrum-clear-button-icon-color-over-background, var(--spectrum-white)); - --system-clear-button-over-background-icon-color-hover: var(--spectrum-clear-button-icon-color-hover-over-background, var(--spectrum-white)); - --system-clear-button-over-background-icon-color-down: var(--spectrum-clear-button-icon-color-down-over-background, var(--spectrum-white)); - --system-clear-button-over-background-icon-color-key-focus: var(--spectrum-clear-button-icon-color-key-focus-over-background, var(--spectrum-white)); - --system-clear-button-over-background-background-color: var(--spectrum-clear-button-background-color-over-background, transparent); - --system-clear-button-over-background-background-color-hover: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-300)); - --system-clear-button-over-background-background-color-down: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-400)); - --system-clear-button-over-background-background-color-key-focus: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-300)); - --system-clear-button-disabled-icon-color: var(--spectrum-disabled-content-color); - --system-clear-button-disabled-icon-color-hover: var(--spectrum-clear-button-icon-color-hover-disabled, var(--spectrum-disabled-content-color)); - --system-clear-button-disabled-icon-color-down: var(--spectrum-clear-button-icon-color-down-disabled, var(--spectrum-disabled-content-color)); - --system-clear-button-disabled-background-color: transparent; + --system-clear-button-static-white-background-color-hover: var(--spectrum-transparent-white-300); + --system-clear-button-static-white-background-color-down: var(--spectrum-transparent-white-400); + --system-clear-button-static-white-background-color-key-focus: var(--spectrum-transparent-white-300); --system-close-button-background-color-default: transparent; --system-close-button-background-color-hover: var(--spectrum-gray-200); --system-close-button-background-color-down: var(--spectrum-gray-300); From 172887b75ffacfbcc6a6d00a56d824adf8d8d410 Mon Sep 17 00:00:00 2001 From: castastrophe Date: Wed, 2 Apr 2025 17:39:50 -0400 Subject: [PATCH 2/4] fix(clear-button,styles): style updates from latest release --- .changeset/hot-cups-report.md | 6 ++++++ packages/button/src/ClearButton.ts | 9 ++++++++- .../clear-button/src/clear-button-overrides.css | 2 +- packages/clear-button/src/spectrum-clear-button.css | 13 ++++++------- 4 files changed, 21 insertions(+), 9 deletions(-) create mode 100644 .changeset/hot-cups-report.md diff --git a/.changeset/hot-cups-report.md b/.changeset/hot-cups-report.md new file mode 100644 index 0000000000..c07c4810f6 --- /dev/null +++ b/.changeset/hot-cups-report.md @@ -0,0 +1,6 @@ +--- +'@spectrum-web-components/clear-button': patch +'@spectrum-web-components/styles': patch +--- + +More details forthcoming diff --git a/packages/button/src/ClearButton.ts b/packages/button/src/ClearButton.ts index ddbfe8a181..dca414a812 100644 --- a/packages/button/src/ClearButton.ts +++ b/packages/button/src/ClearButton.ts @@ -66,9 +66,16 @@ export class ClearButton extends SizedMixin(StyledButton, { /** * The visual variant to apply to this button. + * @deprecated Use `static-color='white'` instead. */ @property({ reflect: true }) - public variant: 'overBackground' | '' = ''; + public variant: 'overBackground' | undefined; + + /** + * The visual variant to apply to this button. + */ + @property({ reflect: true }) + public staticColor: 'white' | undefined; protected override get buttonContent(): TemplateResult[] { return [crossIcon[this.size]()]; diff --git a/packages/clear-button/src/clear-button-overrides.css b/packages/clear-button/src/clear-button-overrides.css index 8355fe52d3..d47ad261e7 100644 --- a/packages/clear-button/src/clear-button-overrides.css +++ b/packages/clear-button/src/clear-button-overrides.css @@ -18,7 +18,7 @@ governing permissions and limitations under the License. --spectrum-clear-button-background-color-key-focus: var(--system-clear-button-background-color-key-focus); } -:host .spectrum-ClearButton--staticWhite { +:host([static-color="white"]) { --spectrum-clear-button-background-color-hover: var(--system-clear-button-static-white-background-color-hover); --spectrum-clear-button-background-color-down: var(--system-clear-button-static-white-background-color-down); --spectrum-clear-button-background-color-key-focus: var(--system-clear-button-static-white-background-color-key-focus); diff --git a/packages/clear-button/src/spectrum-clear-button.css b/packages/clear-button/src/spectrum-clear-button.css index 481fc50805..dde7baed09 100644 --- a/packages/clear-button/src/spectrum-clear-button.css +++ b/packages/clear-button/src/spectrum-clear-button.css @@ -44,14 +44,14 @@ governing permissions and limitations under the License. --spectrum-clear-button-width: var(--spectrum-component-height-300); } -:host .spectrum-ClearButton--quiet { +:host([quiet]) { --mod-clear-button-background-color: transparent; --mod-clear-button-background-color-hover: transparent; --mod-clear-button-background-color-down: transparent; --mod-clear-button-background-color-key-focus: transparent; } -:host .spectrum-ClearButton--staticWhite { +:host([static-color="white"]) { --mod-clear-button-icon-color: var(--spectrum-white); --mod-clear-button-icon-color-hover: var(--spectrum-white); --mod-clear-button-icon-color-down: var(--spectrum-white); @@ -60,7 +60,6 @@ governing permissions and limitations under the License. --mod-clear-button-background-color: transparent; } -:host([disabled]), :host([disabled]) { --mod-clear-button-icon-color: var(--mod-clear-button-icon-color-disabled, var(--spectrum-disabled-content-color)); --mod-clear-button-icon-color-hover: var(--spectrum-disabled-content-color); @@ -78,11 +77,11 @@ governing permissions and limitations under the License. } @media (hover: hover) { - :host:not(:disabled):hover { + :host(:hover):not(:disabled) { color: var(--highcontrast-clear-button-icon-color-hover, var(--mod-clear-button-icon-color-hover, var(--spectrum-clear-button-icon-color-hover))); } - :host:not(:disabled):hover .fill { + :host(:hover):not(:disabled) .fill { background-color: var(--mod-clear-button-background-color-hover, var(--spectrum-clear-button-background-color-hover)); } } @@ -105,7 +104,7 @@ governing permissions and limitations under the License. background-color: var(--mod-clear-button-background-color-key-focus, var(--spectrum-clear-button-background-color-key-focus)); } -.spectrum-ClearButton-icon { +.icon { color: inherit; } @@ -120,7 +119,7 @@ governing permissions and limitations under the License. } :host([variant="overBackground"]:focus-visible), -.spectrum-ClearButton--staticWhite:focus-visible { +:host([static-color="white"]:focus-visible) { outline: none; } From 4719e75be5658914c77584140d2f2c63f88bab2c Mon Sep 17 00:00:00 2001 From: castastrophe Date: Wed, 23 Apr 2025 13:13:47 -0400 Subject: [PATCH 3/4] test(button): update clear-button dev mode test --- packages/button/src/ClearButton.ts | 31 ++++++++++- packages/button/test/clear-button.test.ts | 68 +++++++++++++++-------- 2 files changed, 74 insertions(+), 25 deletions(-) diff --git a/packages/button/src/ClearButton.ts b/packages/button/src/ClearButton.ts index dca414a812..655773b7ad 100644 --- a/packages/button/src/ClearButton.ts +++ b/packages/button/src/ClearButton.ts @@ -69,7 +69,36 @@ export class ClearButton extends SizedMixin(StyledButton, { * @deprecated Use `static-color='white'` instead. */ @property({ reflect: true }) - public variant: 'overBackground' | undefined; + public set variant(variant: 'overBackground' | undefined) { + const oldValue = this.variant; + if (variant !== 'overBackground') { + this.removeAttribute('variant'); + this._variant = undefined; + return; + } + + this.setAttribute('variant', variant); + this._variant = variant; + // Set staticColor to white to reflect the updated and expected attribute + this.staticColor = 'white'; + + if (window.__swc.DEBUG) { + window.__swc.warn( + this, + 'The overBackground variant is deprecated. Please use `static-color="white"` instead.', + 'https://opensource.adobe.com/spectrum-web-components/components/clear-button/', + { level: 'deprecation' } + ); + } + + this.requestUpdate('variant', oldValue); + } + + public get variant(): 'overBackground' | undefined { + return this._variant; + } + + private _variant: 'overBackground' | undefined; /** * The visual variant to apply to this button. diff --git a/packages/button/test/clear-button.test.ts b/packages/button/test/clear-button.test.ts index 08d2d61225..cbc5b4d403 100644 --- a/packages/button/test/clear-button.test.ts +++ b/packages/button/test/clear-button.test.ts @@ -12,40 +12,60 @@ governing permissions and limitations under the License. import '@spectrum-web-components/button/sp-clear-button.js'; import { ClearButton } from '@spectrum-web-components/button'; +import { ElementSize } from '@spectrum-web-components/base'; import { expect, fixture, html } from '@open-wc/testing'; import { testForLitDevWarnings } from '../../../test/testing-helpers'; describe('Clear Button', () => { testForLitDevWarnings( async () => - await fixture( - html` - - ` - ) + await fixture(html` + + `) ); - ( - ['s', 'm', 'l', 'xl'] as ( - | 'xxs' - | 'xs' - | 's' - | 'm' - | 'l' - | 'xl' - | 'xxl' - )[] - ).map((size) => { + (['s', 'm', 'l', 'xl'] as ElementSize[]).map((size) => { it(`loads - ${size}`, async () => { - const el = await fixture( - html` - - ` - ); + const el = await fixture(html` + + `); await expect(el).to.be.accessible(); }); }); + + describe('dev mode', () => { + let consoleStub: SinonStub; + before(() => { + window.__swc.verbose = true; + consoleStub = stub(console, 'warn'); + }); + + after(() => { + window.__swc.verbose = false; + consoleStub.restore(); + }); + + it('should log dev warning when overBackground variant is used', async () => { + const el = await fixture(html` + + `); + + await elementUpdated(el); + + const warning = consoleStub.getCall(0).args.at(0); + const expectedContent = + 'The overBackground variant is deprecated. Please use `static-color="white"` instead.'; + + expect(consoleStub).to.be.calledOnce; + expect(warning.includes(expectedContent)).to.be.true; + + // Check that the staticColor is set to white + expect(el.staticColor).to.equal('white'); + expect(el.hasAttribute('static-color')).to.be.true; + expect(el.getAttribute('static-color')).to.equal('white'); + }); + }); }); From 3d6f6786b6501bd2407bd20147eca3f286bba07b Mon Sep 17 00:00:00 2001 From: castastrophe Date: Wed, 23 Apr 2025 13:26:50 -0400 Subject: [PATCH 4/4] docs(button): update clear-button details --- .changeset/hot-cups-report.md | 15 +++++++++++++-- packages/button/clear-button.md | 16 ++++++++++++++++ packages/button/src/ClearButton.ts | 3 +++ packages/button/test/clear-button.test.ts | 12 ++++++------ 4 files changed, 38 insertions(+), 8 deletions(-) diff --git a/.changeset/hot-cups-report.md b/.changeset/hot-cups-report.md index c07c4810f6..f8c246248e 100644 --- a/.changeset/hot-cups-report.md +++ b/.changeset/hot-cups-report.md @@ -1,6 +1,17 @@ --- -'@spectrum-web-components/clear-button': patch +'@spectrum-web-components/button': minor +'@spectrum-web-components/clear-button': minor '@spectrum-web-components/styles': patch --- -More details forthcoming +Clear button styles have been updated to the latest Spectrum CSS version of the clear button. + +As the updated styles now offer additional styling options, we have added the following API to the clear button: + +- `quiet` - when set to true, the button will be rendered as a quiet button. This is useful for cases where you want to use the clear button in a more subtle way. +- `disabled` - when set to true, the button will be rendered as a disabled button. +- `static-color` - currently this only supports the `white` context color. This is useful for cases where the button appears on a dark background texture. This is a replacement for the previously used `variant="overBackground"` attribute which is deprecated. + +### Deprecation + +The `variant="overBackground"` attribute is deprecated; please use the new `static-color="white"` attribute instead. When this property is used in the component, a deprecation warning will be shown in the console when in debug mode. The `variant` attribute will be removed in a future release. diff --git a/packages/button/clear-button.md b/packages/button/clear-button.md index 54d86a9d0e..4a8ec9fa3b 100644 --- a/packages/button/clear-button.md +++ b/packages/button/clear-button.md @@ -94,6 +94,22 @@ The label for an `` element can be set via it's default slot or +#### Quiet + +The `quiet` attribute will render the `` as a quiet button. This is useful for cases where you want to use the clear button in a more subtle way. + +```html + +``` + +#### Static color + +The `static-color` attribute will render the `` with a static color. This is useful for cases where the button appears on a dark background texture. This is a replacement for the previously used `variant="overBackground"` attribute which is deprecated. + +```html + +``` + ### States In addition to the variant, the `` elements supports a disabled state, which can be applied by adding the attribute `disabled`. diff --git a/packages/button/src/ClearButton.ts b/packages/button/src/ClearButton.ts index 655773b7ad..01d80d1ae1 100644 --- a/packages/button/src/ClearButton.ts +++ b/packages/button/src/ClearButton.ts @@ -64,6 +64,9 @@ export class ClearButton extends SizedMixin(StyledButton, { return [...super.styles, buttonStyles, crossMediumStyles]; } + @property({ type: Boolean, reflect: true }) + public quiet = false; + /** * The visual variant to apply to this button. * @deprecated Use `static-color='white'` instead. diff --git a/packages/button/test/clear-button.test.ts b/packages/button/test/clear-button.test.ts index cbc5b4d403..3aa6b10b3b 100644 --- a/packages/button/test/clear-button.test.ts +++ b/packages/button/test/clear-button.test.ts @@ -13,15 +13,15 @@ governing permissions and limitations under the License. import '@spectrum-web-components/button/sp-clear-button.js'; import { ClearButton } from '@spectrum-web-components/button'; import { ElementSize } from '@spectrum-web-components/base'; -import { expect, fixture, html } from '@open-wc/testing'; +import { elementUpdated, expect, fixture, html } from '@open-wc/testing'; import { testForLitDevWarnings } from '../../../test/testing-helpers'; +import { SinonStub, stub } from 'sinon'; describe('Clear Button', () => { - testForLitDevWarnings( - async () => - await fixture(html` - - `) + testForLitDevWarnings(async () => + fixture(html` + + `) ); (['s', 'm', 'l', 'xl'] as ElementSize[]).map((size) => { it(`loads - ${size}`, async () => {