fix: Mentions error style in Form (#32385)

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

@@ -6792,7 +6792,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
     class="ant-row ant-form-item ant-form-item-with-help ant-form-item-has-error"
   >
     <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5"
+      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
     >
       <label
         class=""
@@ -6802,7 +6802,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-12"
+      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
     >
       <div
         class="ant-form-item-control-input"
@@ -6835,7 +6835,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
     class="ant-row ant-form-item ant-form-item-has-warning"
   >
     <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5"
+      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
     >
       <label
         class=""
@@ -6845,7 +6845,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-12"
+      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
     >
       <div
         class="ant-form-item-control-input"
@@ -6895,7 +6895,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
     class="ant-row ant-form-item ant-form-item-with-help ant-form-item-has-feedback ant-form-item-is-validating"
   >
     <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5"
+      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
     >
       <label
         class=""
@@ -6905,7 +6905,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-12"
+      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
     >
       <div
         class="ant-form-item-control-input"
@@ -6961,7 +6961,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
     class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-success"
   >
     <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5"
+      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
     >
       <label
         class=""
@@ -6971,7 +6971,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-12"
+      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
     >
       <div
         class="ant-form-item-control-input"
@@ -7017,7 +7017,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
     class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-warning"
   >
     <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5"
+      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
     >
       <label
         class=""
@@ -7027,7 +7027,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-12"
+      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
     >
       <div
         class="ant-form-item-control-input"
@@ -7073,7 +7073,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
     class="ant-row ant-form-item ant-form-item-with-help ant-form-item-has-feedback ant-form-item-has-error"
   >
     <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5"
+      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
     >
       <label
         class=""
@@ -7083,7 +7083,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-12"
+      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
     >
       <div
         class="ant-form-item-control-input"
@@ -7139,7 +7139,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
     class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-success"
   >
     <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5"
+      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
     >
       <label
         class=""
@@ -7149,7 +7149,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-12"
+      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
     >
       <div
         class="ant-form-item-control-input"
@@ -7228,7 +7228,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
     class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-warning"
   >
     <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5"
+      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
     >
       <label
         class=""
@@ -7238,7 +7238,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-12"
+      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
     >
       <div
         class="ant-form-item-control-input"
@@ -7320,7 +7320,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
     class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-error"
   >
     <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5"
+      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
     >
       <label
         class=""
@@ -7330,7 +7330,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-12"
+      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
     >
       <div
         class="ant-form-item-control-input"
@@ -7425,7 +7425,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
     class="ant-row ant-form-item ant-form-item-with-help ant-form-item-has-feedback ant-form-item-is-validating"
   >
     <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5"
+      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
     >
       <label
         class=""
@@ -7435,7 +7435,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-12"
+      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
     >
       <div
         class="ant-form-item-control-input"
@@ -7541,7 +7541,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
     style="margin-bottom:0"
   >
     <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5"
+      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
     >
       <label
         class=""
@@ -7551,7 +7551,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-12"
+      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
     >
       <div
         class="ant-form-item-control-input"
@@ -7620,7 +7620,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
                   class="ant-form-item-explain-error"
                   role="alert"
                 >
-                  Please select the correct date
+                  Please select right date
                 </div>
               </div>
             </div>
@@ -7694,7 +7694,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
     class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-success"
   >
     <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5"
+      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
     >
       <label
         class=""
@@ -7704,7 +7704,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-12"
+      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
     >
       <div
         class="ant-form-item-control-input"
@@ -7817,7 +7817,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
     class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-success"
   >
     <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5"
+      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
     >
       <label
         class=""
@@ -7827,7 +7827,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-12"
+      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
     >
       <div
         class="ant-form-item-control-input"
@@ -7900,7 +7900,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
     class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-warning"
   >
     <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5"
+      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
     >
       <label
         class=""
@@ -7910,7 +7910,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-12"
+      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
     >
       <div
         class="ant-form-item-control-input"
@@ -7987,7 +7987,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
     class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-error"
   >
     <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5"
+      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
     >
       <label
         class=""
@@ -7997,7 +7997,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-12"
+      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
     >
       <div
         class="ant-form-item-control-input"
@@ -8090,6 +8090,40 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
       </div>
     </div>
   </div>
+  <div
+    class="ant-row ant-form-item ant-form-item-has-error"
+  >
+    <div
+      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
+    >
+      <label
+        class=""
+        title="Fail"
+      >
+        Fail
+      </label>
+    </div>
+    <div
+      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
+    >
+      <div
+        class="ant-form-item-control-input"
+      >
+        <div
+          class="ant-form-item-control-input-content"
+        >
+          <div
+            class="ant-mentions"
+          >
+            <textarea
+              class="rc-textarea"
+              rows="1"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </form>
 `;
 

components/form/demo/validate-static.md

@@ -23,18 +23,18 @@ We provide properties like `validateStatus` `help` `hasFeedback` to customize yo
 
 ```tsx
 import { SmileOutlined } from '@ant-design/icons';
-import { Form, Input, DatePicker, TimePicker, Select, Cascader, InputNumber } from 'antd';
+import { Form, Input, DatePicker, TimePicker, Select, Cascader, InputNumber, Mentions } from 'antd';
 
 const { Option } = Select;
 
 const formItemLayout = {
   labelCol: {
     xs: { span: 24 },
-    sm: { span: 5 },
+    sm: { span: 6 },
   },
   wrapperCol: {
     xs: { span: 24 },
-    sm: { span: 12 },
+    sm: { span: 14 },
   },
 };
 
@@ -106,7 +106,7 @@ ReactDOM.render(
     <Form.Item label="inline" style={{ marginBottom: 0 }}>
       <Form.Item
         validateStatus="error"
-        help="Please select the correct date"
+        help="Please select right date"
         style={{ display: 'inline-block', width: 'calc(50% - 12px)' }}
       >
         <DatePicker />
@@ -136,6 +136,10 @@ ReactDOM.render(
     <Form.Item label="Error" hasFeedback validateStatus="error">
       <Input.Password allowClear placeholder="with input password and allowClear" />
     </Form.Item>
+
+    <Form.Item label="Fail" validateStatus="error">
+      <Mentions />
+    </Form.Item>
   </Form>,
   mountNode,
 );

components/form/style/status.less

@@ -238,7 +238,7 @@
       }
     }
 
-    // cascader
+    // Cascader
     .@{ant-prefix}-cascader-picker {
       &:hover
         .@{ant-prefix}-cascader-picker-label:hover
@@ -252,7 +252,7 @@
       }
     }
 
-    // transfer
+    // Transfer
     .@{ant-prefix}-transfer {
       &-list {
         border-color: @error-color;
@@ -271,7 +271,7 @@
       }
     }
 
-    // RadioGroup
+    // Radio.Group
     .@{ant-prefix}-radio-button-wrapper {
       border-color: @error-color !important;
 
@@ -281,6 +281,15 @@
         }
       }
     }
+
+    // Mentions
+    .@{ant-prefix}-mentions {
+      border-color: @error-color !important;
+      &-focused,
+      &:focus {
+        .active(@error-color, @error-color-hover, @error-color-outline);
+      }
+    }
   }
 
   // ====================== Validating =======================