fix(slider): simplify application of the gradient backgrounds

adobe · Sep 16, 2020 · f96a97e · f96a97e
1 parent 1878ca3
commit f96a97e
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 17 deletions.
diff --git a/packages/slider/src/Slider.ts b/packages/slider/src/Slider.ts
@@ -172,7 +172,7 @@ export class Slider extends Focusable {
             <div
                 class="track"
                 id="track-left"
-                style=${this.trackLeftStyle}
+                style=${this.trackStartClipPath}
                 role="presentation"
             ></div>
         `;
@@ -186,7 +186,7 @@ export class Slider extends Focusable {
             <div
                 class="track"
                 id="track-right"
-                style=${this.trackRightStyle}
+                style=${this.trackEndClipPath}
                 role="presentation"
             ></div>
         `;
@@ -274,16 +274,14 @@ export class Slider extends Focusable {
 
     private renderTrack(): TemplateResult {
         return html`
-            <div id="controls"
+            <div
+                id="controls"
                 @pointerdown=${this.onTrackPointerDown}
                 @mousedown=${this.onTrackMouseDown}
             >
-                ${this.renderTrackLeft()}
-                ${this.renderRamp()}
-                ${this.renderTicks()}
-                ${this.renderHandle()}
+                ${this.renderTrackLeft()} ${this.renderRamp()}
+                ${this.renderTicks()} ${this.renderHandle()}
                 ${this.renderTrackRight()}
-                </div>
             </div>
         `;
     }
@@ -478,18 +476,62 @@ export class Slider extends Focusable {
         return progress / range;
     }
 
-    private get trackLeftStyle(): string {
-        return `width: ${this.trackProgress * 100}%`;
+    private get trackStartClipPath(): string {
+        return this.isLTR ? this.trackLeftClipPath : this.trackRightClipPath;
+    }
+
+    private get trackEndClipPath(): string {
+        return this.isLTR ? this.trackRightClipPath : this.trackLeftClipPath;
     }
 
-    private get trackRightStyle(): string {
-        const width = `width: ${(1 - this.trackProgress) * 100}%;`;
-        const halfHandleWidth = `var(--spectrum-slider-handle-width, var(--spectrum-global-dimension-size-200)) / 2`;
-        const offset = `${this.isLTR ? 'left' : 'right'}: calc(${
-            this.trackProgress * 100
-        }% + ${halfHandleWidth})`;
+    /**
+     * The track that appears on the left, regardless of text direction.
+     */
+    private get trackLeftClipPath(): string {
+        const movingX = `calc(
+            ${
+                this.isLTR
+                    ? this.trackProgress * 100
+                    : 100 - this.trackProgress * 100
+            }% -
+            var(
+                --spectrum-slider-handle-gap,
+                var(
+                    --spectrum-alias-border-size-thicker
+                )
+            )
+        )`;
+        return `clip-path: polygon(
+            0 0,
+            ${movingX} 0,
+            ${movingX} 100%,
+            0 100%
+        );`;
+    }
 
-        return width + offset;
+    /**
+     * The track that appears on the right, regardless of text direction.
+     */
+    private get trackRightClipPath(): string {
+        const movingX = `calc(
+            ${
+                this.isLTR
+                    ? this.trackProgress * 100
+                    : 100 - this.trackProgress * 100
+            }% +
+            var(
+                --spectrum-slider-handle-gap,
+                var(
+                    --spectrum-alias-border-size-thicker
+                )
+            )
+        )`;
+        return `clip-path: polygon(
+            ${movingX} 0,
+            100% 0,
+            100% 100%,
+            ${movingX} 100%
+        );`;
     }
 
     private get handleStyle(): string {

diff --git a/packages/slider/src/slider.css b/packages/slider/src/slider.css
@@ -21,6 +21,10 @@ governing permissions and limitations under the License.
     outline-width: 0;
 }
 
+.track {
+    width: 100%;
+}
+
 /* 
  * Placeholder gradient for color variant with alpha on. In the long run, the gradient
  * should be produced programatically 

diff --git a/packages/slider/stories/slider.stories.ts b/packages/slider/stories/slider.stories.ts
@@ -39,6 +39,28 @@ export const Default = (): TemplateResult => {
     `;
 };
 
+export const Gradient = (): TemplateResult => {
+    const handleEvent = (event: Event): void => {
+        const target = event.target as Slider;
+        action(event.type)(target.value);
+    };
+    return html`
+        <div
+            style="width: 500px; margin: 12px 20px;--spectrum-slider-track-color:linear-gradient(to right, red, green 100%);"
+        >
+            <sp-slider
+                label="Opacity"
+                max="100"
+                min="0"
+                value="50"
+                id="opacity-slider"
+                @input=${handleEvent}
+                @change=${handleEvent}
+            ></sp-slider>
+        </div>
+    `;
+};
+
 export const Disabled = (): TemplateResult => {
     const label = text('Label', 'Intensity');
     return html`

diff --git a/test/visual/stories.js b/test/visual/stories.js
@@ -164,6 +164,7 @@ module.exports = [
     'sidenav--levels-and-disabled',
     'sidenav--hrefs',
     'slider--default',
+    'slider--gradient',
     'slider--disabled',
     'slider--color',
     'slider--color-with-alpha',