fix: breaking change: slider color variant moved to color slider. (#850)

Author: bernhard-adobe

components/slider/index.css

@@ -47,6 +47,8 @@ governing permissions and limitations under the License.
   --spectrum-slider-color-track-margin-left: 0;
   --spectrum-slider-color-track-margin-right: 0;
   --spectrum-slider-color-handle-top: 50%;
+  
+  --spectrum-slider-ramp-margin-top: 0;
 
   --spectrum-slider-range-track-reset: 0;
   --spectrum-label-text-size: var(--spectrum-global-dimension-font-size-75);
@@ -176,6 +178,24 @@ governing permissions and limitations under the License.
   }
 }
 
+.spectrum-Slider-ramp {
+  margin-block-start: var(--spectrum-slider-ramp-margin-top);
+  block-size: var(--spectrum-slider-ramp-track-height);
+
+  position: absolute;
+  inset-inline-start: var(--spectrum-slider-track-margin-offset);
+  inset-inline-end: var(--spectrum-slider-track-margin-offset);
+  inset-block-start: calc(var(--spectrum-slider-ramp-track-height) / 2);
+
+  svg {
+    inline-size: 100%;
+    block-size: 100%;
+
+    /* Flip the ramp automatically for RTL */
+    transform: logical rotate(0deg);
+  }
+}
+
 .spectrum-Slider-handle {
   position: absolute;
   inset-inline-start: 0;
@@ -368,6 +388,7 @@ governing permissions and limitations under the License.
   }
 }
 
+
 .spectrum-Slider {
   &.is-disabled {
     cursor: default;
@@ -379,6 +400,7 @@ governing permissions and limitations under the License.
   }
 }
 
+
 .u-isGrabbing {
   cursor: ns-resize;
   cursor: -webkit-grabbing;

components/slider/metadata/slider.yml

@@ -1,5 +1,11 @@
 name: Slider
 SpectrumSiteSlug: https://spectrum.adobe.com/page/slider/
+sections:
+  - name: Migration Guide
+    description: |
+      ### Color Slider moved  out of Sliders into it's own component
+      Color Slider moved to [Color slider](colorslider.html).
+      Replace class names starting with `.spectrum-Slider` to `.spectrum-ColorSlider`.
 examples:
   - id: slider
     name: Standard
@@ -352,45 +358,4 @@ examples:
           </div>
         </div>
       </div>
-  - id: slider-color
-    name: Color
-    status: Deprecated
-    details: A new color slider is forthcoming.
-    description: Spectrum Color slider
-    markup: |
-      <div class="spectrum-Slider spectrum-Slider--color">
-        <div class="spectrum-Slider-labelContainer">
-          <label class="spectrum-Slider-label" id="spectrum-Slider--color-label-0" for="spectrum-Slider--color-input-0">Color</label>
-          <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider--color-label-0">#2680eb</div>
-        </div>
-        <div class="spectrum-Slider-controls">
-          <div class="spectrum-Slider-track" style="background: linear-gradient(to right, rgb(38, 128, 235), rgb(9, 90, 186))"></div>
-          <div class="spectrum-Slider-handle" style="left: 40%;">
-            <input type="range" class="spectrum-Slider-input" value="14" aria-valuetext="#2680eb" step="2" min="10" max="20" id="spectrum-Slider--color-input-0">
-          </div>
-        </div>
-      </div>
-      <div class="spectrum-Slider spectrum-Slider--color">
-        <div class="spectrum-Slider-labelContainer">
-          <label class="spectrum-Slider-label" id="spectrum-Slider--color-label-1" for="spectrum-Slider--color-input-1">Color (showing alpha)</label>
-          <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider--color-label-1">#2680eb</div>
-        </div>
-        <div class="spectrum-Slider-controls">
-          <div class="spectrum-Slider-track" style="background: linear-gradient(to right, rgba(38, 128, 235, .5), rgb(9, 90, 186))"></div>
-          <div class="spectrum-Slider-handle" style="left: 40%;">
-            <input type="range" class="spectrum-Slider-input" value="14" aria-valuetext="#2680eb" step="2" min="10" max="20" id="spectrum-Slider--color-input-1">
-          </div>
-        </div>
-      </div>
-      <div class="spectrum-Slider spectrum-Slider--color is-disabled">
-        <div class="spectrum-Slider-labelContainer">
-          <label class="spectrum-Slider-label" id="spectrum-Slider--color-label-2" for="spectrum-Slider--color-input-2">Color</label>
-          <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider--color-label-2">#2680eb</div>
-        </div>
-        <div class="spectrum-Slider-controls">
-          <div class="spectrum-Slider-track" style="background: linear-gradient(to right, rgba(38, 128, 235, .5), rgb(9, 90, 186))"></div>
-          <div class="spectrum-Slider-handle" style="left: 40%;">
-            <input type="range" class="spectrum-Slider-input" value="14" aria-valuetext="#2680eb" step="2" min="10" max="20" disabled id="spectrum-Slider--color-input-2">
-          </div>
-        </div>
-      </div>
+      

components/slider/skin.css

@@ -52,6 +52,12 @@ governing permissions and limitations under the License.
   }
 }
 
+.spectrum-Slider-ramp {
+  path {
+    fill: var(--spectrum-slider-track-color);
+  }
+}
+
 .spectrum-Slider-handle {
   border-color: var(--spectrum-slider-handle-border-color);
   background: var(--spectrum-slider-handle-background-color);
@@ -75,6 +81,14 @@ governing permissions and limitations under the License.
   }
 }
 
+
+.spectrum-Slider--ramp {
+  .spectrum-Slider-handle {
+    /* We can't draw this one correctly without this hack : ( */
+    box-shadow: 0 0 0 4px var(--spectrum-alias-background-color-default);
+  }
+}
+
 .spectrum-Slider-input {
   background: transparent;
 }
@@ -85,6 +99,7 @@ governing permissions and limitations under the License.
   }
 }
 
+
 .spectrum-Slider-handle {
   &.is-dragged {
     border-color: var(--spectrum-slider-handle-border-color-down);
@@ -102,6 +117,7 @@ governing permissions and limitations under the License.
   }
 }
 
+
 .spectrum-Slider {
   &.is-disabled {
     .spectrum-Slider-labelContainer {
@@ -136,6 +152,13 @@ governing permissions and limitations under the License.
       }
     }
 
+    .spectrum-Slider-ramp {
+      path {
+        fill: var(--spectrum-slider-ramp-track-color-disabled);
+      }
+    }
+
+
     &.spectrum-Slider--range {
       .spectrum-Slider-track {
         &:not(:first-of-type):not(:last-of-type) {