fix(ColorPicker): hue slider goes out of bounds (#4465)

lumada-design · Dec 4, 2024 · 75ad7f6 · 75ad7f6
1 parent 4d40f7f
commit 75ad7f6
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git a/packages/core/src/ColorPicker/Picker/Picker.styles.tsx b/packages/core/src/ColorPicker/Picker/Picker.styles.tsx
@@ -54,7 +54,12 @@ export const { staticClasses, useClasses } = createClasses(name, {
     marginLeft: "0px",
     border: "2px solid #fff",
     borderRadius: theme.radii.circle,
-    transform: "translate(0, -2px)",
+    "&.vertical": {
+      transform: "translate(0px, -2px)",
+    },
+    "&.horizontal": {
+      transform: "translate(-6px, -2px)",
+    },
   },
   title: {
     fontWeight: theme.fontWeights.semibold,

diff --git a/packages/core/src/ColorPicker/Picker/Picker.tsx b/packages/core/src/ColorPicker/Picker/Picker.tsx
@@ -46,16 +46,23 @@ const Component = (props: PickerProps) => {
     classes: classesProp,
   } = useDefaultProps("HvColorPickerPicker", props);
   const { activeTheme } = useTheme();
-  const { classes } = useClasses(classesProp);
+  const { classes, cx } = useClasses(classesProp);
 
   const SaturationPointer = useCallback(
     () => <div className={classes?.saturationPointer} />,
     [classes?.saturationPointer],
   );
 
   const HueSlider = useCallback(
-    () => <div className={classes?.hueSlider} />,
-    [classes?.hueSlider],
+    () => (
+      <div
+        className={cx(
+          classes?.hueSlider,
+          activeTheme?.colorPicker.hueDirection,
+        )}
+      />
+    ),
+    [activeTheme?.colorPicker.hueDirection, classes?.hueSlider, cx],
   );
 
   return (