From 41767ea8f19264d8026f06dd4c3ebf0e572a8972 Mon Sep 17 00:00:00 2001
From: Katie McFaul <kmcfaul@redhat.com>
Date: Thu, 13 Oct 2022 10:34:20 -0400
Subject: [PATCH 1/3] feat(DataList): pass button props to toggle

---
 .../components/DataList/DataListToggle.tsx    |   6 +-
 .../components/DataList/examples/DataList.md  |   5 +
 .../examples/DataListMixedExpandable.tsx      | 234 ++++++++++++++++++
 3 files changed, 244 insertions(+), 1 deletion(-)
 create mode 100644 packages/react-core/src/components/DataList/examples/DataListMixedExpandable.tsx

diff --git a/packages/react-core/src/components/DataList/DataListToggle.tsx b/packages/react-core/src/components/DataList/DataListToggle.tsx
index 8483126bfd7..65e7403d439 100644
--- a/packages/react-core/src/components/DataList/DataListToggle.tsx
+++ b/packages/react-core/src/components/DataList/DataListToggle.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import styles from '@patternfly/react-styles/css/components/DataList/data-list';
-import { Button, ButtonVariant } from '../Button';
+import { Button, ButtonProps, ButtonVariant } from '../Button';
 
 export interface DataListToggleProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional classes added to the DataList cell */
