Don't show slider fill before value equal to initial value (#6853)

palantir · Jun 19, 2024 · 6273c37 · 6273c37 · svc-palantir-github · Jun 19, 2024
1 parent 45461a2
commit 6273c37
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git a/packages/core/src/components/slider/slider.tsx b/packages/core/src/components/slider/slider.tsx
@@ -70,7 +70,7 @@ export class Slider extends AbstractPureComponent<SliderProps> {
                 <MultiSlider.Handle
                     value={value!}
                     intentAfter={value! < initialValue! ? intent : undefined}
-                    intentBefore={value! >= initialValue! ? intent : undefined}
+                    intentBefore={value! > initialValue! ? intent : undefined}
                     onChange={onChange}
                     onRelease={onRelease}
                     htmlProps={handleHtmlProps}

diff --git a/packages/core/test/slider/sliderTests.tsx b/packages/core/test/slider/sliderTests.tsx
@@ -53,6 +53,21 @@ describe("<Slider>", () => {
         assert.equal(tracks.getDOMNode().getBoundingClientRect().width, STEP_SIZE * 3);
     });
 
+    it("renders primary track segment between initialValue and value when value is less than initial value", () => {
+        const tracks = renderSlider(<Slider showTrackFill={true} initialValue={5} value={2} />).find(
+            `.${Classes.SLIDER_PROGRESS}.${Classes.INTENT_PRIMARY}`,
+        );
+        assert.lengthOf(tracks, 1);
+        assert.equal(tracks.getDOMNode().getBoundingClientRect().width, STEP_SIZE * 3);
+    });
+
+    it("renders no primary track segment when value equals initial value", () => {
+        const tracks = renderSlider(<Slider showTrackFill={true} initialValue={2} value={2} min={0} max={5} />).find(
+            `.${Classes.SLIDER_PROGRESS}.${Classes.INTENT_PRIMARY}`,
+        );
+        assert.lengthOf(tracks, 0);
+    });
+
     it("renders result of labelRenderer() in each label and differently in handle", () => {
         const labelRenderer = (val: number, opts?: { isHandleTooltip: boolean }) =>
             val + (opts?.isHandleTooltip ? "!" : "#");