Merge branch 'main' of github.com:carbon-design-system/carbon

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 = () => (
+     <Switcher>
+       {flattenChildren(
+         <>
+           <SwitcherItem>Item 1</SwitcherItem>
+           <SwitcherItem>Item 2</SwitcherItem>
+           <>
+             <SwitcherItem>Item 3</SwitcherItem>
+             <SwitcherItem>Item 4</SwitcherItem>
+           </>
+         </>
+       )}
+     </Switcher>
+   );
+   ```
+
+This approach allows you to use Fragments and nested structures with components
+like `<Switcher>` without modifying their source code. It preserves keys and
+props, ensuring stable rendering across updates.

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,

packages/react/src/components/DataTable/__tests__/TableExpandHeader-test.js

@@ -31,7 +31,7 @@ describe('TableExpandHeader', () => {
           <TableHead>
             <TableRow>
               <TableExpandHeader
-                ariaLabel="test-label"
+                aria-label="test-label"
                 isExpanded={false}
                 onExpand={jest.fn()}
                 className="custom-class"
@@ -43,12 +43,12 @@ describe('TableExpandHeader', () => {
       expect(container).toMatchSnapshot();
     });
 
-    it('should respect ariaLabel prop', () => {
+    it('should respect aria-label prop', () => {
       render(
         <Table>
           <TableHead>
             <TableRow>
-              <TableExpandHeader isExpanded enableToggle ariaLabel="Expand" />
+              <TableExpandHeader isExpanded aria-label="Expand" enableToggle />
             </TableRow>
           </TableHead>
         </Table>

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(<TagSkeleton />);
+
+      const skeletonTag = container.querySelector(`.${prefix}--tag`);
+
+      expect(skeletonTag).toHaveClass(`${prefix}--skeleton`);
+    });
+
+    it('should render a skeleton state with a small size', () => {
+      const { container } = render(<TagSkeleton size="sm" />);
+
+      const skeletonTag = container.querySelector(`.${prefix}--tag`);
+
+      expect(skeletonTag).toHaveClass(`${prefix}--layout--size-sm`);
+    });
+  });
 });