From fa70ba44efe40f87aeae52eb4173c918a498f1fa Mon Sep 17 00:00:00 2001
From: ajaypratap003 <ajay.pratap233@gmail.com>
Date: Fri, 5 Apr 2024 15:46:18 +0530
Subject: [PATCH 1/3] add DataList actions demo

---
 .../DataList/examples/DataListActions.tsx     | 136 ++++++++++++++++++
 packages/react-core/src/demos/DataListDemo.md |   5 +
 2 files changed, 141 insertions(+)
 create mode 100644 packages/react-core/src/demos/DataList/examples/DataListActions.tsx

diff --git a/packages/react-core/src/demos/DataList/examples/DataListActions.tsx b/packages/react-core/src/demos/DataList/examples/DataListActions.tsx
new file mode 100644
index 00000000000..9a642523254
--- /dev/null
+++ b/packages/react-core/src/demos/DataList/examples/DataListActions.tsx
@@ -0,0 +1,136 @@
+import React from 'react';
+import {
+  Button,
+  DataList,
+  DataListItem,
+  DataListCell,
+  DataListItemRow,
+  DataListItemCells,
+  DataListAction,
+  Dropdown,
+  DropdownList,
+  DropdownItem,
+  MenuToggle,
+  MenuToggleElement,
+  PageSection,
+  PageSectionVariants,
+  TextContent,
+  Text
+} from '@patternfly/react-core';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
+
+export const DataListActions: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [isDeleted, setIsDeleted] = React.useState(false);
+
+  const onToggle = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const onSelect = () => {
+    setIsOpen(!isOpen);
+  };
+
+  return (
+    <React.Fragment>
+      <DashboardWrapper mainContainerId="main-content-datalist-view-actions" breadcrumb={null}>
+        <PageSection variant={PageSectionVariants.light}>
+          <TextContent>
+            <Text component="h1">Projects</Text>
+            <Text component="p">This is a demo that showcases PatternFly Data List</Text>
+          </TextContent>
+        </PageSection>
+        <DataList aria-label="single action data list example ">
+          {!isDeleted && (
+            <DataListItem aria-labelledby="single-action-item1">
+              <DataListItemRow>
+                <DataListItemCells
+                  dataListCells={[
+                    <DataListCell key="primary content">
+                      <span id="single-action-item1">Single actionable Primary content</span>
+                    </DataListCell>,
+                    <DataListCell key="secondary content">Single actionable Secondary content</DataListCell>
+                  ]}
+                />
+                <DataListAction
+                  aria-labelledby="single-action-item1 single-action-action1"
+                  id="single-action-action1"
+                  aria-label="Actions"
+                >
+                  <Button
+                    onClick={() => {
+                      if (confirm('Are you sure?')) {
+                        setIsDeleted(true);
+                      }
+                    }}
+                    variant="primary"
+                    key="delete-action"
+                  >
+                    Delete
+                  </Button>
+                </DataListAction>
+              </DataListItemRow>
+            </DataListItem>
+          )}
+          <DataListItem aria-labelledby="multi-actions-item1">
+            <DataListItemRow>
+              <DataListItemCells
+                dataListCells={[
+                  <DataListCell key="primary content">
+                    <span id="multi-actions-item1">Multi actions Primary content</span>
+                  </DataListCell>,
+                  <DataListCell key="secondary content">Multi actions Secondary content</DataListCell>
+                ]}
+              />
+              <DataListAction
+                aria-labelledby="multi-actions-item1 multi-actions-action1"
+                id="multi-actions-action1"
+                aria-label="Actions"
+                isPlainButtonAction
+              >
+                <Dropdown
+                  popperProps={{ position: 'right' }}
+                  onSelect={onSelect}
+                  toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                    <MenuToggle
+                      ref={toggleRef}
+                      isExpanded={isOpen}
+                      onClick={onToggle}
+                      variant="plain"
+                      aria-label="Data list with actions example kebab toggle"
+                    >
+                      <EllipsisVIcon aria-hidden="true" />
+                    </MenuToggle>
+                  )}
+                  isOpen={isOpen}
+                  onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
+                >
+                  <DropdownList>
+                    <DropdownItem key="action">Action</DropdownItem>
+                    {/* Prevent default onClick functionality for example
+                  purposes */}
+                    <DropdownItem key="link" to="#" onClick={(event: any) => event.preventDefault()}>
+                      Link
+                    </DropdownItem>
+                    <DropdownItem key="disabled action" isDisabled>
+                      Disabled Action
+                    </DropdownItem>
+                    <DropdownItem
+                      key="disabled link"
+                      isDisabled
+                      to="#"
+                      onClick={(event: any) => event.preventDefault()}
+                    >
+                      Disabled Link
+                    </DropdownItem>
+                  </DropdownList>
+                </Dropdown>
+              </DataListAction>
+            </DataListItemRow>
+          </DataListItem>
+        </DataList>
+      </DashboardWrapper>
+    </React.Fragment>
+  );
+};
diff --git a/packages/react-core/src/demos/DataListDemo.md b/packages/react-core/src/demos/DataListDemo.md
index b156dc8c192..499c9ee2b29 100644
--- a/packages/react-core/src/demos/DataListDemo.md
+++ b/packages/react-core/src/demos/DataListDemo.md
@@ -28,3 +28,8 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard
 
 ```js file="./DataList/examples/DataListExpandableControlInToolbar.tsx" isFullscreen
 ```
