fix(react-color-picker): fixed thumb position for ColorPicker (#33356)

microsoft · Nov 27, 2024 · 5ada132 · 5ada132
1 parent 3626d0a
commit 5ada132
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 9 deletions.
diff --git a/...ct-color-picker-preview/library/src/components/AlphaSlider/useAlphaSliderStyles.styles.ts b/...ct-color-picker-preview/library/src/components/AlphaSlider/useAlphaSliderStyles.styles.ts
@@ -20,10 +20,17 @@ export const alphaSliderCSSVars = {
   railColorVar: `--fui-AlphaSlider__rail--color`,
 };
 
+// Internal CSS variables
+const thumbPositionVar = `--fui-AlphaSlider__thumb--position`;
+const innerThumbRadiusVar = `--fui-AlphaSlider__thumb--radius`;
+
 /**
  * Styles for the root slot
  */
 const useStyles = makeStyles({
+  root: {
+    [innerThumbRadiusVar]: '6px',
+  },
   rail: {
     border: `1px solid ${tokens.colorNeutralStroke1}`,
     backgroundImage: `linear-gradient(var(${alphaSliderCSSVars.sliderDirectionVar}), transparent, var(${alphaSliderCSSVars.railColorVar})), url(${TRANSPARENT_IMAGE_URL})`,
@@ -36,14 +43,15 @@ const useStyles = makeStyles({
 const useThumbStyles = makeStyles({
   thumb: {
     backgroundColor: `var(${alphaSliderCSSVars.thumbColorVar})`,
+    [`${thumbPositionVar}`]: `clamp(var(${innerThumbRadiusVar}), var(${alphaSliderCSSVars.sliderProgressVar}), calc(100% - var(${innerThumbRadiusVar})))`,
   },
   horizontal: {
     transform: 'translateX(-50%)',
-    left: `var(${alphaSliderCSSVars.sliderProgressVar})`,
+    left: `var(${thumbPositionVar})`,
   },
   vertical: {
     transform: 'translateY(50%)',
-    bottom: `var(${alphaSliderCSSVars.sliderProgressVar})`,
+    bottom: `var(${thumbPositionVar})`,
   },
 });
 
@@ -55,7 +63,7 @@ export const useAlphaSliderStyles_unstable = (state: AlphaSliderState): AlphaSli
 
   const styles = useStyles();
   const thumbStyles = useThumbStyles();
-  state.root.className = mergeClasses(alphaSliderClassNames.root, state.root.className);
+  state.root.className = mergeClasses(alphaSliderClassNames.root, styles.root, state.root.className);
   state.input.className = mergeClasses(alphaSliderClassNames.input, state.input.className);
   state.rail.className = mergeClasses(alphaSliderClassNames.rail, styles.rail, state.rail.className);
 

diff --git a/.../react-color-picker-preview/library/src/components/ColorArea/useColorAreaStyles.styles.ts b/.../react-color-picker-preview/library/src/components/ColorArea/useColorAreaStyles.styles.ts
@@ -20,6 +20,9 @@ export const colorAreaCSSVars = {
 
 // Internal CSS variables
 const thumbSizeVar = `--fui-Slider__thumb--size`;
+const thumbPositionXVar = `--fui-AlphaSlider__thumb--positionX`;
+const thumbPositionYVar = `--fui-AlphaSlider__thumb--positionY`;
+const innerThumbRadiusVar = `--fui-AlphaSlider__thumb--radius`;
 
 /**
  * Styles for the root slot
@@ -37,6 +40,7 @@ const useRootStyles = makeResetStyles({
   [thumbSizeVar]: '20px',
   minWidth: '200px',
   minHeight: '200px',
+  [innerThumbRadiusVar]: '6px',
 });
 
 /**
@@ -54,8 +58,10 @@ const useThumbStyles = makeStyles({
     boxShadow: `0 0 0 calc(var(${thumbSizeVar}) * .2) ${tokens.colorNeutralBackground1} inset`,
     backgroundColor: `var(${colorAreaCSSVars.thumbColorVar})`,
     transform: 'translate(-50%, 50%)',
-    left: `var(${colorAreaCSSVars.areaXProgressVar})`,
-    bottom: `var(${colorAreaCSSVars.areaYProgressVar})`,
+    [`${thumbPositionXVar}`]: `clamp(var(${innerThumbRadiusVar}), var(${colorAreaCSSVars.areaXProgressVar}), calc(100% - var(${innerThumbRadiusVar})))`,
+    [`${thumbPositionYVar}`]: `clamp(var(${innerThumbRadiusVar}), var(${colorAreaCSSVars.areaYProgressVar}), calc(100% - var(${innerThumbRadiusVar})))`,
+    left: `var(${thumbPositionXVar})`,
+    bottom: `var(${thumbPositionYVar})`,
     '::before': {
       position: 'absolute',
       inset: '0px',

diff --git a/...ct-color-picker-preview/library/src/components/ColorSlider/useColorSliderStyles.styles.ts b/...ct-color-picker-preview/library/src/components/ColorSlider/useColorSliderStyles.styles.ts
@@ -19,6 +19,8 @@ export const colorSliderCSSVars = {
 // Internal CSS variables
 const thumbSizeVar = `--fui-Slider__thumb--size`;
 const railSizeVar = `--fui-Slider__rail--size`;
+const innerThumbRadiusVar = `--fui-Slider__inner-thumb--radius`;
+const thumbPositionVar = `--fui-Slider__thumb--position`;
 
 const hueBackground = `linear-gradient(${[
   `var(${colorSliderCSSVars.sliderDirectionVar})`,
@@ -46,6 +48,7 @@ const useRootStyles = makeResetStyles({
   justifyItems: 'center',
   [thumbSizeVar]: '20px',
   [railSizeVar]: '20px',
+  [innerThumbRadiusVar]: '6px',
   minHeight: '32px',
 });
 
@@ -54,13 +57,13 @@ const useStyles = makeStyles({
     minWidth: '200px',
     // 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`,
+    gridTemplateColumns: `1fr 100% 1fr`,
   },
 
   vertical: {
     minHeight: '280px',
     // 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`,
+    gridTemplateRows: `1fr 100% 1fr`,
     gridTemplateColumns: `1fr var(${thumbSizeVar}) 1fr`,
   },
   hue: {
@@ -129,6 +132,7 @@ const useThumbStyles = makeStyles({
     borderRadius: tokens.borderRadiusCircular,
     boxShadow: `0 0 0 calc(var(${thumbSizeVar}) * .2) ${tokens.colorNeutralBackground1} inset`,
     backgroundColor: `var(${colorSliderCSSVars.thumbColorVar})`,
+    [`${thumbPositionVar}`]: `clamp(var(${innerThumbRadiusVar}), var(${colorSliderCSSVars.sliderProgressVar}), calc(100% - var(${innerThumbRadiusVar})))`,
     '::before': {
       position: 'absolute',
       top: '0px',
@@ -143,11 +147,11 @@ const useThumbStyles = makeStyles({
   },
   horizontal: {
     transform: 'translateX(-50%)',
-    left: `var(${colorSliderCSSVars.sliderProgressVar})`,
+    left: `var(${thumbPositionVar})`,
   },
   vertical: {
     transform: 'translateY(50%)',
-    bottom: `var(${colorSliderCSSVars.sliderProgressVar})`,
+    bottom: `var(${thumbPositionVar})`,
   },
 });