@@ -19,6 +19,8 @@ export interface DataListToggleProps extends React.HTMLProps<HTMLDivElement> {
   'aria-label'?: string;
   /** Allows users of some screen readers to shift focus to the controlled element. Should be used when the controlled contents are not adjacent to the toggle that controls them. */
   'aria-controls'?: string;
+  /** Additional properties spread to the toggle button */
+  buttonProps?: ButtonProps;
 }
 
 export const DataListToggle: React.FunctionComponent<DataListToggleProps> = ({
@@ -28,6 +30,7 @@ export const DataListToggle: React.FunctionComponent<DataListToggleProps> = ({
   'aria-label': ariaLabel = 'Details',
   rowid = '',
   id,
+  buttonProps,
   ...props
 }: DataListToggleProps) => (
   <div className={css(styles.dataListItemControl, className)} {...props}>
@@ -39,6 +42,7 @@ export const DataListToggle: React.FunctionComponent<DataListToggleProps> = ({
         aria-label={ariaLabel}
         aria-labelledby={ariaLabel !== 'Details' ? null : `${rowid} ${id}`}
         aria-expanded={isExpanded}
+        {...buttonProps}
       >
         <div className={css(styles.dataListToggleIcon)}>
           <AngleRightIcon />
diff --git a/packages/react-core/src/components/DataList/examples/DataList.md b/packages/react-core/src/components/DataList/examples/DataList.md
index eac2790902c..f5cce7548c0 100644
--- a/packages/react-core/src/components/DataList/examples/DataList.md
+++ b/packages/react-core/src/components/DataList/examples/DataList.md
@@ -51,6 +51,11 @@ import { css } from '@patternfly/react-styles';
 ```ts file="./DataListExpandable.tsx"
 ```
 
+### Mixed expandable
+
+```ts file="./DataListMixedExpandable.tsx"
+```
+
 ### Width modifiers
 
 ```ts file="./DataListWidthModifiers.tsx"
diff --git a/packages/react-core/src/components/DataList/examples/DataListMixedExpandable.tsx b/packages/react-core/src/components/DataList/examples/DataListMixedExpandable.tsx
new file mode 100644
index 00000000000..7b1abb7322e
--- /dev/null
+++ b/packages/react-core/src/components/DataList/examples/DataListMixedExpandable.tsx
@@ -0,0 +1,234 @@
+import React from 'react';
+import {
+  DataList,
+  DataListItem,
+  DataListItemRow,
+  DataListCell,
+  DataListAction,
+  DataListToggle,
+  DataListContent,
+  DataListItemCells,
+  Dropdown,
+  DropdownItem,
+  DropdownPosition,
+  KebabToggle
+} from '@patternfly/react-core';
+import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
+
+export const DataListMixedExpandable: React.FunctionComponent = () => {
+  const [isOpen1, setIsOpen1] = React.useState(false);
+  const [isOpen2, setIsOpen2] = React.useState(false);
+  const [isOpen3, setIsOpen3] = React.useState(false);
+  const [expanded, setExpanded] = React.useState(['m-ex-toggle1', 'm-ex-toggle3']);
+
+  const onToggle1 = isOpen1 => {
+    setIsOpen1(isOpen1);
+  };
+
+  const onSelect1 = () => {
+    setIsOpen1(!isOpen1);
+  };
+
+  const onToggle2 = isOpen2 => {
+    setIsOpen2(isOpen2);
+  };
+
+  const onSelect2 = () => {
+    setIsOpen2(!isOpen2);
+  };
+
+  const onToggle3 = isOpen3 => {
+    setIsOpen3(isOpen3);
+  };
+
+  const onSelect3 = () => {
+    setIsOpen3(!isOpen3);
+  };
+
+  const toggle = id => {
+    const index = expanded.indexOf(id);
+    const newExpanded =
+      index >= 0 ? [...expanded.slice(0, index), ...expanded.slice(index + 1, expanded.length)] : [...expanded, id];
+    setExpanded(newExpanded);
+  };
+
+  return (
+    <React.Fragment>
+      <DataList aria-label="Expandable data list example">
+        <DataListItem aria-labelledby="m-ex-item1" isExpanded={expanded.includes('m-ex-toggle1')}>
+          <DataListItemRow>
+            <DataListToggle
+              onClick={() => toggle('m-ex-toggle1')}
+              isExpanded={expanded.includes('m-ex-toggle1')}
+              id="m-ex-toggle1"
+              aria-controls="m-ex-expand1"
+            />
+            <DataListItemCells
+              dataListCells={[
+                <DataListCell isIcon key="icon">
+                  <CodeBranchIcon />
+                </DataListCell>,
+                <DataListCell key="primary content">
+                  <div id="m-ex-item1">Primary content</div>
+                  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
+                  <a href="#">link</a>
+                </DataListCell>,
+                <DataListCell key="secondary content">
+                  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
+                </DataListCell>,
+                <DataListCell key="secondary content 2">
+                  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
+                </DataListCell>
+              ]}
+            />
+            <DataListAction
+              aria-labelledby="m-ex-item1 m-ex-action1"
+              id="m-ex-action1"
+              aria-label="Actions"
+              isPlainButtonAction
+            >
+              <Dropdown
+                isPlain
+                position={DropdownPosition.right}
+                isOpen={isOpen1}
+                onSelect={onSelect1}
+                toggle={<KebabToggle onToggle={onToggle1} />}
+                dropdownItems={[
+                  <DropdownItem key="link">Link</DropdownItem>,
+                  <DropdownItem key="action" component="button">
+                    Action
+                  </DropdownItem>,
+                  <DropdownItem key="disabled link" isDisabled>
+                    Disabled Link
+                  </DropdownItem>
+                ]}
+              />
+            </DataListAction>
+          </DataListItemRow>
+          <DataListContent
+            aria-label="First expandable content details"
+            id="m-ex-expand1"
+            isHidden={!expanded.includes('m-ex-toggle1')}
+          >
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
+              dolore magna aliqua.
+            </p>
+          </DataListContent>
+        </DataListItem>
+        <DataListItem aria-labelledby="m-ex-item2">
+          <DataListItemRow>
+            <DataListToggle
+              id="m-ex-toggle2"
+              buttonProps={{
+                disabled: true,
+                'aria-hidden': 'true',
+                style: { visibility: 'hidden' }
+              }}
+            />
+            <DataListItemCells
+              dataListCells={[
+                <DataListCell isIcon key="icon">
+                  <CodeBranchIcon />
+                </DataListCell>,
+                <DataListCell key="secondary content">
+                  <div id="ex-item2">Secondary content</div>
+                  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
+                </DataListCell>,
+                <DataListCell key="secondary content 2">
+                  <span>Lorem ipsum dolor sit amet.</span>
+                </DataListCell>,
+                <DataListCell key="secondary content3">
+                  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
+                </DataListCell>
+              ]}
+            />
+            <DataListAction
+              aria-labelledby="mex-item2 mex-action2"
+              id="mex-action2"
+              aria-label="Actions"
+              isPlainButtonAction
+            >
+              <Dropdown
+                isPlain
+                position={DropdownPosition.right}
+                isOpen={isOpen2}
+                onSelect={onSelect2}
+                toggle={<KebabToggle onToggle={onToggle2} />}
+                dropdownItems={[
+                  <DropdownItem key="link">Link</DropdownItem>,
+                  <DropdownItem key="action" component="button">
+                    Action
+                  </DropdownItem>,
+                  <DropdownItem key="disabled link" isDisabled>
+                    Disabled Link
+                  </DropdownItem>
+                ]}
+              />
+            </DataListAction>
+          </DataListItemRow>
+        </DataListItem>
+        <DataListItem aria-labelledby="m-ex-item3" isExpanded={expanded.includes('m-ex-toggle3')}>
+          <DataListItemRow>
+            <DataListToggle
+              onClick={() => toggle('m-ex-toggle3')}
+              isExpanded={expanded.includes('m-ex-toggle3')}
+              id="m-ex-toggle3"
+              aria-controls="m-ex-expand3"
+            />
+            <DataListItemCells
+              dataListCells={[
+                <DataListCell isIcon key="icon">
+                  <CodeBranchIcon />
+                </DataListCell>,
+                <DataListCell key="tertiary content">
+                  <div id="ex-item3">Tertiary content</div>
+                  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
+                </DataListCell>,
+                <DataListCell key="secondary content">
+                  <span>Lorem ipsum dolor sit amet.</span>
+                </DataListCell>,
+                <DataListCell key="secondary content 2">
+                  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
+                </DataListCell>
+              ]}
+            />
+            <DataListAction
+              aria-labelledby="m-ex-item3 m-ex-action3"
+              id="m-ex-action3"
+              aria-label="Actions"
+              isPlainButtonAction
+            >
+              <Dropdown
+                isPlain
+                position={DropdownPosition.right}
+                isOpen={isOpen3}
+                onSelect={onSelect3}
+                toggle={<KebabToggle onToggle={onToggle3} />}
+                dropdownItems={[
+                  <DropdownItem key="link">Link</DropdownItem>,
+                  <DropdownItem key="action" component="button">
+                    Action
+                  </DropdownItem>,
+                  <DropdownItem key="disabled link" isDisabled>
+                    Disabled Link
+                  </DropdownItem>
+                ]}
+              />
+            </DataListAction>
+          </DataListItemRow>
+          <DataListContent
+            aria-label="Third expandable content details"
+            id="m-ex-expand3"
+            isHidden={!expanded.includes('m-ex-toggle3')}
+          >
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
+              dolore magna aliqua.
+            </p>
+          </DataListContent>
+        </DataListItem>
+      </DataList>
+    </React.Fragment>
+  );
+};

From 91502336e1051100d2049be7ffec465aabfcb482 Mon Sep 17 00:00:00 2001
From: Katie McFaul <kmcfaul@redhat.com>
Date: Thu, 13 Oct 2022 11:41:57 -0400
Subject: [PATCH 2/3] fix duplicate id

---
 .../DataList/examples/DataListMixedExpandable.tsx      | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/react-core/src/components/DataList/examples/DataListMixedExpandable.tsx b/packages/react-core/src/components/DataList/examples/DataListMixedExpandable.tsx
index 7b1abb7322e..d1a20076106 100644
--- a/packages/react-core/src/components/DataList/examples/DataListMixedExpandable.tsx
+++ b/packages/react-core/src/components/DataList/examples/DataListMixedExpandable.tsx
@@ -54,7 +54,7 @@ export const DataListMixedExpandable: React.FunctionComponent = () => {
 
   return (
     <React.Fragment>
-      <DataList aria-label="Expandable data list example">
+      <DataList aria-label="Mixed expandable data list example">
         <DataListItem aria-labelledby="m-ex-item1" isExpanded={expanded.includes('m-ex-toggle1')}>
           <DataListItemRow>
             <DataListToggle
@@ -116,7 +116,7 @@ export const DataListMixedExpandable: React.FunctionComponent = () => {
             </p>
           </DataListContent>
         </DataListItem>
-        <DataListItem aria-labelledby="m-ex-item2">
+        <DataListItem>
           <DataListItemRow>
             <DataListToggle
               id="m-ex-toggle2"
@@ -132,7 +132,7 @@ export const DataListMixedExpandable: React.FunctionComponent = () => {
                   <CodeBranchIcon />
                 </DataListCell>,
                 <DataListCell key="secondary content">
-                  <div id="ex-item2">Secondary content</div>
+                  <div id="m-ex-item2">Secondary content</div>
                   <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
                 </DataListCell>,
                 <DataListCell key="secondary content 2">
@@ -144,8 +144,8 @@ export const DataListMixedExpandable: React.FunctionComponent = () => {
               ]}
             />
             <DataListAction
-              aria-labelledby="mex-item2 mex-action2"
-              id="mex-action2"
+              aria-labelledby="m-ex-item2 mex-action2"
+              id="m-ex-action2"
               aria-label="Actions"
               isPlainButtonAction
             >

From 90ab9c3fbdc3488844bccc2aad4260179ea7e100 Mon Sep 17 00:00:00 2001
From: Katie McFaul <kmcfaul@redhat.com>
Date: Fri, 14 Oct 2022 10:54:51 -0400
Subject: [PATCH 3/3] missed an id

---
 .../components/DataList/examples/DataListMixedExpandable.tsx  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-core/src/components/DataList/examples/DataListMixedExpandable.tsx b/packages/react-core/src/components/DataList/examples/DataListMixedExpandable.tsx
index d1a20076106..eb8989f3119 100644
--- a/packages/react-core/src/components/DataList/examples/DataListMixedExpandable.tsx
+++ b/packages/react-core/src/components/DataList/examples/DataListMixedExpandable.tsx
@@ -116,7 +116,7 @@ export const DataListMixedExpandable: React.FunctionComponent = () => {
             </p>
           </DataListContent>
         </DataListItem>
-        <DataListItem>
+        <DataListItem aria-labelledby="m-ex-item2">
           <DataListItemRow>
             <DataListToggle
               id="m-ex-toggle2"
@@ -182,7 +182,7 @@ export const DataListMixedExpandable: React.FunctionComponent = () => {
                   <CodeBranchIcon />
                 </DataListCell>,
                 <DataListCell key="tertiary content">
-                  <div id="ex-item3">Tertiary content</div>
+                  <div id="m-ex-item3">Tertiary content</div>
                   <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
                 </DataListCell>,
                 <DataListCell key="secondary content">