+
+### Actions: single and multiple
+
+```js file="./DataList/examples/DataListActions.tsx" isFullscreen
+```

From b1b296f25bd659e6e5a72bf30ed69ed4247d2e49 Mon Sep 17 00:00:00 2001
From: ajaypratap003 <ajay.pratap233@gmail.com>
Date: Wed, 24 Apr 2024 16:39:26 +0530
Subject: [PATCH 2/3] implement review comments

---
 .../DataList/examples/DataListActions.tsx     | 164 +++++++++---------
 packages/react-core/src/demos/DataListDemo.md |   2 +-
 2 files changed, 80 insertions(+), 86 deletions(-)

diff --git a/packages/react-core/src/demos/DataList/examples/DataListActions.tsx b/packages/react-core/src/demos/DataList/examples/DataListActions.tsx
index 9a642523254..97fc2f4ac72 100644
--- a/packages/react-core/src/demos/DataList/examples/DataListActions.tsx
+++ b/packages/react-core/src/demos/DataList/examples/DataListActions.tsx
@@ -19,6 +19,7 @@ import {
 } from '@patternfly/react-core';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
+import { Title } from '../../../../dist/js/components';
 
 export const DataListActions: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
@@ -33,104 +34,97 @@ export const DataListActions: React.FunctionComponent = () => {
   };
 
   return (
-    <React.Fragment>
-      <DashboardWrapper mainContainerId="main-content-datalist-view-actions" breadcrumb={null}>
-        <PageSection variant={PageSectionVariants.light}>
-          <TextContent>
-            <Text component="h1">Projects</Text>
-            <Text component="p">This is a demo that showcases PatternFly Data List</Text>
-          </TextContent>
-        </PageSection>
-        <DataList aria-label="single action data list example ">
-          {!isDeleted && (
-            <DataListItem aria-labelledby="single-action-item1">
-              <DataListItemRow>
-                <DataListItemCells
-                  dataListCells={[
-                    <DataListCell key="primary content">
-                      <span id="single-action-item1">Single actionable Primary content</span>
-                    </DataListCell>,
-                    <DataListCell key="secondary content">Single actionable Secondary content</DataListCell>
-                  ]}
-                />
-                <DataListAction
-                  aria-labelledby="single-action-item1 single-action-action1"
-                  id="single-action-action1"
-                  aria-label="Actions"
-                >
-                  <Button
-                    onClick={() => {
-                      if (confirm('Are you sure?')) {
-                        setIsDeleted(true);
-                      }
-                    }}
-                    variant="primary"
-                    key="delete-action"
-                  >
-                    Delete
-                  </Button>
-                </DataListAction>
-              </DataListItemRow>
-            </DataListItem>
-          )}
-          <DataListItem aria-labelledby="multi-actions-item1">
+    <DashboardWrapper mainContainerId="main-content-datalist-view-actions" breadcrumb={null}>
+      <PageSection variant={PageSectionVariants.light}>
+        <TextContent>
+          <Title headingLevel="h1">Projects</Title>
+          <Text component="p">This is a demo that showcases PatternFly Data List</Text>
+        </TextContent>
+      </PageSection>
+      <DataList aria-label="single action data list example ">
+        {!isDeleted && (
+          <DataListItem aria-labelledby="single-action-item1">
             <DataListItemRow>
               <DataListItemCells
                 dataListCells={[
                   <DataListCell key="primary content">
-                    <span id="multi-actions-item1">Multi actions Primary content</span>
+                    <span id="single-action-item1">Single actionable Primary content</span>
                   </DataListCell>,
-                  <DataListCell key="secondary content">Multi actions Secondary content</DataListCell>
+                  <DataListCell key="secondary content">Single actionable Secondary content</DataListCell>
                 ]}
               />
               <DataListAction
-                aria-labelledby="multi-actions-item1 multi-actions-action1"
-                id="multi-actions-action1"
+                aria-labelledby="single-action-item1 single-action-action1"
+                id="single-action-action1"
                 aria-label="Actions"
-                isPlainButtonAction
               >
-                <Dropdown
-                  popperProps={{ position: 'right' }}
-                  onSelect={onSelect}
-                  toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
-                    <MenuToggle
-                      ref={toggleRef}
-                      isExpanded={isOpen}
-                      onClick={onToggle}
-                      variant="plain"
-                      aria-label="Data list with actions example kebab toggle"
-                    >
-                      <EllipsisVIcon aria-hidden="true" />
-                    </MenuToggle>
-                  )}
-                  isOpen={isOpen}
-                  onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
+                <Button
+                  onClick={() => {
+                    if (confirm('Are you sure?')) {
+                      setIsDeleted(true);
+                    }
+                  }}
+                  variant="primary"
+                  key="delete-action"
                 >
-                  <DropdownList>
-                    <DropdownItem key="action">Action</DropdownItem>
-                    {/* Prevent default onClick functionality for example
-                  purposes */}
-                    <DropdownItem key="link" to="#" onClick={(event: any) => event.preventDefault()}>
-                      Link
-                    </DropdownItem>
-                    <DropdownItem key="disabled action" isDisabled>
-                      Disabled Action
-                    </DropdownItem>
-                    <DropdownItem
-                      key="disabled link"
-                      isDisabled
-                      to="#"
-                      onClick={(event: any) => event.preventDefault()}
-                    >
-                      Disabled Link
-                    </DropdownItem>
-                  </DropdownList>
-                </Dropdown>
+                  Delete
+                </Button>
               </DataListAction>
             </DataListItemRow>
           </DataListItem>
-        </DataList>
-      </DashboardWrapper>
-    </React.Fragment>
+        )}
+        <DataListItem aria-labelledby="multi-actions-item1">
+          <DataListItemRow>
+            <DataListItemCells
+              dataListCells={[
+                <DataListCell key="primary content">
+                  <span id="multi-actions-item1">Multi actions Primary content</span>
+                </DataListCell>,
+                <DataListCell key="secondary content">Multi actions Secondary content</DataListCell>
+              ]}
+            />
+            <DataListAction
+              aria-labelledby="multi-actions-item1 multi-actions-action1"
+              id="multi-actions-action1"
+              aria-label="Actions"
+              isPlainButtonAction
+            >
+              <Dropdown
+                popperProps={{ position: 'right' }}
+                onSelect={onSelect}
+                toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                  <MenuToggle
+                    ref={toggleRef}
+                    isExpanded={isOpen}
+                    onClick={onToggle}
+                    variant="plain"
+                    aria-label="Data list with actions example kebab toggle"
+                  >
+                    <EllipsisVIcon aria-hidden="true" />
+                  </MenuToggle>
+                )}
+                isOpen={isOpen}
+                onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
+              >
+                <DropdownList>
+                  <DropdownItem key="action">Action</DropdownItem>
+                  {/* Prevent default onClick functionality for example
+                  purposes */}
+                  <DropdownItem key="link" to="#" onClick={(event: any) => event.preventDefault()}>
+                    Link
+                  </DropdownItem>
+                  <DropdownItem key="disabled action" isDisabled>
+                    Disabled Action
+                  </DropdownItem>
+                  <DropdownItem key="disabled link" isDisabled to="#" onClick={(event: any) => event.preventDefault()}>
+                    Disabled Link
+                  </DropdownItem>
+                </DropdownList>
+              </Dropdown>
+            </DataListAction>
+          </DataListItemRow>
+        </DataListItem>
+      </DataList>
+    </DashboardWrapper>
   );
 };
