diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx index e1cc58c52a..56d4c1bd3a 100644 --- a/src/components/Card/Card.tsx +++ b/src/components/Card/Card.tsx @@ -214,7 +214,7 @@ const Card = ({ const content = ( {React.Children.map(children, (child, index) => - React.isValidElement(child) + React.isValidElement(child) && child.type !== React.Fragment ? React.cloneElement(child as React.ReactElement, { index, total, diff --git a/src/components/Card/CardActions.tsx b/src/components/Card/CardActions.tsx index 689a97d1c1..c6d1111539 100644 --- a/src/components/Card/CardActions.tsx +++ b/src/components/Card/CardActions.tsx @@ -44,7 +44,10 @@ const CardActions = ({ theme, style, children, ...rest }: Props) => { return ( {React.Children.map(children, (child, index) => { - if (!React.isValidElement(child)) { + if ( + !React.isValidElement(child) || + child.type === React.Fragment + ) { return child; } diff --git a/src/components/__tests__/Card/Card.test.tsx b/src/components/__tests__/Card/Card.test.tsx index 61659c8a24..a1a22c9c3c 100644 --- a/src/components/__tests__/Card/Card.test.tsx +++ b/src/components/__tests__/Card/Card.test.tsx @@ -91,6 +91,26 @@ describe('Card', () => { expect(screen.getByTestId('card')).toHaveStyle(styles.contentStyle); }); + it('renders Fragment children without passing invalid props', async () => { + const fragment = ( + <> + First item + Second item + + ); + await render({fragment}); + + // eslint-disable-next-line no-restricted-syntax -- The native test renderer does not surface React's invalid Fragment prop warning. + const fragmentProps = screen.getByTestId('card').props.children[0].props; + + expect(screen.getByText('First item')).toBeOnTheScreen(); + expect(screen.getByText('Second item')).toBeOnTheScreen(); + expect(fragmentProps).not.toHaveProperty('index'); + expect(fragmentProps).not.toHaveProperty('total'); + expect(fragmentProps).not.toHaveProperty('siblings'); + expect(fragmentProps).not.toHaveProperty('borderRadiusStyles'); + }); + it('does not render a disabled accessibility state', async () => { await render({null}); @@ -160,6 +180,30 @@ describe('CardActions', () => { borderRadius: 32, }); }); + + it('renders Fragment children without passing invalid props', async () => { + const fragment = ( + <> + + + + ); + await render( + + {fragment} + + ); + + const fragmentProps = + // eslint-disable-next-line no-restricted-syntax -- The native test renderer does not surface React's invalid Fragment prop warning. + screen.getByTestId('card-actions').props.children[0].props; + + expect(screen.getByText('Cancel')).toBeOnTheScreen(); + expect(screen.getByText('Confirm')).toBeOnTheScreen(); + expect(fragmentProps).not.toHaveProperty('compact'); + expect(fragmentProps).not.toHaveProperty('mode'); + expect(fragmentProps).not.toHaveProperty('style'); + }); }); describe('getCardColors - background color', () => {