docs: Form add ColorPicker demo (#42880)

* docs: form add color-picker demo

* test: update snapshot

* fix: color-picker support form

* perf: optimize code logic

* refactor: optimize code

* test: update snapshot

* test: update snap

* test: update snap

* chore: fix prettier

* chore: fix prettier

components/color-picker/ColorPicker.tsx

@@ -7,10 +7,12 @@ import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import type { CSSProperties, FC } from 'react';
 import React, { useContext, useRef, useState } from 'react';
 import genPurePanel from '../_util/PurePanel';
+import { getStatusClassNames } from '../_util/statusUtils';
 import type { SizeType } from '../config-provider/SizeContext';
 import type { ConfigConsumerProps } from '../config-provider/context';
 import { ConfigContext } from '../config-provider/context';
 import useSize from '../config-provider/hooks/useSize';
+import { FormItemInputContext, NoFormStyle } from '../form/context';
 import type { PopoverProps } from '../popover';
 import Popover from '../popover';
 import theme from '../theme';
@@ -21,6 +23,7 @@ import useColorState from './hooks/useColorState';
 import type {
   ColorFormat,
   ColorPickerBaseProps,
+  ColorValueType,
   PresetsItem,
   TriggerPlacement,
   TriggerType,
@@ -32,8 +35,8 @@ export type ColorPickerProps = Omit<
   RcColorPickerProps,
   'onChange' | 'value' | 'defaultValue' | 'panelRender' | 'onChangeComplete'
 > & {
-  value?: Color | string;
+  value?: ColorValueType;
-  defaultValue?: Color | string;
+  defaultValue?: ColorValueType;
   children?: React.ReactNode;
   open?: boolean;
   disabled?: boolean;
@@ -114,12 +117,16 @@ const ColorPicker: CompoundedComponent = (props) => {
 
   const prefixCls = getPrefixCls('color-picker', customizePrefixCls);
 
+  // ===================== Form Status =====================
+  const { status: contextStatus } = React.useContext(FormItemInputContext);
+
   // ===================== Style =====================
   const mergedSize = useSize(customizeSize);
   const [wrapSSR, hashId] = useStyle(prefixCls);
   const rtlCls = { [`${prefixCls}-rtl`]: direction };
   const mergeRootCls = classNames(rootClassName, rtlCls);
   const mergeCls = classNames(
+    getStatusClassNames(prefixCls, contextStatus),
     {
       [`${prefixCls}-sm`]: mergedSize === 'small',
       [`${prefixCls}-lg`]: mergedSize === 'large',
@@ -135,7 +142,8 @@ const ColorPicker: CompoundedComponent = (props) => {
 
   const handleChange = (data: Color, type?: HsbaColorType, pickColor?: boolean) => {
     let color: Color = generateColor(data);
-    if (colorCleared) {
+    const isNull = value === null || (!value && defaultValue === null);
+    if (colorCleared || isNull) {
       setColorCleared(false);
       const hsba = color.toHsb();
       // ignore alpha slider
@@ -199,7 +207,14 @@ const ColorPicker: CompoundedComponent = (props) => {
         }
       }}
       content={
-        <ColorPickerPanel {...colorBaseProps} onChange={handleChange} onClear={handleClear} />
+        <NoFormStyle override status>
+          <ColorPickerPanel
+            {...colorBaseProps}
+            onChange={handleChange}
+            onChangeComplete={handleChangeComplete}
+            onClear={handleClear}
+          />
+        </NoFormStyle>
       }
       overlayClassName={mergePopupCls}
       {...popoverProps}

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

@@ -5,6 +5,7 @@ import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
 import { waitFakeTimer } from '../../../tests/utils';
 import ConfigProvider from '../../config-provider';
+import Form from '../../form';
 import theme from '../../theme';
 import ColorPicker from '../ColorPicker';
 import type { Color } from '../color';
@@ -398,7 +399,7 @@ describe('ColorPicker', () => {
     expect(componentContainer).toMatchSnapshot();
   });
 
-  it('Should onChangeComplete work', async () => {
+  it('Should null work as expect', async () => {
     spyElementPrototypes(HTMLElement, {
       getBoundingClientRect: () => ({
         x: 0,
@@ -407,6 +408,51 @@ describe('ColorPicker', () => {
         height: 100,
       }),
     });
+    const { container } = render(<ColorPicker value={null} open />);
+    expect(
+      container.querySelector('.ant-color-picker-alpha-input input')?.getAttribute('value'),
+    ).toEqual('0%');
+    expect(
+      container.querySelector('.ant-color-picker-hex-input input')?.getAttribute('value'),
+    ).toEqual('000000');
+    doMouseMove(container, 0, 999);
+    expect(
+      container.querySelector('.ant-color-picker-alpha-input input')?.getAttribute('value'),
+    ).toEqual('100%');
+  });
+
+  it('should support valid in form', async () => {
+    const Demo = () => {
+      const [form] = Form.useForm();
+      const submit = () => {
+        form.validateFields();
+      };
+      return (
+        <Form form={form} initialValues={{ 'color-picker': null }}>
+          <Form.Item
+            name="color-picker"
+            label="ColorPicker"
+            rules={[{ required: true, message: 'color is required!' }]}
+          >
+            <ColorPicker />
+          </Form.Item>
+          <button type="button" onClick={submit}>
+            submit
+          </button>
+        </Form>
+      );
+    };
+    const { container } = render(<Demo />);
+    expect(container.querySelector('.ant-color-picker-status-error')).toBeFalsy();
+    fireEvent.click(container.querySelector('button')!);
+    await waitFakeTimer();
+    expect(container.querySelector('.ant-color-picker-status-error')).toBeTruthy();
+    expect(container.querySelector('.ant-form-item-explain-error')?.innerHTML).toEqual(
+      'color is required!',
+    );
+  });
+
+  it('Should onChangeComplete work', async () => {
     const handleChangeComplete = jest.fn();
     const { container } = render(<ColorPicker open onChangeComplete={handleChangeComplete} />);
     doMouseMove(container, 0, 999);

components/color-picker/color.ts

@@ -19,6 +19,9 @@ export class ColorFactory {
 
   constructor(color: ColorGenInput<Color>) {
     this.metaColor = new RcColor(color as ColorGenInput);
+    if (!color) {
+      this.metaColor.setAlpha(0);
+    }
   }
 
   toHsb() {

components/color-picker/hooks/useColorState.ts

@@ -1,18 +1,19 @@
 import { useEffect, useState } from 'react';
 import type { Color } from '../color';
+import type { ColorValueType } from '../interface';
 import { generateColor } from '../util';
 
-function hasValue(value?: Color | string) {
+function hasValue(value?: ColorValueType) {
   return value !== undefined;
 }
 
 const useColorState = (
-  defaultStateValue: Color | string,
+  defaultStateValue: ColorValueType,
-  option: { defaultValue?: Color | string; value?: Color | string },
+  option: { defaultValue?: ColorValueType; value?: ColorValueType },
 ): readonly [Color, React.Dispatch<React.SetStateAction<Color>>] => {
   const { defaultValue, value } = option;
   const [colorValue, setColorValue] = useState<Color>(() => {
-    let mergeState: string | Color | undefined;
+    let mergeState: ColorValueType | undefined;
     if (hasValue(value)) {
       mergeState = value;
     } else if (hasValue(defaultValue)) {

components/color-picker/interface.ts

@@ -33,3 +33,5 @@ export interface ColorPickerBaseProps {
   onFormatChange?: ColorPickerProps['onFormatChange'];
   onChangeComplete?: ColorPickerProps['onChangeComplete'];
 }
+
+export type ColorValueType = Color | string | null;

components/color-picker/style/index.ts

@@ -77,6 +77,45 @@ const genClearStyle = (
   };
 };
 
+const genStatusStyle = (token: ColorPickerToken): CSSObject => {
+  const {
+    componentCls,
+    colorError,
+    colorWarning,
+    colorErrorBorderHover,
+    colorWarningBorderHover,
+    colorErrorOutline,
+    colorWarningOutline,
+  } = token;
+  return {
+    [`&${componentCls}-status-error`]: {
+      borderColor: colorError,
+      '&:hover': {
+        borderColor: colorErrorBorderHover,
+      },
+      [`&${componentCls}-trigger-active`]: {
+        ...genActiveStyle(
+          mergeToken<ColorPickerToken>(token, {
+            controlOutline: colorErrorOutline,
+          }),
+        ),
+      },
+    },
+    [`&${componentCls}-status-warning`]: {
+      borderColor: colorWarning,
+      '&:hover': {
+        borderColor: colorWarningBorderHover,
+      },
+      [`&${componentCls}-trigger-active`]: {
+        ...genActiveStyle(
+          mergeToken<ColorPickerToken>(token, {
+            controlOutline: colorWarningOutline,
+          }),
+        ),
+      },
+    },
+  };
+};
 const genSizeStyle = (token: ColorPickerToken): CSSObject => {
   const {
     componentCls,
@@ -202,6 +241,7 @@ const genColorPickerStyle: GenerateStyle<ColorPickerToken> = (token) => {
           },
           ...genClearStyle(token, controlHeightSM),
           ...genColorBlockStyle(token, controlHeightSM),
+          ...genStatusStyle(token),
           ...genSizeStyle(token),
         },
         ...genRtlStyle(token),

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

@@ -20842,6 +20842,414 @@ exports[`renders components/form/demo/validate-other.tsx extend context correctl
       </div>
     </div>
   </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-6 ant-form-item-label"
+      >
+        <label
+          class="ant-form-item-required"
+          for="validate_other_color-picker"
+          title="ColorPicker"
+        >
+          ColorPicker
+        </label>
+      </div>
+      <div
+        class="ant-col ant-col-14 ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <div
+              class="ant-color-picker-trigger"
+            >
+              <div
+                class="ant-color-picker-color-block"
+              >
+                <div
+                  class="ant-color-picker-color-block-inner"
+                  style="background: rgba(0, 0, 0, 0);"
+                />
+              </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"
+              >
+                <div
+                  class="ant-popover-inner"
+                  role="tooltip"
+                >
+                  <div
+                    class="ant-popover-inner-content"
+                  >
+                    <div
+                      class="ant-color-picker-inner-content"
+                    >
+                      <div
+                        class="ant-color-picker-panel"
+                      >
+                        <div
+                          class="ant-color-picker-select"
+                        >
+                          <div
+                            class="ant-color-picker-palette"
+                            style="position: relative;"
+                          >
+                            <div
+                              style="position: absolute; left: 0px; top: 0px; z-index: 1;"
+                            >
+                              <div
+                                class="ant-color-picker-handler"
+                                style="background-color: rgba(0, 0, 0, 0);"
+                              />
+                            </div>
+                            <div
+                              class="ant-color-picker-saturation"
+                              style="background-color: rgb(255, 0, 0);"
+                            />
+                          </div>
+                        </div>
+                        <div
+                          class="ant-color-picker-slider-container"
+                        >
+                          <div
+                            class="ant-color-picker-slider-group"
+                          >
+                            <div
+                              class="ant-color-picker-slider ant-color-picker-slider-hue"
+                            >
+                              <div
+                                class="ant-color-picker-palette"
+                                style="position: relative;"
+                              >
+                                <div
+                                  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(255, 0, 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;"
+                              >
+                                <div
+                                  style="position: absolute; left: 0px; top: 0px; z-index: 1;"
+                                >
+                                  <div
+                                    class="ant-color-picker-handler ant-color-picker-handler-sm"
+                                    style="background-color: rgba(0, 0, 0, 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: rgba(0, 0, 0, 0);"
+                            />
+                          </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"
+                        >
+                          <div
+                            class="ant-select-selector"
+                          >
+                            <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
+                                id="rc_select_TEST_OR_SSR_list"
+                                role="listbox"
+                                style="height: 0px; width: 0px; overflow: hidden;"
+                              >
+                                <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
+                                class="rc-virtual-list"
+                                style="position: relative;"
+                              >
+                                <div
+                                  class="rc-virtual-list-holder"
+                                  style="max-height: 256px; overflow-y: auto;"
+                                >
+                                  <div>
+                                    <div
+                                      class="rc-virtual-list-holder-inner"
+                                      style="display: flex; flex-direction: column;"
+                                    >
+                                      <div
+                                        aria-selected="true"
+                                        class="ant-select-item ant-select-item-option ant-select-item-option-active ant-select-item-option-selected"
+                                        title="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>
+                                      <div
+                                        aria-selected="false"
+                                        class="ant-select-item ant-select-item-option"
+                                        title="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>
+                                      <div
+                                        aria-selected="false"
+                                        class="ant-select-item ant-select-item-option"
+                                        title="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>
+                                    </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="000000"
+                            />
+                          </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="false"
+                              aria-label="Increase Value"
+                              class="ant-input-number-handler ant-input-number-handler-up"
+                              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="true"
+                              aria-label="Decrease Value"
+                              class="ant-input-number-handler ant-input-number-handler-down ant-input-number-handler-down-disabled"
+                              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="0"
+                              autocomplete="off"
+                              class="ant-input-number-input"
+                              role="spinbutton"
+                              step="1"
+                              value="0%"
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
   <div
     class="ant-form-item"
   >

components/form/__tests__/__snapshots__/demo.test.tsx.snap

@@ -9703,6 +9703,49 @@ exports[`renders components/form/demo/validate-other.tsx correctly 1`] = `
       </div>
     </div>
   </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-6 ant-form-item-label"
+      >
+        <label
+          class="ant-form-item-required"
+          for="validate_other_color-picker"
+          title="ColorPicker"
+        >
+          ColorPicker
+        </label>
+      </div>
+      <div
+        class="ant-col ant-col-14 ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <div
+              class="ant-color-picker-trigger"
+            >
+              <div
+                class="ant-color-picker-color-block"
+              >
+                <div
+                  class="ant-color-picker-color-block-inner"
+                  style="background:rgba(0, 0, 0, 0)"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
   <div
     class="ant-form-item"
   >

components/form/demo/validate-other.tsx

@@ -3,6 +3,7 @@ import {
   Button,
   Checkbox,
   Col,
+  ColorPicker,
   Form,
   InputNumber,
   Radio,
@@ -40,7 +41,12 @@ const App: React.FC = () => (
     name="validate_other"
     {...formItemLayout}
     onFinish={onFinish}
-    initialValues={{ 'input-number': 3, 'checkbox-group': ['A', 'B'], rate: 3.5 }}
+    initialValues={{
+      'input-number': 3,
+      'checkbox-group': ['A', 'B'],
+      rate: 3.5,
+      'color-picker': null,
+    }}
     style={{ maxWidth: 600 }}
   >
     <Form.Item label="Plain Text">
@@ -168,7 +174,6 @@ const App: React.FC = () => (
         <Button icon={<UploadOutlined />}>Click to upload</Button>
       </Upload>
     </Form.Item>
-
     <Form.Item label="Dragger">
       <Form.Item name="dragger" valuePropName="fileList" getValueFromEvent={normFile} noStyle>
         <Upload.Dragger name="files" action="/upload.do">
@@ -180,6 +185,13 @@ const App: React.FC = () => (
         </Upload.Dragger>
       </Form.Item>
     </Form.Item>
+    <Form.Item
+      name="color-picker"
+      label="ColorPicker"
+      rules={[{ required: true, message: 'color is required!' }]}
+    >
+      <ColorPicker />
+    </Form.Item>
 
     <Form.Item wrapperCol={{ span: 12, offset: 6 }}>
       <Space>

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

@@ -238,7 +238,7 @@ exports[`renders components/watermark/demo/custom.tsx extend context correctly 1
                           class="ant-color-picker-input-container"
                         >
                           <div
-                            class="ant-select ant-select-sm ant-select-borderless ant-select-in-form-item ant-color-picker-format-select ant-select-single ant-select-show-arrow"
+                            class="ant-select ant-select-sm ant-select-borderless ant-color-picker-format-select ant-select-single ant-select-show-arrow"
                           >
                             <div
                               class="ant-select-selector"
@@ -414,7 +414,7 @@ exports[`renders components/watermark/demo/custom.tsx extend context correctly 1
                             </span>
                           </div>
                           <div
-                            class="ant-input-number ant-input-number-sm ant-input-number-in-form-item ant-color-picker-steppers ant-color-picker-alpha-input"
+                            class="ant-input-number ant-input-number-sm ant-color-picker-steppers ant-color-picker-alpha-input"
                           >
                             <div
                               class="ant-input-number-handler-wrap"