feat: ColorPicker implement `size` API (#43116)

* feat: add size prop

* test: add test case

* docs: update doc

* fix: style issue

* docs: add text size demo

* test: update snapshots

components/color-picker/ColorPicker.tsx

@@ -7,8 +7,10 @@ import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import type { CSSProperties } from 'react';
 import React, { useContext, useRef, useState } from 'react';
 import genPurePanel from '../_util/PurePanel';
+import type { SizeType } from '../config-provider/SizeContext';
 import type { ConfigConsumerProps } from '../config-provider/context';
 import { ConfigContext } from '../config-provider/context';
+import useSize from '../config-provider/hooks/useSize';
 import type { PopoverProps } from '../popover';
 import Popover from '../popover';
 import theme from '../theme';
@@ -43,6 +45,7 @@ export type ColorPickerProps = Omit<
   arrow?: boolean | { pointAtCenter: boolean };
   showText?: boolean | ((color: Color) => React.ReactNode);
   styles?: { popup?: CSSProperties };
+  size?: SizeType;
   rootClassName?: string;
   onOpenChange?: (open: boolean) => void;
   onFormatChange?: (format: ColorFormat) => void;
@@ -70,6 +73,7 @@ const ColorPicker: CompoundedComponent = (props) => {
     showText,
     style,
     className,
+    size: customizeSize,
     rootClassName,
     styles,
     onFormatChange,
@@ -102,10 +106,20 @@ const ColorPicker: CompoundedComponent = (props) => {
 
   const prefixCls = getPrefixCls('color-picker', customizePrefixCls);
 
+  // ===================== Style =====================
+  const mergedSize = useSize(customizeSize);
   const [wrapSSR, hashId] = useStyle(prefixCls);
   const rtlCls = { [`${prefixCls}-rtl`]: direction };
   const mergeRootCls = classNames(rootClassName, rtlCls);
-  const mergeCls = classNames(mergeRootCls, className, hashId);
+  const mergeCls = classNames(
+    {
+      [`${prefixCls}-sm`]: mergedSize === 'small',
+      [`${prefixCls}-lg`]: mergedSize === 'large',
+    },
+    mergeRootCls,
+    className,
+    hashId,
+  );
   const mergePopupCls = classNames(prefixCls, rtlCls);
 
   const popupAllowCloseRef = useRef(true);

components/color-picker/__tests__/__snapshots__/demo.test.ts.snap

@@ -249,6 +249,145 @@ exports[`renders components/color-picker/demo/pure-panel.tsx correctly 1`] = `
 </div>
 `;
 
+exports[`renders components/color-picker/demo/size.tsx correctly 1`] = `
+<div
+  class="ant-space ant-space-horizontal ant-space-align-center"
+>
+  <div
+    class="ant-space-item"
+    style="margin-right:8px"
+  >
+    <div
+      class="ant-space ant-space-vertical"
+    >
+      <div
+        class="ant-space-item"
+        style="margin-bottom:8px"
+      >
+        <div
+          class="ant-color-picker-trigger ant-color-picker-sm"
+        >
+          <div
+            class="ant-color-picker-color-block"
+          >
+            <div
+              class="ant-color-picker-color-block-inner"
+              style="background:rgb(22, 119, 255)"
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        class="ant-space-item"
+        style="margin-bottom:8px"
+      >
+        <div
+          class="ant-color-picker-trigger"
+        >
+          <div
+            class="ant-color-picker-color-block"
+          >
+            <div
+              class="ant-color-picker-color-block-inner"
+              style="background:rgb(22, 119, 255)"
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        class="ant-space-item"
+      >
+        <div
+          class="ant-color-picker-trigger ant-color-picker-lg"
+        >
+          <div
+            class="ant-color-picker-color-block"
+          >
+            <div
+              class="ant-color-picker-color-block-inner"
+              style="background:rgb(22, 119, 255)"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <div
+      class="ant-space ant-space-vertical"
+    >
+      <div
+        class="ant-space-item"
+        style="margin-bottom:8px"
+      >
+        <div
+          class="ant-color-picker-trigger ant-color-picker-sm"
+        >
+          <div
+            class="ant-color-picker-color-block"
+          >
+            <div
+              class="ant-color-picker-color-block-inner"
+              style="background:rgb(22, 119, 255)"
+            />
+          </div>
+          <div
+            class="ant-color-picker-trigger-text"
+          >
+            #1677FF
+          </div>
+        </div>
+      </div>
+      <div
+        class="ant-space-item"
+        style="margin-bottom:8px"
+      >
+        <div
+          class="ant-color-picker-trigger"
+        >
+          <div
+            class="ant-color-picker-color-block"
+          >
+            <div
+              class="ant-color-picker-color-block-inner"
+              style="background:rgb(22, 119, 255)"
+            />
+          </div>
+          <div
+            class="ant-color-picker-trigger-text"
+          >
+            #1677FF
+          </div>
+        </div>
+      </div>
+      <div
+        class="ant-space-item"
+      >
+        <div
+          class="ant-color-picker-trigger ant-color-picker-lg"
+        >
+          <div
+            class="ant-color-picker-color-block"
+          >
+            <div
+              class="ant-color-picker-color-block-inner"
+              style="background:rgb(22, 119, 255)"
+            />
+          </div>
+          <div
+            class="ant-color-picker-trigger-text"
+          >
+            #1677FF
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders components/color-picker/demo/text-render.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"

components/color-picker/__tests__/index.test.tsx

@@ -366,4 +366,11 @@ describe('ColorPicker', () => {
     await waitFakeTimer();
     expect(targetEle?.innerHTML).toEqual('#1677FF');
   });
+
+  it('Should size work', async () => {
+    const { container: lg } = render(<ColorPicker size="large" />);
+    expect(lg.querySelector('.ant-color-picker-lg')).toBeTruthy();
+    const { container: sm } = render(<ColorPicker size="small" />);
+    expect(sm.querySelector('.ant-color-picker-sm')).toBeTruthy();
+  });
 });

components/color-picker/demo/size.md

@@ -0,0 +1,7 @@
+## zh-CN
+
+触发器有大、中、小三种尺寸，若不设置 size，则尺寸为中。
+
+## en-US
+
+The trigger has three sizes: large, medium and small. If size is not set, the size will be medium.

components/color-picker/demo/size.tsx

@@ -0,0 +1,19 @@
+import { ColorPicker, Space } from 'antd';
+import React from 'react';
+
+const Demo = () => (
+  <Space>
+    <Space direction="vertical">
+      <ColorPicker size="small" />
+      <ColorPicker />
+      <ColorPicker size="large" />
+    </Space>
+    <Space direction="vertical">
+      <ColorPicker size="small" showText />
+      <ColorPicker showText />
+      <ColorPicker size="large" showText />
+    </Space>
+  </Space>
+);
+
+export default Demo;

components/color-picker/index.en-US.md

@@ -20,6 +20,7 @@ Used when the user needs to customize the color selection.
 
 <!-- prettier-ignore -->
 <code src="./demo/base.tsx">Basic Usage</code>
+<code src="./demo/size.tsx">Trigger size</code>
 <code src="./demo/controlled.tsx">controlled mode</code>
 <code src="./demo/text-render.tsx">Rendering Trigger Text</code>
 <code src="./demo/disabled.tsx">Disable</code>
@@ -50,6 +51,7 @@ Used when the user needs to customize the color selection.
 | arrow | Configuration for popup arrow | `boolean \| { pointAtCenter: boolean }` | true | |
 | destroyTooltipOnHide | Whether destroy popover when hidden | `boolean` | false | 5.7.0 |
 | showText | show color text | boolean \| `(color: Color) => React.ReactNode` | - | 5.7.0 |
+| size | Setting the trigger size | `large` \| `middle` \| `small` | `middle` | 5.7.0 |
 | onChange | Callback when `value` is changed | `(value: Color, hex: string) => void` | - | |
 | onFormatChange | Callback when `format` is changed | `(format: 'hex' \| 'rgb' \| 'hsb') => void` | - | |
 | onOpenChange | Callback when `open` is changed | `(open: boolean) => void` | - | |

components/color-picker/index.zh-CN.md

@@ -21,6 +21,7 @@ group:
 
 <!-- prettier-ignore -->
 <code src="./demo/base.tsx">基本使用</code>
+<code src="./demo/size.tsx">触发器尺寸大小</code>
 <code src="./demo/controlled.tsx">受控模式</code>
 <code src="./demo/text-render.tsx">渲染触发器文本</code>
 <code src="./demo/disabled.tsx">禁用</code>
@@ -51,6 +52,7 @@ group:
 | arrow | 配置弹出的箭头 | `boolean \| { pointAtCenter: boolean }` | true | |
 | destroyTooltipOnHide | 关闭后是否销毁弹窗 | `boolean` | false | 5.7.0 |
 | showText | 显示颜色文本 | boolean \| `(color: Color) => React.ReactNode` | - | 5.7.0 |
+| size | 设置触发器大小 | `large` \| `middle` \| `small` | `middle` | 5.7.0 |
 | onChange | 颜色变化的回调 | `(value: Color, hex: string) => void` | - | |
 | onFormatChange | 颜色格式变化的回调 | `(format: 'hex' \| 'rgb' \| 'hsb') => void` | - | |
 | onOpenChange | 当 `open` 被改变时的回调 | `(open: boolean) => void` | - | |

components/color-picker/style/index.ts

@@ -72,6 +72,46 @@ const genClearStyle = (token: ColorPickerToken, size: number): CSSObject => {
   };
 };
 
+const genSizeStyle = (token: ColorPickerToken): CSSObject => {
+  const {
+    componentCls,
+    controlHeightLG,
+    controlHeightSM,
+    controlHeight,
+    controlHeightXS,
+    borderRadius,
+    borderRadiusSM,
+    borderRadiusXS,
+    borderRadiusLG,
+    fontSizeLG,
+  } = token;
+  return {
+    [`&${componentCls}-lg`]: {
+      minWidth: controlHeightLG,
+      height: controlHeightLG,
+      borderRadius: borderRadiusLG,
+      [`${componentCls}-color-block`]: {
+        width: controlHeight,
+        height: controlHeight,
+        borderRadius,
+      },
+      [`${componentCls}-trigger-text`]: {
+        fontSize: fontSizeLG,
+      },
+    },
+    [`&${componentCls}-sm`]: {
+      minWidth: controlHeightSM,
+      height: controlHeightSM,
+      borderRadius: borderRadiusSM,
+      [`${componentCls}-color-block`]: {
+        width: controlHeightXS,
+        height: controlHeightXS,
+        borderRadius: borderRadiusXS,
+      },
+    },
+  };
+};
+
 const genColorPickerStyle: GenerateStyle<ColorPickerToken> = (token) => {
   const {
     componentCls,
@@ -92,7 +132,7 @@ const genColorPickerStyle: GenerateStyle<ColorPickerToken> = (token) => {
     lineWidth,
     colorBorder,
     paddingXXS,
-    fontSizeSM,
+    fontSize,
   } = token;
 
   return [
@@ -134,7 +174,7 @@ const genColorPickerStyle: GenerateStyle<ColorPickerToken> = (token) => {
           [`${componentCls}-trigger-text`]: {
             marginInlineStart: marginXS,
             marginInlineEnd: marginXS - (paddingXXS - lineWidth),
-            fontSize: fontSizeSM,
+            fontSize,
             color: colorText,
           },
           '&-active': {
@@ -157,6 +197,7 @@ const genColorPickerStyle: GenerateStyle<ColorPickerToken> = (token) => {
           },
           ...genClearStyle(token, controlHeightSM),
           ...genColorBlockStyle(token, controlHeightSM),
+          ...genSizeStyle(token),
         },
         ...genRtlStyle(token),
       },