fix: InputNumber addon in compact (#46130)

* fix: InputNumber addon in compact

* chore: code clean

components/input-number/style/index.ts

@@ -188,6 +188,29 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
             [`${componentCls}-wrapper-disabled > ${componentCls}-group-addon`]: {
               ...genDisabledStyle(token),
             },
+
+            // Fix the issue of using icons in Space Compact mode
+            // https://github.com/ant-design/ant-design/issues/45764
+            [`&:not(${componentCls}-compact-first-item):not(${componentCls}-compact-last-item)${componentCls}-compact-item`]:
+              {
+                [`${componentCls}, ${componentCls}-group-addon`]: {
+                  borderRadius: 0,
+                },
+              },
+
+            [`&:not(${componentCls}-compact-last-item)${componentCls}-compact-first-item`]: {
+              [`${componentCls}, ${componentCls}-group-addon`]: {
+                borderStartEndRadius: 0,
+                borderEndEndRadius: 0,
+              },
+            },
+
+            [`&:not(${componentCls}-compact-first-item)${componentCls}-compact-last-item`]: {
+              [`${componentCls}, ${componentCls}-group-addon`]: {
+                borderStartStartRadius: 0,
+                borderEndStartRadius: 0,
+              },
+            },
           },
         },
 

components/space/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -324,7 +324,10 @@ exports[`renders components/space/demo/base.tsx extend context correctly 2`] = `
 
 exports[`renders components/space/demo/compact.tsx extend context correctly 1`] = `
 <div
-  class="site-space-compact-wrapper"
+  class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
+>
+  <div
+    class="ant-space-item"
   >
     <div
       class="ant-space-compact ant-space-compact-block"
@@ -342,7 +345,10 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
         value="26888888"
       />
     </div>
-  <br />
+  </div>
+  <div
+    class="ant-space-item"
+  >
     <div
       class="ant-space-compact ant-space-compact-block"
     >
@@ -361,7 +367,10 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
         </span>
       </button>
     </div>
-  <br />
+  </div>
+  <div
+    class="ant-space-item"
+  >
     <div
       class="ant-space-compact ant-space-compact-block"
     >
@@ -380,7 +389,10 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
         </span>
       </button>
     </div>
-  <br />
+  </div>
+  <div
+    class="ant-space-item"
+  >
     <div
       class="ant-space-compact ant-space-compact-block"
     >
@@ -438,7 +450,10 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
         </div>
       </div>
     </div>
-  <br />
+  </div>
+  <div
+    class="ant-space-item"
+  >
     <div
       class="ant-space-compact ant-space-compact-block"
     >
@@ -616,7 +631,10 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
         value="Xihu District, Hangzhou"
       />
     </div>
-  <br />
+  </div>
+  <div
+    class="ant-space-item"
+  >
     <div
       class="ant-space-compact ant-space-compact-block"
     >
@@ -860,7 +878,10 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
         value="Xihu District, Hangzhou"
       />
     </div>
-  <br />
+  </div>
+  <div
+    class="ant-space-item"
+  >
     <div
       class="ant-space-compact ant-space-compact-block"
     >
@@ -1037,7 +1058,10 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
         </span>
       </span>
     </div>
-  <br />
+  </div>
+  <div
+    class="ant-space-item"
+  >
     <div
       class="ant-space-compact ant-space-compact-block"
     >
@@ -1262,7 +1286,10 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
         </div>
       </div>
     </div>
-  <br />
+  </div>
+  <div
+    class="ant-space-item"
+  >
     <div
       class="ant-space-compact ant-space-compact-block"
     >
@@ -1869,7 +1896,10 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
         </div>
       </div>
     </div>
-  <br />
+  </div>
+  <div
+    class="ant-space-item"
+  >
     <div
       class="ant-space-compact ant-space-compact-block"
     >
@@ -3071,7 +3101,10 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
         </span>
       </button>
     </div>
-  <br />
+  </div>
+  <div
+    class="ant-space-item"
+  >
     <div
       class="ant-space-compact ant-space-compact-block"
     >
