feat(DataList): use Checkbox in DataListCheck (#10916)

* feat(DataList): use Checkbox in DataListCheck * rebase, make id not required and use default uniqueid, wrap label * omit id from datalistcheck props * update snap for label
patternfly · Sep 23, 2024 · bd61a94 · bd61a94
1 parent 882365d
commit bd61a94
Show file tree

Hide file tree

Showing 9 changed files with 60 additions and 30 deletions.
diff --git a/packages/react-core/src/components/DataList/DataListCheck.tsx b/packages/react-core/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>
   );

diff --git a/packages/react-core/src/components/DataList/__tests__/DataListCheck.test.tsx b/packages/react-core/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 />);

diff --git a/packages/react-core/src/components/DataList/__tests__/Generated/DataListCheck.test.tsx b/packages/react-core/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'}
     />

diff --git a/...ore/src/components/DataList/__tests__/Generated/__snapshots__/DataListCheck.test.tsx.snap b/...ore/src/components/DataList/__tests__/Generated/__snapshots__/DataListCheck.test.tsx.snap
@@ -8,11 +8,21 @@ exports[`DataListCheck should match snapshot (auto-generated) 1`] = `
     <div
       class="pf-v6-c-data-list__check"
     >
-      <input
-        aria-invalid="false"
-        aria-labelledby="string"
-        type="checkbox"
-      />
+      <label
+        class="pf-v6-c-check pf-m-standalone"
+        for="test"
+      >
+        <input
+          aria-invalid="false"
+          aria-labelledby="string"
+          class="pf-v6-c-check__input"
+          data-ouia-component-id="OUIA-Generated-Checkbox-1"
+          data-ouia-component-type="PF6/Checkbox"
+          data-ouia-safe="true"
+          id="test"
+          type="checkbox"
+        />
+      </label>
     </div>
   </div>
 </DocumentFragment>

diff --git a/packages/react-core/src/components/DataList/examples/DataListCheckboxes.tsx b/packages/react-core/src/components/DataList/examples/DataListCheckboxes.tsx
@@ -48,7 +48,7 @@ export const DataListCheckboxes: React.FunctionComponent = () => {
     <DataList aria-label="Checkbox and action data list example">
       <DataListItem aria-labelledby="check-action-item1">
         <DataListItemRow>
-          <DataListCheck aria-labelledby="check-action-item1" name="check-action-check1" />
+          <DataListCheck id="check-item1" aria-labelledby="check-action-item1" name="check-action-check1" />
           <DataListItemCells
             dataListCells={[
               <DataListCell key="primary content">
@@ -112,7 +112,7 @@ export const DataListCheckboxes: React.FunctionComponent = () => {
       </DataListItem>
       <DataListItem aria-labelledby="check-action-item2">
         <DataListItemRow>
-          <DataListCheck aria-labelledby="check-action-item2" name="check-action-check2" />
+          <DataListCheck id="check-item2" aria-labelledby="check-action-item2" name="check-action-check2" />
           <DataListItemCells
             dataListCells={[
               <DataListCell key="primary content">
@@ -177,7 +177,7 @@ export const DataListCheckboxes: React.FunctionComponent = () => {
       </DataListItem>
       <DataListItem aria-labelledby="check-action-item3">
         <DataListItemRow>
-          <DataListCheck aria-labelledby="check-action-item3" name="check-action-check3" />
+          <DataListCheck id="check-item3" aria-labelledby="check-action-item3" name="check-action-check3" />
           <DataListItemCells
             dataListCells={[
               <DataListCell key="primary content">

diff --git a/packages/react-core/src/components/DataList/examples/DataListDraggable.tsx b/packages/react-core/src/components/DataList/examples/DataListDraggable.tsx
@@ -76,7 +76,12 @@ export const DataListDraggable: React.FunctionComponent = () => {
                       aria-describedby={`description-${uniqueId}`}
                       aria-pressed="false"
                     />
-                    <DataListCheck aria-labelledby={`draggable-${id}`} name={id} otherControls />
+                    <DataListCheck
+                      id={`check-draggable-${id}`}
+                      aria-labelledby={`draggable-${id}`}
+                      name={id}
+                      otherControls
+                    />
                   </DataListControl>
                   <DataListItemCells
                     dataListCells={[

diff --git a/packages/react-core/src/components/DataList/examples/DataListWidthModifiers.tsx b/packages/react-core/src/components/DataList/examples/DataListWidthModifiers.tsx
@@ -48,7 +48,7 @@ export const DataListWidthModifiers: React.FunctionComponent = () => {
         <DataList aria-label="Width modifier data list example 1">
           <DataListItem aria-labelledby="width-ex1-item1">
             <DataListItemRow>
-              <DataListCheck aria-labelledby="width-ex1-item1" name="width-ex1-item1" />
+              <DataListCheck id="check-width-ex1-item1" aria-labelledby="width-ex1-item1" name="width-ex1-item1" />
               <DataListItemCells
                 dataListCells={[
                   <DataListCell key="default">
@@ -75,7 +75,7 @@ export const DataListWidthModifiers: React.FunctionComponent = () => {
         <DataList aria-label="Width modifier data list example 2">
           <DataListItem aria-labelledby="width-ex2-item1">
             <DataListItemRow>
-              <DataListCheck aria-labelledby="width-ex2-item1" name="width-ex2-item1" />
+              <DataListCheck id="check-width-ex2-item1" aria-labelledby="width-ex2-item1" name="width-ex2-item1" />
               <DataListItemCells
                 dataListCells={[
                   <DataListCell width={2} key="width 2">
@@ -149,7 +149,7 @@ export const DataListWidthModifiers: React.FunctionComponent = () => {
                 aria-controls="width-ex3-expand1"
                 onClick={() => setShow(!show)}
               />
-              <DataListCheck aria-labelledby="width-ex3-item1" name="width-ex3-item1" />
+              <DataListCheck id="check-width-ex3-item1" aria-labelledby="width-ex3-item1" name="width-ex3-item1" />
               <DataListItemCells
                 dataListCells={[
                   <DataListCell width={5} key="width 5">

diff --git a/packages/react-drag-drop/src/components/DragDrop/examples/DataListDraggable.tsx b/packages/react-drag-drop/src/components/DragDrop/examples/DataListDraggable.tsx
@@ -8,7 +8,7 @@ const getItems = (count: number): DraggableObject[] =>
     content: (
       <>
         <DataListControl>
-          <DataListCheck aria-labelledby={`item-${idx}`} name={`item-${idx}`} otherControls />
+          <DataListCheck id={`check-drag-${idx}`} aria-labelledby={`item-${idx}`} name={`item-${idx}`} otherControls />
         </DataListControl>
         <DataListItemCells
           dataListCells={[

diff --git a/packages/react-drag-drop/src/components/DragDrop/examples/DragDropContainerDataList.tsx b/packages/react-drag-drop/src/components/DragDrop/examples/DragDropContainerDataList.tsx
@@ -16,7 +16,12 @@ const getItems = (from: number, count: number): DraggableObject[] =>
     content: (
       <>
         <DataListControl>
-          <DataListCheck aria-labelledby={`item-${idx}`} name={`item-${idx}`} otherControls />
+          <DataListCheck
+            id={`check-dragdrop=${idx}`}
+            aria-labelledby={`item-${idx}`}
+            name={`item-${idx}`}
+            otherControls
+          />
         </DataListControl>
         <DataListItemCells
           dataListCells={[