From 168cb121a8bbd7c0c8f86458867f2df9e649baa1 Mon Sep 17 00:00:00 2001 From: Dmytro Kirpa Date: Tue, 12 Nov 2024 14:51:11 +0100 Subject: [PATCH 1/4] feat(react-slider): adjust thumb positioning --- .../components/Slider/useSliderStyles.styles.ts | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/packages/react-components/react-slider/library/src/components/Slider/useSliderStyles.styles.ts b/packages/react-components/react-slider/library/src/components/Slider/useSliderStyles.styles.ts index fcc48285863735..3de8de4311bb44 100644 --- a/packages/react-components/react-slider/library/src/components/Slider/useSliderStyles.styles.ts +++ b/packages/react-components/react-slider/library/src/components/Slider/useSliderStyles.styles.ts @@ -13,6 +13,8 @@ export const sliderClassNames: SlotClassNames = { // Internal CSS variables const thumbSizeVar = `--fui-Slider__thumb--size`; +const innerThumbRadiusVar = `--fui-Slider__inner-thumb--radius`; +const thumbPositionVar = `--fui-Slider__thumb--position`; const railSizeVar = `--fui-Slider__rail--size`; const railColorVar = `--fui-Slider__rail--color`; const progressColorVar = `--fui-Slider__progress--color`; @@ -31,6 +33,10 @@ const { sliderDirectionVar, sliderStepsPercentVar, sliderProgressVar } = sliderC */ const useRootStyles = makeStyles({ root: { + // Ensure the thumb stays within the track boundaries. + // When the value is at 0% or 100%, the distance from the track edge + // to the thumb center equals the inner thumb radius. + [`${thumbPositionVar}`]: `min(max(var(${sliderProgressVar}), var(${innerThumbRadiusVar})), calc(100% - var(${innerThumbRadiusVar})))`, position: 'relative', display: 'inline-grid', touchAction: 'none', @@ -40,12 +46,14 @@ const useRootStyles = makeStyles({ small: { [thumbSizeVar]: '16px', + [innerThumbRadiusVar]: '5px', [railSizeVar]: '2px', minHeight: '24px', }, medium: { [thumbSizeVar]: '20px', + [innerThumbRadiusVar]: '6px', [railSizeVar]: '4px', minHeight: '32px', }, @@ -172,7 +180,7 @@ const useRailStyles = makeStyles({ '::before': { width: `var(${railSizeVar})`, top: '-1px', - bottom: '1px', + bottom: '-1px', }, }, }); @@ -214,11 +222,11 @@ const useThumbStyles = makeStyles({ }, horizontal: { transform: 'translateX(-50%)', - left: `var(${sliderProgressVar})`, + left: `var(${thumbPositionVar})`, }, vertical: { transform: 'translateY(50%)', - bottom: `var(${sliderProgressVar})`, + bottom: `var(${thumbPositionVar})`, }, }); From e3c304fe2b54aae784d302f2d4af605e3959e7b5 Mon Sep 17 00:00:00 2001 From: Dmytro Kirpa Date: Tue, 12 Nov 2024 14:52:06 +0100 Subject: [PATCH 2/4] change --- ...-react-slider-280a3a5b-be16-4a74-8359-a7dd8acfb550.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-slider-280a3a5b-be16-4a74-8359-a7dd8acfb550.json diff --git a/change/@fluentui-react-slider-280a3a5b-be16-4a74-8359-a7dd8acfb550.json b/change/@fluentui-react-slider-280a3a5b-be16-4a74-8359-a7dd8acfb550.json new file mode 100644 index 00000000000000..eb75b20b3907fd --- /dev/null +++ b/change/@fluentui-react-slider-280a3a5b-be16-4a74-8359-a7dd8acfb550.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "feat: adjust thumb positioning", + "packageName": "@fluentui/react-slider", + "email": "dmytrokirpa@microsoft.com", + "dependentChangeType": "patch" +} From a55056762655bd56f3e993e0ae8ab5c43bd6f40c Mon Sep 17 00:00:00 2001 From: Dmytro Kirpa Date: Tue, 12 Nov 2024 16:15:56 +0100 Subject: [PATCH 3/4] move var to thumb element --- .../src/components/Slider/useSliderStyles.styles.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/react-components/react-slider/library/src/components/Slider/useSliderStyles.styles.ts b/packages/react-components/react-slider/library/src/components/Slider/useSliderStyles.styles.ts index 3de8de4311bb44..98a9da75176661 100644 --- a/packages/react-components/react-slider/library/src/components/Slider/useSliderStyles.styles.ts +++ b/packages/react-components/react-slider/library/src/components/Slider/useSliderStyles.styles.ts @@ -33,10 +33,6 @@ const { sliderDirectionVar, sliderStepsPercentVar, sliderProgressVar } = sliderC */ const useRootStyles = makeStyles({ root: { - // Ensure the thumb stays within the track boundaries. - // When the value is at 0% or 100%, the distance from the track edge - // to the thumb center equals the inner thumb radius. - [`${thumbPositionVar}`]: `min(max(var(${sliderProgressVar}), var(${innerThumbRadiusVar})), calc(100% - var(${innerThumbRadiusVar})))`, position: 'relative', display: 'inline-grid', touchAction: 'none', @@ -190,6 +186,10 @@ const useRailStyles = makeStyles({ */ const useThumbStyles = makeStyles({ thumb: { + // Ensure the thumb stays within the track boundaries. + // When the value is at 0% or 100%, the distance from the track edge + // to the thumb center equals the inner thumb radius. + [`${thumbPositionVar}`]: `min(max(var(${sliderProgressVar}), var(${innerThumbRadiusVar})), calc(100% - var(${innerThumbRadiusVar})))`, gridRowStart: '2', gridRowEnd: '2', gridColumnStart: '2', From d94708f6300095eebc419badad72af421d05d8db Mon Sep 17 00:00:00 2001 From: Dmytro Kirpa Date: Tue, 12 Nov 2024 16:15:56 +0100 Subject: [PATCH 4/4] move var to thumb element --- .../library/src/components/Slider/useSliderStyles.styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-components/react-slider/library/src/components/Slider/useSliderStyles.styles.ts b/packages/react-components/react-slider/library/src/components/Slider/useSliderStyles.styles.ts index 98a9da75176661..66965aef9721f1 100644 --- a/packages/react-components/react-slider/library/src/components/Slider/useSliderStyles.styles.ts +++ b/packages/react-components/react-slider/library/src/components/Slider/useSliderStyles.styles.ts @@ -189,7 +189,7 @@ const useThumbStyles = makeStyles({ // Ensure the thumb stays within the track boundaries. // When the value is at 0% or 100%, the distance from the track edge // to the thumb center equals the inner thumb radius. - [`${thumbPositionVar}`]: `min(max(var(${sliderProgressVar}), var(${innerThumbRadiusVar})), calc(100% - var(${innerThumbRadiusVar})))`, + [`${thumbPositionVar}`]: `clamp(var(${innerThumbRadiusVar}), var(${sliderProgressVar}), calc(100% - var(${innerThumbRadiusVar})))`, gridRowStart: '2', gridRowEnd: '2', gridColumnStart: '2',