@@ -4265,7 +4298,10 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
         </div>
       </div>
     </div>
-  <br />
+  </div>
+  <div
+    class="ant-space-item"
+  >
     <div
       class="ant-space-compact ant-space-compact-block"
     >
@@ -4550,7 +4586,10 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
         </span>
       </div>
     </div>
-  <br />
+  </div>
+  <div
+    class="ant-space-item"
+  >
     <div
       class="ant-space-compact ant-space-compact-block"
     >
@@ -4717,7 +4756,10 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
         value=""
       />
     </div>
-  <br />
+  </div>
+  <div
+    class="ant-space-item"
+  >
     <div
       class="ant-space-compact ant-space-compact-block"
     >
@@ -4965,7 +5007,10 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
         </div>
       </div>
     </div>
-  <br />
+  </div>
+  <div
+    class="ant-space-item"
+  >
     <div
       class="ant-space-compact ant-space-compact-block"
     >
@@ -6528,7 +6573,10 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
         </span>
       </div>
     </div>
-  <br />
+  </div>
+  <div
+    class="ant-space-item"
+  >
     <div
       class="ant-space-compact ant-space-compact-block"
     >
@@ -8367,7 +8415,195 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
         </span>
       </button>
     </div>
-  <br />
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <div
+      class="ant-space-compact"
+    >
+      <input
+        class="ant-input ant-input-compact-item ant-input-compact-first-item"
+        placeholder="input here"
+        type="text"
+        value=""
+      />
+      <div
+        class="ant-input-number-group-wrapper ant-input-number-compact-item"
+      >
+        <div
+          class="ant-input-number-wrapper ant-input-number-group"
+        >
+          <div
+            class="ant-input-number-group-addon"
+          >
+            $
+          </div>
+          <div
+            class="ant-input-number"
+          >
+            <div
+              class="ant-input-number-handler-wrap"
+            >
+              <span
+                aria-disabled="false"
+                aria-label="Increase Value"
+                class="ant-input-number-handler ant-input-number-handler-up"
+                role="button"
+                unselectable="on"
+              >
+                <span
+                  aria-label="up"
+                  class="anticon anticon-up ant-input-number-handler-up-inner"
+                  role="img"
+                >
+                  <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
+                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"
+                >
+                  <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>
+            </div>
+            <div
+              class="ant-input-number-input-wrap"
+            >
+              <input
+                autocomplete="off"
+                class="ant-input-number-input"
+                placeholder="another input"
+                role="spinbutton"
+                step="1"
+                value=""
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="ant-input-number-group-wrapper ant-input-number-compact-item ant-input-number-compact-last-item"
+      >
+        <div
+          class="ant-input-number-wrapper ant-input-number-group"
+        >
+          <div
+            class="ant-input-number"
+          >
+            <div
+              class="ant-input-number-handler-wrap"
+            >
+              <span
+                aria-disabled="false"
+                aria-label="Increase Value"
+                class="ant-input-number-handler ant-input-number-handler-up"
+                role="button"
+                unselectable="on"
+              >
+                <span
+                  aria-label="up"
+                  class="anticon anticon-up ant-input-number-handler-up-inner"
+                  role="img"
+                >
+                  <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
+                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"
+                >
+                  <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>
+            </div>
+            <div
+              class="ant-input-number-input-wrap"
+            >
+              <input
+                autocomplete="off"
+                class="ant-input-number-input"
+                placeholder="another input"
+                role="spinbutton"
+                step="1"
+                value=""
+              />
+            </div>
+          </div>
+          <div
+            class="ant-input-number-group-addon"
+          >
+            $
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </div>
 `;
 

components/space/__tests__/__snapshots__/demo.test.tsx.snap

@@ -238,7 +238,10 @@ exports[`renders components/space/demo/base.tsx correctly 1`] = `
 
 exports[`renders components/space/demo/compact.tsx correctly 1`] = `
 <div
-  class="site-space-compact-wrapper"
+  class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
+>
+  <div
+    class="ant-space-item"
   >
     <div
       class="ant-space-compact ant-space-compact-block"
@@ -256,7 +259,10 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
         value="26888888"
       />
     </div>
-  <br />
+  </div>
+  <div
+    class="ant-space-item"
+  >
     <div
       class="ant-space-compact ant-space-compact-block"
     >
@@ -275,7 +281,10 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
         </span>
       </button>
     </div>
-  <br />
+  </div>
+  <div
+    class="ant-space-item"
+  >
     <div
       class="ant-space-compact ant-space-compact-block"
     >
@@ -294,7 +303,10 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
         </span>
       </button>
     </div>
-  <br />
+  </div>
+  <div
+    class="ant-space-item"
+  >
     <div
       class="ant-space-compact ant-space-compact-block"
     >
@@ -333,7 +345,10 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
         </span>
       </button>
     </div>
-  <br />
+  </div>
+  <div
+    class="ant-space-item"
+  >
     <div
       class="ant-space-compact ant-space-compact-block"
     >
@@ -430,7 +445,10 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
         value="Xihu District, Hangzhou"
       />
     </div>
-  <br />
+  </div>
+  <div
+    class="ant-space-item"
+  >
     <div
       class="ant-space-compact ant-space-compact-block"
     >
@@ -579,7 +597,10 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
         value="Xihu District, Hangzhou"
       />
     </div>
-  <br />
+  </div>
+  <div
+    class="ant-space-item"
+  >
     <div
       class="ant-space-compact ant-space-compact-block"
     >
@@ -756,7 +777,10 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
         </span>
       </span>
     </div>
-  <br />
+  </div>
+  <div
+    class="ant-space-item"
+  >
     <div
       class="ant-space-compact ant-space-compact-block"
     >
@@ -900,7 +924,10 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
         </div>
       </div>
     </div>
-  <br />
+  </div>
+  <div
+    class="ant-space-item"
+  >
     <div
       class="ant-space-compact ant-space-compact-block"
     >
@@ -951,7 +978,10 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
         </div>
       </div>
     </div>
-  <br />
+  </div>
+  <div
+    class="ant-space-item"
+  >
     <div
       class="ant-space-compact ant-space-compact-block"
     >
@@ -1052,7 +1082,10 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
         </span>
       </button>
     </div>
-  <br />
+  </div>
+  <div
+    class="ant-space-item"
+  >
     <div
       class="ant-space-compact ant-space-compact-block"
     >
@@ -1145,7 +1178,10 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
         </span>
       </div>
     </div>
-  <br />
+  </div>
+  <div
+    class="ant-space-item"
+  >
     <div
       class="ant-space-compact ant-space-compact-block"
     >
@@ -1268,7 +1304,10 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
         </span>
       </div>
     </div>
-  <br />
+  </div>
+  <div
+    class="ant-space-item"
+  >
     <div
       class="ant-space-compact ant-space-compact-block"
     >
@@ -1354,7 +1393,10 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
         value=""
       />
     </div>
-  <br />
+  </div>
+  <div
+    class="ant-space-item"
+  >
     <div
       class="ant-space-compact ant-space-compact-block"
     >
@@ -1449,7 +1491,10 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
         </div>
       </div>
     </div>
-  <br />
+  </div>
+  <div
+    class="ant-space-item"
+  >
     <div
       class="ant-space-compact ant-space-compact-block"
     >
@@ -1556,7 +1601,10 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
         </span>
       </div>
     </div>
-  <br />
+  </div>
+  <div
+    class="ant-space-item"
+  >
     <div
       class="ant-space-compact ant-space-compact-block"
     >
@@ -1737,7 +1785,195 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
         </span>
       </button>
     </div>
-  <br />
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <div
+      class="ant-space-compact"
+    >
+      <input
+        class="ant-input ant-input-compact-item ant-input-compact-first-item"
+        placeholder="input here"
+        type="text"
+        value=""
+      />
+      <div
+        class="ant-input-number-group-wrapper ant-input-number-compact-item"
+      >
+        <div
+          class="ant-input-number-wrapper ant-input-number-group"
+        >
+          <div
+            class="ant-input-number-group-addon"
+          >
+            $
+          </div>
+          <div
+            class="ant-input-number"
+          >
+            <div
+              class="ant-input-number-handler-wrap"
+            >
+              <span
+                aria-disabled="false"
+                aria-label="Increase Value"
+                class="ant-input-number-handler ant-input-number-handler-up"
+                role="button"
+                unselectable="on"
+              >
+                <span
+                  aria-label="up"
+                  class="anticon anticon-up ant-input-number-handler-up-inner"
+                  role="img"
+                >
+                  <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
+                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"
+                >
+                  <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>
+            </div>
+            <div
+              class="ant-input-number-input-wrap"
+            >
+              <input
+                autocomplete="off"
+                class="ant-input-number-input"
+                placeholder="another input"
+                role="spinbutton"
+                step="1"
+                value=""
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="ant-input-number-group-wrapper ant-input-number-compact-item ant-input-number-compact-last-item"
+      >
+        <div
+          class="ant-input-number-wrapper ant-input-number-group"
+        >
+          <div
+            class="ant-input-number"
+          >
+            <div
+              class="ant-input-number-handler-wrap"
+            >
+              <span
+                aria-disabled="false"
+                aria-label="Increase Value"
+                class="ant-input-number-handler ant-input-number-handler-up"
+                role="button"
+                unselectable="on"
+              >
+                <span
+                  aria-label="up"
+                  class="anticon anticon-up ant-input-number-handler-up-inner"
+                  role="img"
+                >
+                  <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
+                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"
+                >
+                  <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>
+            </div>
+            <div
+              class="ant-input-number-input-wrap"
+            >
+              <input
+                autocomplete="off"
+                class="ant-input-number-input"
+                placeholder="another input"
+                role="spinbutton"
+                step="1"
+                value=""
+              />
+            </div>
+          </div>
+          <div
+            class="ant-input-number-group-addon"
+          >
+            $
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </div>
 `;
 

