feat(color-picker): add demos and remove unused size prop

Add format, alpha, disabled, and trigger demos. Remove the size
prop which had no CSS implementation.

Author: wangdicoder

components/color-picker/__tests__/__snapshots__/color-picker.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`<ColorPicker /> should match the snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="ty-color-picker ty-color-picker_md"
+    class="ty-color-picker"
   >
     <div
       class="ty-color-picker__trigger"

components/color-picker/color-picker.tsx

@@ -7,14 +7,12 @@ import Popup from '../popup';
 import { ColorPickerProps, Color, ColorFormat } from './types';
 import { parseColor, formatColor, hsbToHex } from './utils';
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const ColorPicker = React.forwardRef<HTMLDivElement, ColorPickerProps>((props, _ref) => {
   const {
     defaultValue = '#6e41bf',
     presets,
     showAlpha = false,
     disabled = false,
-    size,
     trigger = 'click',
     defaultFormat = 'hex',
     prefixCls: customisedCls,
@@ -28,7 +26,6 @@ const ColorPicker = React.forwardRef<HTMLDivElement, ColorPickerProps>((props, _
 
   const configContext = useContext(ConfigContext);
   const prefixCls = getPrefixCls('color-picker', configContext.prefixCls, customisedCls);
-  const pickerSize = size || configContext.componentSize || 'md';
 
   const [color, setColor] = useState<Color>(() =>
     parseColor('value' in props ? (props.value as string) : defaultValue)
@@ -169,7 +166,6 @@ const ColorPicker = React.forwardRef<HTMLDivElement, ColorPickerProps>((props, _
   };
 
   const cls = classNames(prefixCls, className, {
-    [`${prefixCls}_${pickerSize}`]: pickerSize,
     [`${prefixCls}_disabled`]: disabled,
   });
 

components/color-picker/demo/alpha.md

@@ -0,0 +1,20 @@
+<demo>
+
+### Alpha Channel
+
+Enable the alpha slider with `showAlpha`.
+
+```jsx live
+() => {
+  const [color, setColor] = React.useState('#6e41bf');
+
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
+      <ColorPicker value={color} onChange={setColor} showAlpha />
+      <span>{color}</span>
+    </div>
+  );
+}
+```
+
+</demo>

components/color-picker/demo/disabled.md

@@ -0,0 +1,11 @@
+<demo>
+
+### Disabled
+
+A disabled color picker.
+
+```jsx live
+<ColorPicker defaultValue="#722ed1" disabled />
+```
+
+</demo>

components/color-picker/demo/format.md

@@ -0,0 +1,27 @@
+<demo>
+
+### Format
+
+Toggle between `hex`, `rgb`, and `hsb` output formats.
+
+```jsx live
+() => {
+  const [color, setColor] = React.useState('#1890ff');
+  const [format, setFormat] = React.useState('hex');
+
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
+      <ColorPicker
+        value={color}
+        format={format}
+        onChange={setColor}
+        onFormatChange={setFormat}
+      />
+      <span>Format: <strong>{format}</strong></span>
+      <span>Value: {color}</span>
+    </div>
+  );
+}
+```
+
+</demo>

components/color-picker/demo/trigger.md

@@ -0,0 +1,11 @@
+<demo>
+
+### Trigger
+
+Open the panel on hover instead of click.
+
+```jsx live
+<ColorPicker defaultValue="#fa8c16" trigger="hover" />
+```
+
+</demo>

components/color-picker/index.md

@@ -1,4 +1,8 @@
+import Alpha from './demo/alpha.md'
 import Basic from './demo/basic.md'
+import Disabled from './demo/disabled.md'
+import Format from './demo/format.md'
+import Trigger from './demo/trigger.md'
 
 # ColorPicker
 
@@ -19,6 +23,12 @@ import { ColorPicker } from 'tiny-ui';
 <layout>
   <column>
     <Basic/>
+    <Format/>
+    <Alpha/>
+  </column>
+  <column>
+    <Disabled/>
+    <Trigger/>
   </column>
 </layout>
 
@@ -34,7 +44,6 @@ import { ColorPicker } from 'tiny-ui';
 | presets        | preset color swatches              | string[]                         |         |
 | showAlpha      | show alpha slider                  | boolean                          | false   |
 | disabled       | disable the picker                 | boolean                          | false   |
-| size           | trigger size                       | 'sm' \| 'md' \| 'lg'           | md      |
 | trigger        | trigger mode                       | 'click' \| 'hover'             | click   |
 | open           | controlled panel visibility        | boolean                          |         |
 | onOpenChange   | callback when visibility changes   | (open: boolean) => void          |         |

components/color-picker/types.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BaseProps, SizeType } from '../_utils/props';
+import { BaseProps } from '../_utils/props';
 
 export type ColorFormat = 'hex' | 'rgb' | 'hsb';
 
@@ -22,7 +22,6 @@ export interface ColorPickerProps
   presets?: string[];
   showAlpha?: boolean;
   disabled?: boolean;
-  size?: SizeType;
   trigger?: 'click' | 'hover';
   open?: boolean;
   onOpenChange?: (open: boolean) => void;