fix: slider: fixes hidetrack and hiderail props typos and ommissions (#…

…656) * fix: slider: fixes hidetrack and hiderail props typos and ommissions * chore: slider: adds hidetrack and hiderail unit tests * chore: slider: swaps hidetrack and hiderail references of segments
EightfoldAI · Jun 27, 2023 · 0c00967 · 0c00967
1 parent 6748a1e
commit 0c00967
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 3 deletions.
diff --git a/src/components/Slider/Slider.stories.tsx b/src/components/Slider/Slider.stories.tsx
@@ -1039,7 +1039,10 @@ const sliderArgs: Object = {
   hideMax: false,
   hideMin: false,
   hideThumb: false,
+  hideRail: false,
+  hideTrack: false,
   hideValue: false,
+  included: true,
   id: 'mySliderId',
   labelPosition: 'bottom',
   marks: null,

diff --git a/src/components/Slider/Slider.test.tsx b/src/components/Slider/Slider.test.tsx
@@ -297,4 +297,40 @@ describe('Slider', () => {
     );
     expect(container1.getElementsByClassName('error')).toHaveLength(1);
   });
+
+  test('should hide track', () => {
+    const { container: container1 } = render(
+      <Slider value={50} step={10} hideTrack />
+    );
+    expect(
+      container1.getElementsByClassName('slider-track-opacity')
+    ).toHaveLength(1);
+    expect(
+      container1.getElementsByClassName('slider-rail-opacity')
+    ).toHaveLength(0);
+  });
+
+  test('should hide rail', () => {
+    const { container: container1 } = render(
+      <Slider value={50} step={10} hideRail />
+    );
+    expect(
+      container1.getElementsByClassName('slider-rail-opacity')
+    ).toHaveLength(1);
+    expect(
+      container1.getElementsByClassName('slider-track-opacity')
+    ).toHaveLength(0);
+  });
+
+  test('should hide rail and track', () => {
+    const { container: container1 } = render(
+      <Slider value={50} step={10} hideRail hideTrack />
+    );
+    expect(
+      container1.getElementsByClassName('slider-rail-opacity')
+    ).toHaveLength(1);
+    expect(
+      container1.getElementsByClassName('slider-track-opacity')
+    ).toHaveLength(1);
+  });
 });
diff --git a/src/components/Slider/Slider.tsx b/src/components/Slider/Slider.tsx
@@ -750,7 +750,7 @@ export const Slider: FC<SliderProps> = React.forwardRef(
                     [styles.data]: type === 'data',
                   },
                   {
-                    [styles.sliderRailOpacity]: !!hideTrack || !!showMarkers,
+                    [styles.sliderRailOpacity]: !!hideRail || !!showMarkers,
                   },
                 ])}
                 onMouseDown={
@@ -791,7 +791,8 @@ export const Slider: FC<SliderProps> = React.forwardRef(
                       <div
                         className={mergeClasses(styles.railMarkerSegment, {
                           [styles.data]: type === 'data',
-                          [styles.active]: isMarkerSegmentActive(mark.value),
+                          [styles.active]:
+                            !hideTrack && isMarkerSegmentActive(mark.value),
                           [styles.success]:
                             isMarkerSegmentActive(mark.value) &&
                             !!trackStatus &&
@@ -806,7 +807,11 @@ export const Slider: FC<SliderProps> = React.forwardRef(
                             trackStatus === SliderTrackStatus.Error,
                           [styles.railMarkerSegmentHidden]:
                             index === markers.length - 1,
-                          [styles.railMarkerSegmentOpacity]: !!hideTrack,
+                          [styles.railMarkerSegmentOpacity]:
+                            (!!hideRail &&
+                              !!hideTrack &&
+                              isMarkerSegmentActive(mark.value)) ||
+                            (!!hideRail && !isMarkerSegmentActive(mark.value)),
                         })}
                         key={index}
                         onMouseDown={