From fab91fa93dbc6369c22f6ce1a53e1e8c6d2f6d0e Mon Sep 17 00:00:00 2001 From: Guilherme Datilio Ribeiro Date: Thu, 19 Sep 2024 02:38:24 -0300 Subject: [PATCH 1/3] Added tests to `Tag Skeleton` (#17460) * chore(release): v11.66.0 (#17413) Co-authored-by: tay1orjones <3360588+tay1orjones@users.noreply.github.com> Co-authored-by: Taylor Jones * test: added test to skeleton * test: removed tests for tag * test: removed function * test: added test for size prop * fix: changed const name --------- Co-authored-by: carbon-automation[bot] <103539138+carbon-automation[bot]@users.noreply.github.com> Co-authored-by: tay1orjones <3360588+tay1orjones@users.noreply.github.com> Co-authored-by: Taylor Jones Co-authored-by: Gururaj J <89023023+Gururajj77@users.noreply.github.com> --- packages/react/src/components/Tag/Tag-test.js | 22 ++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) 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`); + }); + }); }); From 7956f6395c05e24cc77d8d44533d21a441515d9f Mon Sep 17 00:00:00 2001 From: Nikhil Tomar <63502271+2nikhiltom@users.noreply.github.com> Date: Thu, 19 Sep 2024 12:52:25 +0530 Subject: [PATCH 2/3] fix: makes aria-label optional (#17467) --- .../react/src/components/DataTable/TableExpandHeader.tsx | 4 ++-- .../DataTable/__tests__/TableExpandHeader-test.js | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) 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( - +
From 72c80b3ea043244a6bf8a9b4e044ecbf8476ff5c Mon Sep 17 00:00:00 2001 From: Nikhil Tomar <63502271+2nikhiltom@users.noreply.github.com> Date: Thu, 19 Sep 2024 16:30:53 +0530 Subject: [PATCH 3/3] fix(16916): adds React fragment support for Switcher's direct child (#17008) * fix(15337): fix release names in update automation * fix(15337): fix release names in update automation * fix(16916): added React fragment support for Switcher child * docs: revert changes & adds usage docs for Switcher * Format fix * Update UsingFragmentsWithSwitcher.md * chore: format fix --------- Co-authored-by: Preeti Bansal <146315451+preetibansalui@users.noreply.github.com> --- .../react/docs/UsingFragmentsWithSwitcher.md | 43 +++++++++++++++++++ 1 file changed, 43 insertions(+) create mode 100644 packages/react/docs/UsingFragmentsWithSwitcher.md 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.