feat(slider): use latest @spectrum-css/slider beta

MIGRATION: remove `type="color"` support
adobe · Jan 4, 2021 · 9f29bbe · 9f29bbe
1 parent b5d5718
commit 9f29bbe
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 648 deletions.
diff --git a/packages/slider/package.json b/packages/slider/package.json
@@ -48,7 +48,7 @@
     "author": "",
     "license": "Apache-2.0",
     "devDependencies": {
-        "@spectrum-css/slider": "^3.0.0-beta.2"
+        "@spectrum-css/slider": "^3.0.0-beta.3"
     },
     "dependencies": {
         "@spectrum-web-components/base": "^0.1.3",

diff --git a/packages/slider/src/Slider.ts b/packages/slider/src/Slider.ts
@@ -25,7 +25,7 @@ import sliderStyles from './slider.css.js';
 import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
 import { StyleInfo } from 'lit-html/directives/style-map';
 
-export const variants = ['color', 'filled', 'ramp', 'range', 'tick'];
+export const variants = ['filled', 'ramp', 'range', 'tick'];
 
 export class Slider extends Focusable {
     public static get styles(): CSSResultArray {
@@ -132,15 +132,12 @@ export class Slider extends Focusable {
     private boundingClientRect?: DOMRect;
 
     public get focusElement(): HTMLElement {
-        return this.input ? this.input : this;
+        return this.input;
     }
 
     protected render(): TemplateResult {
         return html`
-            ${this.renderLabel()}
-            ${this.variant === 'color'
-                ? this.renderColorTrack()
-                : this.renderTrack()}
+            ${this.renderLabel()} ${this.renderTrack()}
         `;
     }
 
@@ -288,15 +285,6 @@ export class Slider extends Focusable {
         `;
     }
 
-    private renderColorTrack(): TemplateResult {
-        return html`
-            <div id="controls" @pointerdown=${this.onTrackPointerDown}>
-                <div class="track"></div>
-                ${this.renderHandle()}
-            </div>
-        `;
-    }
-
     private onPointerDown(event: PointerEvent): void {
         if (this.disabled) {
             return;