[@mantine/core] Slider: Fix incorrect marks styles when inverted pr…

…op is set (#2894) * [@mantine/core] Slider: fix issue #2877 mark fill inverted slider * [@mantine/core] Slider: fix issue #2877 missing trailing semicolon
mantinedev · Nov 12, 2022 · acf39ae · acf39ae
1 parent 4aa5bf7
commit acf39ae
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 3 deletions.
diff --git a/src/mantine-core/src/Slider/Marks/Marks.tsx b/src/mantine-core/src/Slider/Marks/Marks.tsx
@@ -17,6 +17,7 @@ export interface MarksProps extends DefaultProps<MarksStylesNames> {
   onChange(value: number): void;
   offset?: number;
   disabled: boolean;
+  inverted?: boolean;
 }
 
 export function Marks({
@@ -32,6 +33,7 @@ export function Marks({
   onChange,
   disabled,
   unstyled,
+  inverted,
 }: MarksProps) {
   const { classes, cx } = useStyles(
     { size, color, disabled },
@@ -46,7 +48,7 @@ export function Marks({
     >
       <div
         className={cx(classes.mark, {
-          [classes.markFilled]: isMarkFilled({ mark, value, offset }),
+          [classes.markFilled]: isMarkFilled({ mark, value, offset, inverted }),
         })}
       />
       {mark.label && (

diff --git a/src/mantine-core/src/Slider/Marks/is-mark-filled.test.ts b/src/mantine-core/src/Slider/Marks/is-mark-filled.test.ts
@@ -24,4 +24,18 @@ describe('@mantine/core/Slider/is-mark-filled', () => {
     expect(isMarkFilled({ mark: { value: 0 }, offset: -10, value: 90 })).toBe(true);
     expect(isMarkFilled({ mark: { value: -10 }, offset: -20, value: 90 })).toBe(true);
   });
+
+  it('correctly detects filled mark with inverted slider', () => {
+    expect(isMarkFilled({ mark: { value: 10 }, value: 90, inverted: true })).toBe(false);
+    expect(isMarkFilled({ mark: { value: 90 }, value: 80, inverted: true })).toBe(true);
+  });
+  it('correctly detects filled mark with offset and inverted slider', () => {
+    expect(isMarkFilled({ mark: { value: 10 }, offset: 10, value: 90, inverted: true })).toBe(true);
+    expect(isMarkFilled({ mark: { value: 100 }, offset: 30, value: 90, inverted: true })).toBe(
+      true
+    );
+    expect(isMarkFilled({ mark: { value: 40 }, offset: 10, value: 90, inverted: true })).toBe(
+      false
+    );
+  });
 });
diff --git a/src/mantine-core/src/Slider/Marks/is-mark-filled.ts b/src/mantine-core/src/Slider/Marks/is-mark-filled.ts
@@ -2,10 +2,15 @@ interface IsMarkFilled {
   mark: { value: number; label?: any };
   offset?: number;
   value: number;
+  inverted?: boolean;
 }
 
-export function isMarkFilled({ mark, offset, value }: IsMarkFilled) {
-  return typeof offset === 'number'
+export function isMarkFilled({ mark, offset, value, inverted = false }: IsMarkFilled) {
+  return inverted
+    ? typeof offset === 'number'
+      ? mark.value <= offset || mark.value >= value
+      : mark.value >= value
+    : typeof offset === 'number'
     ? mark.value >= offset && mark.value <= value
     : mark.value <= value;
 }
diff --git a/src/mantine-core/src/Slider/Track/Track.tsx b/src/mantine-core/src/Slider/Track/Track.tsx
@@ -69,6 +69,7 @@ export function Track({
         styles={styles}
         disabled={disabled}
         unstyled={unstyled}
+        inverted={inverted}
       />
     </div>
   );