feat: ColorBlock support inner style

Author: zombieJ

src/components/ColorBlock.tsx

@@ -6,6 +6,10 @@ export type ColorBlockProps = {
   prefixCls?: string;
   className?: string;
   style?: React.CSSProperties;
+  /** Internal usage. Only used in antd ColorPicker semantic structure only */
+  innerClassName?: string;
+  /** Internal usage. Only used in antd ColorPicker semantic structure only */
+  innerStyle?: React.CSSProperties;
   onClick?: React.MouseEventHandler<HTMLDivElement>;
 };
 
@@ -14,6 +18,8 @@ const ColorBlock: React.FC<ColorBlockProps> = ({
   prefixCls,
   className,
   style,
+  innerClassName,
+  innerStyle,
   onClick,
 }) => {
   const colorBlockCls = `${prefixCls}-color-block`;
@@ -23,7 +29,10 @@ const ColorBlock: React.FC<ColorBlockProps> = ({
       style={style}
       onClick={onClick}
     >
-      <div className={`${colorBlockCls}-inner`} style={{ background: color }} />
+      <div
+        className={clsx(`${colorBlockCls}-inner`, innerClassName)}
+        style={{ background: color, ...innerStyle }}
+      />
     </div>
   );
 };

tests/components.test.tsx

@@ -2,7 +2,7 @@
 import { fireEvent, render } from '@testing-library/react';
 import React from 'react';
 import { expect } from 'vitest';
-import ColorPicker, { type BaseSliderProps } from '../src';
+import ColorPicker, { ColorBlock, type BaseSliderProps } from '../src';
 import { defaultColor } from '../src/util';
 
 describe('ColorPicker.Components', () => {
@@ -56,4 +56,19 @@ describe('ColorPicker.Components', () => {
     fireEvent.click(alphaEle);
     expect(alphaEle.textContent).toBe('0/100/33');
   });
+
+  it('ColorBlock support innerClassName and innerStyle', () => {
+    const { container } = render(
+      <ColorBlock
+        prefixCls="test"
+        color="red"
+        innerClassName="my-inner-class"
+        innerStyle={{ color: '#903' }}
+      />,
+    );
+
+    const innerDiv = container.querySelector('.test-color-block-inner');
+    expect(innerDiv).toHaveClass('my-inner-class');
+    expect(innerDiv).toHaveStyle({ color: '#903' });
+  });
 });

tsconfig.json

@@ -8,7 +8,7 @@
     "skipLibCheck": true,
     "esModuleInterop": true,
     "module": "ESNext",
-    "types": ["vitest/globals"],
+    "types": ["vitest/globals", "@testing-library/jest-dom"],
     "paths": {
       "@@/*": [".dumi/tmp/*"],
       "@rc-component/color-picker": ["src/index.tsx"]