mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-08-05 23:46:28 +08:00
Code Issues Actions 17 Packages Projects Releases Wiki Activity

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

Browse Source 
close #30953
This commit is contained in:
afc163 2021-06-11 16:32:46 +08:00 committed by GitHub
parent b9733aa1f5
commit 7601f62ec0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 29 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
components/button/__tests__/__snapshots__/index.test.tsx.snap
View File

@ -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"

12
components/button/__tests__/index.test.tsx
View File

@ -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();
});
});

10
components/button/button.tsx
View File

@ -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)) {
child = child.split('').join(SPACE);
}
return isTwoCNChar(child) ? <span>{child.split('').join(SPACE)}</span> : <span>{child}</span>;
}
if (isReactFragment(child)) {
return <span>{child}</span>;
}
return child;