[RangeSlider] Add magic tone

.changeset/slow-eagles-walk.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+- Added `tone` prop with `magic` value to `RangeSlider`

polaris-react/src/components/RangeSlider/RangeSlider.stories.tsx

@@ -31,6 +31,27 @@ export function Default() {
   );
 }
 
+export function Magic() {
+  const [rangeValue, setRangeValue] = useState(32);
+
+  const handleRangeSliderChange = useCallback(
+    (value) => setRangeValue(value),
+    [],
+  );
+
+  return (
+    <LegacyCard sectioned title="Background color">
+      <RangeSlider
+        label="Opacity percentage"
+        value={rangeValue}
+        onChange={handleRangeSliderChange}
+        output
+        tone="magic"
+      />
+    </LegacyCard>
+  );
+}
+
 export function WithMinAndMax() {
   const [rangeValue, setRangeValue] = useState(0);
 

polaris-react/src/components/RangeSlider/components/DualThumb/DualThumb.module.scss

@@ -72,6 +72,24 @@ $range-wrapper: 28px;
     // stylelint-enable
   }
 
+  .toneMagic & {
+    // stylelint-disable -- Polaris component custom properties
+    --pc-dual-thumb-selected-range: var(--p-color-bg-fill-magic);
+    --pc-dual-thumb-gradient-colors: var(--pc-dual-thumb-unselected-range) 0%,
+      var(--pc-dual-thumb-unselected-range)
+        var(--pc-range-slider-progress-lower),
+      var(--pc-dual-thumb-selected-range) var(--pc-range-slider-progress-lower),
+      var(--pc-dual-thumb-selected-range) var(--pc-range-slider-progress-upper),
+      var(--pc-dual-thumb-unselected-range)
+        var(--pc-range-slider-progress-upper),
+      var(--pc-dual-thumb-unselected-range) 100%;
+    background-image: linear-gradient(
+      to right,
+      var(--pc-dual-thumb-gradient-colors)
+    );
+    // stylelint-enable
+  }
+
   .disabled & {
     background: var(--p-color-border-disabled) none;
   }
@@ -127,6 +145,14 @@ $range-wrapper: 28px;
       var(--p-color-bg-fill-critical)
     );
   }
+
+  .toneMagic & {
+    border-color: var(--p-color-bg-fill-magic);
+    background: linear-gradient(
+      var(--p-color-bg-fill-magic),
+      var(--p-color-bg-fill-magic)
+    );
+  }
 }
 
 $range-output-size: 32px;

polaris-react/src/components/RangeSlider/components/DualThumb/DualThumb.tsx

@@ -1,7 +1,7 @@
 import React, {Component, createRef} from 'react';
 
 import {debounce} from '../../../../utilities/debounce';
-import {classNames} from '../../../../utilities/css';
+import {classNames, variationName} from '../../../../utilities/css';
 import {FeaturesContext} from '../../../../utilities/features';
 import type {RangeSliderProps, DualValue} from '../../types';
 import {Labelled, labelID} from '../../../Labelled';
@@ -137,6 +137,7 @@ export class DualThumb extends Component<DualThumbProps, State> {
       labelAction,
       labelHidden,
       helpText,
+      tone,
     } = this.props;
     const {value} = this.state;
 
@@ -157,6 +158,7 @@ export class DualThumb extends Component<DualThumbProps, State> {
       styles.TrackWrapper,
       error && styles.error,
       disabled && styles.disabled,
+      tone && styles[variationName('tone', tone)],
     );
 
     const thumbLowerClassName = classNames(

polaris-react/src/components/RangeSlider/components/SingleThumb/SingleThumb.module.scss

@@ -219,6 +219,17 @@
     }
   }
 
+  .toneMagic & {
+    // stylelint-disable -- Polaris component custom properties
+    --pc-single-thumb-progress-lower: var(--p-color-bg-fill-magic);
+
+    @include range-thumb-selectors {
+      border-color: var(--p-color-bg-fill-magic);
+      background: var(--p-color-bg-fill-magic);
+    }
+    // stylelint-enable
+  }
+
   .disabled & {
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     @include range-track-selectors {

polaris-react/src/components/RangeSlider/components/SingleThumb/SingleThumb.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {classNames} from '../../../../utilities/css';
+import {classNames, variationName} from '../../../../utilities/css';
 import {clamp} from '../../../../utilities/clamp';
 import {Labelled, helpTextID} from '../../../Labelled';
 import {Text} from '../../../Text';
@@ -36,6 +36,7 @@ export function SingleThumb(props: SingleThumbProps) {
     step,
     onBlur,
     onFocus,
+    tone,
   } = props;
   const clampedValue = clamp(value, min, max);
   const describedBy: string[] = [];
@@ -82,6 +83,7 @@ export function SingleThumb(props: SingleThumbProps) {
     sharedStyles.RangeSlider,
     error && styles.error,
     disabled && styles.disabled,
+    tone && styles[variationName('tone', tone)],
   );
 
   /* eslint-disable @shopify/react-require-autocomplete */

polaris-react/src/components/RangeSlider/types.ts

@@ -40,4 +40,6 @@ export interface RangeSliderProps {
   onFocus?(): void;
   /** Callback when focus is removed */
   onBlur?(): void;
+  /** Indicates the tone of the range input */
+  tone?: 'magic';
 }