@patternfly/react-core 6.0.0-prerelease.9 → 6.0.0

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":"6.0.0-prerelease.8","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":"6.0.0-prerelease.23","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":"6.0.0-prerelease.8","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":"6.0.0-prerelease.23","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":"6.0.0-prerelease.8","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":"6.0.0-prerelease.23","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-prerelease.9",
+  "version": "6.0.0",
   "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",
@@ -46,15 +46,15 @@
     "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.0.0-prerelease.4",
-    "@patternfly/react-styles": "^6.0.0-prerelease.3",
-    "@patternfly/react-tokens": "^6.0.0-prerelease.3",
+    "@patternfly/react-icons": "^6.0.0",
+    "@patternfly/react-styles": "^6.0.0",
+    "@patternfly/react-tokens": "^6.0.0",
     "focus-trap": "7.6.0",
     "react-dropzone": "^14.2.3",
     "tslib": "^2.7.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.0.0-prerelease.5",
+    "@patternfly/patternfly": "6.0.0",
     "case-anything": "^2.1.13",
     "css": "^3.0.0",
     "fs-extra": "^11.2.0"
@@ -63,5 +63,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "94fcd9103ffba23af7b15272afd7b9b7740dd3b5"
+  "gitHead": "69e205707d0228544b9b45467832e11d7a46ab45"
 }

package/src/components/AboutModal/examples/AboutModal.md

@@ -1,7 +1,7 @@
 ---
 id: About modal
 section: components
-cssPrefix: pf-v5-c-about-modal-box
+cssPrefix: pf-v6-c-about-modal-box
 propComponents: ['AboutModal']
 ---
 import brandImg from '../../assets/PF-IconLogo.svg';

package/src/components/Accordion/examples/Accordion.md

@@ -1,7 +1,7 @@
 ---
 id: Accordion
 section: components
-cssPrefix: pf-v5-c-accordion
+cssPrefix: pf-v6-c-accordion
 propComponents: ['Accordion', 'AccordionItem', 'AccordionContent', 'AccordionToggle', AccordionExpandableContentBody]
 ---
 
@@ -32,4 +32,4 @@ import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-i
 ### Toggle icon at start
 
 ```ts file="./AccordionToggleIconAtStart.tsx"
-```
+```

package/src/components/ActionList/examples/ActionList.md

@@ -1,7 +1,7 @@
 ---
 id: Action list
 section: components
-cssPrefix: pf-v5-c-action-list
+cssPrefix: pf-v6-c-action-list
 propComponents: ['ActionList', 'ActionListGroup', 'ActionListItem']
 ---
 

package/src/components/Alert/examples/Alert.md

@@ -1,7 +1,7 @@
 ---
 id: Alert
 section: components
-cssPrefix: ['pf-v5-c-alert', 'pf-v5-c-alert-group']
+cssPrefix: ['pf-v6-c-alert', 'pf-v6-c-alert-group']
 propComponents: ['Alert', 'AlertGroup', 'AlertActionCloseButton', 'AlertActionLink']
 ouia: true
 ---

package/src/components/Avatar/examples/Avatar.md

@@ -1,7 +1,7 @@
 ---
 id: Avatar
 section: components
-cssPrefix: pf-v5-c-avatar
+cssPrefix: pf-v6-c-avatar
 propComponents: ['Avatar']
 ---
 

package/src/components/BackToTop/examples/BackToTop.md

@@ -1,7 +1,7 @@
 ---
 id: Back to top
 section: components
-cssPrefix: pf-v5-c-back-to-top
+cssPrefix: pf-v6-c-back-to-top
 propComponents: ['BackToTop']
 ---
 

package/src/components/Backdrop/examples/Backdrop.md

@@ -1,7 +1,7 @@
 ---
 id: Backdrop
 section: components
-cssPrefix: pf-v5-c-backdrop
+cssPrefix: pf-v6-c-backdrop
 propComponents: ['Backdrop']
 ---
 

package/src/components/BackgroundImage/examples/BackgroundImage.md

@@ -1,7 +1,7 @@
 ---
 id: Background image
 section: components
-cssPrefix: pf-v5-c-background-image
+cssPrefix: pf-v6-c-background-image
 propComponents: ['BackgroundImage']
 ---
 

package/src/components/Badge/examples/Badge.md

@@ -1,7 +1,7 @@
 ---
 id: Badge
 section: components
-cssPrefix: pf-v5-c-badge
+cssPrefix: pf-v6-c-badge
 propComponents: ['Badge']
 ---
 

package/src/components/Banner/examples/Banner.md

@@ -1,7 +1,7 @@
 ---
 id: Banner
 section: components
-cssPrefix: pf-v5-c-banner
+cssPrefix: pf-v6-c-banner
 propComponents: ['Banner']
 ---
 

package/src/components/Breadcrumb/examples/Breadcrumb.md

@@ -1,7 +1,7 @@
 ---
 id: Breadcrumb
 section: components
-cssPrefix: pf-v5-c-breadcrumb
+cssPrefix: pf-v6-c-breadcrumb
 propComponents: ['Breadcrumb', 'BreadcrumbItem', 'BreadcrumbHeading']
 ouia: true
 ---

package/src/components/Button/examples/Button.md

@@ -1,7 +1,7 @@
 ---
 id: Button
 section: components
-cssPrefix: pf-v5-c-button
+cssPrefix: pf-v6-c-button
 propComponents: ['Button', 'BadgeCountObject']
 ouia: true
 ---

package/src/components/CalendarMonth/examples/CalendarMonth.md

@@ -2,7 +2,7 @@
 id: Calendar month
 section: components
 subsection: date-and-time
-cssPrefix: pf-v5-c-calendar-month
+cssPrefix: pf-v6-c-calendar-month
 propComponents: ['CalendarMonth', 'CalendarFormat', 'CalendarMonthInlineProps']
 ---
 

package/src/components/Card/CardHeader.tsx

@@ -54,6 +54,8 @@ export interface CardHeaderSelectableActionsObject {
    * the isSelected prop on the card component instead.
    */
   isChecked?: boolean;
+  /** Flag indicating the action is hidden */
+  isHidden?: boolean;
 }
 
 export interface CardHeaderProps extends React.HTMLProps<HTMLDivElement> {
@@ -133,7 +135,8 @@ export const CardHeader: React.FunctionComponent<CardHeaderProps> = ({
 
         const SelectableCardInput = selectableActions?.variant === 'single' ? Radio : Checkbox;
         const getSelectableProps = () => ({
-          className: 'pf-m-standalone',
+          className: css('pf-m-standalone'),
+          inputClassName: css(selectableActions?.isHidden && 'pf-v6-screen-reader'),
           label: <></>,
           'aria-label': selectableActions.selectableActionAriaLabel,
           'aria-labelledby': selectableActions.selectableActionAriaLabelledby,
@@ -150,7 +153,11 @@ export const CardHeader: React.FunctionComponent<CardHeaderProps> = ({
         const getClickableProps = () => {
           const isDisabledLinkCard = isCardDisabled && isClickableLinkCard;
           const baseProps = {
-            className: css('pf-v6-c-card__clickable-action', isDisabledLinkCard && styles.modifiers.disabled),
+            className: css(
+              'pf-v6-c-card__clickable-action',
+              isDisabledLinkCard && styles.modifiers.disabled,
+              selectableActions?.isHidden && 'pf-v6-screen-reader'
+            ),
             id: selectableActions.selectableActionId,
             'aria-label': selectableActions.selectableActionAriaLabel,
             'aria-labelledby': selectableActions.selectableActionAriaLabelledby,

package/src/components/Card/examples/Card.md

@@ -1,7 +1,7 @@
 ---
 id: Card
 section: components
-cssPrefix: pf-v5-c-card
+cssPrefix: pf-v6-c-card
 propComponents:
   [
     'Card',
@@ -19,6 +19,7 @@ ouia: true
 import pfLogo from '../../assets/PF-HorizontalLogo-Color.svg';
 import pfLogoSmall from '../../assets/PF-IconLogo.svg';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
 
 ## Examples
 
@@ -178,3 +179,25 @@ Dividers can be placed between sections of the card.
 ```ts file='./CardWithDividers.tsx'
 
 ```
+
+## Cards as tiles
+
+Sets of selectable cards can be used as tiles, which are static options that users can select.
+
+They can be either single selectable or multi selectable, by passing the `variant` property to the `selectableActions` object. You can also toggle the visibility of the radio or checkbox by passing the `isHidden` property to the `selectableActions` object.
+
+### Single selectable tiles
+
+To prevent users from selecting more than 1 tile in a set, set `variant` to "single" within the `selectableActions` object of `<CardHeader>`.
+
+```ts file='./CardTile.tsx'
+
+```
+
+### Multi selectable tiles
+
+To allow users to select more than 1 tile in a set, do not set `variant` within the `selectableActions` object of `<CardHeader>`.
+
+```ts file='./CardTileMulti.tsx'
+
+```

package/src/components/Card/examples/CardTile.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { Card, CardHeader, CardBody, Gallery, Flex } from '@patternfly/react-core';
+import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
+
+export const CardTile: React.FunctionComponent = () => {
+  const [isChecked, setIsChecked] = React.useState('');
+  const id1 = 'tile-1';
+  const id2 = 'tile-2';
+  const id3 = 'tile-3';
+
+  const onChange = (event: React.FormEvent<HTMLInputElement>) => {
+    setIsChecked(event.currentTarget.id);
+  };
+
+  return (
+    <Gallery hasGutter>
+      <Card id="tile-example-1" isSelectable isSelected={isChecked === id1}>
+        <CardHeader
+          selectableActions={{
+            selectableActionId: id1,
+            selectableActionAriaLabelledby: 'tile-example-1',
+            name: id1,
+            variant: 'single',
+            onChange,
+            isHidden: true
+          }}
+        >
+          <Flex gap={{ default: 'gapSm' }} alignItems={{ default: 'alignItemsCenter' }}>
+            <PlusIcon />
+            <b>Tile header</b>
+          </Flex>
+        </CardHeader>
+        <CardBody>Tile content and description</CardBody>
+      </Card>
+      <Card id="tile-example-2" isSelectable isSelected={isChecked === id2}>
+        <CardHeader
+          selectableActions={{
+            selectableActionId: id2,
+            selectableActionAriaLabelledby: 'tile-example-2',
+            name: id2,
+            variant: 'single',
+            onChange,
+            isHidden: true
+          }}
+        >
+          <Flex gap={{ default: 'gapSm' }} alignItems={{ default: 'alignItemsCenter' }}>
+            <PlusIcon />
+            <b>Tile header</b>
+          </Flex>
+        </CardHeader>
+        <CardBody>Tile content and description</CardBody>
+      </Card>
+      <Card id="tile-example-3" isSelectable isDisabled isSelected={isChecked === id3}>
+        <CardHeader
+          selectableActions={{
+            selectableActionId: id3,
+            selectableActionAriaLabelledby: 'tile-example-3',
+            name: id3,
+            variant: 'single',
+            onChange,
+            isHidden: true
+          }}
+        >
+          <Flex gap={{ default: 'gapSm' }} alignItems={{ default: 'alignItemsCenter' }}>
+            <PlusIcon />
+            <b>Tile header (disabled)</b>
+          </Flex>
+        </CardHeader>
+        <CardBody>Tile content and description</CardBody>
+      </Card>
+    </Gallery>
+  );
+};

package/src/components/Card/examples/CardTileMulti.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import { Card, CardHeader, CardBody, Gallery, Flex } from '@patternfly/react-core';
+import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
+
+export const CardTileMulti: React.FunctionComponent = () => {
+  const [isChecked1, setIsChecked1] = React.useState(false);
+  const [isChecked2, setIsChecked2] = React.useState(false);
+  const [isChecked3, setIsChecked3] = React.useState(false);
+  const id1 = 'multi-tile-1';
+  const id2 = 'multi-tile-2';
+  const id3 = 'multi-tile-3';
+
+  const onChange = (event: React.FormEvent<HTMLInputElement>, checked: boolean) => {
+    const name = event.currentTarget.name;
+
+    switch (name) {
+      case id1:
+        setIsChecked1(checked);
+        break;
+      case id2:
+        setIsChecked2(checked);
+        break;
+      case id3:
+        setIsChecked3(checked);
+        break;
+    }
+  };
+
+  return (
+    <Gallery hasGutter>
+      <Card id="multi-tile-example-1" isSelectable isSelected={isChecked1}>
+        <CardHeader
+          selectableActions={{
+            selectableActionId: id1,
+            selectableActionAriaLabelledby: 'multi-tile-example-1',
+            name: id1,
+            onChange,
+            isHidden: true
+          }}
+        >
+          <Flex gap={{ default: 'gapSm' }} alignItems={{ default: 'alignItemsCenter' }}>
+            <PlusIcon />
+            <b>Tile header</b>
+          </Flex>
+        </CardHeader>
+        <CardBody>Tile content and description</CardBody>
+      </Card>
+      <Card id="multi-tile-example-2" isSelectable isSelected={isChecked2}>
+        <CardHeader
+          selectableActions={{
+            selectableActionId: id2,
+            selectableActionAriaLabelledby: 'multi-tile-example-2',
+            name: id2,
+            onChange,
+            isHidden: true
+          }}
+        >
+          <Flex gap={{ default: 'gapSm' }} alignItems={{ default: 'alignItemsCenter' }}>
+            <PlusIcon />
+            <b>Tile header</b>
+          </Flex>
+        </CardHeader>
+        <CardBody>Tile content and description</CardBody>
+      </Card>
+      <Card id="multi-tile-example-3" isSelectable isDisabled isSelected={isChecked3}>
+        <CardHeader
+          selectableActions={{
+            selectableActionId: id3,
+            selectableActionAriaLabelledby: 'multi-tile-example-3',
+            name: id3,
+            onChange,
+            isHidden: true
+          }}
+        >
+          <Flex gap={{ default: 'gapSm' }} alignItems={{ default: 'alignItemsCenter' }}>
+            <PlusIcon />
+            <b>Tile header (disabled)</b>
+          </Flex>
+        </CardHeader>
+        <CardBody>Tile content and description</CardBody>
+      </Card>
+    </Gallery>
+  );
+};

package/src/components/Checkbox/examples/Checkbox.md

@@ -2,7 +2,7 @@
 id: Checkbox
 section: components
 subsection: forms
-cssPrefix: pf-v5-c-check
+cssPrefix: pf-v6-c-check
 propComponents: ['Checkbox']
 ---
 

package/src/components/ClipboardCopy/examples/ClipboardCopy.md

@@ -1,7 +1,7 @@
 ---
 id: Clipboard copy
 section: components
-cssPrefix: pf-v5-c-copyclipboard
+cssPrefix: pf-v6-c-clipboard-copy
 propComponents: ['ClipboardCopy', 'ClipboardCopyButton']
 ouia: true
 ---

package/src/components/CodeBlock/examples/CodeBlock.md

@@ -1,7 +1,7 @@
 ---
 id: Code block
 section: components
-cssPrefix: pf-v5-c-code-block
+cssPrefix: pf-v6-c-code-block
 propComponents: ['CodeBlock', 'CodeBlockAction', 'CodeBlockCode']
 ---
 

package/src/components/DataList/DataListAction.tsx

@@ -23,8 +23,6 @@ export interface DataListActionProps extends Omit<React.HTMLProps<HTMLDivElement
     xl?: 'hidden' | 'visible';
     '2xl'?: 'hidden' | 'visible';
   };
-  /** Flag to indicate that the action is a plain button (e.g. kebab dropdown toggle) so that styling is applied to align the button */
-  isPlainButtonAction?: boolean;
 }
 
 export const DataListAction: React.FunctionComponent<DataListActionProps> = ({
@@ -35,12 +33,10 @@ export const DataListAction: React.FunctionComponent<DataListActionProps> = ({
   id,
   'aria-label': ariaLabel,
   'aria-labelledby': ariaLabelledBy,
-
-  isPlainButtonAction,
   ...props
 }: DataListActionProps) => (
   <div className={css(styles.dataListItemAction, formatBreakpointMods(visibility, styles), className)} {...props}>
-    {isPlainButtonAction ? <div className={css(styles.dataListAction)}>{children}</div> : children}
+    {children}
   </div>
 );
 DataListAction.displayName = 'DataListAction';

package/src/components/DataList/DataListCheck.tsx

@@ -1,8 +1,11 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/DataList/data-list';
+import { Checkbox, CheckboxProps } from '../Checkbox';
 
-export interface DataListCheckProps extends Omit<React.HTMLProps<HTMLInputElement>, 'onChange' | 'checked'> {
+export interface DataListCheckProps extends Omit<CheckboxProps, 'ref' | 'id'> {
+  /** Id of the DataList checkbox. */
+  id?: string;
   /** Additional classes added to the DataList item checkbox */
   className?: string;
   /** Flag to show if the DataList checkbox selection is valid or invalid */
@@ -32,27 +35,31 @@ export interface DataListCheckProps extends Omit<React.HTMLProps<HTMLInputElemen
 }
 
 export const DataListCheck: React.FunctionComponent<DataListCheckProps> = ({
-  className = '',
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  onChange = (event: React.FormEvent<HTMLInputElement>, checked: boolean) => {},
+  id,
+  className,
+  onChange,
   isValid = true,
   isDisabled = false,
-  isChecked = false,
-  checked = false,
+  isChecked,
+  checked,
   defaultChecked,
   otherControls = false,
   ...props
 }: DataListCheckProps) => {
+  const uniqueId = React.useId();
+
   const check = (
     <div className={css(styles.dataListCheck)}>
-      <input
-        {...props}
-        type="checkbox"
-        onChange={(event) => onChange(event, event.currentTarget.checked)}
+      <Checkbox
+        id={id ?? `datalist-check-${uniqueId}`}
+        isChecked={isChecked}
+        checked={checked}
+        defaultChecked={defaultChecked}
+        onChange={onChange}
         aria-invalid={!isValid}
-        disabled={isDisabled}
-        {...([true, false].includes(defaultChecked) && { defaultChecked })}
-        {...(![true, false].includes(defaultChecked) && { checked: isChecked || checked })}
+        isDisabled={isDisabled}
+        isLabelWrapped
+        {...props}
       />
     </div>
   );

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

@@ -1,5 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
 import { DataListAction } from '../DataListAction';
 
 import styles from '@patternfly/react-styles/css/components/DataList/data-list';
@@ -15,38 +17,35 @@ test('Renders to match snapshot', () => {
 
 test(`Renders with default class ${styles.dataListItemAction}`, () => {
   render(
-    <DataListAction aria-label="Actions" aria-labelledby="ex-action" id="ex-action">
+    <DataListAction aria-label="Actions" data-testid="actions" aria-labelledby="ex-action" id="ex-action">
       test
     </DataListAction>
   );
-  expect(screen.getByText('test')).toHaveClass(styles.dataListItemAction, { exact: true });
+  expect(screen.getByTestId('actions')).toHaveClass(styles.dataListItemAction, { exact: true });
 });
 
 test(`Renders with custom class when className is passed`, () => {
   render(
-    <DataListAction aria-label="Actions" aria-labelledby="ex-action" id="ex-action" className="test-class">
+    <DataListAction
+      aria-label="Actions"
+      data-testid="actions"
+      aria-labelledby="ex-action"
+      id="ex-action"
+      className="test-class"
+    >
       test
     </DataListAction>
   );
-  expect(screen.getByText('test')).toHaveClass('test-class');
+  expect(screen.getByTestId('actions')).toHaveClass('test-class');
 });
 
 test(`Renders with spread props`, () => {
   render(
-    <DataListAction dir="rtl" aria-label="Actions" aria-labelledby="ex-action" id="ex-action">
-      test
-    </DataListAction>
-  );
-  expect(screen.getByText('test')).toHaveAttribute('dir', 'rtl');
-});
-
-test(`Renders with class ${styles.dataListAction} when isPlainButtonAction = true`, () => {
-  render(
-    <DataListAction id="id" aria-label="Actions" aria-labelledby="ex-action" isPlainButtonAction>
+    <DataListAction dir="rtl" data-testid="actions" aria-label="Actions" aria-labelledby="ex-action" id="ex-action">
       test
     </DataListAction>
   );
-  expect(screen.getByText('test')).toHaveClass(styles.dataListAction);
+  expect(screen.getByTestId('actions')).toHaveAttribute('dir', 'rtl');
 });
 
 ['hidden', 'visible'].forEach((vis) => {
@@ -58,18 +57,19 @@ test(`Renders with class ${styles.dataListAction} when isPlainButtonAction = tru
         aria-labelledby="check-action-item2 check-action-action2"
         id="check-action-action2"
         aria-label="Actions"
