{
diff --git a/components/color-picker/demo/format.tsx b/components/color-picker/demo/format.tsx
index 5172a0be85..c75df886ed 100644
--- a/components/color-picker/demo/format.tsx
+++ b/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
('#1677ff');
- const [colorHsb, setColorHsb] = useState('hsb(215,91%,100%)');
- const [colorRgb, setColorRgb] = useState('rgb(22,119,255)');
+ const [colorHsb, setColorHsb] = useState('hsb(215, 91%, 100%)');
+ const [colorRgb, setColorRgb] = useState('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],
diff --git a/components/color-picker/demo/pure-panel.tsx b/components/color-picker/demo/pure-panel.tsx
index b2bef162bd..7e4bd31f6a 100644
--- a/components/color-picker/demo/pure-panel.tsx
+++ b/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;
diff --git a/components/color-picker/demo/trigger.tsx b/components/color-picker/demo/trigger.tsx
index 26a1632ffa..3f244e8353 100644
--- a/components/color-picker/demo/trigger.tsx
+++ b/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(token.colorPrimary);
- const genColor = useMemo(
+
+ const bgColor = useMemo(
() => (typeof color === 'string' ? color : color.toHexString()),
[color],
);
@@ -15,13 +16,13 @@ export default () => {
- {genColor}
+ {bgColor}
);
diff --git a/components/color-picker/index.en-US.md b/components/color-picker/index.en-US.md
index ff6f7013c8..bc39c32bb2 100644
--- a/components/color-picker/index.en-US.md
+++ b/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`.
| Property | Description | Type | Default |
diff --git a/components/color-picker/index.zh-CN.md b/components/color-picker/index.zh-CN.md
index 887a03b77b..42b8b69213 100644
--- a/components/color-picker/index.zh-CN.md
+++ b/components/color-picker/index.zh-CN.md
@@ -11,7 +11,7 @@ group:
title: 数据录入
---
-提供颜色选取的组件
+提供颜色选取的组件，自 `5.5.0` 版本开始提供该组件。
## 何时使用
diff --git a/components/color-picker/style/index.ts b/components/color-picker/style/index.ts
index 63ae57dad2..7211e980e5 100644
--- a/components/color-picker/style/index.ts
+++ b/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(token, {
+ const colorPickerToken = mergeToken(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)];
});
diff --git a/components/color-picker/style/picker.ts b/components/color-picker/style/picker.ts
index 977f22e97f..4a5de9c74b 100644
--- a/components/color-picker/style/picker.ts
+++ b/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 = (token) => {
const {
@@ -41,6 +41,7 @@ const genPickerStyle: GenerateStyle = (token) => {
border: `${lineWidthBold}px solid ${colorBgElevated}`,
position: 'relative',
borderRadius: '50%',
+ cursor: 'pointer',
boxShadow: `${colorPickerInsetShadow}, 0 0 0 1px ${colorFillSecondary}`,
'&-sm': {
width: colorPickerHandlerSizeSM,