feat(button,clear-button): updated styles and deprecated overBackground variant [SWC-860] - abandoned

.changeset/hot-cups-report.md

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

@@ -93,6 +93,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;
+
     /**
      * The visual variant to apply to this button.
+     * @deprecated Use `static-color='white'` instead.
      */
     @property({ reflect: true })
-    public variant: 'overBackground' | '' = '';
+    public set variant(variant: 'overBackground' | undefined) {
+        const oldValue = this._variant;
+        const oldStaticColor = this.staticColor;
+        if (variant !== 'overBackground') {
+            this.removeAttribute('variant');
+            this._variant = undefined;
+            this.staticColor = 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);
+        this.requestUpdate('staticColor', oldStaticColor);
+    }
+
+    public get variant(): 'overBackground' | undefined {
+        return this._variant;
+    }
+
+    private _variant: 'overBackground' | undefined;
+
+    /**
+     * The visual variant to apply to this button.
+     */
+    @property({ reflect: true, attribute: 'static-color' })
+    public staticColor: 'white' | undefined;
 
     protected override get buttonContent(): TemplateResult[] {
         return [crossIcon[this.size]()];

packages/button/test/clear-button.test.ts

@@ -12,40 +12,70 @@
 
 import '@spectrum-web-components/button/sp-clear-button.js';
 import { ClearButton } from '@spectrum-web-components/button';
-import { expect, fixture, html } from '@open-wc/testing';
+import { ElementSize } from '@spectrum-web-components/base';
+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<ClearButton>(
-                html`
-                    <sp-clear-button size="m" label="Clear"></sp-clear-button>
-                `
-            )
+    testForLitDevWarnings(async () =>
+        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();
         });
     });
+    it(`loads static-color="white" when variant="overBackground"`, async () => {
+        const el = await fixture<ClearButton>(html`
+            <sp-clear-button
+                label="Clear"
+                variant="overBackground"
+            ></sp-clear-button>
+        `);
+
+        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;
+        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;
+        });
+    });
 });

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

@@ -10,57 +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);
-    --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);
-}