fix(Space): modify the priority of the component's size (#42752)

* fix(Space): modify the priority of the component's size

* chore: snapshot

* chore: snapshot

components/button/button.tsx

@@ -210,7 +210,7 @@ const InternalButton: React.ForwardRefRenderFunction<
 
   const sizeClassNameMap = { large: 'lg', small: 'sm', middle: undefined };
 
-  const sizeFullname = useSize((ctxSize) => compactSize ?? groupSize ?? customizeSize ?? ctxSize);
+  const sizeFullname = useSize((ctxSize) => customizeSize ?? compactSize ?? groupSize ?? ctxSize);
 
   const sizeCls = sizeFullname ? sizeClassNameMap[sizeFullname] || '' : '';
 

components/cascader/index.tsx

@@ -229,7 +229,7 @@ const Cascader = React.forwardRef((props: CascaderProps<any>, ref: React.Ref<Cas
   }, [showSearch]);
 
   // ===================== Size ======================
-  const mergedSize = useSize((ctx) => compactSize ?? customizeSize ?? ctx);
+  const mergedSize = useSize((ctx) => customizeSize ?? compactSize ?? ctx);
 
   // ===================== Disabled =====================
   const disabled = React.useContext(DisabledContext);

components/date-picker/generatePicker/generateRangePicker.tsx

@@ -78,7 +78,7 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
     }
 
     // ===================== Size =====================
-    const mergedSize = useSize((ctx) => compactSize ?? customizeSize ?? ctx);
+    const mergedSize = useSize((ctx) => customizeSize ?? compactSize ?? ctx);
 
     // ===================== Disabled =====================
     const disabled = React.useContext(DisabledContext);

components/date-picker/generatePicker/generateSinglePicker.tsx

@@ -103,7 +103,7 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
         }
 
         // ===================== Size =====================
-        const mergedSize = useSize((ctx) => compactSize ?? customizeSize ?? ctx);
+        const mergedSize = useSize((ctx) => customizeSize ?? compactSize ?? ctx);
 
         // ===================== Disabled =====================
         const disabled = React.useContext(DisabledContext);

components/input-number/index.tsx

@@ -87,7 +87,7 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
   } = React.useContext(FormItemInputContext);
   const mergedStatus = getMergedStatus(contextStatus, customStatus);
 
-  const mergedSize = useSize((ctx) => compactSize ?? customizeSize ?? ctx);
+  const mergedSize = useSize((ctx) => customizeSize ?? compactSize ?? ctx);
 
   const hasPrefix = prefix != null || hasFeedback;
   const hasAddon = !!(addonBefore || addonAfter);

components/input/Input.tsx

@@ -97,7 +97,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
   const { compactSize, compactItemClassnames } = useCompactItemContext(prefixCls, direction);
 
   // ===================== Size =====================
-  const mergedSize = useSize((ctx) => compactSize ?? customSize ?? ctx);
+  const mergedSize = useSize((ctx) => customSize ?? compactSize ?? ctx);
 
   // ===================== Disabled =====================
   const disabled = React.useContext(DisabledContext);

components/input/Search.tsx

