@patternfly/react-core 5.2.0-prerelease.29 → 5.2.0-prerelease.30

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"5.2.0-prerelease.28","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"5.2.0-prerelease.29","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"5.2.0-prerelease.28","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"5.2.0-prerelease.29","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"5.2.0-prerelease.28","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"5.2.0-prerelease.29","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.2.0-prerelease.29",
+  "version": "5.2.0-prerelease.30",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -71,5 +71,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "4f123b1aa89500ccaf0a4cac977dc2e5352cb75b"
+  "gitHead": "e112034cf060e8917e5ba47079af4850a4f12d1a"
 }

package/src/components/Chip/Chip.tsx

@@ -81,6 +81,17 @@ class Chip extends React.Component<ChipProps, ChipState> {
     });
   }
 
+  componentDidUpdate(_prevProps: ChipProps, prevState: ChipState) {
+    const nextIsTooltipVisible = Boolean(
+      this.span.current && this.span.current.offsetWidth < this.span.current.scrollWidth
+    );
+    if (prevState.isTooltipVisible !== nextIsTooltipVisible) {
+      this.setState({
+        isTooltipVisible: nextIsTooltipVisible
+      });
+    }
+  }
+
   setChipStyle = () => ({
     [cssChipTextMaxWidth.name]: this.props.textMaxWidth
   });

package/src/components/ClipboardCopy/ClipboardCopy.tsx

@@ -10,7 +10,7 @@ import { ClipboardCopyToggle } from './ClipboardCopyToggle';
 import { ClipboardCopyExpanded } from './ClipboardCopyExpanded';
 import { getOUIAProps, OUIAProps } from '../../helpers';
 
