refactor: color-picker panel dom logic (#46327)

* refactor: refactoring custom panel logic

* chore: update test case & update snapshot

* chore: update un-stable snap???

* docs: update demo

* chore: update snapshots

* fix: table filterDropdown should accept cssvar (#46314)

* chore: revert files

* chore: update demo

* chore: update snap

---------

Co-authored-by: MadCcc <madccc@foxmail.com>

components/color-picker/ColorPickerPanel.tsx

@@ -15,7 +15,7 @@ interface ColorPickerPanelProps extends ColorPickerBaseProps {
 
 const ColorPickerPanel: FC<ColorPickerPanelProps> = (props) => {
   const { prefixCls, presets, panelRender, color, onChange, onClear, ...injectProps } = props;
-  const colorPickerPanelPrefixCls = `${prefixCls}-inner-content`;
+  const colorPickerPanelPrefixCls = `${prefixCls}-inner`;
 
   // ==== Inject props ===
   const panelPickerProps = {
@@ -38,11 +38,11 @@ const ColorPickerPanel: FC<ColorPickerPanelProps> = (props) => {
 
   // ====================== Render ======================
   const innerPanel = (
-    <>
+    <div className={`${colorPickerPanelPrefixCls}-content`}>
       <PanelPicker />
-      {Array.isArray(presets) && <Divider className={`${colorPickerPanelPrefixCls}-divider`} />}
+      {Array.isArray(presets) && <Divider />}
       <PanelPresets />
-    </>
+    </div>
   );
 
   return (

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

@@ -212,9 +212,6 @@ exports[`renders components/color-picker/demo/panel-render.tsx correctly 1`] = `
 >
   <div
     class="ant-space-item"
-  >
-    <div
-      class="ant-row ant-row-middle"
   >
     <div
       class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
@@ -228,9 +225,6 @@ exports[`renders components/color-picker/demo/panel-render.tsx correctly 1`] = `
       </div>
       <div
         class="ant-space-item"
-        >
-          <div
-            class="ant-col"
       >
         <div
           class="ant-color-picker-trigger"
@@ -247,13 +241,8 @@ exports[`renders components/color-picker/demo/panel-render.tsx correctly 1`] = `
       </div>
     </div>
   </div>
-    </div>
-  </div>
   <div
     class="ant-space-item"
-  >
-    <div
-      class="ant-row ant-row-middle"
   >
     <div
       class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
@@ -267,9 +256,6 @@ exports[`renders components/color-picker/demo/panel-render.tsx correctly 1`] = `
       </div>
       <div
         class="ant-space-item"
-        >
-          <div
-            class="ant-col"
       >
         <div
           class="ant-color-picker-trigger"
@@ -286,8 +272,6 @@ exports[`renders components/color-picker/demo/panel-render.tsx correctly 1`] = `
       </div>
     </div>
   </div>
-    </div>
-  </div>
 </div>
 `;
 

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

@@ -40,10 +40,13 @@ exports[`ColorPicker Should panelRender work 1`] = `
           class="ant-popover-inner-content"
         >
           <div
-            class="ant-color-picker-inner-content"
+            class="ant-color-picker-inner"
           >
             <div
               class="custom-panel"
+            >
+              <div
+                class="ant-color-picker-inner-content"
               >
                 <div
                   class="ant-color-picker-panel"
@@ -292,6 +295,7 @@ exports[`ColorPicker Should panelRender work 1`] = `
         </div>
       </div>
     </div>
+  </div>
 </div>
 `;
 
@@ -323,7 +327,7 @@ exports[`ColorPicker Should panelRender work 2`] = `
           class="ant-popover-inner-content"
         >
           <div
-            class="ant-color-picker-inner-content"
+            class="ant-color-picker-inner"
           >
             <div
               class="custom-panel"

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

@@ -441,7 +441,8 @@ describe('ColorPicker', () => {
       />,
     );
     expect(componentContainer.querySelector('.custom-panel')).toBeTruthy();
-    expect(componentContainer.querySelector('.ant-color-picker-inner-content')).toBeTruthy();
+    expect(componentContainer.querySelector('.ant-color-picker-inner-content')).not.toBeTruthy();
+    expect(componentContainer.querySelector('.ant-color-picker-inner')).toBeTruthy();
     expect(componentContainer).toMatchSnapshot();
   });
 

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

@@ -1,12 +1,52 @@
 import React from 'react';
-import { Col, ColorPicker, Divider, Row, Space } from 'antd';
+import { Col, ColorPicker, Divider, Row, Space, theme } from 'antd';
+import type { ColorPickerProps } from 'antd';
+import { generate, green, presetPalettes, red, cyan } from '@ant-design/colors';
 
-const Demo = () => (
+type Presets = Required<ColorPickerProps>['presets'][number];
-  <Space direction="vertical">
+
-    <Row align="middle">
+const genPresets = (presets = presetPalettes) =>
-      <Space>
+  Object.entries(presets).map<Presets>(([label, colors]) => ({
-        <span>Add title: </span>
+    label,
-        <Col>
+    colors,
+  }));
+
+const HorizontalLayoutDemo = () => {
+  const { token } = theme.useToken();
+
+  const presets = genPresets({
+    primary: generate(token.colorPrimary),
+    red,
+    green,
+    cyan,
+  });
+
+  const customPanelRender: ColorPickerProps['panelRender'] = (
+    _,
+    { components: { Picker, Presets } },
+  ) => (
+    <Row justify="space-between" wrap={false}>
+      <Col span={12}>
+        <Presets />
+      </Col>
+      <Divider type="vertical" style={{ height: 'auto' }} />
+      <Col flex="auto">
+        <Picker />
+      </Col>
+    </Row>
+  );
+
+  return (
+    <ColorPicker
+      defaultValue={token.colorPrimary}
+      styles={{ popupOverlayInner: { width: 480 } }}
+      presets={presets}
+      panelRender={customPanelRender}
+    />
+  );
+};
+
+const BasicDemo = () => (
   <ColorPicker
     defaultValue="#1677ff"
     panelRender={(panel) => (
@@ -25,103 +65,17 @@ const Demo = () => (
       </div>
     )}
   />
-        </Col>
-      </Space>
-    </Row>
-    <Row align="middle">
-      <Space>
-        <span>Horizontal layout: </span>
-        <Col>
-          <ColorPicker
-            defaultValue="#1677ff"
-            styles={{
-              popupOverlayInner: {
-                width: 468 + 24,
-              },
-            }}
-            presets={[
-              {
-                label: 'Recommended',
-                colors: [
-                  '#000000',
-                  '#000000E0',
-                  '#000000A6',
-                  '#00000073',
-                  '#00000040',
-                  '#00000026',
-                  '#0000001A',
-                  '#00000012',
-                  '#0000000A',
-                  '#00000005',
-                  '#F5222D',
-                  '#FA8C16',
-                  '#FADB14',
-                  '#8BBB11',
-                  '#52C41A',
-                  '#13A8A8',
-                  '#1677FF',
-                  '#2F54EB',
-                  '#722ED1',
-                  '#EB2F96',
-                  '#F5222D4D',
-                  '#FA8C164D',
-                  '#FADB144D',
-                  '#8BBB114D',
-                  '#52C41A4D',
-                  '#13A8A84D',
-                  '#1677FF4D',
-                  '#2F54EB4D',
-                  '#722ED14D',
-                  '#EB2F964D',
-                ],
-              },
-              {
-                label: 'Recent',
-                colors: [
-                  '#F5222D4D',
-                  '#FA8C164D',
-                  '#FADB144D',
-                  '#8BBB114D',
-                  '#52C41A4D',
-                  '#13A8A84D',
-                ],
-              },
-            ]}
-            panelRender={(_, { components: { Picker, Presets } }) => (
-              <div
-                className="custom-panel"
-                style={{
-                  display: 'flex',
-                  width: 468,
-                }}
-              >
-                <div
-                  style={{
-                    flex: 1,
-                  }}
-                >
-                  <Presets />
-                </div>
-                <Divider
-                  type="vertical"
-                  style={{
-                    height: 'auto',
-                  }}
-                />
-                <div
-                  style={{
-                    width: 234,
-                  }}
-                >
-                  <Picker />
-                </div>
-              </div>
-            )}
-          />
-        </Col>
-      </Space>
-    </Row>
-  </Space>
 );
 
-export default Demo;
+export default () => (
+  <Space direction="vertical">
+    <Space>
+      <span>Add title:</span>
+      <BasicDemo />
+    </Space>
+    <Space>
+      <span>Horizontal layout:</span>
+      <HorizontalLayoutDemo />
+    </Space>
+  </Space>
+);

components/color-picker/style/index.ts

@@ -156,6 +156,7 @@ const genSizeStyle = (token: ColorPickerToken): CSSObject => {
 
 const genColorPickerStyle: GenerateStyle<ColorPickerToken> = (token) => {
   const {
+    antCls,
     componentCls,
     colorPickerWidth,
     colorPrimary,
@@ -183,14 +184,17 @@ const genColorPickerStyle: GenerateStyle<ColorPickerToken> = (token) => {
   return [
     {
       [componentCls]: {
-        [`${componentCls}-inner-content`]: {
+        [`${componentCls}-inner`]: {
+          '&-content': {
             display: 'flex',
             flexDirection: 'column',
             width: colorPickerWidth,
 
-          '&-divider': {
+            [`& > ${antCls}-divider`]: {
               margin: `${unit(marginSM)} 0 ${unit(marginXS)}`,
             },
+          },
+
           [`${componentCls}-panel`]: {
             ...genPickerStyle(token),
           },

components/form/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -5391,6 +5391,9 @@ Array [
                   >
                     <div
                       class="ant-popover-inner-content"
+                    >
+                      <div
+                        class="ant-color-picker-inner"
                       >
                         <div
                           class="ant-color-picker-inner-content"
@@ -5746,6 +5749,7 @@ Array [
           </div>
         </div>
       </div>
+    </div>
   </form>,
 ]
 `;
@@ -21310,6 +21314,9 @@ exports[`renders components/form/demo/validate-other.tsx extend context correctl
                 >
                   <div
                     class="ant-popover-inner-content"
+                  >
+                    <div
+                      class="ant-color-picker-inner"
                     >
                       <div
                         class="ant-color-picker-inner-content"
@@ -21662,6 +21669,7 @@ exports[`renders components/form/demo/validate-other.tsx extend context correctl
         </div>
       </div>
     </div>
+  </div>
   <div
     class="ant-form-item"
   >

components/watermark/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -150,6 +150,9 @@ exports[`renders components/watermark/demo/custom.tsx extend context correctly 1
                   >
                     <div
                       class="ant-popover-inner-content"
+                    >
+                      <div
+                        class="ant-color-picker-inner"
                       >
                         <div
                           class="ant-color-picker-inner-content"
@@ -502,6 +505,7 @@ exports[`renders components/watermark/demo/custom.tsx extend context correctly 1
           </div>
         </div>
       </div>
+    </div>
     <div
       class="ant-form-item"
     >