feat: add invalidation state and error text

gravity-ui · Feb 4, 2024 · 06e0ecb · 06e0ecb
1 parent c999818
commit 06e0ecb
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 10 deletions.
diff --git a/src/components/Slider/Slider.tsx b/src/components/Slider/Slider.tsx
@@ -24,7 +24,8 @@ export const Slider = React.forwardRef(function Slider(
         marksCount = 0,
         availableValues,
         hasTooltip = false,
-        error,
+        errorText,
+        validationState,
         disabled = false,
         debounceDelay = 0,
         onBlur,
@@ -75,7 +76,7 @@ export const Slider = React.forwardRef(function Slider(
     });
     const styleModifiers = {
         size,
-        error: Boolean(error) && !disabled,
+        error: validationState === 'invalid' && !disabled,
         disabled,
         hasTooltip: Boolean(hasTooltip),
     };
@@ -120,7 +121,9 @@ export const Slider = React.forwardRef(function Slider(
                         : undefined
                 }
             ></BaseSlider>
-            {styleModifiers.error && <div className={b('error', {size})}>{error}</div>}
+            {styleModifiers.error && errorText && (
+                <div className={b('error', {size})}>{errorText}</div>
+            )}
         </div>
     );
 });
diff --git a/src/components/Slider/__stories__/SliderShowcase.tsx b/src/components/Slider/__stories__/SliderShowcase.tsx
@@ -45,10 +45,10 @@ export const SliderShowcase = () => {
                 <ShowcaseBlock title="Range disabled" disabled defaultValue={[20, 40]} />
             </div>
             <div className={blockCn}>
-                <ShowcaseBlock title="error" error={'Error description'} defaultValue={20} />
+                <ShowcaseBlock title="error" errorText={'Error description'} defaultValue={20} />
                 <ShowcaseBlock
                     title="Range error"
-                    error={'Error description'}
+                    errorText={'Error description'}
                     defaultValue={[20, 40]}
                 />
             </div>
@@ -69,13 +69,13 @@ export const SliderShowcase = () => {
                 <ShowcaseBlock
                     title="tooltip error"
                     hasTooltip
-                    error={'Error description'}
+                    errorText={'Error description'}
                     defaultValue={20}
                 />
                 <ShowcaseBlock
                     title="Range tooltip error"
                     hasTooltip
-                    error={'Error description'}
+                    errorText={'Error description'}
                     defaultValue={[20, 40]}
                 />
             </div>

diff --git a/src/components/Slider/types.ts b/src/components/Slider/types.ts
@@ -20,8 +20,9 @@ export type SliderProps<ValueType = number | [number, number]> = {
     hasTooltip?: boolean;
 
     disabled?: boolean;
-    error?: string;
-
+    errorText?: string;
+    /** Describes the validation state */
+    validationState?: 'invalid';
     debounceDelay?: number;
     onFocus?: (e: React.FocusEvent<HTMLDivElement>) => void;
     onBlur?: (e: React.FocusEvent<HTMLDivElement>) => void;
@@ -31,7 +32,7 @@ export type SliderProps<ValueType = number | [number, number]> = {
     autoFocus?: boolean;
     tabIndex?: ValueType;
 
-    apiRef: BaseSliderRefType;
+    apiRef: React.RefObject<BaseSliderRefType>;
 } & Pick<DOMProps, 'className'> &
     QAProps;