refactor: optimize ColorPicker code again (#42334)

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

@@ -2187,7 +2187,7 @@ exports[`renders components/color-picker/demo/format.tsx extend context correctl
           >
             HSB:
             <span>
-              hsb(215,91%,100%)
+              hsb(215, 91%, 100%)
             </span>
           </div>
         </div>
@@ -2815,7 +2815,7 @@ exports[`renders components/color-picker/demo/format.tsx extend context correctl
           >
             RGB:
             <span>
-              rgb(22,119,255)
+              rgb(22, 119, 255)
             </span>
           </div>
         </div>
@@ -3973,7 +3973,7 @@ Array [
       style="margin-right: 8px;"
     >
       <div
-        style="width: 20px; height: 20px; border-radius: 4px; background: rgb(22, 119, 255);"
+        style="width: 20px; height: 20px; border-radius: 4px; background-color: rgb(22, 119, 255);"
       />
     </div>
     <div

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

@@ -135,7 +135,7 @@ exports[`renders components/color-picker/demo/format.tsx correctly 1`] = `
           >
             HSB:
             <span>
-              hsb(215,91%,100%)
+              hsb(215, 91%, 100%)
             </span>
           </div>
         </div>
@@ -180,7 +180,7 @@ exports[`renders components/color-picker/demo/format.tsx correctly 1`] = `
           >
             RGB:
             <span>
-              rgb(22,119,255)
+              rgb(22, 119, 255)
             </span>
           </div>
         </div>
@@ -234,7 +234,7 @@ exports[`renders components/color-picker/demo/trigger.tsx correctly 1`] = `
     style="margin-right:8px"
   >
     <div
-      style="width:20px;height:20px;border-radius:4px;background:#1677ff"
+      style="width:20px;height:20px;border-radius:4px;background-color:#1677ff"
     />
   </div>
   <div

components/color-picker/demo/base.tsx

@@ -1,5 +1,5 @@
 import { ColorPicker, theme } from 'antd';
-import type { Color } from 'antd/lib/color-picker';
+import type { Color } from 'antd/es/color-picker';
 import React, { useState } from 'react';
 
 export default () => {

components/color-picker/demo/format.tsx

@@ -1,20 +1,22 @@
 import { Col, ColorPicker, Row, Space } from 'antd';
-import type { Color } from 'antd/lib/color-picker';
+import type { Color } from 'antd/es/color-picker';
 import React, { useMemo, useState } from 'react';
 
 export default () => {
   const [colorHex, setColorHex] = useState<Color | string>('#1677ff');
-  const [colorHsb, setColorHsb] = useState<Color | string>('hsb(215,91%,100%)');
+  const [colorHsb, setColorHsb] = useState<Color | string>('hsb(215, 91%, 100%)');
-  const [colorRgb, setColorRgb] = useState<Color | string>('rgb(22,119,255)');
+  const [colorRgb, setColorRgb] = useState<Color | string>('rgb(22, 119, 255)');
 
   const hexString = useMemo(
     () => (typeof colorHex === 'string' ? colorHex : colorHex.toHexString()),
     [colorHex],
   );
+
   const hsbString = useMemo(
     () => (typeof colorHsb === 'string' ? colorHsb : colorHsb.toHsbString()),
     [colorHsb],
   );
+
   const rgbString = useMemo(
     () => (typeof colorRgb === 'string' ? colorRgb : colorRgb.toRgbString()),
     [colorRgb],

components/color-picker/demo/pure-panel.tsx

@@ -1,5 +1,5 @@
 import { ColorPicker, theme } from 'antd';
-import type { Color } from 'antd/lib/color-picker';
+import type { Color } from 'antd/es/color-picker';
 import React, { useState } from 'react';
 
 const PureRenderColorPicker = ColorPicker._InternalPanelDoNotUseOrYouWillBeFired;

components/color-picker/demo/trigger.tsx

@@ -1,11 +1,12 @@
 import { ColorPicker, Space, theme } from 'antd';
-import type { Color } from 'antd/lib/color-picker';
+import type { Color } from 'antd/es/color-picker';
 import React, { useMemo, useState } from 'react';
 
 export default () => {
   const { token } = theme.useToken();
   const [color, setColor] = useState<Color | string>(token.colorPrimary);
-  const genColor = useMemo(
+
+  const bgColor = useMemo<string>(
     () => (typeof color === 'string' ? color : color.toHexString()),
     [color],
   );
@@ -15,13 +16,13 @@ export default () => {
       <Space>
         <div
           style={{
-            width: 20,
+            width: token.sizeMD,
-            height: 20,
+            height: token.sizeMD,
-            borderRadius: 4,
+            borderRadius: token.borderRadiusSM,
-            background: genColor,
+            backgroundColor: bgColor,
           }}
         />
-        <span>{genColor}</span>
+        <span>{bgColor}</span>
       </Space>
     </ColorPicker>
   );

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

@@ -10,11 +10,11 @@ group:
   title: Data Entry
 ---
 
-Components providing color selection
+Components providing color selection, Available since `5.5.0`.
 
 ## When To Use
 
-Used when the user needs to customize the color selection
+Used when the user needs to customize the color selection.
 
 ## Examples
 
@@ -29,7 +29,7 @@ Used when the user needs to customize the color selection
 
 ## API
 
-> This component is available since antd@5.5.0
+> This component is available since `antd@5.5.0`.
 
 <!-- prettier-ignore -->
 | Property | Description | Type | Default |

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

@@ -11,7 +11,7 @@ group:
   title: 数据录入
 ---
 
-提供颜色选取的组件
+提供颜色选取的组件，自 `5.5.0` 版本开始提供该组件。
 
 ## 何时使用
 

components/color-picker/style/index.ts

@@ -1,10 +1,10 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
-import genPickerStyle from './picker';
+import genColorBlockStyle from './color-block';
 import genInputStyle from './input';
+import genPickerStyle from './picker';
 import genPresetsStyle from './presets';
-import genColorBlockStyle from './color-block';
 
 export interface ComponentToken {}
 
@@ -137,7 +137,7 @@ export default genComponentStyleHook('ColorPicker', (token) => {
 
   const colorPickerSliderHeight = 8;
 
-  const ColorPickerToken = mergeToken<ColorPickerToken>(token, {
+  const colorPickerToken = mergeToken<ColorPickerToken>(token, {
     colorPickerWidth: 234,
     colorPickerHandlerSize: 16,
     colorPickerHandlerSizeSM: 12,
@@ -149,5 +149,5 @@ export default genComponentStyleHook('ColorPicker', (token) => {
     colorPickerPreviewSize: colorPickerSliderHeight * 2 + marginSM,
   });
 
-  return [genColorPickerStyle(ColorPickerToken)];
+  return [genColorPickerStyle(colorPickerToken)];
 });

components/color-picker/style/picker.ts

@@ -1,7 +1,7 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { GenerateStyle } from '../../theme/internal';
-import type { ColorPickerToken } from './index';
 import genColorBlockStyle from './color-block';
+import type { ColorPickerToken } from './index';
 
 const genPickerStyle: GenerateStyle<ColorPickerToken, CSSObject> = (token) => {
   const {
@@ -41,6 +41,7 @@ const genPickerStyle: GenerateStyle<ColorPickerToken, CSSObject> = (token) => {
       border: `${lineWidthBold}px solid ${colorBgElevated}`,
       position: 'relative',
       borderRadius: '50%',
+      cursor: 'pointer',
       boxShadow: `${colorPickerInsetShadow}, 0 0 0 1px ${colorFillSecondary}`,
       '&-sm': {
         width: colorPickerHandlerSizeSM,