fix(form): use 'Space.Compact' instead 'Input.Group'

close #7285
ant-design · Jul 17, 2023 · 89e1fb4 · 89e1fb4
1 parent 3454347
commit 89e1fb4
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 15 deletions.
diff --git a/packages/field/src/components/DigitRange/index.tsx b/packages/field/src/components/DigitRange/index.tsx
@@ -1,5 +1,5 @@
 import { proTheme, useIntl } from '@ant-design/pro-provider';
-import { Input, InputNumber } from 'antd';
+import { Input, InputNumber, Space } from 'antd';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import React from 'react';
 import type { ProFieldFC } from '../../index';
@@ -100,8 +100,14 @@ const FieldDigitRange: ProFieldFC<FieldDigitRangeProps> = (
         ? placeholderValue[index]
         : placeholderValue;
 
+    const Compact = Space.Compact || Input.Group;
     const dom = (
-      <Input.Group compact onBlur={handleGroupBlur}>
+      <Compact
+        {...{
+          compact: true,
+        }}
+        onBlur={handleGroupBlur}
+      >
         <InputNumber<number>
           {...fieldProps}
           placeholder={getInputNumberPlaceholder(0)}
@@ -135,7 +141,7 @@ const FieldDigitRange: ProFieldFC<FieldDigitRangeProps> = (
           defaultValue={defaultValue?.[1]}
           onChange={(changedValue) => handleChange(1, changedValue)}
         />
-      </Input.Group>
+      </Compact>
     );
     if (renderFormItem) {
       return renderFormItem(text, { mode: type, ...fieldProps }, dom);

diff --git a/tests/field/__snapshots__/demo.test.ts.snap b/tests/field/__snapshots__/demo.test.ts.snap
@@ -1895,11 +1895,11 @@ exports[`field demos 📸 renders ./packages/field/src/demos/base_test.tsx corre
                 <span
                   class="ant-descriptions-item-content"
                 >
-                  <span
-                    class="ant-input-group ant-input-group-compact"
+                  <div
+                    class="ant-space-compact"
                   >
                     <div
-                      class="ant-input-number"
+                      class="ant-input-number ant-input-number-compact-item ant-input-number-compact-first-item"
                     >
                       <div
                         class="ant-input-number-handler-wrap"
@@ -1974,15 +1974,15 @@ exports[`field demos 📸 renders ./packages/field/src/demos/base_test.tsx corre
                       </div>
                     </div>
                     <input
-                      class="ant-input ant-input-disabled"
+                      class="ant-input ant-input-disabled ant-input-compact-item"
                       disabled=""
                       placeholder="~"
                       style="width: 30px; text-align: center; border-inline-start: 0; border-inline-end: 0; pointer-events: none; background-color: rgb(255, 255, 255);"
                       type="text"
                       value=""
                     />
                     <div
-                      class="ant-input-number"
+                      class="ant-input-number ant-input-number-compact-item ant-input-number-compact-last-item"
                       style="border-inline-start: 0;"
                     >
                       <div
@@ -2057,7 +2057,7 @@ exports[`field demos 📸 renders ./packages/field/src/demos/base_test.tsx corre
                         />
                       </div>
                     </div>
-                  </span>
+                  </div>
                 </span>
               </div>
             </td>

diff --git a/tests/form/__snapshots__/demo.test.ts.snap b/tests/form/__snapshots__/demo.test.ts.snap
@@ -3204,11 +3204,11 @@ exports[`form demos 📸 renders ./packages/form/src/components/FieldSet/demos/c
                       <div
                         class="ant-form-item-control-input-content"
                       >
-                        <span
-                          class="ant-input-group ant-input-group-compact"
+                        <div
+                          class="ant-space-compact"
                         >
                           <div
-                            class="ant-input-number"
+                            class="ant-input-number ant-input-number-in-form-item ant-input-number-compact-item ant-input-number-compact-first-item"
                           >
                             <div
                               class="ant-input-number-handler-wrap"
@@ -3284,15 +3284,15 @@ exports[`form demos 📸 renders ./packages/form/src/components/FieldSet/demos/c
                             </div>
                           </div>
                           <input
-                            class="ant-input ant-input-disabled"
+                            class="ant-input ant-input-disabled ant-input-compact-item"
                             disabled=""
                             placeholder="-"
                             style="width: 60px; text-align: center; border-inline-start: 0; border-inline-end: 0; pointer-events: none; background-color: rgb(255, 255, 255);"
                             type="text"
                             value=""
                           />
                           <div
-                            class="ant-input-number"
+                            class="ant-input-number ant-input-number-in-form-item ant-input-number-compact-item ant-input-number-compact-last-item"
                             style="border-inline-start: 0;"
                           >
                             <div
@@ -3368,7 +3368,7 @@ exports[`form demos 📸 renders ./packages/form/src/components/FieldSet/demos/c
                               />
                             </div>
                           </div>
-                        </span>
+                        </div>
                       </div>
                     </div>
                   </div>