chore: update dependency @spectrum-css/clearbutton to v7.2.0

.changeset/hot-cups-report.md

@@ -0,0 +1,17 @@
+---
+'@spectrum-web-components/button': patch
+'@spectrum-web-components/clear-button': patch
+'@spectrum-web-components/styles': patch
+---
+
+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.

packages/button/clear-button.md

@@ -94,6 +94,22 @@ The label for an `<sp-clear-button>` element can be set via it's default slot or
 </sp-tab-panel>
 </sp-tabs>
 
+#### Quiet
+
+The `quiet` attribute will render the `<sp-clear-button>` as a quiet button. This is useful for cases where you want to use the clear button in a more subtle way.
+
+```html
+<sp-clear-button quiet label="Clear content"></sp-clear-button>
+```
+
+#### Static color
+
+The `static-color` attribute will render the `<sp-clear-button>` 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
+<sp-clear-button static-color="white" label="Clear content"></sp-clear-button>
+```
+
 ### States
 
 In addition to the variant, the `<sp-clear-button>` elements supports a disabled state, which can be applied by adding the attribute `disabled`.

packages/button/src/ClearButton.ts

@@ -64,11 +64,53 @@ export class ClearButton extends SizedMixin(StyledButton, {
         return [...super.styles, buttonStyles, crossMediumStyles];
     }
 
+    @property({ type: Boolean, reflect: true })
+    public quiet = false;
+
+    @property({ type: Boolean, reflect: true })
+    public disabled = 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;
+        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.
      */
     @property({ reflect: true })
-    public variant: 'overBackground' | '' = '';
+    public staticColor: 'white' | undefined;
 
     protected override get buttonContent(): TemplateResult[] {
         return [crossIcon[this.size]()];

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<ClearButton>(
-                html`
-                    <sp-clear-button size="m" label="Clear"></sp-clear-button>
-                `
-            )
+            await fixture<ClearButton>(html`
+                <sp-clear-button size="m" label="Clear"></sp-clear-button>
+            `)
     );
-    (
-        ['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<ClearButton>(
-                html`
-                    <sp-clear-button
-                        size=${size}
-                        label="Clear"
-                    ></sp-clear-button>
-                `
-            );
+            const el = await fixture<ClearButton>(html`
+                <sp-clear-button size=${size} label="Clear"></sp-clear-button>
+            `);
 
             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<ClearButton>(html`
+                <sp-clear-button
+                    label="Clear"
+                    variant="overBackground"
+                ></sp-clear-button>
+            `);
+
+            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');
+        });
+    });
 });

packages/clear-button/package.json

@@ -52,7 +52,7 @@
         "@spectrum-web-components/base": "1.5.0"
     },
     "devDependencies": {
-        "@spectrum-css/clearbutton": "7.0.0-s2-foundations.16"
+        "@spectrum-css/clearbutton": "7.2.0"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",

packages/clear-button/src/clear-button-overrides.css

@@ -24,90 +24,16 @@ governing permissions and limitations under the License.
     --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
-    );
+:host([static-color='white']) {
     --spectrum-clear-button-background-color-hover: var(
-        --system-clear-button-over-background-background-color-hover
+        --system-clear-button-static-white-background-color-hover
     );
     --spectrum-clear-button-background-color-down: var(
-        --system-clear-button-over-background-background-color-down
+        --system-clear-button-static-white-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
+        --system-clear-button-static-white-background-color-key-focus
     );
 }