From dc0a1e462af84e993e4de6e121d9b922f394bb39 Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Fri, 10 Jan 2025 08:22:47 -0500
Subject: [PATCH] Removed page section styling, added page section

---
 .../DataList/examples/DataListActionable.tsx  | 148 +++++++++---------
 1 file changed, 77 insertions(+), 71 deletions(-)

diff --git a/packages/react-core/src/demos/DataList/examples/DataListActionable.tsx b/packages/react-core/src/demos/DataList/examples/DataListActionable.tsx
index f822097e180..7702748c5e5 100644
--- a/packages/react-core/src/demos/DataList/examples/DataListActionable.tsx
+++ b/packages/react-core/src/demos/DataList/examples/DataListActionable.tsx
@@ -14,7 +14,6 @@ import {
   MenuToggle,
   MenuToggleElement,
   PageSection,
-  PageSectionVariants,
   Title
 } from '@patternfly/react-core';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
@@ -34,95 +33,102 @@ export const DataListActionable: React.FunctionComponent = () => {
 
   return (
     <DashboardWrapper mainContainerId="main-content-datalist-view-actions" breadcrumb={null}>
-      <PageSection variant={PageSectionVariants.secondary}>
+      <PageSection>
         <Content>
           <Title headingLevel="h1">Projects</Title>
           <Content component="p">This is a demo that showcases PatternFly Data List</Content>
         </Content>
       </PageSection>
-      <DataList aria-label="single action data list example ">
-        {!isDeleted && (
-          <DataListItem aria-labelledby="single-action-item1">
+      <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="single-action-item1">Single actionable Primary content</span>
+                    <span id="multi-actions-item1">Multi actions Primary content</span>
                   </DataListCell>,
-                  <DataListCell key="secondary content">Single actionable Secondary content</DataListCell>
+                  <DataListCell key="secondary content">Multi actions Secondary content</DataListCell>
                 ]}
               />
               <DataListAction
-                aria-labelledby="single-action-item1 single-action-action1"
-                id="single-action-action1"
+                aria-labelledby="multi-actions-item1 multi-actions-action1"
+                id="multi-actions-action1"
                 aria-label="Actions"
               >
-                <Button
-                  onClick={() => {
-                    if (confirm('Are you sure?')) {
-                      setIsDeleted(true);
-                    }
-                  }}
-                  variant="primary"
-                  key="delete-action"
+                <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)}
                 >
-                  Delete
-                </Button>
+                  <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>
-        )}
-        <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"
-            >
-              <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>
+        </DataList>
+      </PageSection>
     </DashboardWrapper>
   );
 };