fix(slider-input): classnames overriding (#891)

core-ds · Nov 22, 2021 · d63d676 · d63d676
1 parent 1f9fb97
commit d63d676
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 2 deletions.
diff --git a/packages/slider-input/src/Component.test.tsx b/packages/slider-input/src/Component.test.tsx
@@ -55,6 +55,24 @@ describe('SliderInput', () => {
 
             expect(container.getElementsByClassName(className).length).toBe(1);
         });
+
+        it('should set `focusedClassName` class to slider', () => {
+            const className = 'test-class';
+            const { container, queryByRole } = render(<SliderInput focusedClassName={className} />);
+
+            const input = queryByRole('textbox');
+
+            if (input) input.focus();
+
+            expect(container.getElementsByClassName(className).length).toBe(1);
+        });
+
+        it('should set `fieldClassName` class to slider', () => {
+            const className = 'test-class';
+            const { container } = render(<SliderInput fieldClassName={className} />);
+
+            expect(container.getElementsByClassName(className).length).toBe(1);
+        });
     });
 
     describe('Attributes tests', () => {

diff --git a/packages/slider-input/src/Component.tsx b/packages/slider-input/src/Component.tsx
@@ -106,6 +106,8 @@ export const SliderInput = forwardRef<HTMLInputElement, SliderInputProps>(
             inputClassName,
             sliderClassName,
             stepsClassName,
+            focusedClassName,
+            fieldClassName,
             value = '',
             min = 0,
             max = 100,
@@ -179,8 +181,8 @@ export const SliderInput = forwardRef<HTMLInputElement, SliderInputProps>(
                     disabled={disabled}
                     readOnly={readOnly}
                     className={cn(inputClassName, styles.input)}
-                    focusedClassName={styles.focused}
-                    fieldClassName={styles.field}
+                    focusedClassName={cn(focusedClassName, styles.focused)}
+                    fieldClassName={cn(fieldClassName, styles.field)}
                     inputMode='numeric'
                     pattern='[0-9]*'
                     error={error}