fix: Some input style issue (#21316)

* fix firefox flex bug

* fix input wrapper style

* fix clear text style

* update snapshot

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

@@ -14,7 +14,7 @@ exports[`renders ./components/input/demo/addon.md correctly 1`] = `
         <span
           class="ant-input-group-addon"
         >
-          Http://
+          http://
         </span>
         <input
           class="ant-input"
@@ -68,7 +68,7 @@ exports[`renders ./components/input/demo/addon.md correctly 1`] = `
               <span
                 class="ant-select-selection-item"
               >
-                Http://
+                http://
               </span>
             </div>
             <span
@@ -211,6 +211,37 @@ exports[`renders ./components/input/demo/addon.md correctly 1`] = `
       </span>
     </span>
   </div>
+  <div
+    style="margin-bottom:16px"
+  >
+    <span
+      class="ant-input-group-wrapper"
+    >
+      <span
+        class="ant-input-wrapper ant-input-group"
+      >
+        <span
+          class="ant-input-group-addon"
+        >
+          http://
+        </span>
+        <span
+          class="ant-input-affix-wrapper"
+        >
+          <input
+            class="ant-input"
+            type="text"
+            value="mysite"
+          />
+          <span
+            class="ant-input-suffix"
+          >
+            .com
+          </span>
+        </span>
+      </span>
+    </span>
+  </div>
 </div>
 `;
 

components/input/demo/addon.md

@@ -20,9 +20,9 @@ import { SettingOutlined } from '@ant-design/icons';
 const { Option } = Select;
 
 const selectBefore = (
-  <Select defaultValue="Http://" style={{ width: 90 }}>
+  <Select defaultValue="http://" style={{ width: 90 }}>
-    <Option value="Http://">Http://</Option>
+    <Option value="http://">http://</Option>
-    <Option value="Https://">Https://</Option>
+    <Option value="https://">https://</Option>
   </Select>
 );
 const selectAfter = (
@@ -37,7 +37,7 @@ const selectAfter = (
 ReactDOM.render(
   <div>
     <div style={{ marginBottom: 16 }}>
-      <Input addonBefore="Http://" addonAfter=".com" defaultValue="mysite" />
+      <Input addonBefore="http://" addonAfter=".com" defaultValue="mysite" />
     </div>
     <div style={{ marginBottom: 16 }}>
       <Input addonBefore={selectBefore} addonAfter={selectAfter} defaultValue="mysite" />
@@ -45,6 +45,9 @@ ReactDOM.render(
     <div style={{ marginBottom: 16 }}>
       <Input addonAfter={<SettingOutlined />} defaultValue="mysite" />
     </div>
+    <div style={{ marginBottom: 16 }}>
+      <Input addonBefore="http://" suffix=".com" defaultValue="mysite" />
+    </div>
   </div>,
   mountNode,
 );

components/input/style/affix.less

@@ -8,7 +8,7 @@
     .input();
     display: inline-flex;
 
-    > .@{ant-prefix}-input {
+    > input.@{ant-prefix}-input {
       padding: 0;
       border: none;
       outline: none;
@@ -17,11 +17,6 @@
         box-shadow: none;
       }
     }
-
-    .@{ant-prefix}-input-clear-icon {
-      margin: 0 @input-affix-margin;
-      vertical-align: -1px;
-    }
   }
 
   &-prefix,

components/input/style/allow-clear.less

@@ -0,0 +1,47 @@
+@import './index';
+
+.clear-icon() {
+  color: @disabled-color;
+  font-size: @font-size-sm;
+  // https://github.com/ant-design/ant-design/pull/18151
+  // https://codesandbox.io/s/wizardly-sun-u10br
+  cursor: pointer;
+  transition: color 0.3s;
+
+  &:hover {
+    color: @text-color-secondary;
+  }
+
+  &:active {
+    color: @text-color;
+  }
+
+  + i {
+    margin-left: 6px;
+  }
+}
+
+// ========================= Input =========================
+.@{ant-prefix}-input-clear-icon {
+  .clear-icon;
+  margin: 0 @input-affix-margin;
+  vertical-align: -1px;
+
+  &:last-child {
+    margin-right: 0;
+  }
+}
+
+// ======================= TextArea ========================
+.@{ant-prefix}-input-affix-wrapper-textarea-with-clear-btn {
+  padding: 0;
+  border: 0;
+}
+
+.@{ant-prefix}-input-textarea-clear-icon {
+  .clear-icon;
+  position: absolute;
+  top: 0;
+  right: 0;
+  margin: 8px 8px 0 0;
+}

components/input/style/index.less

@@ -2,6 +2,7 @@
 @import '../../style/mixins/index';
 @import './mixin';
 @import './affix';
+@import './allow-clear';
 
 // Input styles
 .@{ant-prefix}-input {
@@ -37,17 +38,4 @@
   }
 }
 
-.@{ant-prefix}-input-clear-icon {
-  .clear-icon;
-  vertical-align: 0;
-}
-
-.@{ant-prefix}-input-textarea-clear-icon {
-  .clear-icon;
-  position: absolute;
-  top: 0;
-  right: 0;
-  margin: 8px 8px 0 0;
-}
-
 @import './search-input';

components/input/style/mixin.less

@@ -61,6 +61,7 @@
   position: relative;
   display: inline-block;
   width: 100%;
+  min-width: 0;
   padding: @input-padding-vertical-base @input-padding-horizontal-base;
   color: @input-color;
   font-size: @font-size-base;
@@ -306,7 +307,15 @@
   }
 
   .@{inputClass}-affix-wrapper {
-    border-radius: 0;
+    &:not(:first-child) {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+
+    &:not(:last-child) {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
   }
 
   &&-compact {
@@ -417,24 +426,3 @@
     }
   }
 }
-
-.clear-icon() {
-  color: @disabled-color;
-  font-size: @font-size-sm;
-  // https://github.com/ant-design/ant-design/pull/18151
-  // https://codesandbox.io/s/wizardly-sun-u10br
-  cursor: pointer;
-  transition: color 0.3s;
-
-  &:hover {
-    color: @text-color-secondary;
-  }
-
-  &:active {
-    color: @text-color;
-  }
-
-  + i {
-    margin-left: 6px;
-  }
-}