feat: CP support ColorPicker className and style (#43339)

* fix

* fix

* fix

components/color-picker/ColorPicker.tsx

@@ -90,7 +90,8 @@ const ColorPicker: CompoundedComponent = (props) => {
     destroyTooltipOnHide,
   } = props;
 
-  const { getPrefixCls, direction } = useContext<ConfigConsumerProps>(ConfigContext);
+  const { getPrefixCls, direction, colorPicker } = useContext<ConfigConsumerProps>(ConfigContext);
+
   const { token } = theme.useToken();
 
   const [colorValue, setColorValue] = useColorState(token.colorPrimary, {
@@ -121,6 +122,7 @@ const ColorPicker: CompoundedComponent = (props) => {
       [`${prefixCls}-sm`]: mergedSize === 'small',
       [`${prefixCls}-lg`]: mergedSize === 'large',
     },
+    colorPicker?.className,
     mergeRootCls,
     className,
     hashId,
@@ -182,6 +184,8 @@ const ColorPicker: CompoundedComponent = (props) => {
     onFormatChange: setFormatValue,
   };
 
+  const mergedStyle: React.CSSProperties = { ...colorPicker?.style, ...style };
+
   return wrapSSR(
     <Popover
       style={styles?.popup}
@@ -206,7 +210,7 @@ const ColorPicker: CompoundedComponent = (props) => {
         <ColorTrigger
           open={popupOpen}
           className={mergeCls}
-          style={style}
+          style={mergedStyle}
           color={colorValue}
           prefixCls={prefixCls}
           disabled={disabled}

components/config-provider/__tests__/style.test.tsx

@@ -8,6 +8,7 @@ import Breadcrumb from '../../breadcrumb';
 import Card from '../../card';
 import Cascader from '../../cascader';
 import Checkbox from '../../checkbox';
+import ColorPicker from '../../color-picker';
 import Descriptions from '../../descriptions';
 import Divider from '../../divider';
 import Empty from '../../empty';
@@ -722,7 +723,7 @@ describe('ConfigProvider support style and className props', () => {
     expect(element).toHaveClass('cp-notification');
     expect(element).toHaveStyle({ color: 'blue' });
   });
-  
+
   it('Should Tree className works', () => {
     const treeData = [
       {
@@ -766,4 +767,17 @@ describe('ConfigProvider support style and className props', () => {
       'color: red; font-size: 16px; position: relative;',
     );
   });
+
+  it('Should ColorPicker className & style works', () => {
+    const { container } = render(
+      <ConfigProvider
+        colorPicker={{ className: 'cp-colorPicker', style: { backgroundColor: 'red' } }}
+      >
+        <ColorPicker />
+      </ConfigProvider>,
+    );
+    const element = container.querySelector<HTMLDivElement>('.ant-color-picker-trigger');
+    expect(element).toHaveClass('cp-colorPicker');
+    expect(element).toHaveStyle({ backgroundColor: 'red' });
+  });
 });

components/config-provider/context.ts

@@ -125,6 +125,7 @@ export interface ConfigConsumerProps {
   upload?: ComponentStyleConfig;
   notification?: ComponentStyleConfig;
   tree?: ComponentStyleConfig;
+  colorPicker?: ComponentStyleConfig;
 }
 
 const defaultGetPrefixCls = (suffixCls?: string, customizePrefixCls?: string) => {

components/config-provider/index.en-US.md

@@ -109,6 +109,7 @@ const {
 | card | Set Card common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | cascader | Set Cascader common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | checkbox | Set Checkbox common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| colorPicker | Set ColorPicker common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | descriptions | Set Descriptions common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | divider | Set Divider common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | empty | Set Empty common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |

components/config-provider/index.tsx

@@ -169,6 +169,7 @@ export interface ConfigProviderProps {
   upload?: ComponentStyleConfig;
   notification?: ComponentStyleConfig;
   tree?: ComponentStyleConfig;
+  colorPicker?: ComponentStyleConfig;
 }
 
 interface ProviderChildrenProps extends ConfigProviderProps {
@@ -290,6 +291,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     upload,
     notification,
     tree,
+    colorPicker,
   } = props;
 
   // =================================== Warning ===================================
@@ -373,6 +375,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     upload,
     notification,
     tree,
+    colorPicker,
   };
 
   const config = {

components/config-provider/index.zh-CN.md

@@ -111,6 +111,7 @@ const {
 | card | 设置 Card 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | cascader | 设置 Cascader 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | checkbox | 设置 Checkbox 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| colorPicker | 设置 ColorPicker 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | descriptions | 设置 Descriptions 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | divider | 设置 Divider 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | empty | 设置 Empty 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |