diff --git a/cypress/snapshots/b2c/components/Slider/Slider.component-test.tsx/plasma-web Slider -- _disabled.snap.png b/cypress/snapshots/b2c/components/Slider/Slider.component-test.tsx/plasma-web Slider -- _disabled.snap.png index 9924742c33..84f03d2df3 100644 Binary files a/cypress/snapshots/b2c/components/Slider/Slider.component-test.tsx/plasma-web Slider -- _disabled.snap.png and b/cypress/snapshots/b2c/components/Slider/Slider.component-test.tsx/plasma-web Slider -- _disabled.snap.png differ diff --git a/cypress/snapshots/b2c/components/Slider/Slider.component-test.tsx/plasma-web Slider -- _placement.snap.png b/cypress/snapshots/b2c/components/Slider/Slider.component-test.tsx/plasma-web Slider -- _placement.snap.png index a07181001c..bdc678e77a 100644 Binary files a/cypress/snapshots/b2c/components/Slider/Slider.component-test.tsx/plasma-web Slider -- _placement.snap.png and b/cypress/snapshots/b2c/components/Slider/Slider.component-test.tsx/plasma-web Slider -- _placement.snap.png differ diff --git a/cypress/snapshots/b2c/components/Slider/Slider.component-test.tsx/plasma-web Slider -- _size.snap.png b/cypress/snapshots/b2c/components/Slider/Slider.component-test.tsx/plasma-web Slider -- _size.snap.png index 99c158cfca..72d95e3679 100644 Binary files a/cypress/snapshots/b2c/components/Slider/Slider.component-test.tsx/plasma-web Slider -- _size.snap.png and b/cypress/snapshots/b2c/components/Slider/Slider.component-test.tsx/plasma-web Slider -- _size.snap.png differ diff --git a/cypress/snapshots/b2c/components/Slider/Slider.component-test.tsx/plasma-web Slider -- _vertical simple.snap.png b/cypress/snapshots/b2c/components/Slider/Slider.component-test.tsx/plasma-web Slider -- _vertical simple.snap.png index f3da4b8dff..ffa59a3527 100644 Binary files a/cypress/snapshots/b2c/components/Slider/Slider.component-test.tsx/plasma-web Slider -- _vertical simple.snap.png and b/cypress/snapshots/b2c/components/Slider/Slider.component-test.tsx/plasma-web Slider -- _vertical simple.snap.png differ diff --git a/cypress/snapshots/b2c/components/Slider/Slider.component-test.tsx/plasma-web Slider -- _vertical sliderAlign, l.snap.png b/cypress/snapshots/b2c/components/Slider/Slider.component-test.tsx/plasma-web Slider -- _vertical sliderAlign, l.snap.png index 35fc14ea15..5a50f5377a 100644 Binary files a/cypress/snapshots/b2c/components/Slider/Slider.component-test.tsx/plasma-web Slider -- _vertical sliderAlign, l.snap.png and b/cypress/snapshots/b2c/components/Slider/Slider.component-test.tsx/plasma-web Slider -- _vertical sliderAlign, l.snap.png differ diff --git a/cypress/snapshots/b2c/components/Slider/Slider.component-test.tsx/plasma-web Slider -- _vertical sliderAlign, m.snap.png b/cypress/snapshots/b2c/components/Slider/Slider.component-test.tsx/plasma-web Slider -- _vertical sliderAlign, m.snap.png index 94cf74bbb8..4c9c079b47 100644 Binary files a/cypress/snapshots/b2c/components/Slider/Slider.component-test.tsx/plasma-web Slider -- _vertical sliderAlign, m.snap.png and b/cypress/snapshots/b2c/components/Slider/Slider.component-test.tsx/plasma-web Slider -- _vertical sliderAlign, m.snap.png differ diff --git a/cypress/snapshots/b2c/components/Slider/Slider.component-test.tsx/plasma-web Slider -- _vertical sliderAlign, s.snap.png b/cypress/snapshots/b2c/components/Slider/Slider.component-test.tsx/plasma-web Slider -- _vertical sliderAlign, s.snap.png index 553da0fa91..d602d9052e 100644 Binary files a/cypress/snapshots/b2c/components/Slider/Slider.component-test.tsx/plasma-web Slider -- _vertical sliderAlign, s.snap.png and b/cypress/snapshots/b2c/components/Slider/Slider.component-test.tsx/plasma-web Slider -- _vertical sliderAlign, s.snap.png differ diff --git a/cypress/snapshots/b2c/components/Slider/Slider.component-test.tsx/plasma-web Slider -- _view.snap.png b/cypress/snapshots/b2c/components/Slider/Slider.component-test.tsx/plasma-web Slider -- _view.snap.png index 3c84dbd821..41976eb602 100644 Binary files a/cypress/snapshots/b2c/components/Slider/Slider.component-test.tsx/plasma-web Slider -- _view.snap.png and b/cypress/snapshots/b2c/components/Slider/Slider.component-test.tsx/plasma-web Slider -- _view.snap.png differ diff --git a/cypress/snapshots/b2c/components/Slider/Slider.component-test.tsx/plasma-web Slider -- focus.snap.png b/cypress/snapshots/b2c/components/Slider/Slider.component-test.tsx/plasma-web Slider -- focus.snap.png index 4ba0b841a3..2b8c8a160f 100644 Binary files a/cypress/snapshots/b2c/components/Slider/Slider.component-test.tsx/plasma-web Slider -- focus.snap.png and b/cypress/snapshots/b2c/components/Slider/Slider.component-test.tsx/plasma-web Slider -- focus.snap.png differ diff --git a/cypress/snapshots/b2c/components/Slider/Slider.component-test.tsx/plasma-web Slider -- simple.snap.png b/cypress/snapshots/b2c/components/Slider/Slider.component-test.tsx/plasma-web Slider -- simple.snap.png index 33e583b44c..80999deeff 100644 Binary files a/cypress/snapshots/b2c/components/Slider/Slider.component-test.tsx/plasma-web Slider -- simple.snap.png and b/cypress/snapshots/b2c/components/Slider/Slider.component-test.tsx/plasma-web Slider -- simple.snap.png differ diff --git a/cypress/snapshots/b2c/components/Slider/Slider.update-test.component-test.tsx/plasma-b2c Slider -- [PLASMA-T697] Slider view=default, size=m, labelPlacement=outer.snap.png b/cypress/snapshots/b2c/components/Slider/Slider.update-test.component-test.tsx/plasma-b2c Slider -- [PLASMA-T697] Slider view=default, size=m, labelPlacement=outer.snap.png index 3175d65567..006994bf64 100644 Binary files a/cypress/snapshots/b2c/components/Slider/Slider.update-test.component-test.tsx/plasma-b2c Slider -- [PLASMA-T697] Slider view=default, size=m, labelPlacement=outer.snap.png and b/cypress/snapshots/b2c/components/Slider/Slider.update-test.component-test.tsx/plasma-b2c Slider -- [PLASMA-T697] Slider view=default, size=m, labelPlacement=outer.snap.png differ diff --git a/cypress/snapshots/b2c/components/Slider/Slider.update-test.component-test.tsx/plasma-b2c Slider -- [PLASMA-T937] Slider disabled.snap.png b/cypress/snapshots/b2c/components/Slider/Slider.update-test.component-test.tsx/plasma-b2c Slider -- [PLASMA-T937] Slider disabled.snap.png index aa15f06527..cd329fa8bb 100644 Binary files a/cypress/snapshots/b2c/components/Slider/Slider.update-test.component-test.tsx/plasma-b2c Slider -- [PLASMA-T937] Slider disabled.snap.png and b/cypress/snapshots/b2c/components/Slider/Slider.update-test.component-test.tsx/plasma-b2c Slider -- [PLASMA-T937] Slider disabled.snap.png differ diff --git a/cypress/snapshots/b2c/components/Slider/Slider.update-test.component-test.tsx/plasma-b2c Slider -- [PLASMA-T938] Slider view=accent, size=l, rangeValuesPlacement=outer.snap.png b/cypress/snapshots/b2c/components/Slider/Slider.update-test.component-test.tsx/plasma-b2c Slider -- [PLASMA-T938] Slider view=accent, size=l, rangeValuesPlacement=outer.snap.png index 5069b4ba45..e776a5e9b6 100644 Binary files a/cypress/snapshots/b2c/components/Slider/Slider.update-test.component-test.tsx/plasma-b2c Slider -- [PLASMA-T938] Slider view=accent, size=l, rangeValuesPlacement=outer.snap.png and b/cypress/snapshots/b2c/components/Slider/Slider.update-test.component-test.tsx/plasma-b2c Slider -- [PLASMA-T938] Slider view=accent, size=l, rangeValuesPlacement=outer.snap.png differ diff --git a/cypress/snapshots/b2c/components/Slider/Slider.update-test.component-test.tsx/plasma-b2c Slider -- [PLASMA-T939] Slider view=gradient, size=s.snap.png b/cypress/snapshots/b2c/components/Slider/Slider.update-test.component-test.tsx/plasma-b2c Slider -- [PLASMA-T939] Slider view=gradient, size=s.snap.png index 5069b4ba45..e776a5e9b6 100644 Binary files a/cypress/snapshots/b2c/components/Slider/Slider.update-test.component-test.tsx/plasma-b2c Slider -- [PLASMA-T939] Slider view=gradient, size=s.snap.png and b/cypress/snapshots/b2c/components/Slider/Slider.update-test.component-test.tsx/plasma-b2c Slider -- [PLASMA-T939] Slider view=gradient, size=s.snap.png differ diff --git a/cypress/snapshots/b2c/components/Slider/Slider.update-test.component-test.tsx/plasma-b2c Slider -- [PLASMA-T940] Slider min=10, labelPlacement=inner.snap.png b/cypress/snapshots/b2c/components/Slider/Slider.update-test.component-test.tsx/plasma-b2c Slider -- [PLASMA-T940] Slider min=10, labelPlacement=inner.snap.png index df79fa1f09..890f59c284 100644 Binary files a/cypress/snapshots/b2c/components/Slider/Slider.update-test.component-test.tsx/plasma-b2c Slider -- [PLASMA-T940] Slider min=10, labelPlacement=inner.snap.png and b/cypress/snapshots/b2c/components/Slider/Slider.update-test.component-test.tsx/plasma-b2c Slider -- [PLASMA-T940] Slider min=10, labelPlacement=inner.snap.png differ diff --git a/cypress/snapshots/b2c/components/Slider/Slider.update-test.component-test.tsx/plasma-b2c Slider -- [PLASMA-T941] Slider max=123, rangeValuesPlacement=inner.snap.png b/cypress/snapshots/b2c/components/Slider/Slider.update-test.component-test.tsx/plasma-b2c Slider -- [PLASMA-T941] Slider max=123, rangeValuesPlacement=inner.snap.png index 8d9d6e1fde..bfd652ccb7 100644 Binary files a/cypress/snapshots/b2c/components/Slider/Slider.update-test.component-test.tsx/plasma-b2c Slider -- [PLASMA-T941] Slider max=123, rangeValuesPlacement=inner.snap.png and b/cypress/snapshots/b2c/components/Slider/Slider.update-test.component-test.tsx/plasma-b2c Slider -- [PLASMA-T941] Slider max=123, rangeValuesPlacement=inner.snap.png differ diff --git a/cypress/snapshots/b2c/components/Slider/Slider.update-test.component-test.tsx/plasma-b2c Slider -- [PLASMA-T942] Slider showCurrentValue.snap.png b/cypress/snapshots/b2c/components/Slider/Slider.update-test.component-test.tsx/plasma-b2c Slider -- [PLASMA-T942] Slider showCurrentValue.snap.png index 12b5cb0cf2..08274e4354 100644 Binary files a/cypress/snapshots/b2c/components/Slider/Slider.update-test.component-test.tsx/plasma-b2c Slider -- [PLASMA-T942] Slider showCurrentValue.snap.png and b/cypress/snapshots/b2c/components/Slider/Slider.update-test.component-test.tsx/plasma-b2c Slider -- [PLASMA-T942] Slider showCurrentValue.snap.png differ diff --git a/cypress/snapshots/b2c/components/Slider/Slider.update-test.component-test.tsx/plasma-b2c Slider -- [PLASMA-T943] Slider disableShowRangeValues.snap.png b/cypress/snapshots/b2c/components/Slider/Slider.update-test.component-test.tsx/plasma-b2c Slider -- [PLASMA-T943] Slider disableShowRangeValues.snap.png index 079cdf8605..9c585b89d3 100644 Binary files a/cypress/snapshots/b2c/components/Slider/Slider.update-test.component-test.tsx/plasma-b2c Slider -- [PLASMA-T943] Slider disableShowRangeValues.snap.png and b/cypress/snapshots/b2c/components/Slider/Slider.update-test.component-test.tsx/plasma-b2c Slider -- [PLASMA-T943] Slider disableShowRangeValues.snap.png differ diff --git a/cypress/snapshots/b2c/components/Slider/Slider.update-test.component-test.tsx/plasma-b2c Slider -- [PLASMA-T947] Slider focused.snap.png b/cypress/snapshots/b2c/components/Slider/Slider.update-test.component-test.tsx/plasma-b2c Slider -- [PLASMA-T947] Slider focused.snap.png index 4ba0b841a3..2b8c8a160f 100644 Binary files a/cypress/snapshots/b2c/components/Slider/Slider.update-test.component-test.tsx/plasma-b2c Slider -- [PLASMA-T947] Slider focused.snap.png and b/cypress/snapshots/b2c/components/Slider/Slider.update-test.component-test.tsx/plasma-b2c Slider -- [PLASMA-T947] Slider focused.snap.png differ diff --git a/cypress/snapshots/web/components/Slider/Slider.component-test.tsx/plasma-web Slider -- _disabled.snap.png b/cypress/snapshots/web/components/Slider/Slider.component-test.tsx/plasma-web Slider -- _disabled.snap.png index 799ef36b17..f36a64387c 100644 Binary files a/cypress/snapshots/web/components/Slider/Slider.component-test.tsx/plasma-web Slider -- _disabled.snap.png and b/cypress/snapshots/web/components/Slider/Slider.component-test.tsx/plasma-web Slider -- _disabled.snap.png differ diff --git a/cypress/snapshots/web/components/Slider/Slider.component-test.tsx/plasma-web Slider -- _placement.snap.png b/cypress/snapshots/web/components/Slider/Slider.component-test.tsx/plasma-web Slider -- _placement.snap.png index e19af9d5dc..5c935910bc 100644 Binary files a/cypress/snapshots/web/components/Slider/Slider.component-test.tsx/plasma-web Slider -- _placement.snap.png and b/cypress/snapshots/web/components/Slider/Slider.component-test.tsx/plasma-web Slider -- _placement.snap.png differ diff --git a/cypress/snapshots/web/components/Slider/Slider.component-test.tsx/plasma-web Slider -- _size.snap.png b/cypress/snapshots/web/components/Slider/Slider.component-test.tsx/plasma-web Slider -- _size.snap.png index bafd228120..a15de6c285 100644 Binary files a/cypress/snapshots/web/components/Slider/Slider.component-test.tsx/plasma-web Slider -- _size.snap.png and b/cypress/snapshots/web/components/Slider/Slider.component-test.tsx/plasma-web Slider -- _size.snap.png differ diff --git a/cypress/snapshots/web/components/Slider/Slider.component-test.tsx/plasma-web Slider -- _vertical simple.snap.png b/cypress/snapshots/web/components/Slider/Slider.component-test.tsx/plasma-web Slider -- _vertical simple.snap.png index 9cbe9f3083..9fde60de46 100644 Binary files a/cypress/snapshots/web/components/Slider/Slider.component-test.tsx/plasma-web Slider -- _vertical simple.snap.png and b/cypress/snapshots/web/components/Slider/Slider.component-test.tsx/plasma-web Slider -- _vertical simple.snap.png differ diff --git a/cypress/snapshots/web/components/Slider/Slider.component-test.tsx/plasma-web Slider -- _vertical sliderAlign, l.snap.png b/cypress/snapshots/web/components/Slider/Slider.component-test.tsx/plasma-web Slider -- _vertical sliderAlign, l.snap.png index b856530a81..dde770ac1f 100644 Binary files a/cypress/snapshots/web/components/Slider/Slider.component-test.tsx/plasma-web Slider -- _vertical sliderAlign, l.snap.png and b/cypress/snapshots/web/components/Slider/Slider.component-test.tsx/plasma-web Slider -- _vertical sliderAlign, l.snap.png differ diff --git a/cypress/snapshots/web/components/Slider/Slider.component-test.tsx/plasma-web Slider -- _vertical sliderAlign, m.snap.png b/cypress/snapshots/web/components/Slider/Slider.component-test.tsx/plasma-web Slider -- _vertical sliderAlign, m.snap.png index 9ce6988314..d4cd263daf 100644 Binary files a/cypress/snapshots/web/components/Slider/Slider.component-test.tsx/plasma-web Slider -- _vertical sliderAlign, m.snap.png and b/cypress/snapshots/web/components/Slider/Slider.component-test.tsx/plasma-web Slider -- _vertical sliderAlign, m.snap.png differ diff --git a/cypress/snapshots/web/components/Slider/Slider.component-test.tsx/plasma-web Slider -- _vertical sliderAlign, s.snap.png b/cypress/snapshots/web/components/Slider/Slider.component-test.tsx/plasma-web Slider -- _vertical sliderAlign, s.snap.png index 83b2362abf..13eba8f491 100644 Binary files a/cypress/snapshots/web/components/Slider/Slider.component-test.tsx/plasma-web Slider -- _vertical sliderAlign, s.snap.png and b/cypress/snapshots/web/components/Slider/Slider.component-test.tsx/plasma-web Slider -- _vertical sliderAlign, s.snap.png differ diff --git a/cypress/snapshots/web/components/Slider/Slider.component-test.tsx/plasma-web Slider -- _view.snap.png b/cypress/snapshots/web/components/Slider/Slider.component-test.tsx/plasma-web Slider -- _view.snap.png index b193e783f0..afa2ff16a9 100644 Binary files a/cypress/snapshots/web/components/Slider/Slider.component-test.tsx/plasma-web Slider -- _view.snap.png and b/cypress/snapshots/web/components/Slider/Slider.component-test.tsx/plasma-web Slider -- _view.snap.png differ diff --git a/cypress/snapshots/web/components/Slider/Slider.component-test.tsx/plasma-web Slider -- focus.snap.png b/cypress/snapshots/web/components/Slider/Slider.component-test.tsx/plasma-web Slider -- focus.snap.png index dd881bb5c8..a0f17791bf 100644 Binary files a/cypress/snapshots/web/components/Slider/Slider.component-test.tsx/plasma-web Slider -- focus.snap.png and b/cypress/snapshots/web/components/Slider/Slider.component-test.tsx/plasma-web Slider -- focus.snap.png differ diff --git a/cypress/snapshots/web/components/Slider/Slider.component-test.tsx/plasma-web Slider -- simple.snap.png b/cypress/snapshots/web/components/Slider/Slider.component-test.tsx/plasma-web Slider -- simple.snap.png index 3132013928..dc778544ab 100644 Binary files a/cypress/snapshots/web/components/Slider/Slider.component-test.tsx/plasma-web Slider -- simple.snap.png and b/cypress/snapshots/web/components/Slider/Slider.component-test.tsx/plasma-web Slider -- simple.snap.png differ diff --git a/packages/plasma-b2c/api/plasma-b2c.api.md b/packages/plasma-b2c/api/plasma-b2c.api.md index 1a5d18f081..ef0fc74dc5 100644 --- a/packages/plasma-b2c/api/plasma-b2c.api.md +++ b/packages/plasma-b2c/api/plasma-b2c.api.md @@ -3543,6 +3543,7 @@ view?: string | undefined; size?: "m" | "s" | "l" | undefined; type?: "single" | undefined; pointerSize?: "none" | "small" | "large" | undefined; +pointerVisibility: "onHover" | "always"; } & RefAttributes) | (SliderBaseProps & SliderInternalProps & { onChange?: ((event: FormTypeNumber) => void) | undefined; name: string; @@ -3571,6 +3572,7 @@ view?: string | undefined; size?: "m" | "s" | "l" | undefined; type?: "single" | undefined; pointerSize?: "none" | "small" | "large" | undefined; +pointerVisibility: "onHover" | "always"; } & RefAttributes) | (SliderBaseProps & SliderInternalProps & { onChange?: ((value: number) => void) | undefined; value: number; @@ -3600,6 +3602,7 @@ view?: string | undefined; size?: "m" | "s" | "l" | undefined; type?: "single" | undefined; pointerSize?: "none" | "small" | "large" | undefined; +pointerVisibility: "onHover" | "always"; } & RefAttributes) | (SliderBaseProps & SliderInternalProps & { onChange?: ((value: number) => void) | undefined; value: number; @@ -3628,6 +3631,7 @@ view?: string | undefined; size?: "m" | "s" | "l" | undefined; type?: "single" | undefined; pointerSize?: "none" | "small" | "large" | undefined; +pointerVisibility: "onHover" | "always"; } & RefAttributes) | (Omit & { onChange?: ((event: FormTypeString) => void) | undefined; name?: string | undefined; diff --git a/packages/plasma-new-hope/src/components/Slider/components/Single/Single.tsx b/packages/plasma-new-hope/src/components/Slider/components/Single/Single.tsx index 169213a595..6db4b2aba4 100644 --- a/packages/plasma-new-hope/src/components/Slider/components/Single/Single.tsx +++ b/packages/plasma-new-hope/src/components/Slider/components/Single/Single.tsx @@ -13,6 +13,8 @@ import { FormTypeNumber } from '../../../../types/FormType'; import type { SingleSliderProps } from './Single.types'; import { Label, LabelContent, LabelWrapper, SingleWrapper, SliderBaseWrapper, StyledRangeValue } from './Single.styles'; +const clamp = (value: number, min: number, max: number) => Math.max(min, Math.min(value, max)); + export const SingleSlider: FC = ({ min, max, @@ -38,6 +40,7 @@ export const SingleSlider: FC = ({ size = 'm', name, pointerSize = 'small', + pointerVisibility = 'always', orientation = 'horizontal', reversed, labelReversed, @@ -45,6 +48,8 @@ export const SingleSlider: FC = ({ }) => { const isVertical = orientation === 'vertical'; + const [isHovered, setIsHovered] = useState(false); + const [state, setState] = useState({ handlePosition: 0, stepSize: 0, @@ -56,7 +61,7 @@ export const SingleSlider: FC = ({ const [startOffset, setStartOffset] = useState(0); const [endOffset, setEndOffset] = useState(0); - const innerValue = value ?? defaultValue ?? min; + const innerValue = clamp(value ?? defaultValue ?? min, min, max); const [dragValue, setDragValue] = useState(innerValue); const { stepSize } = state; @@ -179,10 +184,27 @@ export const SingleSlider: FC = ({ [isVertical, min, max, reversed], ); + useEffect(() => { + if (value !== dragValue) { + const newValue = clamp(value ?? defaultValue ?? min, min, max); + const clampedValue = Math.max(min, Math.min(newValue, max)); + + setDragValue(clampedValue); + } + }, [value, defaultValue, dragValue, min, max]); + const labelVerticalPlacement = reversed ? 'bottom' : 'top'; const valuePlacement = sliderAlign === 'right' ? 'left' : 'right'; const settings = sizeData[size][pointerSize === 'large' ? 'large' : 'small']; + const onPointerEnter = () => { + setIsHovered(true); + }; + + const onPointerLeave = () => { + setIsHovered(false); + }; + return ( = ({ labelVerticalPlacement === 'bottom' && classes.labelPlacementBottom, labelReversed && classes.labelContentReversed, )} + onPointerEnter={onPointerEnter} + onPointerLeave={onPointerLeave} > {hasLabelContent && ( @@ -227,10 +251,13 @@ export const SingleSlider: FC = ({ labelPlacement={labelPlacement} rangeValuesPlacement={rangeValuesPlacement} orientation={orientation} + reversed={reversed} {...rest} > > = ({ rangeValuesPlacement, onChange, orientation, + reversed, size, sliderAlign, - settings = {}, }) => { - const { indent = 0.75, fontSizeMultiplier = 16 } = settings; - const ref = useRef(null); - const gap = indent * fontSizeMultiplier * 2; const isVertical = orientation === 'vertical'; useEffect(() => { const resizeHandler = () => { if (ref.current) { - const railSize = isVertical ? ref.current.offsetHeight - gap : ref.current.offsetWidth - gap; + const railSize = isVertical ? ref.current.offsetHeight : ref.current.offsetWidth; const totalSteps = max - min; setStepSize(railSize / totalSteps); @@ -44,7 +41,6 @@ export const SliderBase: React.FC> = ({ }, [ labelPlacement, rangeValuesPlacement, - gap, isVertical, // для перерасчета размеров size, @@ -61,7 +57,7 @@ export const SliderBase: React.FC> = ({ const lastPos = isVertical ? e.clientY - y : e.clientX - x; const sliderWidth = isVertical ? height : width; - const position = min + (lastPos / (sliderWidth - gap)) * (max - min); + const position = min + (lastPos / sliderWidth) * (max - min); const result = Math.max(min, Math.min(max, position)); const data = isVertical ? { lastY: lastPos } : { lastX: lastPos }; @@ -71,7 +67,7 @@ export const SliderBase: React.FC> = ({ useIsomorphicLayoutEffect(() => { const resizeHandler = () => { if (ref.current) { - const railSize = isVertical ? ref.current.offsetHeight - gap : ref.current.offsetWidth - gap; + const railSize = isVertical ? ref.current.offsetHeight : ref.current.offsetWidth; const totalSteps = max - min; setStepSize(railSize / totalSteps); @@ -82,11 +78,19 @@ export const SliderBase: React.FC> = ({ window.addEventListener('resize', resizeHandler); return () => window.removeEventListener('resize', resizeHandler); - }, [min, max, setStepSize, gap, labelPlacement, rangeValuesPlacement, isVertical]); + }, [min, max, setStepSize, labelPlacement, rangeValuesPlacement, isVertical]); + + const fillStyle = (() => { + if (isVertical && reversed) { + return { bottom: 0, height: `calc(100% - ${railFillWidth}px)`, top: 'auto', width: '100%' }; + } + + if (isVertical) { + return { bottom: `${railFillXPosition}px`, height: `${railFillWidth}px`, width: '100%' }; + } - const fillStyle = isVertical - ? { top: `${railFillXPosition}px`, height: `${railFillWidth}px`, width: '100%' } - : { left: `${railFillXPosition}px`, width: `${railFillWidth}px` }; + return { left: `${railFillXPosition}px`, width: `${railFillWidth}px` }; + })(); return ( diff --git a/packages/plasma-new-hope/src/components/Slider/components/SliderBase/SliderBase.types.ts b/packages/plasma-new-hope/src/components/Slider/components/SliderBase/SliderBase.types.ts index fd3ccd114a..854688ddba 100644 --- a/packages/plasma-new-hope/src/components/Slider/components/SliderBase/SliderBase.types.ts +++ b/packages/plasma-new-hope/src/components/Slider/components/SliderBase/SliderBase.types.ts @@ -45,6 +45,7 @@ export interface SliderInternalProps { export interface SliderViewProps extends SliderBaseProps, SliderInternalProps { orientation: 'horizontal' | 'vertical'; + reversed?: boolean; size: string; sliderAlign?: string; railFillWidth: number; diff --git a/packages/plasma-new-hope/src/components/Slider/ui/Handler/Handler.styles.ts b/packages/plasma-new-hope/src/components/Slider/ui/Handler/Handler.styles.ts index e14356740e..9b755824cc 100644 --- a/packages/plasma-new-hope/src/components/Slider/ui/Handler/Handler.styles.ts +++ b/packages/plasma-new-hope/src/components/Slider/ui/Handler/Handler.styles.ts @@ -2,13 +2,13 @@ import { styled } from '@linaria/react'; import { classes, tokens } from '../../Slider.tokens'; -export const StyledValue = styled.span<{ isLargeThumb?: boolean }>` +export const StyledValue = styled.span<{ isLargeThumb?: boolean; isPointerHidden?: boolean }>` position: absolute; z-index: 1; top: var(${tokens.currentValueTopOffset}); text-align: center; width: 100%; - margin-left: -0.125rem; + margin-left: ${({ isPointerHidden }) => (isPointerHidden ? 'calc(var(--thumb-size))' : 'calc(-0.125rem)')}; display: flex; justify-content: center; font-family: var(${tokens.valueFontFamily}); @@ -19,27 +19,31 @@ export const StyledValue = styled.span<{ isLargeThumb?: boolean }>` line-height: var(${tokens.valueLineHeight}); `; -export const HandlerStyled = styled.div<{ isLarge?: boolean }>` +export const HandlerStyled = styled.div<{ isLarge?: boolean; isPointerHidden?: boolean }>` + --thumb-size: ${({ isLarge }) => (isLarge ? `var(${tokens.thumbSizeLarge})` : `var(${tokens.thumbSize})`)}; + cursor: pointer; position: absolute; z-index: 1; top: 0; - left: 0; + left: calc(var(--thumb-size) / -2 - 0.0625rem); bottom: 0; display: flex; align-items: center; justify-content: center; - --thumb-size: ${({ isLarge }) => (isLarge ? `var(${tokens.thumbSizeLarge})` : `var(${tokens.thumbSize})`)}; - &.${classes.verticalOrientation} { right: 0; + left: 0; + top: calc(var(--thumb-size) / -2 - 0.0625rem); bottom: auto; + margin-left: -0.0625rem; align-items: flex-start; justify-content: center; ${StyledValue} { - margin: 0; + margin: ${({ isPointerHidden }) => (isPointerHidden ? 'calc(var(--thumb-size) / 2 )' : 'calc(-0.125rem)')} 0 + 0; top: 0; bottom: 0; right: 0; diff --git a/packages/plasma-new-hope/src/components/Slider/ui/Handler/Handler.tsx b/packages/plasma-new-hope/src/components/Slider/ui/Handler/Handler.tsx index d1fffe66d3..553e5be534 100644 --- a/packages/plasma-new-hope/src/components/Slider/ui/Handler/Handler.tsx +++ b/packages/plasma-new-hope/src/components/Slider/ui/Handler/Handler.tsx @@ -1,4 +1,4 @@ -import React, { useRef, forwardRef, KeyboardEvent } from 'react'; +import React, { useRef, useState, forwardRef, KeyboardEvent } from 'react'; import Draggable, { DraggableEventHandler } from 'react-draggable'; import { cx } from '../../../../utils'; @@ -21,6 +21,8 @@ export const Handler = forwardRef( ( { size, + visibility, + isHovered, orientation, stepSize, onChangeCommitted, @@ -42,6 +44,7 @@ export const Handler = forwardRef( ref, ) => { const isVertical = orientation === 'vertical'; + const [isDrag, setIsDrag] = useState(false); const lastOnChangeValue = useRef(); const [startClientOffset, endClientOffset] = getOffsets(ref, side, isVertical); @@ -72,7 +75,13 @@ export const Handler = forwardRef( } }; + const onStart: DraggableEventHandler = () => { + setIsDrag(true); + }; + const onStop: DraggableEventHandler = (_, data) => { + setIsDrag(false); + const newValue = getSliderThumbValue(isVertical ? data.y : data.x, stepSize, min, max); onChangeCommitted && onChangeCommitted(newValue, data); }; @@ -112,11 +121,17 @@ export const Handler = forwardRef( onChangeCommitted && onChangeCommitted(computedValue, data); }; + let isPointerHidden = (visibility === 'onHover' && !isHovered) || size === 'none'; + + if (isDrag) { + isPointerHidden = false; + } return ( ( valuePlacement === 'left' && classes.valuePlacementLeft, )} isLarge={size === 'large'} + isPointerHidden={isPointerHidden} onKeyDown={onKeyPress} > - {size !== 'none' && ( - + {(visibility === 'always' || (visibility === 'onHover' && (isHovered || isDrag))) && + size !== 'none' && ( + + )} + {showCurrentValueCondition && ( + + {value} + )} - {showCurrentValueCondition && {value}} ); diff --git a/packages/plasma-new-hope/src/components/Slider/ui/Handler/Handler.types.ts b/packages/plasma-new-hope/src/components/Slider/ui/Handler/Handler.types.ts index de32f72717..0fe87dd3dc 100644 --- a/packages/plasma-new-hope/src/components/Slider/ui/Handler/Handler.types.ts +++ b/packages/plasma-new-hope/src/components/Slider/ui/Handler/Handler.types.ts @@ -8,6 +8,8 @@ export interface HandlerProps { onChangeCommitted?(value: number, data: DraggableData): void; side?: 'left' | 'right'; size?: 'small' | 'large' | 'none'; + visibility?: 'always' | 'onHover'; + isHovered?: boolean; orientation: 'horizontal' | 'vertical'; bounds?: number[]; position?: number; diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Slider/Slider.stories.tsx b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Slider/Slider.stories.tsx index dcf79e4e9c..3d1ce441c8 100644 --- a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Slider/Slider.stories.tsx +++ b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Slider/Slider.stories.tsx @@ -40,6 +40,12 @@ const meta: Meta = { type: 'inline-radio', }, }, + pointerVisibility: { + options: ['always', 'onHover'], + control: { + type: 'inline-radio', + }, + }, orientation: { options: orientations, control: { @@ -160,6 +166,7 @@ export const Default: StorySingle = { view: 'default', size: 'm', pointerSize: 'small', + pointerVisibility: 'always', min: 0, max: 100, orientation: 'horizontal', diff --git a/packages/plasma-web/api/plasma-web.api.md b/packages/plasma-web/api/plasma-web.api.md index 41a2f8417d..b6d6fb9fe8 100644 --- a/packages/plasma-web/api/plasma-web.api.md +++ b/packages/plasma-web/api/plasma-web.api.md @@ -3545,6 +3545,7 @@ view?: string | undefined; size?: "m" | "s" | "l" | undefined; type?: "single" | undefined; pointerSize?: "none" | "small" | "large" | undefined; +pointerVisibility: "onHover" | "always"; } & RefAttributes) | (SliderBaseProps & SliderInternalProps & { onChange?: ((event: FormTypeNumber) => void) | undefined; name: string; @@ -3573,6 +3574,7 @@ view?: string | undefined; size?: "m" | "s" | "l" | undefined; type?: "single" | undefined; pointerSize?: "none" | "small" | "large" | undefined; +pointerVisibility: "onHover" | "always"; } & RefAttributes) | (SliderBaseProps & SliderInternalProps & { onChange?: ((value: number) => void) | undefined; value: number; @@ -3602,6 +3604,7 @@ view?: string | undefined; size?: "m" | "s" | "l" | undefined; type?: "single" | undefined; pointerSize?: "none" | "small" | "large" | undefined; +pointerVisibility: "onHover" | "always"; } & RefAttributes) | (SliderBaseProps & SliderInternalProps & { onChange?: ((value: number) => void) | undefined; value: number; @@ -3630,6 +3633,7 @@ view?: string | undefined; size?: "m" | "s" | "l" | undefined; type?: "single" | undefined; pointerSize?: "none" | "small" | "large" | undefined; +pointerVisibility: "onHover" | "always"; } & RefAttributes) | (Omit & { onChange?: ((event: FormTypeString) => void) | undefined; name?: string | undefined; diff --git a/packages/sdds-cs/api/sdds-cs.api.md b/packages/sdds-cs/api/sdds-cs.api.md index c6e7159cfa..7ab7e0a696 100644 --- a/packages/sdds-cs/api/sdds-cs.api.md +++ b/packages/sdds-cs/api/sdds-cs.api.md @@ -2804,6 +2804,7 @@ view?: string | undefined; size?: "s" | "m" | "l" | undefined; type?: "single" | undefined; pointerSize?: "none" | "small" | "large" | undefined; +pointerVisibility: "onHover" | "always"; } & RefAttributes) | (SliderBaseProps & SliderInternalProps & { onChange?: ((event: FormTypeNumber) => void) | undefined; name: string; @@ -2832,6 +2833,7 @@ view?: string | undefined; size?: "s" | "m" | "l" | undefined; type?: "single" | undefined; pointerSize?: "none" | "small" | "large" | undefined; +pointerVisibility: "onHover" | "always"; } & RefAttributes) | (SliderBaseProps & SliderInternalProps & { onChange?: ((value: number) => void) | undefined; value: number; @@ -2861,6 +2863,7 @@ view?: string | undefined; size?: "s" | "m" | "l" | undefined; type?: "single" | undefined; pointerSize?: "none" | "small" | "large" | undefined; +pointerVisibility: "onHover" | "always"; } & RefAttributes) | (SliderBaseProps & SliderInternalProps & { onChange?: ((value: number) => void) | undefined; value: number; @@ -2889,6 +2892,7 @@ view?: string | undefined; size?: "s" | "m" | "l" | undefined; type?: "single" | undefined; pointerSize?: "none" | "small" | "large" | undefined; +pointerVisibility: "onHover" | "always"; } & RefAttributes) | (Omit & { onChange?: ((event: FormTypeString) => void) | undefined; name?: string | undefined; diff --git a/packages/sdds-dfa/api/sdds-dfa.api.md b/packages/sdds-dfa/api/sdds-dfa.api.md index 8f20fa2078..2f4e4d1c0d 100644 --- a/packages/sdds-dfa/api/sdds-dfa.api.md +++ b/packages/sdds-dfa/api/sdds-dfa.api.md @@ -2966,6 +2966,7 @@ view?: string | undefined; size?: "s" | "m" | "l" | undefined; type?: "single" | undefined; pointerSize?: "none" | "small" | "large" | undefined; +pointerVisibility: "onHover" | "always"; } & RefAttributes) | (SliderBaseProps & SliderInternalProps & { onChange?: ((event: FormTypeNumber) => void) | undefined; name: string; @@ -2994,6 +2995,7 @@ view?: string | undefined; size?: "s" | "m" | "l" | undefined; type?: "single" | undefined; pointerSize?: "none" | "small" | "large" | undefined; +pointerVisibility: "onHover" | "always"; } & RefAttributes) | (SliderBaseProps & SliderInternalProps & { onChange?: ((value: number) => void) | undefined; value: number; @@ -3023,6 +3025,7 @@ view?: string | undefined; size?: "s" | "m" | "l" | undefined; type?: "single" | undefined; pointerSize?: "none" | "small" | "large" | undefined; +pointerVisibility: "onHover" | "always"; } & RefAttributes) | (SliderBaseProps & SliderInternalProps & { onChange?: ((value: number) => void) | undefined; value: number; @@ -3051,6 +3054,7 @@ view?: string | undefined; size?: "s" | "m" | "l" | undefined; type?: "single" | undefined; pointerSize?: "none" | "small" | "large" | undefined; +pointerVisibility: "onHover" | "always"; } & RefAttributes) | (Omit & { onChange?: ((event: FormTypeString) => void) | undefined; name?: string | undefined; diff --git a/packages/sdds-finportal/api/sdds-finportal.api.md b/packages/sdds-finportal/api/sdds-finportal.api.md index d2e80a7969..8c05ddbd43 100644 --- a/packages/sdds-finportal/api/sdds-finportal.api.md +++ b/packages/sdds-finportal/api/sdds-finportal.api.md @@ -3062,6 +3062,7 @@ view?: string | undefined; size?: "s" | "m" | "l" | undefined; type?: "single" | undefined; pointerSize?: "none" | "small" | "large" | undefined; +pointerVisibility: "onHover" | "always"; } & RefAttributes) | (SliderBaseProps & SliderInternalProps & { onChange?: ((event: FormTypeNumber) => void) | undefined; name: string; @@ -3090,6 +3091,7 @@ view?: string | undefined; size?: "s" | "m" | "l" | undefined; type?: "single" | undefined; pointerSize?: "none" | "small" | "large" | undefined; +pointerVisibility: "onHover" | "always"; } & RefAttributes) | (SliderBaseProps & SliderInternalProps & { onChange?: ((value: number) => void) | undefined; value: number; @@ -3119,6 +3121,7 @@ view?: string | undefined; size?: "s" | "m" | "l" | undefined; type?: "single" | undefined; pointerSize?: "none" | "small" | "large" | undefined; +pointerVisibility: "onHover" | "always"; } & RefAttributes) | (SliderBaseProps & SliderInternalProps & { onChange?: ((value: number) => void) | undefined; value: number; @@ -3147,6 +3150,7 @@ view?: string | undefined; size?: "s" | "m" | "l" | undefined; type?: "single" | undefined; pointerSize?: "none" | "small" | "large" | undefined; +pointerVisibility: "onHover" | "always"; } & RefAttributes) | (Omit & { onChange?: ((event: FormTypeString) => void) | undefined; name?: string | undefined; diff --git a/packages/sdds-insol/api/sdds-insol.api.md b/packages/sdds-insol/api/sdds-insol.api.md index 1fd0777206..c5b49c4dc9 100644 --- a/packages/sdds-insol/api/sdds-insol.api.md +++ b/packages/sdds-insol/api/sdds-insol.api.md @@ -3074,6 +3074,7 @@ view?: string | undefined; size?: "s" | "m" | "l" | undefined; type?: "single" | undefined; pointerSize?: "none" | "small" | "large" | undefined; +pointerVisibility: "onHover" | "always"; } & RefAttributes) | (SliderBaseProps & SliderInternalProps & { onChange?: ((event: FormTypeNumber) => void) | undefined; name: string; @@ -3102,6 +3103,7 @@ view?: string | undefined; size?: "s" | "m" | "l" | undefined; type?: "single" | undefined; pointerSize?: "none" | "small" | "large" | undefined; +pointerVisibility: "onHover" | "always"; } & RefAttributes) | (SliderBaseProps & SliderInternalProps & { onChange?: ((value: number) => void) | undefined; value: number; @@ -3131,6 +3133,7 @@ view?: string | undefined; size?: "s" | "m" | "l" | undefined; type?: "single" | undefined; pointerSize?: "none" | "small" | "large" | undefined; +pointerVisibility: "onHover" | "always"; } & RefAttributes) | (SliderBaseProps & SliderInternalProps & { onChange?: ((value: number) => void) | undefined; value: number; @@ -3159,6 +3162,7 @@ view?: string | undefined; size?: "s" | "m" | "l" | undefined; type?: "single" | undefined; pointerSize?: "none" | "small" | "large" | undefined; +pointerVisibility: "onHover" | "always"; } & RefAttributes) | (Omit & { onChange?: ((event: FormTypeString) => void) | undefined; name?: string | undefined; diff --git a/packages/sdds-serv/api/sdds-serv.api.md b/packages/sdds-serv/api/sdds-serv.api.md index e1186a5be1..2431b279be 100644 --- a/packages/sdds-serv/api/sdds-serv.api.md +++ b/packages/sdds-serv/api/sdds-serv.api.md @@ -3062,6 +3062,7 @@ view?: string | undefined; size?: "s" | "m" | "l" | undefined; type?: "single" | undefined; pointerSize?: "none" | "small" | "large" | undefined; +pointerVisibility: "onHover" | "always"; } & RefAttributes) | (SliderBaseProps & SliderInternalProps & { onChange?: ((event: FormTypeNumber) => void) | undefined; name: string; @@ -3090,6 +3091,7 @@ view?: string | undefined; size?: "s" | "m" | "l" | undefined; type?: "single" | undefined; pointerSize?: "none" | "small" | "large" | undefined; +pointerVisibility: "onHover" | "always"; } & RefAttributes) | (SliderBaseProps & SliderInternalProps & { onChange?: ((value: number) => void) | undefined; value: number; @@ -3119,6 +3121,7 @@ view?: string | undefined; size?: "s" | "m" | "l" | undefined; type?: "single" | undefined; pointerSize?: "none" | "small" | "large" | undefined; +pointerVisibility: "onHover" | "always"; } & RefAttributes) | (SliderBaseProps & SliderInternalProps & { onChange?: ((value: number) => void) | undefined; value: number; @@ -3147,6 +3150,7 @@ view?: string | undefined; size?: "s" | "m" | "l" | undefined; type?: "single" | undefined; pointerSize?: "none" | "small" | "large" | undefined; +pointerVisibility: "onHover" | "always"; } & RefAttributes) | (Omit & { onChange?: ((event: FormTypeString) => void) | undefined; name?: string | undefined;