From 75e40999cdbdee00ca2338e8e2a61dda360552a7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?kiner-tang=28=E6=96=87=E8=BE=89=29?= <1127031143@qq.com>
Date: Tue, 16 May 2023 14:18:12 +0800
Subject: [PATCH] feat: color-picker pure panel (#42388)

---
 components/color-picker/ColorPicker.tsx       |  14 +-
 .../__snapshots__/demo-extend.test.ts.snap    | 534 +++++++++---------
 .../__tests__/__snapshots__/demo.test.ts.snap |  18 +-
 components/color-picker/demo/pure-panel.tsx   |   6 +-
 4 files changed, 298 insertions(+), 274 deletions(-)

diff --git a/components/color-picker/ColorPicker.tsx b/components/color-picker/ColorPicker.tsx
index 0a9a52cb10..40956a1b24 100644
--- a/components/color-picker/ColorPicker.tsx
+++ b/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;
 
diff --git a/components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap
index 4612f52e08..f824f6543a 100644
--- a/components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -3962,324 +3962,275 @@ 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
-    class="ant-color-picker-trigger ant-popover-open ant-color-picker-trigger-active"
-    style="margin: 0px;"
+    style="padding-bottom: 0px; position: relative; min-width: 0;"
   >
     <div
-      class="ant-color-picker-color-block"
+      class="ant-color-picker-trigger ant-popover-open ant-color-picker-trigger-active"
+      style="margin: 0px;"
     >
       <div
-        class="ant-color-picker-color-block-inner"
-        style="background: rgb(22, 119, 255);"
-      />
+        class="ant-color-picker-color-block"
+      >
+        <div
+          class="ant-color-picker-color-block-inner"
+          style="background: rgb(22, 119, 255);"
+        />
+      </div>
     </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"
-    style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
-  >
     <div
-      class="ant-popover-arrow"
-      style="position: absolute;"
-    />
-    <div
-      class="ant-popover-content"
+      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-inner"
-        role="tooltip"
+        class="ant-popover-arrow"
+        style="position: absolute; top: 0px; left: 0px;"
+      />
+      <div
+        class="ant-popover-content"
       >
         <div
-          class="ant-popover-inner-content"
+          class="ant-popover-inner"
+          role="tooltip"
         >
           <div
-            class="ant-color-picker-panel"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-color-picker-inner-panel"
+              class="ant-color-picker-panel"
             >
               <div
-                class="ant-color-picker-select"
+                class="ant-color-picker-inner-panel"
               >
                 <div
-                  class="ant-color-picker-palette"
-                  style="position: relative;"
+                  class="ant-color-picker-select"
                 >
                   <div
-                    style="position: absolute; left: 0px; top: 0px; z-index: 1;"
+                    class="ant-color-picker-palette"
+                    style="position: relative;"
                   >
                     <div
-                      class="ant-color-picker-handler"
-                      style="background-color: rgb(22, 119, 255);"
+                      style="position: absolute; left: 0px; top: 0px; z-index: 1;"
+                    >
+                      <div
+                        class="ant-color-picker-handler"
+                        style="background-color: rgb(22, 119, 255);"
+                      />
+                    </div>
+                    <div
+                      class="ant-color-picker-saturation"
+                      style="background-color: rgb(0, 0, 0);"
                     />
                   </div>
-                  <div
-                    class="ant-color-picker-saturation"
-                    style="background-color: rgb(0, 0, 0);"
-                  />
                 </div>
-              </div>
-              <div
-                class="ant-color-picker-slider-container"
-              >
                 <div
-                  class="ant-color-picker-slider-group"
+                  class="ant-color-picker-slider-container"
                 >
                   <div
-                    class="ant-color-picker-slider ant-color-picker-slider-hue"
+                    class="ant-color-picker-slider-group"
                   >
                     <div
-                      class="ant-color-picker-palette"
-                      style="position: relative;"
+                      class="ant-color-picker-slider ant-color-picker-slider-hue"
                     >
                       <div
-                        style="position: absolute; left: 0px; top: 0px; z-index: 1;"
+                        class="ant-color-picker-palette"
+                        style="position: relative;"
                       >
                         <div
-                          class="ant-color-picker-handler ant-color-picker-handler-sm"
-                          style="background-color: rgb(0, 0, 0);"
+                          style="position: absolute; left: 0px; top: 0px; z-index: 1;"
+                        >
+                          <div
+                            class="ant-color-picker-handler ant-color-picker-handler-sm"
+                            style="background-color: rgb(0, 0, 0);"
+                          />
+                        </div>
+                        <div
+                          class="ant-color-picker-gradient"
+                          style="position: absolute; inset: 0;"
                         />
                       </div>
-                      <div
-                        class="ant-color-picker-gradient"
-                        style="position: absolute; inset: 0;"
-                      />
                     </div>
-                  </div>
-                  <div
-                    class="ant-color-picker-slider ant-color-picker-slider-alpha"
-                  >
                     <div
-                      class="ant-color-picker-palette"
-                      style="position: relative;"
+                      class="ant-color-picker-slider ant-color-picker-slider-alpha"
                     >
                       <div
-                        style="position: absolute; left: 0px; top: 0px; z-index: 1;"
+                        class="ant-color-picker-palette"
+                        style="position: relative;"
                       >
                         <div
-                          class="ant-color-picker-handler ant-color-picker-handler-sm"
-                          style="background-color: rgb(22, 119, 255);"
+                          style="position: absolute; left: 0px; top: 0px; z-index: 1;"
+                        >
+                          <div
+                            class="ant-color-picker-handler ant-color-picker-handler-sm"
+                            style="background-color: rgb(22, 119, 255);"
+                          />
+                        </div>
+                        <div
+                          class="ant-color-picker-gradient"
+                          style="position: absolute; inset: 0;"
                         />
                       </div>
-                      <div
-                        class="ant-color-picker-gradient"
-                        style="position: absolute; inset: 0;"
-                      />
                     </div>
                   </div>
-                </div>
-                <div
-                  class="ant-color-picker-color-block"
-                >
                   <div
-                    class="ant-color-picker-color-block-inner"
-                    style="background: rgb(22, 119, 255);"
-                  />
+                    class="ant-color-picker-color-block"
+                  >
+                    <div
+                      class="ant-color-picker-color-block-inner"
+                      style="background: rgb(22, 119, 255);"
+                    />
+                  </div>
                 </div>
-              </div>
-              <div
-                class="ant-color-picker-input-container"
-              >
                 <div
-                  class="ant-select ant-select-sm ant-select-borderless ant-color-picker-format-select ant-select-single ant-select-show-arrow"
+                  class="ant-color-picker-input-container"
                 >
                   <div
-                    class="ant-select-selector"
+                    class="ant-select ant-select-sm ant-select-borderless ant-color-picker-format-select ant-select-single ant-select-show-arrow"
                   >
-                    <span
-                      class="ant-select-selection-search"
-                    >
-                      <input
-                        aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
-                        aria-autocomplete="list"
-                        aria-controls="rc_select_TEST_OR_SSR_list"
-                        aria-expanded="false"
-                        aria-haspopup="listbox"
-                        aria-owns="rc_select_TEST_OR_SSR_list"
-                        autocomplete="off"
-                        class="ant-select-selection-search-input"
-                        id="rc_select_TEST_OR_SSR"
-                        readonly=""
-                        role="combobox"
-                        style="opacity: 0;"
-                        type="search"
-                        unselectable="on"
-                        value=""
-                      />
-                    </span>
-                    <span
-                      class="ant-select-selection-item"
-                      title="HEX"
+                    <div
+                      class="ant-select-selector"
                     >
-                      HEX
-                    </span>
-                  </div>
-                  <div
-                    class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                    style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; width: 68px;"
-                  >
-                    <div>
-                      <div
-                        id="rc_select_TEST_OR_SSR_list"
-                        role="listbox"
-                        style="height: 0px; width: 0px; overflow: hidden;"
+                      <span
+                        class="ant-select-selection-search"
                       >
+                        <input
+                          aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
+                          aria-autocomplete="list"
+                          aria-controls="rc_select_TEST_OR_SSR_list"
+                          aria-expanded="false"
+                          aria-haspopup="listbox"
+                          aria-owns="rc_select_TEST_OR_SSR_list"
+                          autocomplete="off"
+                          class="ant-select-selection-search-input"
+                          id="rc_select_TEST_OR_SSR"
+                          readonly=""
+                          role="combobox"
+                          style="opacity: 0;"
+                          type="search"
+                          unselectable="on"
+                          value=""
+                        />
+                      </span>
+                      <span
+                        class="ant-select-selection-item"
+                        title="HEX"
+                      >
+                        HEX
+                      </span>
+                    </div>
+                    <div
+                      class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
+                      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; width: 68px;"
+                    >
+                      <div>
                         <div
-                          aria-label="HEX"
-                          aria-selected="true"
-                          id="rc_select_TEST_OR_SSR_list_0"
-                          role="option"
-                        >
-                          hex
-                        </div>
-                        <div
-                          aria-label="HSB"
-                          aria-selected="false"
-                          id="rc_select_TEST_OR_SSR_list_1"
-                          role="option"
+                          id="rc_select_TEST_OR_SSR_list"
+                          role="listbox"
+                          style="height: 0px; width: 0px; overflow: hidden;"
                         >
-                          hsb
+                          <div
+                            aria-label="HEX"
+                            aria-selected="true"
+                            id="rc_select_TEST_OR_SSR_list_0"
+                            role="option"
+                          >
+                            hex
+                          </div>
+                          <div
+                            aria-label="HSB"
+                            aria-selected="false"
+                            id="rc_select_TEST_OR_SSR_list_1"
+                            role="option"
+                          >
+                            hsb
+                          </div>
                         </div>
-                      </div>
-                      <div
-                        class="rc-virtual-list"
-                        style="position: relative;"
-                      >
                         <div
-                          class="rc-virtual-list-holder"
-                          style="max-height: 256px; overflow-y: auto;"
+                          class="rc-virtual-list"
+                          style="position: relative;"
                         >
-                          <div>
-                            <div
-                              class="rc-virtual-list-holder-inner"
-                              style="display: flex; flex-direction: column;"
-                            >
+                          <div
+                            class="rc-virtual-list-holder"
+                            style="max-height: 256px; overflow-y: auto;"
+                          >
+                            <div>
                               <div
-                                aria-selected="true"
-                                class="ant-select-item ant-select-item-option ant-select-item-option-active ant-select-item-option-selected"
-                                title="HEX"
+                                class="rc-virtual-list-holder-inner"
+                                style="display: flex; flex-direction: column;"
                               >
                                 <div
-                                  class="ant-select-item-option-content"
+                                  aria-selected="true"
+                                  class="ant-select-item ant-select-item-option ant-select-item-option-active ant-select-item-option-selected"
+                                  title="HEX"
                                 >
-                                  HEX
+                                  <div
+                                    class="ant-select-item-option-content"
+                                  >
+                                    HEX
+                                  </div>
+                                  <span
+                                    aria-hidden="true"
+                                    class="ant-select-item-option-state"
+                                    style="user-select: none;"
+                                    unselectable="on"
+                                  />
                                 </div>
-                                <span
-                                  aria-hidden="true"
-                                  class="ant-select-item-option-state"
-                                  style="user-select: none;"
-                                  unselectable="on"
-                                />
-                              </div>
-                              <div
-                                aria-selected="false"
-                                class="ant-select-item ant-select-item-option"
-                                title="HSB"
-                              >
                                 <div
-                                  class="ant-select-item-option-content"
+                                  aria-selected="false"
+                                  class="ant-select-item ant-select-item-option"
+                                  title="HSB"
                                 >
-                                  HSB
+                                  <div
+                                    class="ant-select-item-option-content"
+                                  >
+                                    HSB
+                                  </div>
+                                  <span
+                                    aria-hidden="true"
+                                    class="ant-select-item-option-state"
+                                    style="user-select: none;"
+                                    unselectable="on"
+                                  />
                                 </div>
-                                <span
-                                  aria-hidden="true"
-                                  class="ant-select-item-option-state"
-                                  style="user-select: none;"
-                                  unselectable="on"
-                                />
-                              </div>
-                              <div
-                                aria-selected="false"
-                                class="ant-select-item ant-select-item-option"
-                                title="RGB"
-                              >
                                 <div
-                                  class="ant-select-item-option-content"
+                                  aria-selected="false"
+                                  class="ant-select-item ant-select-item-option"
+                                  title="RGB"
                                 >
-                                  RGB
+                                  <div
+                                    class="ant-select-item-option-content"
+                                  >
+                                    RGB
+                                  </div>
+                                  <span
+                                    aria-hidden="true"
+                                    class="ant-select-item-option-state"
+                                    style="user-select: none;"
+                                    unselectable="on"
+                                  />
                                 </div>
-                                <span
-                                  aria-hidden="true"
-                                  class="ant-select-item-option-state"
-                                  style="user-select: none;"
-                                  unselectable="on"
-                                />
                               </div>
                             </div>
                           </div>
                         </div>
                       </div>
                     </div>
-                  </div>
-                  <span
-                    aria-hidden="true"
-                    class="ant-select-arrow"
-                    style="user-select: none;"
-                    unselectable="on"
-                  >
-                    <span
-                      aria-label="down"
-                      class="anticon anticon-down ant-select-suffix"
-                      role="img"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        data-icon="down"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="64 64 896 896"
-                        width="1em"
-                      >
-                        <path
-                          d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="ant-color-picker-input"
-                >
-                  <span
-                    class="ant-input-affix-wrapper ant-color-picker-hex-input ant-input-affix-wrapper-sm"
-                  >
-                    <span
-                      class="ant-input-prefix"
-                    >
-                      #
-                    </span>
-                    <input
-                      class="ant-input ant-input-sm"
-                      type="text"
-                      value="1677FF"
-                    />
-                  </span>
-                </div>
-                <div
-                  class="ant-input-number ant-input-number-sm ant-color-picker-steppers ant-color-picker-alpha-input"
-                >
-                  <div
-                    class="ant-input-number-handler-wrap"
-                  >
                     <span
-                      aria-disabled="true"
-                      aria-label="Increase Value"
-                      class="ant-input-number-handler ant-input-number-handler-up ant-input-number-handler-up-disabled"
-                      role="button"
+                      aria-hidden="true"
+                      class="ant-select-arrow"
+                      style="user-select: none;"
                       unselectable="on"
                     >
                       <span
-                        aria-label="up"
-                        class="anticon anticon-up ant-input-number-handler-up-inner"
+                        aria-label="down"
+                        class="anticon anticon-down ant-select-suffix"
                         role="img"
                       >
                         <svg
                           aria-hidden="true"
-                          data-icon="up"
+                          data-icon="down"
                           fill="currentColor"
                           focusable="false"
                           height="1em"
@@ -4287,52 +4238,105 @@ exports[`renders components/color-picker/demo/pure-panel.tsx extend context corr
                           width="1em"
                         >
                           <path
-                            d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
+                            d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
                           />
                         </svg>
                       </span>
                     </span>
+                  </div>
+                  <div
+                    class="ant-color-picker-input"
+                  >
                     <span
-                      aria-disabled="false"
-                      aria-label="Decrease Value"
-                      class="ant-input-number-handler ant-input-number-handler-down"
-                      role="button"
-                      unselectable="on"
+                      class="ant-input-affix-wrapper ant-color-picker-hex-input ant-input-affix-wrapper-sm"
                     >
                       <span
-                        aria-label="down"
-                        class="anticon anticon-down ant-input-number-handler-down-inner"
-                        role="img"
+                        class="ant-input-prefix"
                       >
-                        <svg
-                          aria-hidden="true"
-                          data-icon="down"
-                          fill="currentColor"
-                          focusable="false"
-                          height="1em"
-                          viewBox="64 64 896 896"
-                          width="1em"
-                        >
-                          <path
-                            d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-                          />
-                        </svg>
+                        #
                       </span>
+                      <input
+                        class="ant-input ant-input-sm"
+                        type="text"
+                        value="1677FF"
+                      />
                     </span>
                   </div>
                   <div
-                    class="ant-input-number-input-wrap"
+                    class="ant-input-number ant-input-number-sm ant-color-picker-steppers ant-color-picker-alpha-input"
                   >
-                    <input
-                      aria-valuemax="100"
-                      aria-valuemin="0"
-                      aria-valuenow="100"
-                      autocomplete="off"
-                      class="ant-input-number-input"
-                      role="spinbutton"
-                      step="1"
-                      value="100%"
-                    />
+                    <div
+                      class="ant-input-number-handler-wrap"
+                    >
+                      <span
+                        aria-disabled="true"
+                        aria-label="Increase Value"
+                        class="ant-input-number-handler ant-input-number-handler-up ant-input-number-handler-up-disabled"
+                        role="button"
+                        unselectable="on"
+                      >
+                        <span
+                          aria-label="up"
+                          class="anticon anticon-up ant-input-number-handler-up-inner"
+                          role="img"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            data-icon="up"
+                            fill="currentColor"
+                            focusable="false"
+                            height="1em"
+                            viewBox="64 64 896 896"
+                            width="1em"
+                          >
+                            <path
+                              d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
+                            />
+                          </svg>
+                        </span>
+                      </span>
+                      <span
+                        aria-disabled="false"
+                        aria-label="Decrease Value"
+                        class="ant-input-number-handler ant-input-number-handler-down"
+                        role="button"
+                        unselectable="on"
+                      >
+                        <span
+                          aria-label="down"
+                          class="anticon anticon-down ant-input-number-handler-down-inner"
+                          role="img"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            data-icon="down"
+                            fill="currentColor"
+                            focusable="false"
+                            height="1em"
+                            viewBox="64 64 896 896"
+                            width="1em"
+                          >
+                            <path
+                              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                            />
+                          </svg>
+                        </span>
+                      </span>
+                    </div>
+                    <div
+                      class="ant-input-number-input-wrap"
+                    >
+                      <input
+                        aria-valuemax="100"
+                        aria-valuemin="0"
+                        aria-valuenow="100"
+                        autocomplete="off"
+                        class="ant-input-number-input"
+                        role="spinbutton"
+                        step="1"
+                        value="100%"
+                      />
+                    </div>
                   </div>
                 </div>
               </div>
diff --git a/components/color-picker/__tests__/__snapshots__/demo.test.ts.snap b/components/color-picker/__tests__/__snapshots__/demo.test.ts.snap
index 7d7aaf394c..a6b1700327 100644
--- a/components/color-picker/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/color-picker/__tests__/__snapshots__/demo.test.ts.snap
@@ -222,19 +222,23 @@ 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
-    class="ant-color-picker-trigger"
-    style="margin:0"
+    style="padding-bottom:0;position:relative;min-width:0"
   >
     <div
-      class="ant-color-picker-color-block"
+      class="ant-color-picker-trigger"
+      style="margin:0"
     >
       <div
-        class="ant-color-picker-color-block-inner"
-        style="background:rgb(22, 119, 255)"
-      />
+        class="ant-color-picker-color-block"
+      >
+        <div
+          class="ant-color-picker-color-block-inner"
+          style="background:rgb(22, 119, 255)"
+