fix: Input suffix form validate error style (#21121)

* fix: Input suffix form validate error style

* update style

* update snapshot

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

@@ -4815,13 +4815,41 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
       <div
         class="ant-form-item-control-input"
       >
-        <input
-          class="ant-input"
-          id="warning"
-          placeholder="Warning"
-          type="text"
-          value=""
-        />
+        <span
+          class="ant-input-affix-wrapper"
+        >
+          <span
+            class="ant-input-prefix"
+          >
+            <span
+              aria-label="smile"
+              class="anticon anticon-smile"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                class=""
+                data-icon="smile"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"
+                />
+              </svg>
+            </span>
+          </span>
+          <input
+            class="ant-input"
+            id="warning"
+            placeholder="Warning"
+            type="text"
+            value=""
+          />
+        </span>
       </div>
     </div>
   </div>

components/form/demo/validate-static.md

@@ -22,6 +22,7 @@ We provide properties like `validateStatus` `help` `hasFeedback` to customize yo
 3. `help`: display validate message.
 
 ```tsx
+import { SmileOutlined } from '@ant-design/icons';
 import { Form, Input, DatePicker, TimePicker, Select, Cascader, InputNumber } from 'antd';
 
 const { Option } = Select;
@@ -48,7 +49,7 @@ ReactDOM.render(
     </Form.Item>
 
     <Form.Item label="Warning" validateStatus="warning">
-      <Input placeholder="Warning" id="warning" />
+      <Input placeholder="Warning" id="warning" prefix={<SmileOutlined />} />
     </Form.Item>
 
     <Form.Item

components/form/style/mixin.less

@@ -6,14 +6,16 @@
     color: @text-color;
   }
   // 输入框的不同校验状态
-  .@{ant-prefix}-input {
+  .@{ant-prefix}-input,
+  .@{ant-prefix}-input-affix-wrapper {
     &,
     &:hover {
       background-color: @background-color;
       border-color: @border-color;
     }
 
-    &:focus {
+    &:focus,
+    &-focused {
       .active(@border-color);
     }
 
@@ -22,27 +24,14 @@
     }
   }
 
-  .@{ant-prefix}-calendar-picker-open .@{ant-prefix}-calendar-picker-input {
-    .active(@border-color);
+  .@{ant-prefix}-input-affix-wrapper {
+    input:focus {
+      box-shadow: none !important;
+    }
   }
 
-  // Input prefix
-  .@{ant-prefix}-input-affix-wrapper {
-    .@{ant-prefix}-input {
-      &,
-      &:hover {
-        background-color: @background-color;
-        border-color: @border-color;
-      }
-
-      &:focus {
-        .active(@border-color);
-      }
-    }
-
-    &:hover .@{ant-prefix}-input:not(.@{ant-prefix}-input-disabled) {
-      border-color: @border-color;
-    }
+  .@{ant-prefix}-calendar-picker-open .@{ant-prefix}-calendar-picker-input {
+    .active(@border-color);
   }
 
   .@{ant-prefix}-input-prefix {