[components] Fix color picker usability (#6512)

plone · Dec 5, 2024 · d33d339 · d33d339
1 parent 0c352db
commit d33d339
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 2 deletions.
diff --git a/packages/components/news/6512.bugfix b/packages/components/news/6512.bugfix
@@ -0,0 +1 @@
+Fix color picker usability. @sneridagh
diff --git a/packages/components/src/components/ColorPicker/ColorPicker.stories.tsx b/packages/components/src/components/ColorPicker/ColorPicker.stories.tsx
@@ -14,11 +14,22 @@ const meta = {
   tags: ['autodocs'],
 } satisfies Meta<typeof ColorPicker>;
 
+const ColorPickerStory = (args: any) => {
+  const [color, setColor] = React.useState(args.defaultValue);
+
+  return (
+    <>
+      <ColorPicker {...args} value={color} onChange={setColor} />
+      The color is: {color.toString('hex')}
+    </>
+  );
+};
+
 export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-  render: (args: any) => <ColorPicker {...args} />,
+  render: ColorPickerStory,
 };
 
 Default.args = {

diff --git a/packages/components/src/components/ColorPicker/ColorPicker.tsx b/packages/components/src/components/ColorPicker/ColorPicker.tsx
@@ -35,7 +35,14 @@ export function ColorPicker({ label, children, ...props }: ColorPickerProps) {
                   yChannel="brightness"
                 />
                 <ColorSlider colorSpace="hsb" channel="hue" />
-                <ColorField label="Hex" />
+                <ColorField
+                  label="Hex"
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter') {
+                      e.currentTarget.blur();
+                    }
+                  }}
+                />
               </>
             )}
           </Dialog>