-export const clipboardCopyFunc = (event: React.ClipboardEvent<HTMLDivElement>, text?: React.ReactNode) => {
+export const clipboardCopyFunc = (event: React.ClipboardEvent<HTMLDivElement>, text?: string) => {
   navigator.clipboard.writeText(text.toString());
 };
 
@@ -27,7 +27,7 @@ export interface ClipboardCopyState {
   textWhenExpanded: string;
 }
 
-export interface ClipboardCopyProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange'>, OUIAProps {
+export interface ClipboardCopyProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange' | 'children'>, OUIAProps {
   /** Additional classes added to the clipboard copy container. */
   className?: string;
   /** Tooltip message to display when hover the copy button */
@@ -71,12 +71,12 @@ export interface ClipboardCopyProps extends Omit<React.HTMLProps<HTMLDivElement>
   /** Delay in ms before the tooltip appears. */
   entryDelay?: number;
   /** A function that is triggered on clicking the copy button. */
-  onCopy?: (event: React.ClipboardEvent<HTMLDivElement>, text?: React.ReactNode) => void;
+  onCopy?: (event: React.ClipboardEvent<HTMLDivElement>, text?: string) => void;
   /** A function that is triggered on changing the text. */
   onChange?: (event: React.FormEvent, text?: string) => void;
   /** The text which is copied. */
-  children: React.ReactNode;
-  /** Additional actions for inline-compact clipboard copy. Should be wrapped with ClipboardCopyAction. */
+  children: string;
+  /** Additional actions for inline clipboard copy. Should be wrapped with ClipboardCopyAction. */
   additionalActions?: React.ReactNode;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
   ouiaId?: number | string;

package/src/components/ClipboardCopy/ClipboardCopyExpanded.tsx

@@ -6,7 +6,6 @@ import { PickOptional } from '../../helpers/typeUtils';
 
 export interface ClipboardCopyExpandedProps extends Omit<ClipboardCopyProps, 'onChange'> {
   className?: string;
-  children: React.ReactNode;
   onChange?: (e: React.FormEvent<HTMLDivElement>, text: string) => void;
   isReadOnly?: boolean;
   isCode?: boolean;

package/src/components/DataList/DataList.tsx

@@ -73,6 +73,7 @@ class DataList extends React.Component<DataListProps> {
     const {
       className,
       children,
+      'aria-label': ariaLabel,
       onSelectDataListItem,
       selectedDataListItemId,
       isCompact,
@@ -106,6 +107,7 @@ class DataList extends React.Component<DataListProps> {
           )}
           style={props.style}
           role="list"
+          aria-label={ariaLabel}
           {...props}
           ref={this.ref}
         >

package/src/components/DataList/DataListAction.tsx

@@ -35,8 +35,8 @@ export const DataListAction: React.FunctionComponent<DataListActionProps> = ({
   id,
   'aria-label': ariaLabel,
   'aria-labelledby': ariaLabelledBy,
+  /* eslint-disable @typescript-eslint/no-unused-vars */
   isPlainButtonAction,
-  /* eslint-enable @typescript-eslint/no-unused-vars */
   ...props
 }: DataListActionProps) => (
   <div className={css(styles.dataListItemAction, formatBreakpointMods(visibility, styles), className)} {...props}>

package/src/components/DataList/__tests__/DataList.test.tsx

@@ -5,346 +5,182 @@ import userEvent from '@testing-library/user-event';
 
 import { DataList } from '../DataList';
 import { DataListItem } from '../DataListItem';
-import { DataListAction } from '../DataListAction';
-import { DataListCell } from '../DataListCell';
-import { DataListToggle } from '../DataListToggle';
-import { DataListItemCells } from '../DataListItemCells';
 import { DataListItemRow } from '../DataListItemRow';
-import { DataListContent } from '../DataListContent';
-import { Button } from '../../Button';
-import { Dropdown, DropdownList, DropdownItem } from '../../Dropdown';
-import { MenuToggle } from '../../MenuToggle';
-import styles from '@patternfly/react-styles/css/components/DataList/data-list';
 
-describe('DataList', () => {
-  test('List default', () => {
-    const { asFragment } = render(<DataList aria-label="this is a simple list" />);
-    expect(asFragment()).toMatchSnapshot();
-  });
+import styles from '@patternfly/react-styles/css/components/DataList/data-list';
 
-  test('List compact', () => {
-    const { asFragment } = render(<DataList aria-label="this is a simple list" isCompact />);
-    expect(asFragment()).toMatchSnapshot();
-  });
+test('Renders to match snapshot', () => {
+  const { asFragment } = render(<DataList aria-label="list" />);
+  expect(asFragment()).toMatchSnapshot();
+});
 
-  describe('DataList variants', () => {
-    ['none', 'always', 'sm', 'md', 'lg', 'xl', '2xl'].forEach((oneBreakpoint) => {
-      test(`Breakpoint - ${oneBreakpoint}`, () => {
-        const { asFragment } = render(
-          <DataList aria-label="this is a simple list" gridBreakpoint={oneBreakpoint as any} />
-        );
-        expect(asFragment()).toMatchSnapshot();
-      });
-    });
-  });
+test(`Renders with default class ${styles.dataList}`, () => {
+  render(<DataList aria-label="list" />);
+  expect(screen.getByLabelText('list')).toHaveClass(styles.dataList);
+});
 
-  test('List draggable', () => {
-    const { asFragment } = render(<DataList aria-label="this is a simple list" isCompact onDragFinish={jest.fn()} />);
-    expect(asFragment()).toMatchSnapshot();
-  });
+test(`Renders with custom class when className is passed`, () => {
+  render(<DataList aria-label="list" className="custom" />);
+  expect(screen.getByLabelText('list')).toHaveClass('custom');
+});
 
-  test('List', () => {
-    const { asFragment } = render(
-      <DataList key="list-id-1" className="data-list-custom" aria-label="this is a simple list" />
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
+test(`Renders with spread props`, () => {
+  render(<DataList aria-label="list" id="test" />);
+  expect(screen.getByLabelText('list')).toHaveAttribute('id', 'test');
+});
 
-  test('List renders with a hidden input to improve a11y when selectableRow is passed', () => {
-    render(
-      <DataList aria-label="this is a simple list" onSelectableRowChange={() => {}}>
-        <DataListItem>
-          <DataListItemRow aria-labelledby="test-id">
-            <p id="test-id">Test</p>
-          </DataListItemRow>
-        </DataListItem>
-      </DataList>
-    );
+test(`Renders with aria-label when aria-label is passed`, () => {
+  render(<DataList aria-label="list">test</DataList>);
+  expect(screen.getByText('test')).toHaveAccessibleName('list');
+});
 
-    const selectableInput = screen.getByRole('radio', { hidden: true });
+test(`Renders ${styles.modifiers.compact} when isCompact = true`, () => {
+  render(<DataList aria-label="list" isCompact />);
+  expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.compact);
+});
 
-    expect(selectableInput).toBeInTheDocument();
+['nowrap', 'truncate', 'breakWord'].forEach((wrap) => {
+  test(`Renders with class ${styles.modifiers[wrap]} when wrapModifier = ${wrap} is pased`, () => {
+    render(<DataList aria-label="list" wrapModifier={wrap as 'nowrap' | 'truncate' | 'breakWord'} />);
+    expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers[wrap]);
   });
+});
 
-  test('List does not render with a hidden input to improve a11y when selectableRow is not passed', () => {
-    render(
-      <DataList aria-label="this is a simple list">
-        <DataListItem>
-          <DataListItemRow aria-labelledby="test-id">
-            <p id="test-id">Test</p>
-          </DataListItemRow>
-        </DataListItem>
-      </DataList>
-    );
-
-    const selectableInput = screen.queryByRole('radio', { hidden: true });
-
-    expect(selectableInput).not.toBeInTheDocument();
+const gridBreakpointClasses = {
+  none: styles.modifiers.gridNone,
+  always: 'pf-m-grid',
+  sm: styles.modifiers.gridSm,
+  md: styles.modifiers.gridMd,
+  lg: styles.modifiers.gridLg,
+  xl: styles.modifiers.gridXl,
+  '2xl': styles.modifiers.grid_2xl
+};
+
+['none', 'always', 'sm', 'md', 'lg', 'xl', '2xl'].forEach((oneBreakpoint) => {
+  test(`Has breakpoint - ${oneBreakpoint} when gridBreakpoint is pased`, () => {
+    render(<DataList aria-label="list" gridBreakpoint={oneBreakpoint as any} />);
+    expect(screen.getByLabelText('list')).toHaveClass(gridBreakpointClasses[oneBreakpoint]);
   });
+});
 
-  test('List calls selectableRow.onChange when the selectable input changes', async () => {
-    const mock = jest.fn();
-    const user = userEvent.setup();
-
-    render(
-      <DataList aria-label="this is a simple list" onSelectableRowChange={mock} selectedDataListItemId="">
-        <DataListItem id="item-test-id">
-          <DataListItemRow aria-labelledby="test-id">
-            <p id="test-id">Test</p>
-          </DataListItemRow>
-        </DataListItem>
-      </DataList>
-    );
-
-    const selectableInput = screen.getByRole('radio', { hidden: true });
-    await user.click(selectableInput);
+test(`Renders default class ${styles.dataList}`, () => {
+  render(<DataList key="list-id-1" aria-label="list" />);
+  expect(screen.getByLabelText('list')).toHaveClass(styles.dataList);
+});
 
-    expect(mock).toHaveBeenCalled();
-  });
+test('Renders custom class when passed', () => {
+  render(<DataList key="list-id-1" className="data-list-custom" aria-label="list" />);
+  expect(screen.getByLabelText('list')).toHaveClass('data-list-custom');
+});
 
-  test('List does not call selectableRow.onChange when the selectable input is not changed', () => {
-    const mock = jest.fn();
+test('Renders with a hidden input to improve a11y when onSelectableRowChange is passed', () => {
+  render(
+    <DataList aria-label="this is a simple list" onSelectableRowChange={() => {}}>
+      <DataListItem>
+        <DataListItemRow aria-labelledby="test-id">
+          <p id="test-id">Test</p>
+        </DataListItemRow>
+      </DataListItem>
+    </DataList>
+  );
 
-    render(
-      <DataList aria-label="this is a simple list" onSelectableRowChange={mock} selectedDataListItemId="">
-        <DataListItem id="item-test-id">
-          <DataListItemRow aria-labelledby="test-id">
-            <p id="test-id">Test</p>
-          </DataListItemRow>
-        </DataListItem>
-      </DataList>
-    );
+  const selectableInput = screen.getByRole('radio', { hidden: true });
 
-    expect(mock).not.toHaveBeenCalled();
-  });
-
-  test('Item applies selectableInputAriaLabel to the hidden input', () => {
-    render(
-      <DataList aria-label="this is a simple list" onSelectableRowChange={() => {}}>
-        <DataListItem selectableInputAriaLabel="Data list item label test">
-          <DataListItemRow aria-labelledby="test-id">
-            <p id="test-id">Test</p>
-          </DataListItemRow>
-        </DataListItem>
-      </DataList>
-    );
+  expect(selectableInput).toBeInTheDocument();
+});
 
-    const selectableInput = screen.getByRole('radio', { hidden: true });
+test('Does not render with a hidden input to improve a11y when onSelectableRowChange is not passed', () => {
+  render(
+    <DataList aria-label="this is a simple list">
+      <DataListItem>
+        <DataListItemRow aria-labelledby="test-id">
+          <p id="test-id">Test</p>
+        </DataListItemRow>
+      </DataListItem>
+    </DataList>
+  );
 
-    expect(selectableInput).toHaveAccessibleName('Data list item label test');
-  });
+  const selectableInput = screen.queryByRole('radio', { hidden: true });
 
-  test('Item defaults to labelling its input using its aria-labelledby prop', () => {
-    render(
-      <DataList aria-label="this is a simple list" onSelectableRowChange={() => {}}>
-        <DataListItem aria-labelledby="test-id">
-          <p id="test-id">Test cell content</p>
-        </DataListItem>
-      </DataList>
-    );
+  expect(selectableInput).not.toBeInTheDocument();
+});
 
-    const selectableInput = screen.getByRole('radio', { hidden: true });
+test('Calls onSelectableRowChange when the selectable input changes', async () => {
+  const mock = jest.fn();
+  const user = userEvent.setup();
 
-    expect(selectableInput).toHaveAccessibleName('Test cell content');
-  });
+  render(
+    <DataList aria-label="this is a simple list" onSelectableRowChange={mock} selectedDataListItemId="">
+      <DataListItem id="item-test-id">
+        <DataListItemRow aria-labelledby="test-id">
+          <p id="test-id">Test</p>
+        </DataListItemRow>
+      </DataListItem>
+    </DataList>
+  );
 
-  test('Item prioritizes selectableInputAriaLabel over aria-labelledby prop', () => {
-    render(
-      <DataList aria-label="this is a simple list" onSelectableRowChange={() => {}}>
-        <DataListItem aria-labelledby="test-id" selectableInputAriaLabel="Data list item label test">
-          <p id="test-id">Test cell content</p>
-        </DataListItem>
-      </DataList>
-    );
+  const selectableInput = screen.getByRole('radio', { hidden: true });
+  await user.click(selectableInput);
 
-    const selectableInput = screen.getByRole('radio', { hidden: true });
+  expect(mock).toHaveBeenCalled();
+});
 
-    expect(selectableInput).toHaveAccessibleName('Data list item label test');
-  });
+test('Does not call onSelectableRowChange when the selectable input is not changed', () => {
+  const mock = jest.fn();
 
-  test('Item default', () => {
-    const { asFragment } = render(
-      <DataListItem key="item-id-1" aria-labelledby="item-1">
-        test
+  render(
+    <DataList aria-label="this is a simple list" onSelectableRowChange={mock} selectedDataListItemId="">
+      <DataListItem id="item-test-id">
+        <DataListItemRow aria-labelledby="test-id">
+          <p id="test-id">Test</p>
+        </DataListItemRow>
       </DataListItem>
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
+    </DataList>
+  );
 
-  test('Item expanded', () => {
-    render(
-      <DataListItem aria-labelledby="item-1" isExpanded>
-        test
-      </DataListItem>
-    );
-    expect(screen.getByRole('listitem')).toHaveClass(`${styles.dataListItem} ${styles.modifiers.expanded}`);
-  });
+  expect(mock).not.toHaveBeenCalled();
+});
 
-  test('Item', () => {
-    const { asFragment } = render(
-      <DataListItem className="data-list-item-custom" aria-labelledby="item-1">
-        test
+test('Applies selectableInputAriaLabel to the hidden input', () => {
+  render(
+    <DataList aria-label="this is a simple list" onSelectableRowChange={() => {}}>
+      <DataListItem selectableInputAriaLabel="Data list item label test">
+        <DataListItemRow aria-labelledby="test-id">
+          <p id="test-id">Test</p>
+        </DataListItemRow>
       </DataListItem>
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('item row default', () => {
-    const { asFragment } = render(<DataListItemRow>test</DataListItemRow>);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('Cell default', () => {
-    const { asFragment } = render(<DataListCell>Secondary</DataListCell>);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('Cells', () => {
-    const { asFragment } = render(
-      <DataListItemCells
-        dataListCells={[
-          <DataListCell key="list-id-1" id="primary-item" className="data-list-custom">
-            Primary Id
-          </DataListCell>,
-          <DataListCell key="list-id-2" id="primary-item" className="data-list-custom">
-            Primary Id 2
-          </DataListCell>
-        ]}
-      />
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('Cell with width modifier', () => {
-    [
-      { width: 1, class: '' },
-      { width: 2, class: 'pf-m-flex-2' },
-      { width: 3, class: 'pf-m-flex-3' },
-      { width: 4, class: 'pf-m-flex-4' },
-      { width: 5, class: 'pf-m-flex-5' }
-    ].forEach((testCase, index) => {
-      const testId = `cell-test-id-${index}`;
-
-      render(
-        <DataListCell data-testid={testId} width={testCase.width as any} key={index}>
-          Primary Id
-        </DataListCell>
-      );
-
-      const dataListCell = screen.getByTestId(testId);
-
-      testCase.class === ''
-        ? expect(dataListCell).toHaveClass(styles.dataListCell)
-        : expect(dataListCell).toHaveClass(`${styles.dataListCell} ${testCase.class}`);
-    });
-  });
+    </DataList>
+  );
 
-  test('Cell with text modifiers', () => {
-    [
-      { wrapModifier: null as any, class: '' },
-      { wrapModifier: 'breakWord', class: 'pf-m-break-word' },
-      { wrapModifier: 'nowrap', class: 'pf-m-nowrap' },
-      { wrapModifier: 'truncate', class: 'pf-m-truncate' }
-    ].forEach((testCase, index) => {
-      const testId = `cell-test-id-${index}`;
-
-      render(
-        <DataListCell data-testid={testId} wrapModifier={testCase.wrapModifier} key={index}>
-          Primary Id
-        </DataListCell>
-      );
-
-      const dataListCell = screen.getByTestId(testId);
-
-      testCase.class === ''
-        ? expect(dataListCell).toHaveClass(styles.dataListCell)
-        : expect(dataListCell).toHaveClass(`${styles.dataListCell} ${testCase.class}`);
-    });
-  });
-
-  test('Toggle default with aria label', () => {
-    render(<DataListToggle aria-label="Toggle details for" id="ex-toggle2" />);
+  const selectableInput = screen.getByRole('radio', { hidden: true });
 
-    expect(screen.getByRole('button')).not.toHaveAttribute('aria-labelledby');
-    expect(screen.getByRole('button')).toHaveAttribute('aria-label', 'Toggle details for');
-    expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'false');
-  });
+  expect(selectableInput).toHaveAccessibleName('Data list item label test');
+});
 
-  test('Toggle expanded', () => {
-    render(<DataListToggle aria-label="Toggle details for" id="ex-toggle2" isExpanded />);
-    expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'true');
-  });
+test('Defaults to labelling its input using its aria-labelledby prop', () => {
+  render(
+    <DataList aria-label="this is a simple list" onSelectableRowChange={() => {}}>
+      <DataListItem aria-labelledby="test-id">
+        <p id="test-id">Test cell content</p>
+      </DataListItem>
+    </DataList>
+  );
 
-  test('DataListAction dropdown', () => {
-    const { asFragment } = render(
-      <DataListAction aria-label="Actions" aria-labelledby="ex-action" id="ex-action" isPlainButtonAction>
-        <Dropdown toggle={(toggleRef) => <MenuToggle ref={toggleRef} />}>
-          <DropdownList>
-            <DropdownItem onClick={jest.fn()} key="action-1">
-              action-1
-            </DropdownItem>
-            ,
-            <DropdownItem onClick={jest.fn()} key="action-2">
-              action-2
-            </DropdownItem>
-          </DropdownList>
-        </Dropdown>
-      </DataListAction>
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
+  const selectableInput = screen.getByRole('radio', { hidden: true });
 
-  test('DataListAction button', () => {
-    const { asFragment } = render(
-      <DataListAction aria-label="Actions" aria-labelledby="ex-action" id="ex-action">
-        <Button id="delete-item-1">Delete</Button>
-      </DataListAction>
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('DataListAction visibility - show button when lg', () => {
-    render(
-      <DataListAction
-        visibility={{ default: 'hidden', lg: 'visible' }}
-        aria-labelledby="check-action-item2 check-action-action2"
-        id="check-action-action2"
-        aria-label="Actions"
-      >
-        <Button variant="primary">Primary</Button>
-      </DataListAction>
-    );
-
-    expect(screen.getByRole('button').parentElement).toHaveClass('pf-m-hidden');
-    expect(screen.getByRole('button').parentElement).toHaveClass('pf-m-visible-on-lg');
-  });
+  expect(selectableInput).toHaveAccessibleName('Test cell content');
+});
 
-  test('DataListAction visibility - hide button on 2xl', () => {
-    render(
-      <DataListAction
-        visibility={{ '2xl': 'hidden' }}
-        aria-labelledby="check-action-item2 check-action-action2"
-        id="check-action-action2"
-        aria-label="Actions"
-      >
-        <Button variant="primary">Primary</Button>
-      </DataListAction>
-    );
-
-    expect(screen.getByRole('button').parentElement).toHaveClass('pf-m-hidden-on-2xl');
-  });
+test('Prioritizes selectableInputAriaLabel over aria-labelledby prop', () => {
+  render(
+    <DataList aria-label="this is a simple list" onSelectableRowChange={() => {}}>
+      <DataListItem aria-labelledby="test-id" selectableInputAriaLabel="Data list item label test">
+        <p id="test-id">Test cell content</p>
+      </DataListItem>
+    </DataList>
+  );
 
-  test('DataListContent', () => {
-    const { asFragment } = render(<DataListContent aria-label="Primary Content Details"> test</DataListContent>);
-    expect(asFragment()).toMatchSnapshot();
-  });
+  const selectableInput = screen.getByRole('radio', { hidden: true });
 
-  test('DataListContent hasNoPadding', () => {
-    const { asFragment } = render(
-      <DataListContent aria-label="Primary Content Details" hidden hasNoPadding>
-        test
-      </DataListContent>
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
+  expect(selectableInput).toHaveAccessibleName('Data list item label test');
 });