From eaca8dd1c3bd34b3f8f0fc32ed0c1aa47c020160 Mon Sep 17 00:00:00 2001 From: Valentyna Date: Fri, 17 Jan 2025 14:30:54 +0100 Subject: [PATCH 1/7] fix(react-slider): exported internal CSS variables --- .../Slider/useSliderStyles.styles.ts | 128 +++++++++--------- 1 file changed, 62 insertions(+), 66 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 66965aef9721f1..48a1f6f19ad65f 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 @@ -11,23 +11,19 @@ export const sliderClassNames: SlotClassNames = { input: 'fui-Slider__input', }; -// 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`; -const thumbColorVar = `--fui-Slider__thumb--color`; - export const sliderCSSVars = { sliderDirectionVar: `--fui-Slider--direction`, + sliderInnerThumbRadiusVar: `--fui-Slider__inner-thumb--radius`, sliderProgressVar: `--fui-Slider--progress`, + sliderProgressColorVar: `--fui-Slider__progress--color`, + sliderRailSizeVar: `--fui-Slider__rail--size`, + sliderRailColorVar: `--fui-Slider__rail--color`, sliderStepsPercentVar: `--fui-Slider--steps-percent`, + sliderThumbColorVar: `--fui-Slider__thumb--color`, + sliderThumbSizeVar: `--fui-Slider__thumb--size`, + sliderThumbPositionVar: `--fui-Slider__thumb--position`, }; -const { sliderDirectionVar, sliderStepsPercentVar, sliderProgressVar } = sliderCSSVars; - /** * Styles for the root slot */ @@ -41,64 +37,64 @@ const useRootStyles = makeStyles({ }, small: { - [thumbSizeVar]: '16px', - [innerThumbRadiusVar]: '5px', - [railSizeVar]: '2px', + [sliderCSSVars.sliderThumbSizeVar]: '16px', + [sliderCSSVars.sliderInnerThumbRadiusVar]: '5px', + [sliderCSSVars.sliderRailSizeVar]: '2px', minHeight: '24px', }, medium: { - [thumbSizeVar]: '20px', - [innerThumbRadiusVar]: '6px', - [railSizeVar]: '4px', + [sliderCSSVars.sliderThumbSizeVar]: '20px', + [sliderCSSVars.sliderInnerThumbRadiusVar]: '6px', + [sliderCSSVars.sliderRailSizeVar]: '4px', minHeight: '32px', }, horizontal: { minWidth: '120px', // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells - gridTemplateRows: `1fr var(${thumbSizeVar}) 1fr`, - gridTemplateColumns: `1fr calc(100% - var(${thumbSizeVar})) 1fr`, + gridTemplateRows: `1fr var(${sliderCSSVars.sliderThumbSizeVar}) 1fr`, + gridTemplateColumns: `1fr calc(100% - var(${sliderCSSVars.sliderThumbSizeVar})) 1fr`, }, vertical: { minHeight: '120px', // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells - gridTemplateRows: `1fr calc(100% - var(${thumbSizeVar})) 1fr`, - gridTemplateColumns: `1fr var(${thumbSizeVar}) 1fr`, + gridTemplateRows: `1fr calc(100% - var(${sliderCSSVars.sliderThumbSizeVar})) 1fr`, + gridTemplateColumns: `1fr var(${sliderCSSVars.sliderThumbSizeVar}) 1fr`, }, enabled: { - [railColorVar]: tokens.colorNeutralStrokeAccessible, - [progressColorVar]: tokens.colorCompoundBrandBackground, - [thumbColorVar]: tokens.colorCompoundBrandBackground, + [sliderCSSVars.sliderRailColorVar]: tokens.colorNeutralStrokeAccessible, + [sliderCSSVars.sliderProgressColorVar]: tokens.colorCompoundBrandBackground, + [sliderCSSVars.sliderThumbColorVar]: tokens.colorCompoundBrandBackground, ':hover': { - [thumbColorVar]: tokens.colorCompoundBrandBackgroundHover, - [progressColorVar]: tokens.colorCompoundBrandBackgroundHover, + [sliderCSSVars.sliderThumbColorVar]: tokens.colorCompoundBrandBackgroundHover, + [sliderCSSVars.sliderProgressColorVar]: tokens.colorCompoundBrandBackgroundHover, }, ':active': { - [thumbColorVar]: tokens.colorCompoundBrandBackgroundPressed, - [progressColorVar]: tokens.colorCompoundBrandBackgroundPressed, + [sliderCSSVars.sliderThumbColorVar]: tokens.colorCompoundBrandBackgroundPressed, + [sliderCSSVars.sliderProgressColorVar]: tokens.colorCompoundBrandBackgroundPressed, }, '@media (forced-colors: active)': { - [railColorVar]: 'CanvasText', - [thumbColorVar]: 'Highlight', - [progressColorVar]: 'Highlight', + [sliderCSSVars.sliderRailColorVar]: 'CanvasText', + [sliderCSSVars.sliderThumbColorVar]: 'Highlight', + [sliderCSSVars.sliderProgressColorVar]: 'Highlight', ':hover': { - [thumbColorVar]: 'Highlight', - [progressColorVar]: 'Highlight', + [sliderCSSVars.sliderThumbColorVar]: 'Highlight', + [sliderCSSVars.sliderProgressColorVar]: 'Highlight', }, }, }, disabled: { - [thumbColorVar]: tokens.colorNeutralForegroundDisabled, - [railColorVar]: tokens.colorNeutralBackgroundDisabled, - [progressColorVar]: tokens.colorNeutralForegroundDisabled, + [sliderCSSVars.sliderThumbColorVar]: tokens.colorNeutralForegroundDisabled, + [sliderCSSVars.sliderRailColorVar]: tokens.colorNeutralBackgroundDisabled, + [sliderCSSVars.sliderProgressColorVar]: tokens.colorNeutralForegroundDisabled, '@media (forced-colors: active)': { - [railColorVar]: 'GrayText', - [thumbColorVar]: 'GrayText', - [progressColorVar]: 'GrayText', + [sliderCSSVars.sliderRailColorVar]: 'GrayText', + [sliderCSSVars.sliderThumbColorVar]: 'GrayText', + [sliderCSSVars.sliderProgressColorVar]: 'GrayText', }, }, @@ -128,10 +124,10 @@ const useRailStyles = makeStyles({ forcedColorAdjust: 'none', // Background gradient represents the progress of the slider backgroundImage: `linear-gradient( - var(${sliderDirectionVar}), - var(${progressColorVar}) 0%, - var(${progressColorVar}) var(${sliderProgressVar}), - var(${railColorVar}) var(${sliderProgressVar}) + var(${sliderCSSVars.sliderDirectionVar}), + var(${sliderCSSVars.sliderProgressColorVar}) 0%, + var(${sliderCSSVars.sliderProgressColorVar}) var(${sliderCSSVars.sliderProgressVar}), + var(${sliderCSSVars.sliderRailColorVar}) var(${sliderCSSVars.sliderProgressVar}) )`, outlineWidth: '1px', outlineStyle: 'solid', @@ -141,20 +137,20 @@ const useRailStyles = makeStyles({ position: 'absolute', // Repeating gradient represents the steps if provided backgroundImage: `repeating-linear-gradient( - var(${sliderDirectionVar}), + var(${sliderCSSVars.sliderDirectionVar}), #0000 0%, - #0000 calc(var(${sliderStepsPercentVar}) - 1px), - ${tokens.colorNeutralBackground1} calc(var(${sliderStepsPercentVar}) - 1px), - ${tokens.colorNeutralBackground1} var(${sliderStepsPercentVar}) + #0000 calc(var(${sliderCSSVars.sliderStepsPercentVar}) - 1px), + ${tokens.colorNeutralBackground1} calc(var(${sliderCSSVars.sliderStepsPercentVar}) - 1px), + ${tokens.colorNeutralBackground1} var(${sliderCSSVars.sliderStepsPercentVar}) )`, // force steps to use HighlightText for high contrast mode '@media (forced-colors: active)': { backgroundImage: `repeating-linear-gradient( - var(${sliderDirectionVar}), + var(${sliderCSSVars.sliderDirectionVar}), #0000 0%, - #0000 calc(var(${sliderStepsPercentVar}) - 1px), - HighlightText calc(var(${sliderStepsPercentVar}) - 1px), - HighlightText var(${sliderStepsPercentVar}) + #0000 calc(var(${sliderCSSVars.sliderStepsPercentVar}) - 1px), + HighlightText calc(var(${sliderCSSVars.sliderStepsPercentVar}) - 1px), + HighlightText var(${sliderCSSVars.sliderStepsPercentVar}) )`, }, }, @@ -162,19 +158,19 @@ const useRailStyles = makeStyles({ horizontal: { width: '100%', - height: `var(${railSizeVar})`, + height: `var(${sliderCSSVars.sliderRailSizeVar})`, '::before': { left: '-1px', right: '-1px', - height: `var(${railSizeVar})`, + height: `var(${sliderCSSVars.sliderRailSizeVar})`, }, }, vertical: { - width: `var(${railSizeVar})`, + width: `var(${sliderCSSVars.sliderRailSizeVar})`, height: '100%', '::before': { - width: `var(${railSizeVar})`, + width: `var(${sliderCSSVars.sliderRailSizeVar})`, top: '-1px', bottom: '-1px', }, @@ -189,20 +185,20 @@ 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}`]: `clamp(var(${innerThumbRadiusVar}), var(${sliderProgressVar}), calc(100% - var(${innerThumbRadiusVar})))`, + [`${sliderCSSVars.sliderThumbPositionVar}`]: `clamp(var(${sliderCSSVars.sliderInnerThumbRadiusVar}), var(${sliderCSSVars.sliderProgressVar}), calc(100% - var(${sliderCSSVars.sliderInnerThumbRadiusVar})))`, gridRowStart: '2', gridRowEnd: '2', gridColumnStart: '2', gridColumnEnd: '2', position: 'absolute', - width: `var(${thumbSizeVar})`, - height: `var(${thumbSizeVar})`, + width: `var(${sliderCSSVars.sliderThumbSizeVar})`, + height: `var(${sliderCSSVars.sliderThumbSizeVar})`, pointerEvents: 'none', outlineStyle: 'none', forcedColorAdjust: 'none', borderRadius: tokens.borderRadiusCircular, - boxShadow: `0 0 0 calc(var(${thumbSizeVar}) * .2) ${tokens.colorNeutralBackground1} inset`, - backgroundColor: `var(${thumbColorVar})`, + boxShadow: `0 0 0 calc(var(${sliderCSSVars.sliderThumbSizeVar}) * .2) ${tokens.colorNeutralBackground1} inset`, + backgroundColor: `var(${sliderCSSVars.sliderThumbColorVar})`, '::before': { position: 'absolute', top: '0px', @@ -212,21 +208,21 @@ const useThumbStyles = makeStyles({ borderRadius: tokens.borderRadiusCircular, boxSizing: 'border-box', content: "''", - border: `calc(var(${thumbSizeVar}) * .05) solid ${tokens.colorNeutralStroke1}`, + border: `calc(var(${sliderCSSVars.sliderThumbSizeVar}) * .05) solid ${tokens.colorNeutralStroke1}`, }, }, disabled: { '::before': { - border: `calc(var(${thumbSizeVar}) * .05) solid ${tokens.colorNeutralForegroundDisabled}`, + border: `calc(var(${sliderCSSVars.sliderThumbSizeVar}) * .05) solid ${tokens.colorNeutralForegroundDisabled}`, }, }, horizontal: { transform: 'translateX(-50%)', - left: `var(${thumbPositionVar})`, + left: `var(${sliderCSSVars.sliderThumbPositionVar})`, }, vertical: { transform: 'translateY(50%)', - bottom: `var(${thumbPositionVar})`, + bottom: `var(${sliderCSSVars.sliderThumbPositionVar})`, }, }); @@ -248,12 +244,12 @@ const useInputStyles = makeStyles({ cursor: 'default', }, horizontal: { - height: `var(${thumbSizeVar})`, + height: `var(${sliderCSSVars.sliderThumbSizeVar})`, width: '100%', }, vertical: { height: '100%', - width: `var(${thumbSizeVar})`, + width: `var(${sliderCSSVars.sliderThumbSizeVar})`, '-webkit-appearance': 'slider-vertical', }, }); From 0346814343dbdd3e556b27f6b9816f6a0f8579a5 Mon Sep 17 00:00:00 2001 From: Valentyna Date: Fri, 17 Jan 2025 14:32:53 +0100 Subject: [PATCH 2/7] change files --- ...-react-slider-fd76d130-d916-4372-8ebb-4570aa203878.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-slider-fd76d130-d916-4372-8ebb-4570aa203878.json diff --git a/change/@fluentui-react-slider-fd76d130-d916-4372-8ebb-4570aa203878.json b/change/@fluentui-react-slider-fd76d130-d916-4372-8ebb-4570aa203878.json new file mode 100644 index 00000000000000..a44a2ab412c9da --- /dev/null +++ b/change/@fluentui-react-slider-fd76d130-d916-4372-8ebb-4570aa203878.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: exported internal CSS variables", + "packageName": "@fluentui/react-slider", + "email": "vkozlova@microsoft.com", + "dependentChangeType": "patch" +} From 857497f4101be0c7baf2baee6458bd5bf38d07ec Mon Sep 17 00:00:00 2001 From: Valentyna Date: Fri, 17 Jan 2025 15:03:50 +0100 Subject: [PATCH 3/7] updated api --- .../react-slider/library/etc/react-slider.api.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/react-components/react-slider/library/etc/react-slider.api.md b/packages/react-components/react-slider/library/etc/react-slider.api.md index 0f8a209ecc1d20..589615c9567acd 100644 --- a/packages/react-components/react-slider/library/etc/react-slider.api.md +++ b/packages/react-components/react-slider/library/etc/react-slider.api.md @@ -25,8 +25,15 @@ export const sliderClassNames: SlotClassNames; // @public (undocumented) export const sliderCSSVars: { sliderDirectionVar: string; + sliderInnerThumbRadiusVar: string; sliderProgressVar: string; + sliderProgressColorVar: string; + sliderRailSizeVar: string; + sliderRailColorVar: string; sliderStepsPercentVar: string; + sliderThumbColorVar: string; + sliderThumbSizeVar: string; + sliderThumbPositionVar: string; }; // @public (undocumented) From 8975b05c684902bd33dfc73caea736bd5bf290ea Mon Sep 17 00:00:00 2001 From: Valentyna Date: Mon, 20 Jan 2025 12:17:33 +0100 Subject: [PATCH 4/7] PR fix --- .../Slider/useSliderStyles.styles.ts | 119 ++++++++++-------- 1 file changed, 66 insertions(+), 53 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 48a1f6f19ad65f..cc6e07fc00ff11 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 @@ -24,6 +24,19 @@ export const sliderCSSVars = { sliderThumbPositionVar: `--fui-Slider__thumb--position`, }; +const { + sliderDirectionVar, + sliderInnerThumbRadiusVar, + sliderProgressVar, + sliderProgressColorVar, + sliderRailSizeVar, + sliderRailColorVar, + sliderStepsPercentVar, + sliderThumbColorVar, + sliderThumbSizeVar, + sliderThumbPositionVar, +} = sliderCSSVars; + /** * Styles for the root slot */ @@ -37,62 +50,62 @@ const useRootStyles = makeStyles({ }, small: { - [sliderCSSVars.sliderThumbSizeVar]: '16px', - [sliderCSSVars.sliderInnerThumbRadiusVar]: '5px', - [sliderCSSVars.sliderRailSizeVar]: '2px', + [sliderThumbSizeVar]: '16px', + [sliderInnerThumbRadiusVar]: '5px', + [sliderRailSizeVar]: '2px', minHeight: '24px', }, medium: { - [sliderCSSVars.sliderThumbSizeVar]: '20px', - [sliderCSSVars.sliderInnerThumbRadiusVar]: '6px', - [sliderCSSVars.sliderRailSizeVar]: '4px', + [sliderThumbSizeVar]: '20px', + [sliderInnerThumbRadiusVar]: '6px', + [sliderRailSizeVar]: '4px', minHeight: '32px', }, horizontal: { minWidth: '120px', // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells - gridTemplateRows: `1fr var(${sliderCSSVars.sliderThumbSizeVar}) 1fr`, - gridTemplateColumns: `1fr calc(100% - var(${sliderCSSVars.sliderThumbSizeVar})) 1fr`, + gridTemplateRows: `1fr var(${sliderThumbSizeVar}) 1fr`, + gridTemplateColumns: `1fr calc(100% - var(${sliderThumbSizeVar})) 1fr`, }, vertical: { minHeight: '120px', // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells - gridTemplateRows: `1fr calc(100% - var(${sliderCSSVars.sliderThumbSizeVar})) 1fr`, - gridTemplateColumns: `1fr var(${sliderCSSVars.sliderThumbSizeVar}) 1fr`, + gridTemplateRows: `1fr calc(100% - var(${sliderThumbSizeVar})) 1fr`, + gridTemplateColumns: `1fr var(${sliderThumbSizeVar}) 1fr`, }, enabled: { - [sliderCSSVars.sliderRailColorVar]: tokens.colorNeutralStrokeAccessible, - [sliderCSSVars.sliderProgressColorVar]: tokens.colorCompoundBrandBackground, - [sliderCSSVars.sliderThumbColorVar]: tokens.colorCompoundBrandBackground, + [sliderRailColorVar]: tokens.colorNeutralStrokeAccessible, + [sliderProgressColorVar]: tokens.colorCompoundBrandBackground, + [sliderThumbColorVar]: tokens.colorCompoundBrandBackground, ':hover': { - [sliderCSSVars.sliderThumbColorVar]: tokens.colorCompoundBrandBackgroundHover, - [sliderCSSVars.sliderProgressColorVar]: tokens.colorCompoundBrandBackgroundHover, + [sliderThumbColorVar]: tokens.colorCompoundBrandBackgroundHover, + [sliderProgressColorVar]: tokens.colorCompoundBrandBackgroundHover, }, ':active': { - [sliderCSSVars.sliderThumbColorVar]: tokens.colorCompoundBrandBackgroundPressed, - [sliderCSSVars.sliderProgressColorVar]: tokens.colorCompoundBrandBackgroundPressed, + [sliderThumbColorVar]: tokens.colorCompoundBrandBackgroundPressed, + [sliderProgressColorVar]: tokens.colorCompoundBrandBackgroundPressed, }, '@media (forced-colors: active)': { - [sliderCSSVars.sliderRailColorVar]: 'CanvasText', - [sliderCSSVars.sliderThumbColorVar]: 'Highlight', - [sliderCSSVars.sliderProgressColorVar]: 'Highlight', + [sliderRailColorVar]: 'CanvasText', + [sliderThumbColorVar]: 'Highlight', + [sliderProgressColorVar]: 'Highlight', ':hover': { - [sliderCSSVars.sliderThumbColorVar]: 'Highlight', - [sliderCSSVars.sliderProgressColorVar]: 'Highlight', + [sliderThumbColorVar]: 'Highlight', + [sliderProgressColorVar]: 'Highlight', }, }, }, disabled: { - [sliderCSSVars.sliderThumbColorVar]: tokens.colorNeutralForegroundDisabled, - [sliderCSSVars.sliderRailColorVar]: tokens.colorNeutralBackgroundDisabled, - [sliderCSSVars.sliderProgressColorVar]: tokens.colorNeutralForegroundDisabled, + [sliderThumbColorVar]: tokens.colorNeutralForegroundDisabled, + [sliderRailColorVar]: tokens.colorNeutralBackgroundDisabled, + [sliderProgressColorVar]: tokens.colorNeutralForegroundDisabled, '@media (forced-colors: active)': { - [sliderCSSVars.sliderRailColorVar]: 'GrayText', + [sliderRailColorVar]: 'GrayText', [sliderCSSVars.sliderThumbColorVar]: 'GrayText', [sliderCSSVars.sliderProgressColorVar]: 'GrayText', }, @@ -124,10 +137,10 @@ const useRailStyles = makeStyles({ forcedColorAdjust: 'none', // Background gradient represents the progress of the slider backgroundImage: `linear-gradient( - var(${sliderCSSVars.sliderDirectionVar}), - var(${sliderCSSVars.sliderProgressColorVar}) 0%, - var(${sliderCSSVars.sliderProgressColorVar}) var(${sliderCSSVars.sliderProgressVar}), - var(${sliderCSSVars.sliderRailColorVar}) var(${sliderCSSVars.sliderProgressVar}) + var(${sliderDirectionVar}), + var(${sliderProgressColorVar}) 0%, + var(${sliderProgressColorVar}) var(${sliderProgressVar}), + var(${sliderRailColorVar}) var(${sliderProgressVar}) )`, outlineWidth: '1px', outlineStyle: 'solid', @@ -137,20 +150,20 @@ const useRailStyles = makeStyles({ position: 'absolute', // Repeating gradient represents the steps if provided backgroundImage: `repeating-linear-gradient( - var(${sliderCSSVars.sliderDirectionVar}), + var(${sliderDirectionVar}), #0000 0%, - #0000 calc(var(${sliderCSSVars.sliderStepsPercentVar}) - 1px), - ${tokens.colorNeutralBackground1} calc(var(${sliderCSSVars.sliderStepsPercentVar}) - 1px), - ${tokens.colorNeutralBackground1} var(${sliderCSSVars.sliderStepsPercentVar}) + #0000 calc(var(${sliderStepsPercentVar}) - 1px), + ${tokens.colorNeutralBackground1} calc(var(${sliderStepsPercentVar}) - 1px), + ${tokens.colorNeutralBackground1} var(${sliderStepsPercentVar}) )`, // force steps to use HighlightText for high contrast mode '@media (forced-colors: active)': { backgroundImage: `repeating-linear-gradient( - var(${sliderCSSVars.sliderDirectionVar}), + var(${sliderDirectionVar}), #0000 0%, - #0000 calc(var(${sliderCSSVars.sliderStepsPercentVar}) - 1px), - HighlightText calc(var(${sliderCSSVars.sliderStepsPercentVar}) - 1px), - HighlightText var(${sliderCSSVars.sliderStepsPercentVar}) + #0000 calc(var(${sliderStepsPercentVar}) - 1px), + HighlightText calc(var(${sliderStepsPercentVar}) - 1px), + HighlightText var(${sliderStepsPercentVar}) )`, }, }, @@ -158,19 +171,19 @@ const useRailStyles = makeStyles({ horizontal: { width: '100%', - height: `var(${sliderCSSVars.sliderRailSizeVar})`, + height: `var(${sliderRailSizeVar})`, '::before': { left: '-1px', right: '-1px', - height: `var(${sliderCSSVars.sliderRailSizeVar})`, + height: `var(${sliderRailSizeVar})`, }, }, vertical: { - width: `var(${sliderCSSVars.sliderRailSizeVar})`, + width: `var(${sliderRailSizeVar})`, height: '100%', '::before': { - width: `var(${sliderCSSVars.sliderRailSizeVar})`, + width: `var(${sliderRailSizeVar})`, top: '-1px', bottom: '-1px', }, @@ -185,20 +198,20 @@ 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. - [`${sliderCSSVars.sliderThumbPositionVar}`]: `clamp(var(${sliderCSSVars.sliderInnerThumbRadiusVar}), var(${sliderCSSVars.sliderProgressVar}), calc(100% - var(${sliderCSSVars.sliderInnerThumbRadiusVar})))`, + [`${sliderThumbPositionVar}`]: `clamp(var(${sliderInnerThumbRadiusVar}), var(${sliderProgressVar}), calc(100% - var(${sliderInnerThumbRadiusVar})))`, gridRowStart: '2', gridRowEnd: '2', gridColumnStart: '2', gridColumnEnd: '2', position: 'absolute', - width: `var(${sliderCSSVars.sliderThumbSizeVar})`, - height: `var(${sliderCSSVars.sliderThumbSizeVar})`, + width: `var(${sliderThumbSizeVar})`, + height: `var(${sliderThumbSizeVar})`, pointerEvents: 'none', outlineStyle: 'none', forcedColorAdjust: 'none', borderRadius: tokens.borderRadiusCircular, - boxShadow: `0 0 0 calc(var(${sliderCSSVars.sliderThumbSizeVar}) * .2) ${tokens.colorNeutralBackground1} inset`, - backgroundColor: `var(${sliderCSSVars.sliderThumbColorVar})`, + boxShadow: `0 0 0 calc(var(${sliderThumbSizeVar}) * .2) ${tokens.colorNeutralBackground1} inset`, + backgroundColor: `var(${sliderThumbColorVar})`, '::before': { position: 'absolute', top: '0px', @@ -208,21 +221,21 @@ const useThumbStyles = makeStyles({ borderRadius: tokens.borderRadiusCircular, boxSizing: 'border-box', content: "''", - border: `calc(var(${sliderCSSVars.sliderThumbSizeVar}) * .05) solid ${tokens.colorNeutralStroke1}`, + border: `calc(var(${sliderThumbSizeVar}) * .05) solid ${tokens.colorNeutralStroke1}`, }, }, disabled: { '::before': { - border: `calc(var(${sliderCSSVars.sliderThumbSizeVar}) * .05) solid ${tokens.colorNeutralForegroundDisabled}`, + border: `calc(var(${sliderThumbSizeVar}) * .05) solid ${tokens.colorNeutralForegroundDisabled}`, }, }, horizontal: { transform: 'translateX(-50%)', - left: `var(${sliderCSSVars.sliderThumbPositionVar})`, + left: `var(${sliderThumbPositionVar})`, }, vertical: { transform: 'translateY(50%)', - bottom: `var(${sliderCSSVars.sliderThumbPositionVar})`, + bottom: `var(${sliderThumbPositionVar})`, }, }); @@ -244,12 +257,12 @@ const useInputStyles = makeStyles({ cursor: 'default', }, horizontal: { - height: `var(${sliderCSSVars.sliderThumbSizeVar})`, + height: `var(${sliderThumbSizeVar})`, width: '100%', }, vertical: { height: '100%', - width: `var(${sliderCSSVars.sliderThumbSizeVar})`, + width: `var(${sliderThumbSizeVar})`, '-webkit-appearance': 'slider-vertical', }, }); From df41a5807abf92c68a25a101e14018246b9692ab Mon Sep 17 00:00:00 2001 From: Valentyna Date: Mon, 20 Jan 2025 12:27:53 +0100 Subject: [PATCH 5/7] Added story with customized slider --- .../src/Slider/SliderCustomized.stories.tsx | 47 +++++++++++++++++++ .../stories/src/Slider/index.stories.tsx | 1 + 2 files changed, 48 insertions(+) create mode 100644 packages/react-components/react-slider/stories/src/Slider/SliderCustomized.stories.tsx diff --git a/packages/react-components/react-slider/stories/src/Slider/SliderCustomized.stories.tsx b/packages/react-components/react-slider/stories/src/Slider/SliderCustomized.stories.tsx new file mode 100644 index 00000000000000..532481df1b7586 --- /dev/null +++ b/packages/react-components/react-slider/stories/src/Slider/SliderCustomized.stories.tsx @@ -0,0 +1,47 @@ +import * as React from 'react'; +import { useId, Label, Slider, makeStyles, sliderCSSVars, tokens } from '@fluentui/react-components'; + +const { sliderProgressColorVar, sliderRailColorVar, sliderThumbColorVar, sliderThumbSizeVar } = sliderCSSVars; + +const useStyles = makeStyles({ + enabled: { + [sliderProgressColorVar]: '#ff0764', + [sliderRailColorVar]: tokens.colorNeutralForeground1, + [sliderThumbColorVar]: '#ff0764', + ':hover': { + [sliderThumbColorVar]: '#d60d58', + [sliderProgressColorVar]: '#d60d58', + ':active': { + [sliderThumbColorVar]: '#b91150', + [sliderProgressColorVar]: '#b91150', + }, + }, + }, + thumb: { + [sliderThumbSizeVar]: '16px', + boxShadow: `0 0 0 calc(var(${sliderThumbSizeVar}) * .2) ${tokens.colorTransparentBackground} inset`, + '::before': { + content: 'unset', + }, + }, +}); + +export const Customized = () => { + const id = useId(); + const styles = useStyles(); + + return ( + <> + + + + ); +}; + +Customized.parameters = { + docs: { + description: { + story: 'Customized slider using its variables', + }, + }, +}; diff --git a/packages/react-components/react-slider/stories/src/Slider/index.stories.tsx b/packages/react-components/react-slider/stories/src/Slider/index.stories.tsx index 6682087de62ded..22c240f8b20672 100644 --- a/packages/react-components/react-slider/stories/src/Slider/index.stories.tsx +++ b/packages/react-components/react-slider/stories/src/Slider/index.stories.tsx @@ -11,6 +11,7 @@ export { Step } from './SliderStep.stories'; export { MinMax } from './SliderMinMax.stories'; export { Vertical } from './SliderVertical.stories'; export { Disabled } from './SliderDisabled.stories'; +export { Customized } from './SliderCustomized.stories'; export default { title: 'Components/Slider', From c7e819e2d3e8461615fd1889a4f6e8ae76831d86 Mon Sep 17 00:00:00 2001 From: Valentyna Date: Mon, 27 Jan 2025 08:32:28 +0100 Subject: [PATCH 6/7] returned back thumbPositionVar to internal CSS variables --- .../src/components/Slider/useSliderStyles.styles.ts | 11 ++++++----- 1 file changed, 6 insertions(+), 5 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 cc6e07fc00ff11..b031f23e53480e 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 @@ -11,6 +11,9 @@ export const sliderClassNames: SlotClassNames = { input: 'fui-Slider__input', }; +// Internal CSS variables +const thumbPositionVar = `--fui-Slider__thumb--position`; + export const sliderCSSVars = { sliderDirectionVar: `--fui-Slider--direction`, sliderInnerThumbRadiusVar: `--fui-Slider__inner-thumb--radius`, @@ -21,7 +24,6 @@ export const sliderCSSVars = { sliderStepsPercentVar: `--fui-Slider--steps-percent`, sliderThumbColorVar: `--fui-Slider__thumb--color`, sliderThumbSizeVar: `--fui-Slider__thumb--size`, - sliderThumbPositionVar: `--fui-Slider__thumb--position`, }; const { @@ -34,7 +36,6 @@ const { sliderStepsPercentVar, sliderThumbColorVar, sliderThumbSizeVar, - sliderThumbPositionVar, } = sliderCSSVars; /** @@ -198,7 +199,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. - [`${sliderThumbPositionVar}`]: `clamp(var(${sliderInnerThumbRadiusVar}), var(${sliderProgressVar}), calc(100% - var(${sliderInnerThumbRadiusVar})))`, + [`${thumbPositionVar}`]: `clamp(var(${sliderInnerThumbRadiusVar}), var(${sliderProgressVar}), calc(100% - var(${sliderInnerThumbRadiusVar})))`, gridRowStart: '2', gridRowEnd: '2', gridColumnStart: '2', @@ -231,11 +232,11 @@ const useThumbStyles = makeStyles({ }, horizontal: { transform: 'translateX(-50%)', - left: `var(${sliderThumbPositionVar})`, + left: `var(${thumbPositionVar})`, }, vertical: { transform: 'translateY(50%)', - bottom: `var(${sliderThumbPositionVar})`, + bottom: `var(${thumbPositionVar})`, }, }); From 42e585099185f78cbd8b1e9642fb8fa976fd28fe Mon Sep 17 00:00:00 2001 From: Valentyna Date: Thu, 30 Jan 2025 14:34:12 +0100 Subject: [PATCH 7/7] generated api --- .../react-slider/library/etc/react-slider.api.md | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/react-components/react-slider/library/etc/react-slider.api.md b/packages/react-components/react-slider/library/etc/react-slider.api.md index 589615c9567acd..725ed863cb01c0 100644 --- a/packages/react-components/react-slider/library/etc/react-slider.api.md +++ b/packages/react-components/react-slider/library/etc/react-slider.api.md @@ -33,7 +33,6 @@ export const sliderCSSVars: { sliderStepsPercentVar: string; sliderThumbColorVar: string; sliderThumbSizeVar: string; - sliderThumbPositionVar: string; }; // @public (undocumented)