✨ Slider: added hideActiveTrack prop (#3131)

* ✨ Slider: added disableActiveTrack prop * 📸 update snapsot * 🐛 fix disabled hover on range slider * rename prop to HideActiveTrack * Update docs
equinor · Oct 26, 2023 · f1a92d0 · f1a92d0
1 parent b10df8a
commit f1a92d0
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 8 deletions.
diff --git a/packages/eds-core-react/src/components/Slider/Slider.docs.mdx b/packages/eds-core-react/src/components/Slider/Slider.docs.mdx
@@ -62,3 +62,7 @@ import { Slider } from '@equinor/eds-core-react'
 ### Disabled
 
 <Canvas of={ComponentStories.Disabled} />
+
+### Hide active track
+`hideActiveTrack` visually removes the moss green fill color from the "active" part of the track
+<Canvas of={ComponentStories.HideActiveTrack} />
diff --git a/packages/eds-core-react/src/components/Slider/Slider.stories.tsx b/packages/eds-core-react/src/components/Slider/Slider.stories.tsx
@@ -157,5 +157,25 @@ export const RangeSliderWithDates: StoryFn<SliderProps> = () => {
 RangeSliderWithDates.storyName = 'Range slider with dates'
 
 export const Disabled: StoryFn<SliderProps> = () => (
-  <Slider value={50} disabled aria-label="Disabled Slider" />
+  <>
+    <Slider value={50} disabled aria-label="Disabled Slider" />
+    <Slider value={[30, 70]} aria-label="disabled range slider" disabled />
+  </>
+)
+
+export const HideActiveTrack: StoryFn<SliderProps> = () => (
+  <>
+    <Slider
+      value={4}
+      min={0}
+      max={10}
+      aria-label="hidden active track"
+      hideActiveTrack
+    />
+    <Slider
+      value={[30, 70]}
+      aria-label="hidden active track range"
+      hideActiveTrack
+    />
+  </>
 )
diff --git a/packages/eds-core-react/src/components/Slider/Slider.tsx b/packages/eds-core-react/src/components/Slider/Slider.tsx
@@ -52,18 +52,25 @@ type RangeWrapperProps = {
   $min: number
   $max: number
   $disabled: boolean
+  $hideActiveTrack: boolean
 }
 
 const RangeWrapper = styled.div.attrs<RangeWrapperProps>(
-  ({ $min, $max, $valA, $valB, $disabled, style }) => ({
+  ({ $min, $max, $valA, $valB, $disabled, $hideActiveTrack, style }) => ({
+    'data-disabled': $disabled ? true : null,
     style: {
       '--a': $valA,
       '--b': $valB,
       '--min': $min,
       '--max': $max,
       '--background': $disabled
         ? track.entities.indicator.states.disabled.background
+        : $hideActiveTrack
+        ? 'transparent'
         : track.entities.indicator.background,
+      '--background-hover': $hideActiveTrack
+        ? 'transparent'
+        : track.entities.indicator.states.hover.background,
       ...style,
     },
   }),
@@ -94,11 +101,11 @@ const RangeWrapper = styled.div.attrs<RangeWrapperProps>(
     width: calc((var(--a) - var(--b)) / var(--dif) * var(--realWidth));
   }
   @media (hover: hover) and (pointer: fine) {
-    &:hover:not([disabled]) {
+    &:hover:not([data-disabled]) {
       ${fakeTrackBgHover}
       &::before,
       &::after {
-        background: ${track.entities.indicator.states.hover.background};
+        background: var(--background-hover);
       }
     }
   }
@@ -107,17 +114,23 @@ const RangeWrapper = styled.div.attrs<RangeWrapperProps>(
 type WrapperProps = {
   $min: number
   $max: number
+  $hideActiveTrack: boolean
 } & Pick<SliderProps, 'disabled' | 'value'>
 
 const Wrapper = styled.div.attrs<WrapperProps>(
-  ({ $min, $max, value, disabled, style }) => ({
+  ({ $min, $max, value, disabled, $hideActiveTrack, style }) => ({
     style: {
       '--min': $min,
       '--max': $max,
       '--value': value,
       '--background': disabled
         ? track.entities.indicator.states.disabled.background
+        : $hideActiveTrack
+        ? 'transparent'
         : track.entities.indicator.background,
+      '--background-hover': $hideActiveTrack
+        ? 'transparent'
+        : track.entities.indicator.states.hover.background,
       ...style,
     },
   }),
@@ -141,7 +154,7 @@ const Wrapper = styled.div.attrs<WrapperProps>(
     &:hover:not([disabled]) {
       ${fakeTrackBgHover}
       &::after {
-        background: ${track.entities.indicator.states.hover.background};
+        background: var(--background-hover);
       }
     }
   }
@@ -211,6 +224,8 @@ export type SliderProps = {
   minMaxValues?: boolean
   /** Disabled */
   disabled?: boolean
+  /** hides the "active" fill color from the track */
+  hideActiveTrack?: boolean
 } & Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>
 
 export const Slider = forwardRef<HTMLDivElement, SliderProps>(function Slider(
@@ -225,6 +240,7 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>(function Slider(
     minMaxValues = true,
     step = 1,
     disabled,
+    hideActiveTrack,
     ariaLabelledby,
     'aria-labelledby': ariaLabelledbyNative,
     ...rest
@@ -377,6 +393,7 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>(function Slider(
           $max={max}
           $min={min}
           $disabled={disabled}
+          $hideActiveTrack={hideActiveTrack}
           onMouseMove={findClosestRange}
           onMouseDown={handleDragging}
           onMouseUp={handleDragging}
@@ -439,6 +456,7 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>(function Slider(
           $min={min}
           value={sliderValue[0]}
           disabled={disabled}
+          $hideActiveTrack={hideActiveTrack}
         >
           <SliderInput
             type="range"

diff --git a/packages/eds-core-react/src/components/Slider/__snapshots__/Slider.test.tsx.snap b/packages/eds-core-react/src/components/Slider/__snapshots__/Slider.test.tsx.snap
@@ -3,9 +3,9 @@
 exports[`Simple slider Matches snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="Slider__Wrapper-sc-n1grrg-1 lilwsG"
+    class="Slider__Wrapper-sc-n1grrg-1 hSCHQq"
     id="test"
-    style="--min: 0; --max: 100; --value: 0; --background: var(--eds_interactive_primary__resting, rgba(0, 112, 121, 1));"
+    style="--min: 0; --max: 100; --value: 0; --background: var(--eds_interactive_primary__resting, rgba(0, 112, 121, 1)); --background-hover: var(--eds_interactive_primary__hover, rgba(0, 79, 85, 1));"
     value="0"
   >
     <input