+        data-testid="actions"
       >
         test
       </DataListAction>
     );
 
     if (visMod === 'hidden') {
-      expect(screen.getByText('test')).toHaveClass(styles.modifiers[`${visMod}`]);
+      expect(screen.getByTestId('actions')).toHaveClass(styles.modifiers[`${visMod}`]);
     }
-    expect(screen.getByText('test')).toHaveClass(styles.modifiers[`${visMod}OnSm`]);
-    expect(screen.getByText('test')).toHaveClass(styles.modifiers[`${visMod}OnMd`]);
-    expect(screen.getByText('test')).toHaveClass(styles.modifiers[`${visMod}OnLg`]);
-    expect(screen.getByText('test')).toHaveClass(styles.modifiers[`${visMod}OnXl`]);
-    expect(screen.getByText('test')).toHaveClass(styles.modifiers[`${visMod}On_2xl`]);
+    expect(screen.getByTestId('actions')).toHaveClass(styles.modifiers[`${visMod}OnSm`]);
+    expect(screen.getByTestId('actions')).toHaveClass(styles.modifiers[`${visMod}OnMd`]);
+    expect(screen.getByTestId('actions')).toHaveClass(styles.modifiers[`${visMod}OnLg`]);
+    expect(screen.getByTestId('actions')).toHaveClass(styles.modifiers[`${visMod}OnXl`]);
+    expect(screen.getByTestId('actions')).toHaveClass(styles.modifiers[`${visMod}On_2xl`]);
   });
 });

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

@@ -15,7 +15,9 @@ it('does not throw a "A component is changing an uncontrolled input of type chec
   const ControlledDataListCheck = () => {
     const [checked, setChecked] = React.useState(false);
 
-    return <DataListCheck isChecked={checked} onChange={() => setChecked(!checked)} aria-labelledby={'string'} />;
+    return (
+      <DataListCheck id="test" isChecked={checked} onChange={() => setChecked(!checked)} aria-labelledby={'string'} />
+    );
   };
 
   render(<ControlledDataListCheck />);

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

@@ -10,11 +10,12 @@ import {} from '../..';
 it('DataListCheck should match snapshot (auto-generated)', () => {
   const { asFragment } = render(
     <DataListCheck
+      id="test"
       className={"''"}
       isValid={true}
       isDisabled={false}
-      isChecked={null}
-      checked={null}
+      isChecked={false}
+      checked={false}
       onChange={(event: React.FormEvent<HTMLInputElement>, checked: boolean) => {}}
       aria-labelledby={'string'}
     />