feat(design): update color presets and add tests for ColorPicker (#…

…4583)
dream-num · Feb 5, 2025 · a54ab30 · a54ab30
1 parent ff4ae42
commit a54ab30
Show file tree

Hide file tree

Showing 6 changed files with 1,152 additions and 8 deletions.
diff --git a/packages/design/src/components/color-picker/ColorPicker.tsx b/packages/design/src/components/color-picker/ColorPicker.tsx
@@ -49,12 +49,12 @@ export function ColorPicker({ format = 'hex', value = '#000000', showAlpha = fal
     useEffect(() => {
         try {
             if (format === 'hex') {
-                const [h, s, v] = hexToHsv(value);
+                const [h, s, v] = value ? hexToHsv(value) : hsv;
                 setHsv([h, s, v]);
                 setAlpha(1);
             }
         } catch (error) {
-            console.error('Invalid RGBA value:', error);
+            console.error('Invalid value:', error);
         }
     }, [value]);
 

diff --git a/packages/design/src/components/color-picker/ColorPresets.tsx b/packages/design/src/components/color-picker/ColorPresets.tsx
@@ -44,10 +44,12 @@ export function ColorPresets({ hsv, onChange }: IColorPresetsProps) {
                             key={j}
                             type="button"
                             className={clsx(`
-                              univer-h-5 univer-w-5 univer-cursor-pointer univer-rounded-full univer-border-none
-                              univer-bg-gray-300 univer-transition-shadow
+                              univer-box-border univer-h-5 univer-w-5 univer-cursor-pointer univer-rounded-full
+                              univer-border univer-border-solid univer-border-transparent univer-bg-gray-300
+                              univer-transition-shadow
                             `, {
                                 'univer-ring-2 univer-ring-offset-2 univer-ring-offset-white dark:univer-ring-primary-600 dark:univer-ring-offset-gray-600': color.toUpperCase() === currentColor.toUpperCase(),
+                                '!univer-border-gray-200': i === 0 && j === 0,
                             })}
                             style={{ backgroundColor: color }}
                             onClick={() => handleSelectPreset(color)}