diff --git a/packages/react/docs/UsingFragmentsWithSwitcher.md b/packages/react/docs/UsingFragmentsWithSwitcher.md new file mode 100644 index 000000000000..e4aaacf0878b --- /dev/null +++ b/packages/react/docs/UsingFragmentsWithSwitcher.md @@ -0,0 +1,43 @@ +The `Switcher` component is designed to have `SwitcherItem` components as its +direct children. However, there may be cases where you want to use React +Fragments or other nested structures within the `Switcher`. To accommodate we +recommend using the [`react-keyed-flatten-children`] +(https://www.npmjs.com/package/react-keyed-flatten-children#react-keyed-flatten-children) +package. + +### Using react-keyed-flatten-children + +The `react-keyed-flatten-children` package allows you to flatten arrays and +React Fragments into a regular, one-dimensional array while preserving element +and fragment keys. + +1. Install the package: + + ``` + npm install react-keyed-flatten-children + ``` + +2. Import and use in your component: + + ```jsx + import flattenChildren from 'react-keyed-flatten-children'; + + const YourComponent = () => ( + + {flattenChildren( + <> + Item 1 + Item 2 + <> + Item 3 + Item 4 + + + )} + + ); + ``` + +This approach allows you to use Fragments and nested structures with components +like `` without modifying their source code. It preserves keys and +props, ensuring stable rendering across updates. diff --git a/packages/react/src/components/DataTable/TableExpandHeader.tsx b/packages/react/src/components/DataTable/TableExpandHeader.tsx index 435a7c14ab01..fa0a90afd859 100644 --- a/packages/react/src/components/DataTable/TableExpandHeader.tsx +++ b/packages/react/src/components/DataTable/TableExpandHeader.tsx @@ -31,7 +31,7 @@ type TableExpandHeaderPropsBase = { * Specify the string read by a voice reader when the expand trigger is * focused */ - ['aria-label']: string; + ['aria-label']?: string; /** * @deprecated The enableExpando prop is being replaced by `enableToggle` @@ -150,7 +150,7 @@ TableExpandHeader.propTypes = { className: PropTypes.string, /** - * The enableExpando prop is being replaced by enableToggle + * The enableExpando prop is being replaced by TableExpandHeader */ enableExpando: deprecate( PropTypes.bool, diff --git a/packages/react/src/components/DataTable/__tests__/TableExpandHeader-test.js b/packages/react/src/components/DataTable/__tests__/TableExpandHeader-test.js index ebbe56cc1a67..c389444a67ff 100644 --- a/packages/react/src/components/DataTable/__tests__/TableExpandHeader-test.js +++ b/packages/react/src/components/DataTable/__tests__/TableExpandHeader-test.js @@ -31,7 +31,7 @@ describe('TableExpandHeader', () => { { expect(container).toMatchSnapshot(); }); - it('should respect ariaLabel prop', () => { + it('should respect aria-label prop', () => { render( - +
diff --git a/packages/react/src/components/Tag/Tag-test.js b/packages/react/src/components/Tag/Tag-test.js index 0424fd687a07..526a3d0fb3e9 100644 --- a/packages/react/src/components/Tag/Tag-test.js +++ b/packages/react/src/components/Tag/Tag-test.js @@ -8,10 +8,12 @@ import { Add } from '@carbon/icons-react'; import { render, screen } from '@testing-library/react'; import React from 'react'; -import Tag from './'; +import Tag, { TagSkeleton } from './'; import DismissibleTag from './DismissibleTag'; import { AILabel } from '../AILabel'; +const prefix = 'cds'; + describe('Tag', () => { describe('automated accessibility testing', () => { it('should have no Axe violations', async () => { @@ -63,4 +65,22 @@ describe('Tag', () => { screen.getByRole('button', { name: 'AI - Show information' }) ).toBeInTheDocument(); }); + + describe('Skeleton Tag', () => { + it('should render a skeleton state', () => { + const { container } = render(); + + const skeletonTag = container.querySelector(`.${prefix}--tag`); + + expect(skeletonTag).toHaveClass(`${prefix}--skeleton`); + }); + + it('should render a skeleton state with a small size', () => { + const { container } = render(); + + const skeletonTag = container.querySelector(`.${prefix}--tag`); + + expect(skeletonTag).toHaveClass(`${prefix}--layout--size-sm`); + }); + }); });