From 06e0ecbc1b07914adb2114e74cfca1edf80d6f2c Mon Sep 17 00:00:00 2001
From: Kirill Revenkov <revenkov-k@yandex-team.ru>
Date: Sun, 4 Feb 2024 21:56:24 +0300
Subject: [PATCH] feat: add invalidation state and error text
---
src/components/Slider/Slider.tsx | 9 ++++++---
src/components/Slider/__stories__/SliderShowcase.tsx | 8 ++++----
src/components/Slider/types.ts | 7 ++++---
3 files changed, 14 insertions(+), 10 deletions(-)
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
}
></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
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 = () => {
<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
index 59a940f67f..2cf798f52b 100644
--- 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;