From 3f3d1cebe65b47153d19e6de8af48a6c6c553962 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 13189584aaa..3d8b1c787d6 100644 --- a/packages/clear-button/src/clear-button-overrides.css +++ b/packages/clear-button/src/clear-button-overrides.css @@ -15,52 +15,10 @@ --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 912e76ccc78..de9cdfeb2b9 100644 --- a/packages/clear-button/src/spectrum-clear-button.css +++ b/packages/clear-button/src/spectrum-clear-button.css @@ -11,10 +11,15 @@ */ :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)); @@ -23,47 +28,84 @@ 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 { @@ -76,7 +118,8 @@ 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 2ab1aa83de3..719be44a5ae 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 a5bde1ea167..66fbf99c3f3 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 2a1ab6eb9c9..c075e7ab1a3 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 3a7b9fcab0219c8180e119c80060548fc3c4e1a9 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 00000000000..c07c4810f67 --- /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 2a13c10f25a..c5cff74d15e 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 3d8b1c787d6..d916463a111 100644 --- a/packages/clear-button/src/clear-button-overrides.css +++ b/packages/clear-button/src/clear-button-overrides.css @@ -17,7 +17,7 @@ --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 de9cdfeb2b9..730f89def5a 100644 --- a/packages/clear-button/src/spectrum-clear-button.css +++ b/packages/clear-button/src/spectrum-clear-button.css @@ -43,14 +43,14 @@ --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); @@ -59,7 +59,6 @@ --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); @@ -77,11 +76,11 @@ } @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)); } } @@ -104,7 +103,7 @@ background-color: var(--mod-clear-button-background-color-key-focus, var(--spectrum-clear-button-background-color-key-focus)); } -.spectrum-ClearButton-icon { +.icon { color: inherit; } @@ -119,7 +118,7 @@ } :host([variant="overBackground"]:focus-visible), -.spectrum-ClearButton--staticWhite:focus-visible { +:host([static-color="white"]:focus-visible) { outline: none; } From 4cb6376df715c68264fe35f8ba11eeb298852e9a 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 c5cff74d15e..e0c22ba1658 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 288a80654e3..f6249c5cfb9 100644 --- a/packages/button/test/clear-button.test.ts +++ b/packages/button/test/clear-button.test.ts @@ -12,40 +12,60 @@ 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 8067e22343322a945fb46b27e5f4cd41df7b6257 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 | 10 +- packages/button/test/clear-button.test.ts | 32 ++-- .../src/clear-button-overrides.css | 12 -- packages/clear-button/src/clear-button.css | 141 +++++++++++++++++- .../src/spectrum-clear-button.css | 129 ---------------- 7 files changed, 197 insertions(+), 158 deletions(-) delete mode 100644 packages/clear-button/src/spectrum-clear-button.css diff --git a/.changeset/hot-cups-report.md b/.changeset/hot-cups-report.md index c07c4810f67..f8c246248e7 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 f83924c4237..722e4a36518 100644 --- a/packages/button/clear-button.md +++ b/packages/button/clear-button.md @@ -93,6 +93,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 e0c22ba1658..aeb75dced10 100644 --- a/packages/button/src/ClearButton.ts +++ b/packages/button/src/ClearButton.ts @@ -64,16 +64,21 @@ 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. */ @property({ reflect: true }) public set variant(variant: 'overBackground' | undefined) { - const oldValue = this.variant; + const oldValue = this._variant; + const oldStaticColor = this.staticColor; if (variant !== 'overBackground') { this.removeAttribute('variant'); this._variant = undefined; + this.staticColor = undefined; return; } @@ -92,6 +97,7 @@ export class ClearButton extends SizedMixin(StyledButton, { } this.requestUpdate('variant', oldValue); + this.requestUpdate('staticColor', oldStaticColor); } public get variant(): 'overBackground' | undefined { @@ -103,7 +109,7 @@ export class ClearButton extends SizedMixin(StyledButton, { /** * The visual variant to apply to this button. */ - @property({ reflect: true }) + @property({ reflect: true, attribute: 'static-color' }) public staticColor: 'white' | undefined; protected override get buttonContent(): TemplateResult[] { diff --git a/packages/button/test/clear-button.test.ts b/packages/button/test/clear-button.test.ts index f6249c5cfb9..11d68dfebf6 100644 --- a/packages/button/test/clear-button.test.ts +++ b/packages/button/test/clear-button.test.ts @@ -13,15 +13,15 @@ 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 () => { @@ -32,6 +32,21 @@ describe('Clear Button', () => { await expect(el).to.be.accessible(); }); }); + it(`loads static-color="white" when variant="overBackground"`, async () => { + const el = await fixture(html` + + `); + + await elementUpdated(el); + + // 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'); + }); describe('dev mode', () => { let consoleStub: SinonStub; @@ -61,11 +76,6 @@ describe('Clear Button', () => { 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'); }); }); }); diff --git a/packages/clear-button/src/clear-button-overrides.css b/packages/clear-button/src/clear-button-overrides.css index d916463a111..bd495cf4530 100644 --- a/packages/clear-button/src/clear-button-overrides.css +++ b/packages/clear-button/src/clear-button-overrides.css @@ -10,15 +10,3 @@ * governing permissions and limitations under the License. */ -:host { - --spectrum-clear-button-background-color: var(--system-clear-button-background-color); - --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); -} - -: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/clear-button.css b/packages/clear-button/src/clear-button.css index 53c4706cea9..ed5ddbe7d87 100644 --- a/packages/clear-button/src/clear-button.css +++ b/packages/clear-button/src/clear-button.css @@ -10,9 +10,146 @@ * governing permissions and limitations under the License. */ -@import url("./spectrum-clear-button.css"); -@import url("./clear-button-overrides.css"); +:host { + --spectrum-clear-button-background-color: var(--system-clear-button-background-color); + --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); +} + +: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); +} :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); + box-sizing: border-box; + block-size: var(--mod-clear-button-height, var(--spectrum-clear-button-height)); + inline-size: var(--mod-clear-button-width, var(--spectrum-clear-button-width)); + 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)); + border: none; + border-radius: 100%; + 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([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([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); + --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)), +:host(:not([disabled])) { + cursor: pointer; +} + +.icon { + margin-block: 0; + margin-inline: auto; +} + +@media (hover: hover) { + :host(:hover:not(:disabled)), + :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(:hover:not(:disabled)) .fill, + :host(:hover:not([disabled])) .fill { + background-color: var(--mod-clear-button-background-color-hover, var(--spectrum-clear-button-background-color-hover)); + } +} + +:host(:is(:active, [active]):not(:disabled)), +: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]):not(:disabled)), +:host(:is(:active, [active]):not([disabled])) .fill { + background-color: var(--mod-clear-button-background-color-down, var(--spectrum-clear-button-background-color-down)); +} + +:host(:not(:disabled):focus-visible), +:host(:not([disabled]):focus-visible), +:host(:not(:disabled):focus-within), +:host(:not([disabled]):focus-within) { + color: var(--mod-clear-button-icon-color-key-focus, var(--spectrum-clear-button-icon-color-key-focus)); +} + +:host(:not(:disabled):focus-visible) .fill, +:host(:not([disabled]):focus-visible) .fill, +:host(:not(:disabled):focus-within) .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)); +} + +.icon { + color: inherit; +} + +.fill { + background-color: var(--mod-clear-button-background-color, var(--spectrum-clear-button-background-color)); + inline-size: 100%; + block-size: 100%; + border-radius: 100%; + justify-content: center; + align-items: center; + display: flex; +} + +:host([variant="overBackground"]:focus-visible), +:host([static-color="white"]:focus-visible) { + outline: none; +} + +@media (forced-colors: active) { + :host(:not(:disabled)), + :host(:not([disabled])) { + --highcontrast-clear-button-icon-color-hover: Highlight; + } } diff --git a/packages/clear-button/src/spectrum-clear-button.css b/packages/clear-button/src/spectrum-clear-button.css deleted file mode 100644 index 730f89def5a..00000000000 --- a/packages/clear-button/src/spectrum-clear-button.css +++ /dev/null @@ -1,129 +0,0 @@ -/** - * Copyright 2025 Adobe. All rights reserved. - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -: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)); - 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)); - border: none; - border-radius: 100%; - 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([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([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); - --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]) { - --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):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(:hover):not(:disabled) .fill { - background-color: var(--mod-clear-button-background-color-hover, var(--spectrum-clear-button-background-color-hover)); - } -} - -: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])):not(:disabled) .fill { - background-color: var(--mod-clear-button-background-color-down, var(--spectrum-clear-button-background-color-down)); -} - -: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: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)); -} - -.icon { - color: inherit; -} - -.fill { - background-color: var(--mod-clear-button-background-color, var(--spectrum-clear-button-background-color)); - inline-size: 100%; - block-size: 100%; - border-radius: 100%; - justify-content: center; - align-items: center; - display: flex; -} - -:host([variant="overBackground"]:focus-visible), -:host([static-color="white"]:focus-visible) { - outline: none; -} - -@media (forced-colors: active) { - :host:not(:disabled) { - --highcontrast-clear-button-icon-color-hover: Highlight; - } -}