diff --git a/src/components/Slider/Slider.tsx b/src/components/Slider/Slider.tsx index 2dd1712d52..b7d86e7b29 100644 --- 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 } > - {styleModifiers.error &&
{error}
} + {styleModifiers.error && errorText && ( +
{errorText}
+ )} ); }); diff --git a/src/components/Slider/__stories__/SliderShowcase.tsx b/src/components/Slider/__stories__/SliderShowcase.tsx index c40433eb2d..7966e9a1d9 100644 --- a/src/components/Slider/__stories__/SliderShowcase.tsx +++ b/src/components/Slider/__stories__/SliderShowcase.tsx @@ -45,10 +45,10 @@ export const SliderShowcase = () => {
- +
@@ -69,13 +69,13 @@ export const SliderShowcase = () => { diff --git a/src/components/Slider/types.ts b/src/components/Slider/types.ts index 59a940f67f..2cf798f52b 100644 --- a/src/components/Slider/types.ts +++ b/src/components/Slider/types.ts @@ -20,8 +20,9 @@ export type SliderProps = { hasTooltip?: boolean; disabled?: boolean; - error?: string; - + errorText?: string; + /** Describes the validation state */ + validationState?: 'invalid'; debounceDelay?: number; onFocus?: (e: React.FocusEvent) => void; onBlur?: (e: React.FocusEvent) => void; @@ -31,7 +32,7 @@ export type SliderProps = { autoFocus?: boolean; tabIndex?: ValueType; - apiRef: BaseSliderRefType; + apiRef: React.RefObject; } & Pick & QAProps;