components/space/demo/compact.md

@@ -5,27 +5,3 @@
 ## en-US
 
 Compact Mode for form component.
-
-```css
-.site-space-compact-wrapper .site-input-split {
-  background-color: #fff;
-}
-
-.site-space-compact-wrapper .site-input-right:not(.ant-input-rtl) {
-  border-left-width: 0;
-}
-
-.site-space-compact-wrapper .site-input-right:not(.ant-input-rtl):hover,
-.site-space-compact-wrapper .site-input-right:not(.ant-input-rtl):focus {
-  border-left-width: 1px;
-}
-
-.site-space-compact-wrapper .site-input-right.ant-input-rtl {
-  border-right-width: 0;
-}
-
-.site-space-compact-wrapper .site-input-right.ant-input-rtl:hover,
-.site-space-compact-wrapper .site-input-right.ant-input-rtl:focus {
-  border-right-width: 1px;
-}
-```

components/space/demo/compact.tsx

@@ -18,22 +18,19 @@ const { Option } = Select;
 const { TreeNode } = TreeSelect;
 
 const App: React.FC = () => (
-  <div className="site-space-compact-wrapper">
+  <Space direction="vertical">
     <Space.Compact block>
       <Input style={{ width: '20%' }} defaultValue="0571" />
       <Input style={{ width: '30%' }} defaultValue="26888888" />
     </Space.Compact>
-    <br />
     <Space.Compact block size="small">
       <Input style={{ width: 'calc(100% - 200px)' }} defaultValue="https://ant.design" />
       <Button type="primary">Submit</Button>
     </Space.Compact>
-    <br />
     <Space.Compact block>
       <Input style={{ width: 'calc(100% - 200px)' }} defaultValue="https://ant.design" />
       <Button type="primary">Submit</Button>
     </Space.Compact>
-    <br />
     <Space.Compact block>
       <Input
         style={{ width: 'calc(100% - 200px)' }}
@@ -43,7 +40,6 @@ const App: React.FC = () => (
         <Button icon={<CopyOutlined />} />
       </Tooltip>
     </Space.Compact>
-    <br />
     <Space.Compact block>
       <Select defaultValue="Zhejiang" allowClear>
         <Option value="Zhejiang">Zhejiang</Option>
@@ -51,7 +47,6 @@ const App: React.FC = () => (
       </Select>
       <Input style={{ width: '50%' }} defaultValue="Xihu District, Hangzhou" />
     </Space.Compact>
-    <br />
     <Space.Compact block>
       <Select allowClear mode="multiple" defaultValue="Zhejianggggg" style={{ width: '50%' }}>
         <Option value="Zhejianggggg">Zhejianggggg</Option>
@@ -59,13 +54,11 @@ const App: React.FC = () => (
       </Select>
       <Input style={{ width: '50%' }} defaultValue="Xihu District, Hangzhou" />
     </Space.Compact>
-    <br />
     <Space.Compact block>
       <Input.Search style={{ width: '30%' }} defaultValue="0571" />
       <Input.Search allowClear style={{ width: '50%' }} defaultValue="26888888" />
       <Input.Search style={{ width: '20%' }} defaultValue="+1" />
     </Space.Compact>
-    <br />
     <Space.Compact block>
       <Select defaultValue="Option1">
         <Option value="Option1">Option1</Option>
@@ -74,23 +67,19 @@ const App: React.FC = () => (
       <Input style={{ width: '50%' }} defaultValue="input content" />
       <InputNumber defaultValue={12} />
     </Space.Compact>
-    <br />
     <Space.Compact block>
       <Input style={{ width: '50%' }} defaultValue="input content" />
       <DatePicker style={{ width: '50%' }} />
     </Space.Compact>
-    <br />
     <Space.Compact block>
       <DatePicker.RangePicker style={{ width: '70%' }} />
       <Input style={{ width: '30%' }} defaultValue="input content" />
       <Button type="primary">查询</Button>
     </Space.Compact>
-    <br />
     <Space.Compact block>
       <Input style={{ width: '30%' }} defaultValue="input content" />
       <DatePicker.RangePicker style={{ width: '70%' }} />
     </Space.Compact>
-    <br />
     <Space.Compact block>
       <Select defaultValue="Option1-1">
         <Option value="Option1-1">Option1-1</Option>
@@ -101,7 +90,6 @@ const App: React.FC = () => (
         <Option value="Option2-2">Option2-2</Option>
       </Select>
     </Space.Compact>
-    <br />
     <Space.Compact block>
       <Select defaultValue="1">
         <Option value="1">Between</Option>
@@ -128,7 +116,6 @@ const App: React.FC = () => (
         placeholder="Maximum"
       />
     </Space.Compact>
-    <br />
     <Space.Compact block>
       <Select defaultValue="Sign Up" style={{ width: '30%' }}>
         <Option value="Sign Up">Sign Up</Option>
@@ -140,7 +127,6 @@ const App: React.FC = () => (
         options={[{ value: 'text 1' }, { value: 'text 2' }]}
       />
     </Space.Compact>
-    <br />
     <Space.Compact block>
       <TimePicker style={{ width: '70%' }} />
       <Cascader
@@ -182,7 +168,6 @@ const App: React.FC = () => (
         placeholder="Select Address"
       />
     </Space.Compact>
-    <br />
     <Space.Compact block>
       <TimePicker.RangePicker />
       <TreeSelect
@@ -207,8 +192,12 @@ const App: React.FC = () => (
       </TreeSelect>
       <Button type="primary">Submit</Button>
     </Space.Compact>
-    <br />
+    <Space.Compact>
-  </div>
+      <Input placeholder="input here" />
+      <InputNumber placeholder="another input" addonBefore="$" />
+      <InputNumber placeholder="another input" addonAfter="$" />
+    </Space.Compact>
+  </Space>
 );
 
 export default App;