feat: color-picker pure panel (#42388)

components/color-picker/ColorPicker.tsx

@@ -46,6 +46,7 @@ export interface ColorPickerProps
   onFormatChange?: (format: ColorFormat) => void;
   onChange?: (value: Color, hex: string) => void;
   getPopupContainer?: PopoverProps['getPopupContainer'];
+  autoAdjustOverflow?: PopoverProps['autoAdjustOverflow'];
 }
 
 type CompoundedComponent = React.FC<ColorPickerProps> & {
@@ -73,6 +74,7 @@ const ColorPicker: CompoundedComponent = (props) => {
     onChange,
     onOpenChange,
     getPopupContainer,
+    autoAdjustOverflow = true,
   } = props;
 
   const { getPrefixCls, direction } = useContext<ConfigConsumerProps>(ConfigContext);
@@ -119,6 +121,7 @@ const ColorPicker: CompoundedComponent = (props) => {
     arrow,
     rootClassName,
     getPopupContainer,
+    autoAdjustOverflow,
   };
 
   const colorBaseProps: ColorPickerBaseProps = {
@@ -161,7 +164,16 @@ if (process.env.NODE_ENV !== 'production') {
   ColorPicker.displayName = 'ColorPicker';
 }
 
-const PurePanel = genPurePanel(ColorPicker, 'color-picker', (prefixCls) => prefixCls);
+const PurePanel = genPurePanel(
+  ColorPicker,
+  'color-picker',
+  (prefixCls) => prefixCls,
+  (props: ColorPickerProps) => ({
+    ...props,
+    placement: 'bottom' as TriggerPlacement,
+    autoAdjustOverflow: false,
+  }),
+);
 
 ColorPicker._InternalPanelDoNotUseOrYouWillBeFired = PurePanel;
 

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

@@ -3962,8 +3962,11 @@ Array [
 
 exports[`renders components/color-picker/demo/pure-panel.tsx extend context correctly 1`] = `
 <div
-  style="padding-bottom: 0px; position: relative; min-width: 0;"
+  style="padding-left: 100px;"
 >
+  <div
+    style="padding-bottom: 0px; position: relative; min-width: 0;"
+  >
     <div
       class="ant-color-picker-trigger ant-popover-open ant-color-picker-trigger-active"
       style="margin: 0px;"
@@ -3978,12 +3981,12 @@ exports[`renders components/color-picker/demo/pure-panel.tsx extend context corr
       </div>
     </div>
     <div
-    class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-color-picker ant-popover-placement-bottomLeft"
+      class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-color-picker ant-popover-placement-bottom"
       style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
     >
       <div
         class="ant-popover-arrow"
-      style="position: absolute;"
+        style="position: absolute; top: 0px; left: 0px;"
       />
       <div
         class="ant-popover-content"
@@ -4342,6 +4345,7 @@ exports[`renders components/color-picker/demo/pure-panel.tsx extend context corr
         </div>
       </div>
     </div>
+  </div>
 </div>
 `;
 

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

@@ -222,8 +222,11 @@ exports[`renders components/color-picker/demo/presets.tsx correctly 1`] = `
 
 exports[`renders components/color-picker/demo/pure-panel.tsx correctly 1`] = `
 <div
-  style="padding-bottom:0;position:relative;min-width:0"
+  style="padding-left:100px"
 >
+  <div
+    style="padding-bottom:0;position:relative;min-width:0"
+  >
     <div
       class="ant-color-picker-trigger"
       style="margin:0"
@@ -237,6 +240,7 @@ exports[`renders components/color-picker/demo/pure-panel.tsx correctly 1`] = `
         />
       </div>
     </div>
+  </div>
 </div>
 `;
 

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

@@ -8,5 +8,9 @@ export default () => {
   const { token } = theme.useToken();
   const [color, setColor] = useState<Color | string>(token.colorPrimary);
 
-  return <PureRenderColorPicker value={color} onChange={setColor} />;
+  return (
+    <div style={{ paddingLeft: 100 }}>
+      <PureRenderColorPicker value={color} onChange={setColor} />
+    </div>
+  );
 };