fix: Button loading margin lost when children is fragment (#30962)

close #30953

components/button/__tests__/__snapshots__/index.test.tsx.snap

@@ -263,6 +263,17 @@ exports[`Button rtl render component should be rendered correctly in RTL directi
 />
 `;
 
+exports[`Button should handle fragment as children 1`] = `
+<button
+  class="ant-btn"
+  type="button"
+>
+  <span>
+    text
+  </span>
+</button>
+`;
+
 exports[`Button should merge text if children using variable 1`] = `
 <button
   class="ant-btn"

components/button/__tests__/index.test.tsx

@@ -38,7 +38,7 @@ describe('Button', () => {
   it('warns if size is wrong', () => {
     const mockWarn = jest.fn();
     jest.spyOn(console, 'warn').mockImplementation(mockWarn);
-    const size = ('who am I' as any) as SizeType;
+    const size = 'who am I' as any as SizeType;
     render(<Button.Group size={size} />);
     expect(mockWarn).toHaveBeenCalledTimes(1);
     expect(mockWarn.mock.calls[0][0]).toMatchObject({
@@ -311,4 +311,14 @@ describe('Button', () => {
     wrapper.simulate('click');
     expect(onClick).not.toHaveBeenCalled();
   });
+
+  // https://github.com/ant-design/ant-design/issues/30953
+  it('should handle fragment as children', () => {
+    const wrapper = mount(
+      <Button>
+        <>text</>
+      </Button>,
+    );
+    expect(wrapper).toMatchRenderedSnapshot();
+  });
 });

components/button/button.tsx

@@ -22,6 +22,10 @@ function isUnborderedButtonType(type: ButtonType | undefined) {
   return type === 'text' || type === 'link';
 }
 
+function isReactFragment(node: React.ReactNode) {
+  return React.isValidElement(node) && node.type === React.Fragment;
+}
+
 // Insert one space between two chinese characters automatically.
 function insertSpace(child: React.ReactChild, needInserted: boolean) {
   // Check the child if is undefined or null.
@@ -41,9 +45,9 @@ function insertSpace(child: React.ReactChild, needInserted: boolean) {
     });
   }
   if (typeof child === 'string') {
-    if (isTwoCNChar(child)) {
+    return isTwoCNChar(child) ? <span>{child.split('').join(SPACE)}</span> : <span>{child}</span>;
-      child = child.split('').join(SPACE);
+  }
-    }
+  if (isReactFragment(child)) {
     return <span>{child}</span>;
   }
   return child;