style: fix InputNumber prefix style in Form.Item (#43048)

* style: Fix InputNumber prefix style in Form.Item close #32924 * Update components/input/style/mixin.less * chore: update demo * revert style * chore: update demo
ant-design · Jun 16, 2023 · fb4ef43 · fb4ef43
1 parent 0463c1a
commit fb4ef43
Show file tree

Hide file tree

Showing 6 changed files with 139 additions and 121 deletions.
diff --git a/components/input-number/style/affix.less b/components/input-number/style/affix.less
@@ -45,6 +45,7 @@
     }
 
     &::before {
+      display: inline-block;
       width: 0;
       visibility: hidden;
       content: '\a0';

diff --git a/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -5943,76 +5943,85 @@ exports[`renders ./components/input/demo/group.md extend context correctly 1`] =
       value="input content"
     />
     <div
-      class="ant-input-number"
+      class="ant-input-number-affix-wrapper"
     >
+      <span
+        class="ant-input-number-prefix"
+      >
+        @
+      </span>
       <div
-        class="ant-input-number-handler-wrap"
+        class="ant-input-number"
       >
-        <span
-          aria-disabled="false"
-          aria-label="Increase Value"
-          class="ant-input-number-handler ant-input-number-handler-up"
-          role="button"
-          unselectable="on"
+        <div
+          class="ant-input-number-handler-wrap"
         >
           <span
-            aria-label="up"
-            class="anticon anticon-up ant-input-number-handler-up-inner"
-            role="img"
+            aria-disabled="false"
+            aria-label="Increase Value"
+            class="ant-input-number-handler ant-input-number-handler-up"
+            role="button"
+            unselectable="on"
           >
-            <svg
-              aria-hidden="true"
-              data-icon="up"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+            <span
+              aria-label="up"
+              class="anticon anticon-up ant-input-number-handler-up-inner"
+              role="img"
             >
-              <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>
+              <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>
-        <span
-          aria-disabled="false"
-          aria-label="Decrease Value"
-          class="ant-input-number-handler ant-input-number-handler-down"
-          role="button"
-          unselectable="on"
-        >
           <span
-            aria-label="down"
-            class="anticon anticon-down ant-input-number-handler-down-inner"
-            role="img"
+            aria-disabled="false"
+            aria-label="Decrease Value"
+            class="ant-input-number-handler ant-input-number-handler-down"
+            role="button"
+            unselectable="on"
           >
-            <svg
-              aria-hidden="true"
-              data-icon="down"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+            <span
+              aria-label="down"
+              class="anticon anticon-down ant-input-number-handler-down-inner"
+              role="img"
             >
-              <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>
+              <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>
-        </span>
-      </div>
-      <div
-        class="ant-input-number-input-wrap"
-      >
-        <input
-          autocomplete="off"
-          class="ant-input-number-input"
-          role="spinbutton"
-          step="1"
-          value=""
-        />
+        </div>
+        <div
+          class="ant-input-number-input-wrap"
+        >
+          <input
+            autocomplete="off"
+            class="ant-input-number-input"
+            role="spinbutton"
+            step="1"
+            value=""
+          />
+        </div>
       </div>
     </div>
   </span>

diff --git a/components/input/__tests__/__snapshots__/demo.test.ts.snap b/components/input/__tests__/__snapshots__/demo.test.ts.snap
@@ -1972,76 +1972,85 @@ exports[`renders ./components/input/demo/group.md correctly 1`] = `
       value="input content"
     />
     <div
-      class="ant-input-number"
+      class="ant-input-number-affix-wrapper"
     >
+      <span
+        class="ant-input-number-prefix"
+      >
+        @
+      </span>
       <div
-        class="ant-input-number-handler-wrap"
+        class="ant-input-number"
       >
-        <span
-          aria-disabled="false"
-          aria-label="Increase Value"
-          class="ant-input-number-handler ant-input-number-handler-up"
-          role="button"
-          unselectable="on"
+        <div
+          class="ant-input-number-handler-wrap"
         >
           <span
-            aria-label="up"
-            class="anticon anticon-up ant-input-number-handler-up-inner"
-            role="img"
+            aria-disabled="false"
+            aria-label="Increase Value"
+            class="ant-input-number-handler ant-input-number-handler-up"
+            role="button"
+            unselectable="on"
           >
-            <svg
-              aria-hidden="true"
-              data-icon="up"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+            <span
+              aria-label="up"
+              class="anticon anticon-up ant-input-number-handler-up-inner"
+              role="img"
             >
-              <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>
+              <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>
-        <span
-          aria-disabled="false"
-          aria-label="Decrease Value"
-          class="ant-input-number-handler ant-input-number-handler-down"
-          role="button"
-          unselectable="on"
-        >
           <span
-            aria-label="down"
-            class="anticon anticon-down ant-input-number-handler-down-inner"
-            role="img"
+            aria-disabled="false"
+            aria-label="Decrease Value"
+            class="ant-input-number-handler ant-input-number-handler-down"
+            role="button"
+            unselectable="on"
           >
-            <svg
-              aria-hidden="true"
-              data-icon="down"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+            <span
+              aria-label="down"
+              class="anticon anticon-down ant-input-number-handler-down-inner"
+              role="img"
             >
-              <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>
+              <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>
-        </span>
-      </div>
-      <div
-        class="ant-input-number-input-wrap"
-      >
-        <input
-          autocomplete="off"
-          class="ant-input-number-input"
-          role="spinbutton"
-          step="1"
-          value=""
-        />
+        </div>
+        <div
+          class="ant-input-number-input-wrap"
+        >
+          <input
+            autocomplete="off"
+            class="ant-input-number-input"
+            role="spinbutton"
+            step="1"
+            value=""
+          />
+        </div>
       </div>
     </div>
   </span>

diff --git a/components/input/demo/group.md b/components/input/demo/group.md
@@ -122,7 +122,7 @@ const App: React.FC = () => (
         <Option value="Option2">Option2</Option>
       </Select>
       <Input style={{ width: '50%' }} defaultValue="input content" />
-      <InputNumber />
+      <InputNumber prefix="@" />
     </Input.Group>
     <br />
     <Input.Group compact>

diff --git a/components/input/style/affix.less b/components/input/style/affix.less
@@ -43,6 +43,7 @@
     }
 
     &::before {
+      display: inline-block;
       width: 0;
       visibility: hidden;
       content: '\a0';

diff --git a/components/input/style/mixin.less b/components/input/style/mixin.less
@@ -336,10 +336,8 @@
       border-radius: 0;
     }
 
-    & > .@{inputClass}-affix-wrapper {
-      display: inline-flex;
-    }
-
+    & > .@{inputClass}-affix-wrapper,
+    & > .@{inputClass}-number-affix-wrapper,
     & > .@{ant-prefix}-picker-range {
       display: inline-flex;
     }