fix: Space missing in button

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

@@ -211,6 +211,17 @@ exports[`Button should has click wave effect 1`] = `
 </button>
 `;
 
+exports[`Button should merge text if children using variable 1`] = `
+<button
+  class="ant-btn"
+  type="button"
+>
+  <span>
+    This is a test 1
+  </span>
+</button>
+`;
+
 exports[`Button should not render as link button when href is undefined 1`] = `
 <button
   class="ant-btn ant-btn-primary"

components/button/__tests__/index.test.js

@@ -157,4 +157,15 @@ describe('Button', () => {
     );
     expect(wrapper.render()).toMatchSnapshot();
   });
+
+  // https://github.com/ant-design/ant-design/issues/15342
+  it('should merge text if children using variable', () => {
+    const wrapper = mount(
+      <Button>
+        This {'is'} a test {1}
+      </Button>,
+    );
+
+    expect(wrapper.render()).toMatchSnapshot();
+  });
 });

components/button/button.tsx

@@ -15,6 +15,29 @@ function isString(str: any) {
   return typeof str === 'string';
 }
 
+function spaceChildren(children: React.ReactNode, needInserted: boolean) {
+  let isPrevChildPure: boolean = false;
+  const childList: React.ReactNode[] = [];
+  React.Children.forEach(children, child => {
+    const type = typeof child;
+    const isCurrentChildPure = type === 'string' || type === 'number';
+    if (isPrevChildPure && isCurrentChildPure) {
+      const lastIndex = childList.length - 1;
+      const lastChild = childList[lastIndex];
+      childList[lastIndex] = `${lastChild}${child}`;
+    } else {
+      childList.push(child);
+    }
+
+    isPrevChildPure = isCurrentChildPure;
+  });
+
+  // Pass to React.Children.map to auto fill key
+  return React.Children.map(childList, child =>
+    insertSpace(child as React.ReactChild, needInserted),
+  );
+}
+
 // Insert one space between two chinese characters automatically.
 function insertSpace(child: React.ReactChild, needInserted: boolean) {
   // Check the child if is undefined or null.
@@ -243,9 +266,7 @@ class Button extends React.Component<ButtonProps, ButtonState> {
     const iconNode = iconType ? <Icon type={iconType} /> : null;
     const kids =
       children || children === 0
-        ? React.Children.map(children, child =>
-            insertSpace(child as React.ReactChild, this.isNeedInserted() && autoInsertSpace),
-          )
+        ? spaceChildren(children, this.isNeedInserted() && autoInsertSpace)
         : null;
 
     const linkButtonRestProps = omit(rest as AnchorButtonProps, ['htmlType']);

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

@@ -1198,10 +1198,7 @@ exports[`renders ./components/input/demo/textarea-resize.md correctly 1`] = `
     type="button"
   >
     <span>
-      Auto Resize: 
-    </span>
-    <span>
-      false
+      Auto Resize: false
     </span>
   </button>
   <textarea