fix: patch more style of errorList (#30887)

* fix: patch more style of errorList

* chore: Use className instead

* test: Update snapshot

* test: Update snapshot

components/config-provider/__tests__/__snapshots__/components.test.js.snap

@@ -13272,7 +13272,7 @@ exports[`ConfigProvider components Form configProvider 1`] = `
         </div>
       </div>
       <div
-        class="config-form-item-explain"
+        class="config-form-item-explain config-form-item-explain-connected"
       >
         <div
           class="config-form-item-explain-error"
@@ -13310,7 +13310,7 @@ exports[`ConfigProvider components Form configProvider componentSize large 1`] =
         </div>
       </div>
       <div
-        class="config-form-item-explain"
+        class="config-form-item-explain config-form-item-explain-connected"
       >
         <div
           class="config-form-item-explain-error"
@@ -13348,7 +13348,7 @@ exports[`ConfigProvider components Form configProvider componentSize middle 1`]
         </div>
       </div>
       <div
-        class="config-form-item-explain"
+        class="config-form-item-explain config-form-item-explain-connected"
       >
         <div
           class="config-form-item-explain-error"
@@ -13386,7 +13386,7 @@ exports[`ConfigProvider components Form configProvider virtual and dropdownMatch
         </div>
       </div>
       <div
-        class="ant-form-item-explain"
+        class="ant-form-item-explain ant-form-item-explain-connected"
       >
         <div
           class="ant-form-item-explain-error"
@@ -13424,7 +13424,7 @@ exports[`ConfigProvider components Form normal 1`] = `
         </div>
       </div>
       <div
-        class="ant-form-item-explain"
+        class="ant-form-item-explain ant-form-item-explain-connected"
       >
         <div
           class="ant-form-item-explain-error"
@@ -13462,7 +13462,7 @@ exports[`ConfigProvider components Form prefixCls 1`] = `
         </div>
       </div>
       <div
-        class="prefix-Form-item-explain"
+        class="prefix-Form-item-explain prefix-Form-item-explain-connected"
       >
         <div
           class="prefix-Form-item-explain-error"

components/form/ErrorList.tsx

@@ -32,6 +32,7 @@ export interface ErrorListProps {
   helpStatus?: ValidateStatus;
   errors?: React.ReactNode[];
   warnings?: React.ReactNode[];
+  className?: string;
 }
 
 export default function ErrorList({
@@ -39,6 +40,7 @@ export default function ErrorList({
   helpStatus,
   errors = EMPTY_LIST,
   warnings = EMPTY_LIST,
+  className: rootClassName,
 }: ErrorListProps) {
   const { prefixCls } = React.useContext(FormItemPrefixContext);
   const { getPrefixCls } = React.useContext(ConfigContext);
@@ -76,7 +78,10 @@ export default function ErrorList({
         const { className: holderClassName, style: holderStyle } = holderProps;
 
         return (
-          <div className={classNames(baseClassName, holderClassName)} style={holderStyle}>
+          <div
+            className={classNames(baseClassName, holderClassName, rootClassName)}
+            style={holderStyle}
+          >
             <CSSMotionList
               keys={fullKeyList}
               {...collapseMotion}

components/form/FormItemInput.tsx

@@ -89,7 +89,13 @@ const FormItemInput: React.FC<FormItemInputProps & FormItemInputMiscProps> = pro
   );
   const errorListDom = (
     <FormItemPrefixContext.Provider value={{ prefixCls, status }}>
-      <ErrorList errors={errors} warnings={warnings} help={help} helpStatus={status} />
+      <ErrorList
+        errors={errors}
+        warnings={warnings}
+        help={help}
+        helpStatus={status}
+        className={`${baseClassName}-explain-connected`}
+      />
     </FormItemPrefixContext.Provider>
   );
 

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

@@ -1074,7 +1074,7 @@ exports[`renders ./components/form/demo/disabled-input-debug.md correctly 1`] =
         </div>
       </div>
       <div
-        class="ant-form-item-explain"
+        class="ant-form-item-explain ant-form-item-explain-connected"
       >
         <div
           class="ant-form-item-explain-error"
@@ -1117,7 +1117,7 @@ exports[`renders ./components/form/demo/disabled-input-debug.md correctly 1`] =
         </div>
       </div>
       <div
-        class="ant-form-item-explain"
+        class="ant-form-item-explain ant-form-item-explain-connected"
       >
         <div
           class="ant-form-item-explain-error"
@@ -1191,7 +1191,7 @@ exports[`renders ./components/form/demo/disabled-input-debug.md correctly 1`] =
         </div>
       </div>
       <div
-        class="ant-form-item-explain"
+        class="ant-form-item-explain ant-form-item-explain-connected"
       >
         <div
           class="ant-form-item-explain-error"
@@ -1234,7 +1234,7 @@ exports[`renders ./components/form/demo/disabled-input-debug.md correctly 1`] =
         </div>
       </div>
       <div
-        class="ant-form-item-explain"
+        class="ant-form-item-explain ant-form-item-explain-connected"
       >
         <div
           class="ant-form-item-explain-error"
@@ -1334,7 +1334,7 @@ exports[`renders ./components/form/demo/disabled-input-debug.md correctly 1`] =
         </div>
       </div>
       <div
-        class="ant-form-item-explain"
+        class="ant-form-item-explain ant-form-item-explain-connected"
       >
         <div
           class="ant-form-item-explain-error"
@@ -1390,7 +1390,7 @@ exports[`renders ./components/form/demo/disabled-input-debug.md correctly 1`] =
         </div>
       </div>
       <div
-        class="ant-form-item-explain"
+        class="ant-form-item-explain ant-form-item-explain-connected"
       >
         <div
           class="ant-form-item-explain-error"
@@ -1482,7 +1482,7 @@ exports[`renders ./components/form/demo/disabled-input-debug.md correctly 1`] =
         </div>
       </div>
       <div
-        class="ant-form-item-explain"
+        class="ant-form-item-explain ant-form-item-explain-connected"
       >
         <div
           class="ant-form-item-explain-error"
@@ -1534,7 +1534,7 @@ exports[`renders ./components/form/demo/disabled-input-debug.md correctly 1`] =
         </div>
       </div>
       <div
-        class="ant-form-item-explain"
+        class="ant-form-item-explain ant-form-item-explain-connected"
       >
         <div
           class="ant-form-item-explain-error"
@@ -6481,7 +6481,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
         </div>
       </div>
       <div
-        class="ant-form-item-explain"
+        class="ant-form-item-explain ant-form-item-explain-connected"
       >
         <div
           class="ant-form-item-explain-error"
@@ -6607,7 +6607,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
         </span>
       </div>
       <div
-        class="ant-form-item-explain"
+        class="ant-form-item-explain ant-form-item-explain-connected"
       >
         <div
           class="ant-form-item-explain-validating"
@@ -6785,7 +6785,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
         </span>
       </div>
       <div
-        class="ant-form-item-explain"
+        class="ant-form-item-explain ant-form-item-explain-connected"
       >
         <div
           class="ant-form-item-explain-error"
@@ -7166,7 +7166,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
         </span>
       </div>
       <div
-        class="ant-form-item-explain"
+        class="ant-form-item-explain ant-form-item-explain-connected"
       >
         <div
           class="ant-form-item-explain-validating"
@@ -7255,7 +7255,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
                 </div>
               </div>
               <div
-                class="ant-form-item-explain"
+                class="ant-form-item-explain ant-form-item-explain-connected"
               >
                 <div
                   class="ant-form-item-explain-error"
@@ -7930,7 +7930,7 @@ exports[`renders ./components/form/demo/without-form-create.md correctly 1`] = `
         </div>
       </div>
       <div
-        class="ant-form-item-explain"
+        class="ant-form-item-explain ant-form-item-explain-connected"
       >
         <div
           class=""

components/form/style/index.less

@@ -194,7 +194,7 @@
     .explainAndExtraDistance((@form-item-margin-bottom - @form-font-height) / 2);
   }
 
-  &-explain {
+  &-explain-connected {
     height: 0;
     min-height: 0;
     opacity: 0;