chore: slider default slot deprecation warning

adobe · Feb 25, 2025 · eca1949 · eca1949
1 parent d01a2d6
commit eca1949
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 1 deletion.
diff --git a/packages/slider/src/Slider.ts b/packages/slider/src/Slider.ts
@@ -44,7 +44,7 @@ export const variants = ['filled', 'ramp', 'range', 'tick'];
 /**
  * @element sp-slider
  *
- * @slot - text label for the Slider
+ * @slot - @deprecated Text label for the Slider. Use the `label` property instead.
  * @slot handle - optionally accepts two or more sp-slider-handle elements
  */
 export class Slider extends SizedMixin(ObserveSlotText(SliderHandle, ''), {
@@ -231,6 +231,16 @@ export class Slider extends SizedMixin(ObserveSlotText(SliderHandle, ''), {
     public override connectedCallback(): void {
         super.connectedCallback();
         this.handleController.hostConnected();
+
+        // Deprecation warning for default slot when content is provided
+        if (window.__swc.DEBUG && this.textContent?.trim()) {
+            window.__swc.warn(
+                this,
+                `The default slot for text label in <${this.localName}> has been deprecated and will be removed in a future release. Use the "label" property instead.`,
+                'https://opensource.adobe.com/spectrum-web-components/components/slider/',
+                { level: 'deprecation' }
+            );
+        }
     }
 
     public override disconnectedCallback(): void {

diff --git a/packages/slider/test/slider.test.ts b/packages/slider/test/slider.test.ts
@@ -1820,4 +1820,34 @@ describe('Slider', () => {
         // now the overlay should be closed
         expect(overlay.open).to.be.false;
     });
+
+    it('warns in Dev Mode when using the default slot for text labels', async () => {
+        const consoleWarnStub = stub(console, 'warn');
+        window.__swc.issuedWarnings = new Set<BrandedSWCWarningID>();
+        const el = await fixture<Slider>(html`
+            <sp-slider min="0" max="100" value="50">
+                This is a deprecated text label
+            </sp-slider>
+        `);
+
+        await elementUpdated(el);
+
+        expect(consoleWarnStub.called).to.be.true;
+        const spyCall = consoleWarnStub.getCall(0);
+        expect(
+            spyCall.args.at(0).includes('default slot'),
+            'confirm "default slot" in message'
+        ).to.be.true;
+        expect(
+            spyCall.args.at(0).includes('deprecated'),
+            'confirm "deprecated" in message'
+        ).to.be.true;
+        expect(spyCall.args.at(-1), 'confirm `data` shape').to.deep.equal({
+            data: {
+                localName: 'sp-slider',
+                level: 'deprecation',
+            },
+        });
+        consoleWarnStub.restore();
+    });
 });