Merge pull request #217 from mapbox/control-range-styles

control range styles
mapbox · Oct 5, 2023 · af340ff · af340ff
2 parents 5221ac1 + 8f5b170
commit af340ff
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 2 deletions.
diff --git a/src/components/control-range/__snapshots__/control-range.test.tsx.snap b/src/components/control-range/__snapshots__/control-range.test.tsx.snap
@@ -41,6 +41,7 @@ exports[`ControlRange all options renders 1`] = `
           style="--radix-slider-thumb-transform: translateX(-50%);"
         >
           <span
+            class=""
             data-orientation="horizontal"
           >
             <span
@@ -58,6 +59,7 @@ exports[`ControlRange all options renders 1`] = `
               aria-valuemax="1000"
               aria-valuemin="100"
               aria-valuenow="200"
+              class=""
               data-orientation="horizontal"
               data-radix-collection-item=""
               role="slider"
@@ -74,6 +76,7 @@ exports[`ControlRange all options renders 1`] = `
               aria-valuemax="1000"
               aria-valuemin="100"
               aria-valuenow="400"
+              class=""
               data-orientation="horizontal"
               data-radix-collection-item=""
               role="slider"
@@ -90,6 +93,7 @@ exports[`ControlRange all options renders 1`] = `
               aria-valuemax="1000"
               aria-valuemin="100"
               aria-valuenow="600"
+              class=""
               data-orientation="horizontal"
               data-radix-collection-item=""
               role="slider"
@@ -134,6 +138,7 @@ exports[`ControlRange basic renders 1`] = `
           style="--radix-slider-thumb-transform: translateX(-50%);"
         >
           <span
+            class=""
             data-orientation="horizontal"
           >
             <span
@@ -172,6 +177,7 @@ exports[`ControlRange disabled renders 1`] = `
           style="--radix-slider-thumb-transform: translateX(-50%);"
         >
           <span
+            class=""
             data-disabled=""
             data-orientation="horizontal"
           >

diff --git a/src/components/control-range/control-range.tsx b/src/components/control-range/control-range.tsx
@@ -35,6 +35,8 @@ interface Props extends Omit<InputProps, 'value' | 'onChange'>{
   validationError?: ReactNode;
   themeControlRange?: string;
   themeControlRangeActive?: string;
+  themeControlTrack?: string;
+  themeControlThumb?: string;
   themeControlWrapper?: string;
   themeLabel?: string;
 }
@@ -50,6 +52,8 @@ export default function ControlRange({
   validationError,
   themeControlRange = 'range--s range--gray w-full h-full',
   themeControlRangeActive,
+  themeControlTrack = '',
+  themeControlThumb = '',
   themeControlWrapper,
   themeLabel,
   ...props
@@ -72,7 +76,7 @@ export default function ControlRange({
   }
 
   const renderThumb = (value: number, index: number) => {
-    return <SliderPrimitive.Thumb key={index} />
+    return <SliderPrimitive.Thumb key={index} className={`${themeControlThumb}`} />
   };
 
   return (
@@ -92,7 +96,7 @@ export default function ControlRange({
       )}
       <div className={`range ${themeControlRange}`}>
         <SliderPrimitive.Root {...rootProps}>
-          <SliderPrimitive.Track>
+          <SliderPrimitive.Track className={`${themeControlTrack}`}>
             <SliderPrimitive.Range className={`absolute h-full ${themeControlRangeActive}`}/>
           </SliderPrimitive.Track>
           {value.map(renderThumb)}
@@ -123,6 +127,10 @@ ControlRange.propTypes = {
   themeControlRange: PropTypes.string,
   /** Assembly classes to apply to the active part of the range track */
   themeControlRangeActive: PropTypes.string,
+  /** Assembly classes to apply to the track element */
+  themeControlTrack: PropTypes.string,
+  /** Assembly classes to apply to the thumb element */
+  themeControlThumb: PropTypes.string,
   /** Assembly classes to apply to the control wrapper */
   themeControlWrapper: PropTypes.string,
   /** Assembly classes to apply to the label element */

diff --git a/src/components/control-range/examples/control-range-example-style.tsx b/src/components/control-range/examples/control-range-example-style.tsx
@@ -0,0 +1,24 @@
+/*
+Additional Style Options
+*/
+import React, { useState } from 'react';
+import ControlRange from '../control-range';
+
+export default function Example() {
+  const [value, setValue] = useState([25]);
+  return (
+    <ControlRange
+      id="name"
+      optional={true}
+      value={[...value]}
+      min={10}
+      max={100}
+      step={1}
+      onChange={setValue}
+      tooltip={true}
+      themeControlRangeActive='bg-blue round'
+      themeControlTrack='bg-gray h3'
+      themeControlThumb='bg-blue border--0 h12 w12 shadow-darken25'
+    />
+  );
+}
diff --git a/src/components/form/__snapshots__/form.test.tsx.snap b/src/components/form/__snapshots__/form.test.tsx.snap
@@ -310,6 +310,7 @@ exports[`Form all controls renders as expected 1`] = `
                     style="--radix-slider-thumb-transform: translateX(-50%);"
                   >
                     <span
+                      class=""
                       data-orientation="horizontal"
                     >
                       <span
@@ -326,6 +327,7 @@ exports[`Form all controls renders as expected 1`] = `
                         aria-valuemax="100"
                         aria-valuemin="10"
                         aria-valuenow="10"
+                        class=""
                         data-orientation="horizontal"
                         data-radix-collection-item=""
                         role="slider"