@@ -49,7 +49,7 @@ const Search = React.forwardRef<InputRef, SearchProps>((props, ref) => {
   const inputPrefixCls = getPrefixCls('input', customizeInputPrefixCls);
   const { compactSize } = useCompactItemContext(prefixCls, direction);
 
-  const size = useSize((ctx) => compactSize ?? customizeSize ?? ctx);
+  const size = useSize((ctx) => customizeSize ?? compactSize ?? ctx);
 
   const inputRef = React.useRef<InputRef>(null);
 

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

@@ -5194,7 +5194,7 @@ exports[`renders components/input/demo/compact-style.tsx extend context correctl
       class="ant-space-compact"
     >
       <span
-        class="ant-input-group-wrapper ant-input-search ant-input-search-middle ant-input-compact-item ant-input-compact-first-item ant-input-compact-last-item"
+        class="ant-input-group-wrapper ant-input-search ant-input-compact-item ant-input-compact-first-item ant-input-compact-last-item"
       >
         <span
           class="ant-input-wrapper ant-input-group"

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

@@ -1412,7 +1412,7 @@ exports[`renders components/input/demo/compact-style.tsx correctly 1`] = `
       class="ant-space-compact"
     >
       <span
-        class="ant-input-group-wrapper ant-input-search ant-input-search-middle ant-input-compact-item ant-input-compact-first-item ant-input-compact-last-item"
+        class="ant-input-group-wrapper ant-input-search ant-input-compact-item ant-input-compact-first-item ant-input-compact-last-item"
       >
         <span
           class="ant-input-wrapper ant-input-group"

components/select/index.tsx

@@ -175,7 +175,7 @@ const InternalSelect = <
     hashId,
   );
 
-  const mergedSize = useSize((ctx) => compactSize ?? customizeSize ?? ctx);
+  const mergedSize = useSize((ctx) => customizeSize ?? compactSize ?? ctx);
 
   // ===================== Disabled =====================
   const disabled = React.useContext(DisabledContext);

components/space/Compact.tsx

@@ -78,7 +78,7 @@ const Compact: React.FC<SpaceCompactProps> = (props) => {
     ...restProps
   } = props;
 
-  const mergedSize = useSize((ctx) => size ?? ctx ?? 'middle');
+  const mergedSize = useSize((ctx) => size ?? ctx);
 
   const prefixCls = getPrefixCls('space-compact', customizePrefixCls);
   const [wrapSSR, hashId] = useStyle(prefixCls);

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

@@ -871,7 +871,7 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
     class="ant-space-compact ant-space-compact-block"
   >
     <span
-      class="ant-input-group-wrapper ant-input-search ant-input-search-middle ant-input-compact-item ant-input-compact-first-item"
+      class="ant-input-group-wrapper ant-input-search ant-input-compact-item ant-input-compact-first-item"
       style="width: 30%;"
     >
       <span
@@ -917,7 +917,7 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
       </span>
     </span>
     <span
-      class="ant-input-group-wrapper ant-input-search ant-input-search-middle ant-input-compact-item"
+      class="ant-input-group-wrapper ant-input-search ant-input-compact-item"
       style="width: 50%;"
     >
       <span
@@ -996,7 +996,7 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
       </span>
     </span>
     <span
-      class="ant-input-group-wrapper ant-input-search ant-input-search-middle ant-input-compact-item ant-input-compact-last-item"
+      class="ant-input-group-wrapper ant-input-search ant-input-compact-item ant-input-compact-last-item"
       style="width: 20%;"
     >
       <span
@@ -1279,7 +1279,7 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
       value="input content"
     />
     <div
-      class="ant-picker ant-picker-middle ant-picker-compact-item ant-picker-compact-last-item"
+      class="ant-picker ant-picker-compact-item ant-picker-compact-last-item"
       style="width: 50%;"
     >
       <div
@@ -1880,7 +1880,7 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
     class="ant-space-compact ant-space-compact-block"
   >
     <div
-      class="ant-picker ant-picker-range ant-picker-middle ant-picker-compact-item ant-picker-compact-first-item"
+      class="ant-picker ant-picker-range ant-picker-compact-item ant-picker-compact-first-item"
       style="width: 70%;"
     >
       <div
@@ -3088,7 +3088,7 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
       value="input content"
     />
     <div
-      class="ant-picker ant-picker-range ant-picker-middle ant-picker-compact-item ant-picker-compact-last-item"
+      class="ant-picker ant-picker-range ant-picker-compact-item ant-picker-compact-last-item"
       style="width: 70%;"
     >
       <div
@@ -4981,7 +4981,7 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
     class="ant-space-compact ant-space-compact-block"
   >
     <div
-      class="ant-picker ant-picker-middle ant-picker-compact-item ant-picker-compact-first-item"
+      class="ant-picker ant-picker-compact-item ant-picker-compact-first-item"
       style="width: 70%;"
     >
       <div
@@ -6375,7 +6375,7 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
                   class="ant-picker-ok"
                 >
                   <button
-                    class="ant-btn ant-btn-primary ant-btn-compact-item ant-btn-compact-first-item"
+                    class="ant-btn ant-btn-primary ant-btn-sm ant-btn-compact-item ant-btn-compact-first-item"
                     disabled=""
                     type="button"
                   >
@@ -6544,7 +6544,7 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
     class="ant-space-compact ant-space-compact-block"
   >
     <div
-      class="ant-picker ant-picker-range ant-picker-middle ant-picker-compact-item ant-picker-compact-first-item"
+      class="ant-picker ant-picker-range ant-picker-compact-item ant-picker-compact-first-item"
     >
       <div
         class="ant-picker-input ant-picker-input-active"
@@ -7985,7 +7985,7 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
                     class="ant-picker-ok"
                   >
                     <button
-                      class="ant-btn ant-btn-primary ant-btn-compact-item ant-btn-compact-first-item"
+                      class="ant-btn ant-btn-primary ant-btn-sm ant-btn-compact-item ant-btn-compact-first-item"
                       disabled=""
                       type="button"
                     >
@@ -10034,7 +10034,7 @@ exports[`renders components/space/demo/compact-debug.tsx extend context correctl
       class="ant-space-compact"
     >
       <span
-        class="ant-input-group-wrapper ant-input-search ant-input-search-middle ant-input-compact-item ant-input-compact-first-item"
+        class="ant-input-group-wrapper ant-input-search ant-input-compact-item ant-input-compact-first-item"
       >
         <span
           class="ant-input-wrapper ant-input-group"
@@ -10079,7 +10079,7 @@ exports[`renders components/space/demo/compact-debug.tsx extend context correctl
         </span>
       </span>
       <span
-        class="ant-input-group-wrapper ant-input-search ant-input-search-middle ant-input-compact-item"
+        class="ant-input-group-wrapper ant-input-search ant-input-compact-item"
       >
         <span
           class="ant-input-wrapper ant-input-group"
@@ -11772,7 +11772,7 @@ exports[`renders components/space/demo/compact-debug.tsx extend context correctl
       class="ant-space-compact"
     >
       <div
-        class="ant-picker ant-picker-range ant-picker-middle ant-picker-compact-item ant-picker-compact-first-item ant-picker-compact-last-item"
+        class="ant-picker ant-picker-range ant-picker-compact-item ant-picker-compact-first-item ant-picker-compact-last-item"
         style="width: 70%;"
       >
         <div
@@ -13497,7 +13497,7 @@ Array [
         class="ant-space-compact"
       >
         <span
-          class="ant-input-group-wrapper ant-input-search ant-input-search-middle ant-input-compact-item"
+          class="ant-input-group-wrapper ant-input-search ant-input-compact-item"
           style="width: 110px;"
         >
           <span
@@ -13599,7 +13599,7 @@ Array [
       class="ant-space-compact"
     >
       <div
-        class="ant-picker ant-picker-middle ant-picker-compact-item ant-picker-compact-first-item"
+        class="ant-picker ant-picker-compact-item ant-picker-compact-first-item"
       >
         <div
           class="ant-picker-input"
@@ -14992,7 +14992,7 @@ Array [
                     class="ant-picker-ok"
                   >
                     <button
-                      class="ant-btn ant-btn-primary ant-btn-compact-item ant-btn-compact-first-item"
+                      class="ant-btn ant-btn-primary ant-btn-sm ant-btn-compact-item ant-btn-compact-first-item"
                       disabled=""
                       type="button"
                     >

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

@@ -594,7 +594,7 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
     class="ant-space-compact ant-space-compact-block"
   >
     <span
-      class="ant-input-group-wrapper ant-input-search ant-input-search-middle ant-input-compact-item ant-input-compact-first-item"
+      class="ant-input-group-wrapper ant-input-search ant-input-compact-item ant-input-compact-first-item"
       style="width:30%"
     >
       <span
@@ -640,7 +640,7 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
       </span>
     </span>
     <span
-      class="ant-input-group-wrapper ant-input-search ant-input-search-middle ant-input-compact-item"
+      class="ant-input-group-wrapper ant-input-search ant-input-compact-item"
       style="width:50%"
     >
       <span
@@ -719,7 +719,7 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
       </span>
     </span>
     <span
-      class="ant-input-group-wrapper ant-input-search ant-input-search-middle ant-input-compact-item ant-input-compact-last-item"
+      class="ant-input-group-wrapper ant-input-search ant-input-compact-item ant-input-compact-last-item"
       style="width:20%"
     >
       <span
@@ -921,7 +921,7 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
       value="input content"
     />
     <div
-      class="ant-picker ant-picker-middle ant-picker-compact-item ant-picker-compact-last-item"
+      class="ant-picker ant-picker-compact-item ant-picker-compact-last-item"
       style="width:50%"
     >
       <div
@@ -966,7 +966,7 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
     class="ant-space-compact ant-space-compact-block"
   >
     <div
-      class="ant-picker ant-picker-range ant-picker-middle ant-picker-compact-item ant-picker-compact-first-item"
+      class="ant-picker ant-picker-range ant-picker-compact-item ant-picker-compact-first-item"
       style="width:70%"
     >
       <div
@@ -1073,7 +1073,7 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
       value="input content"
     />
     <div
-      class="ant-picker ant-picker-range ant-picker-middle ant-picker-compact-item ant-picker-compact-last-item"
+      class="ant-picker ant-picker-range ant-picker-compact-item ant-picker-compact-last-item"
       style="width:70%"
     >
       <div
@@ -1469,7 +1469,7 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
     class="ant-space-compact ant-space-compact-block"
   >
     <div
-      class="ant-picker ant-picker-middle ant-picker-compact-item ant-picker-compact-first-item"
+      class="ant-picker ant-picker-compact-item ant-picker-compact-first-item"
       style="width:70%"
     >
       <div
@@ -1576,7 +1576,7 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
     class="ant-space-compact ant-space-compact-block"
   >
     <div
-      class="ant-picker ant-picker-range ant-picker-middle ant-picker-compact-item ant-picker-compact-first-item"
+      class="ant-picker ant-picker-range ant-picker-compact-item ant-picker-compact-first-item"
     >
       <div
         class="ant-picker-input ant-picker-input-active"
@@ -2636,7 +2636,7 @@ exports[`renders components/space/demo/compact-debug.tsx correctly 1`] = `
       class="ant-space-compact"
     >
       <span
-        class="ant-input-group-wrapper ant-input-search ant-input-search-middle ant-input-compact-item ant-input-compact-first-item"
+        class="ant-input-group-wrapper ant-input-search ant-input-compact-item ant-input-compact-first-item"
       >
         <span
           class="ant-input-wrapper ant-input-group"
@@ -2681,7 +2681,7 @@ exports[`renders components/space/demo/compact-debug.tsx correctly 1`] = `
         </span>
       </span>
       <span
-        class="ant-input-group-wrapper ant-input-search ant-input-search-middle ant-input-compact-item"
+        class="ant-input-group-wrapper ant-input-search ant-input-compact-item"
       >
         <span
           class="ant-input-wrapper ant-input-group"
@@ -3280,7 +3280,7 @@ exports[`renders components/space/demo/compact-debug.tsx correctly 1`] = `
       class="ant-space-compact"
     >
       <div
-        class="ant-picker ant-picker-range ant-picker-middle ant-picker-compact-item ant-picker-compact-first-item ant-picker-compact-last-item"
+        class="ant-picker ant-picker-range ant-picker-compact-item ant-picker-compact-first-item ant-picker-compact-last-item"
         style="width:70%"
       >
         <div
@@ -3734,7 +3734,7 @@ Array [
         class="ant-space-compact"
       >
         <span
-          class="ant-input-group-wrapper ant-input-search ant-input-search-middle ant-input-compact-item"
+          class="ant-input-group-wrapper ant-input-search ant-input-compact-item"
           style="width:110px"
         >
           <span
@@ -3836,7 +3836,7 @@ Array [
       class="ant-space-compact"
     >
       <div
-        class="ant-picker ant-picker-middle ant-picker-compact-item ant-picker-compact-first-item"
+        class="ant-picker ant-picker-compact-item ant-picker-compact-first-item"
       >
         <div
           class="ant-picker-input"

components/space/__tests__/space-compact.test.tsx

@@ -12,6 +12,7 @@ import DatePicker from '../../date-picker';
 import Drawer from '../../drawer';
 import Dropdown from '../../dropdown';
 import Input from '../../input';
+import InputNumber from '../../input-number';
 import Modal from '../../modal';
 import Select from '../../select';
 import TimePicker from '../../time-picker';
@@ -156,6 +157,42 @@ describe('Space.Compact', () => {
     expect(container.querySelector('.ant-input')?.classList.contains('ant-input-sm')).toBe(true);
     expect(container.querySelector('.ant-btn')?.classList.contains('ant-btn-sm')).toBe(true);
   });
+  it('component size has a higher priority than Compact', () => {
+    const { container } = render(
+      <Space.Compact size="middle">
+        <Input size="small" />
+        <Select size="small" />
+        <Button size="small">Submit</Button>
+        <InputNumber size="small" />
+        <DatePicker size="small" />
+        <DatePicker.RangePicker size="small" />
+        <Cascader size="small" />
+        <TreeSelect size="small" />
+        <Input.Search size="small" />
+      </Space.Compact>,
+    );
+    expect(container.querySelector('.ant-input')?.classList.contains('ant-input-sm')).toBe(true);
+    expect(container.querySelector('.ant-select')?.classList.contains('ant-select-sm')).toBe(true);
+    expect(container.querySelector('.ant-btn')?.classList.contains('ant-btn-sm')).toBe(true);
+    expect(
+      container.querySelector('.ant-input-number')?.classList.contains('ant-input-number-sm'),
+    ).toBe(true);
+    expect(container.querySelector('.ant-picker')?.classList.contains('ant-picker-small')).toBe(
+      true,
+    );
+    expect(
+      container.querySelector('.ant-picker-range')?.classList.contains('ant-picker-small'),
+    ).toBe(true);
+    expect(container.querySelector('.ant-cascader')?.classList.contains('ant-select-sm')).toBe(
+      true,
+    );
+    expect(container.querySelector('.ant-tree-select')?.classList.contains('ant-select-sm')).toBe(
+      true,
+    );
+    expect(
+      container.querySelector('.ant-input-search')?.classList.contains('ant-input-search-small'),
+    ).toBe(true);
+  });
 
   it('direction=vertical', () => {
     const { container } = render(

components/tree-select/index.tsx

@@ -206,7 +206,7 @@ const InternalTreeSelect = <
 
   const mergedBuiltinPlacements = useBuiltinPlacements(builtinPlacements, popupOverflow);
 
-  const mergedSize = useSize((ctx) => compactSize ?? customizeSize ?? ctx);
+  const mergedSize = useSize((ctx) => customizeSize ?? compactSize ?? ctx);
 
   // ===================== Disabled =====================
   const disabled = React.useContext(DisabledContext);