Fix color picker.

mydraft-cc · Feb 1, 2024 · b18fe4c · b18fe4c
1 parent 5acee19
commit b18fe4c
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 14 deletions.
diff --git a/src/core/react/ColorPicker.scss b/src/core/react/ColorPicker.scss
@@ -1,16 +1,9 @@
 @import '@app/style/mixins';
 @import '@app/style/vars';
 
-$size: 24px;
+$size: 22px;
 
 .color-picker {
-    &-button {
-        &,
-        & button {
-            padding: 2px !important;
-        }
-    }
-
     &-colors {
         @include clearfix;
         max-width: 210px;
@@ -24,9 +17,9 @@ $size: 24px;
             background: $color-white;
             border: 1px solid $color-input;
             border-radius: $size;
+            box-sizing: border-box;
             display: inline-flex;
             justify-content: center;
-            margin: 1px;
         }
 
         &.rect {

diff --git a/src/core/react/ColorPicker.stories.tsx b/src/core/react/ColorPicker.stories.tsx
@@ -6,6 +6,7 @@
 */
 
 import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from 'antd';
 import { ColorPalette } from '@app/core/utils';
 import { ColorPicker } from './ColorPicker';
 
@@ -15,7 +16,11 @@ const meta: Meta<typeof ColorPicker> = {
         const palette = ColorPalette.colors();
 
         return (
-            <ColorPicker palette={palette} {...args} />
+            <>
+                <ColorPicker palette={palette} {...args} />
+                &nbsp;
+                <Button>Button</Button>
+            </>
         );
     },
     argTypes: {

diff --git a/src/core/react/ColorPicker.tsx b/src/core/react/ColorPicker.tsx
@@ -14,6 +14,7 @@ import { texts } from '@app/texts';
 import { ColorList } from './ColorList';
 import { useEventCallback } from './hooks';
 import './ColorPicker.scss';
+import Icon from '@ant-design/icons';
 
 type ColorTab = 'palette' | 'advanced';
 
@@ -122,10 +123,14 @@ export const ColorPicker = React.memo((props: ColorPickerProps) => {
 
     return (
         <Popover content={content} open={visible && !disabled} placement={placement} trigger='click' onOpenChange={setVisible}>
-            <Button disabled={disabled} className='color-picker-button' onClick={doToggle}>
-                <div className='color-picker-color'>
-                    <div className='color-picker-color-inner' style={{ background: colorHex }}></div>
-                </div>
+            <Button disabled={disabled} className='color-picker-button' onClick={doToggle}
+                icon={
+                    <Icon component={() => 
+                        <div className='color-picker-color'>
+                            <div className='color-picker-color-inner' style={{ background: colorHex }}></div>
+                        </div>
+                    } />
+                }>
             </Button>
         </Popover>
     );