test(button): update clear-button dev mode test

Author: castastrophe

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.

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');
+        });
+    });
 });