diff --git a/packages/react-core/src/demos/DataListDemo.md b/packages/react-core/src/demos/DataListDemo.md
index 499c9ee2b29..54a34190a93 100644
--- a/packages/react-core/src/demos/DataListDemo.md
+++ b/packages/react-core/src/demos/DataListDemo.md
@@ -29,7 +29,7 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard
 ```js file="./DataList/examples/DataListExpandableControlInToolbar.tsx" isFullscreen
 ```
 
-### Actions: single and multiple
+### Actionable
 
 ```js file="./DataList/examples/DataListActions.tsx" isFullscreen
 ```

From 420b6e090179b84601246ad4a9725a8e11b005de Mon Sep 17 00:00:00 2001
From: ajaypratap003 <ajay.pratap233@gmail.com>
Date: Fri, 10 May 2024 19:03:44 +0530
Subject: [PATCH 3/3] fix import issue

---
 .../src/demos/DataList/examples/DataListActions.tsx           | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-core/src/demos/DataList/examples/DataListActions.tsx b/packages/react-core/src/demos/DataList/examples/DataListActions.tsx
index 97fc2f4ac72..c4871ea179a 100644
--- a/packages/react-core/src/demos/DataList/examples/DataListActions.tsx
+++ b/packages/react-core/src/demos/DataList/examples/DataListActions.tsx
@@ -15,11 +15,11 @@ import {
   PageSection,
   PageSectionVariants,
   TextContent,
-  Text
+  Text,
+  Title
 } from '@patternfly/react-core';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
-import { Title } from '../../../../dist/js/components';
 
 export const DataListActions: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);