From 9c1c764c138f36f62d1463d01ab1113aa8af27de Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Wed, 24 Jan 2024 10:22:31 -0500
Subject: [PATCH 1/2] feat(ActionList): consumed Penta updates

---
 .../src/components/ActionList/ActionList.tsx  |  2 +-
 .../components/ActionList/ActionListGroup.tsx |  7 +-
 .../components/ActionList/ActionListItem.tsx  |  2 +-
 .../__tests__/ActionListGroup.test.tsx        | 10 ++-
 .../examples/ActionListSingleGroup.tsx        | 85 ++++++++++---------
 .../examples/ActionListWithCancelButton.tsx   | 22 ++---
 .../examples/ActionListWithIcons.tsx          | 57 ++++++++++---
 7 files changed, 116 insertions(+), 69 deletions(-)

diff --git a/packages/react-core/src/components/ActionList/ActionList.tsx b/packages/react-core/src/components/ActionList/ActionList.tsx
index 329e9c9107c..8dd82ea57eb 100644
--- a/packages/react-core/src/components/ActionList/ActionList.tsx
+++ b/packages/react-core/src/components/ActionList/ActionList.tsx
@@ -14,7 +14,7 @@ export interface ActionListProps extends React.HTMLProps<HTMLDivElement> {
 export const ActionList: React.FunctionComponent<ActionListProps> = ({
   children,
   isIconList,
-  className = '',
+  className,
   ...props
 }: ActionListProps) => (
   <div className={css(styles.actionList, isIconList && styles.modifiers.icons, className)} {...props}>
diff --git a/packages/react-core/src/components/ActionList/ActionListGroup.tsx b/packages/react-core/src/components/ActionList/ActionListGroup.tsx
index fd1c8214ee7..1e36985b9f7 100644
--- a/packages/react-core/src/components/ActionList/ActionListGroup.tsx
+++ b/packages/react-core/src/components/ActionList/ActionListGroup.tsx
@@ -7,14 +7,17 @@ export interface ActionListGroupProps extends React.HTMLProps<HTMLDivElement> {
   children?: React.ReactNode;
   /** Additional classes added to the action list group */
   className?: string;
+  /** Flag indicating the action list group contains multiple icons and item padding should be removed */
+  isIconGroup?: boolean;
 }
 
 export const ActionListGroup: React.FunctionComponent<ActionListGroupProps> = ({
   children,
-  className = '',
+  className,
+  isIconGroup,
   ...props
 }: ActionListGroupProps) => (
-  <div className={css(styles.actionListGroup, className)} {...props}>
+  <div className={css(styles.actionListGroup, isIconGroup && styles.modifiers.icons, className)} {...props}>
     {children}
   </div>
 );
diff --git a/packages/react-core/src/components/ActionList/ActionListItem.tsx b/packages/react-core/src/components/ActionList/ActionListItem.tsx
index 3e6468aa29c..2cc829848a3 100644
--- a/packages/react-core/src/components/ActionList/ActionListItem.tsx
+++ b/packages/react-core/src/components/ActionList/ActionListItem.tsx
@@ -11,7 +11,7 @@ export interface ActionListItemProps extends React.HTMLProps<HTMLDivElement> {
 
 export const ActionListItem: React.FunctionComponent<ActionListItemProps> = ({
   children,
-  className = '',
+  className,
   ...props
 }: ActionListItemProps) => (
   <div className={css(`${styles.actionList}__item`, className)} {...props}>
diff --git a/packages/react-core/src/components/ActionList/__tests__/ActionListGroup.test.tsx b/packages/react-core/src/components/ActionList/__tests__/ActionListGroup.test.tsx
index 5f058812198..baf4d2a4515 100644
--- a/packages/react-core/src/components/ActionList/__tests__/ActionListGroup.test.tsx
+++ b/packages/react-core/src/components/ActionList/__tests__/ActionListGroup.test.tsx
@@ -14,10 +14,16 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test(`Renders with class ${styles.actionListGroup}`, () => {
+test(`Renders with only class ${styles.actionListGroup} by default`, () => {
   render(<ActionListGroup>Test</ActionListGroup>);
 
-  expect(screen.getByText('Test')).toHaveClass(styles.actionListGroup);
+  expect(screen.getByText('Test')).toHaveClass(styles.actionListGroup, { exact: true });
+});
+
+test(`Renders with class ${styles.modifiers.icons} when isIconGroup is true`, () => {
+  render(<ActionListGroup isIconGroup>Test</ActionListGroup>);
+
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.icons);
 });
 
 test('Renders with custom class names provided via prop', () => {
diff --git a/packages/react-core/src/components/ActionList/examples/ActionListSingleGroup.tsx b/packages/react-core/src/components/ActionList/examples/ActionListSingleGroup.tsx
index ab14d443179..db018b6c289 100644
--- a/packages/react-core/src/components/ActionList/examples/ActionListSingleGroup.tsx
+++ b/packages/react-core/src/components/ActionList/examples/ActionListSingleGroup.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import {
   ActionList,
+  ActionListGroup,
   ActionListItem,
   Button,
   Dropdown,
@@ -46,50 +47,54 @@ export const ActionListSingleGroup: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       <ActionList>
-        <ActionListItem>
-          <Button variant="primary" id="single-group-next-button">
-            Next
-          </Button>
-        </ActionListItem>
-        <ActionListItem>
-          <Button variant="secondary" id="single-group-back-button">
-            Back
-          </Button>
-        </ActionListItem>
+        <ActionListGroup>
+          <ActionListItem>
+            <Button variant="primary" id="single-group-next-button">
+              Next
+            </Button>
+          </ActionListItem>
+          <ActionListItem>
+            <Button variant="secondary" id="single-group-back-button">
+              Back
+            </Button>
+          </ActionListItem>
+        </ActionListGroup>
       </ActionList>
       <br />
       With kebab
       <ActionList>
-        <ActionListItem>
-          <Button variant="primary" id="single-group-next-button2">
-            Next
-          </Button>
-        </ActionListItem>
-        <ActionListItem>
-          <Button variant="secondary" id="single-group-back-button2">
-            Back
-          </Button>
-        </ActionListItem>
-        <ActionListItem>
-          <Dropdown
-            onSelect={onSelect}
-            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
-              <MenuToggle
-                ref={toggleRef}
-                onClick={onToggle}
-                variant="plain"
-                isExpanded={isOpen}
-                aria-label="Action list single group kebab"
-              >
-                <EllipsisVIcon />
-              </MenuToggle>
-            )}
-            isOpen={isOpen}
-            onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
-          >
-            <DropdownList>{dropdownItems}</DropdownList>
-          </Dropdown>
-        </ActionListItem>
+        <ActionListGroup>
+          <ActionListItem>
+            <Button variant="primary" id="single-group-next-button2">
+              Next
+            </Button>
+          </ActionListItem>
+          <ActionListItem>
+            <Button variant="secondary" id="single-group-back-button2">
+              Back
+            </Button>
+          </ActionListItem>
+          <ActionListItem>
+            <Dropdown
+              onSelect={onSelect}
+              toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                <MenuToggle
+                  ref={toggleRef}
+                  onClick={onToggle}
+                  variant="plain"
+                  isExpanded={isOpen}
+                  aria-label="Action list single group kebab"
+                >
+                  <EllipsisVIcon />
+                </MenuToggle>
+              )}
+              isOpen={isOpen}
+              onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
+            >
+              <DropdownList>{dropdownItems}</DropdownList>
+            </Dropdown>
+          </ActionListItem>
+        </ActionListGroup>
       </ActionList>
     </React.Fragment>
   );
diff --git a/packages/react-core/src/components/ActionList/examples/ActionListWithCancelButton.tsx b/packages/react-core/src/components/ActionList/examples/ActionListWithCancelButton.tsx
index 49ae732a21e..e8cc63d8763 100644
--- a/packages/react-core/src/components/ActionList/examples/ActionListWithCancelButton.tsx
+++ b/packages/react-core/src/components/ActionList/examples/ActionListWithCancelButton.tsx
@@ -5,16 +5,18 @@ export const ActionListWithCancelButton: React.FunctionComponent = () => (
   <React.Fragment>
     In modals, forms, data lists
     <ActionList>
-      <ActionListItem>
-        <Button variant="primary" id="with-cancel-save-button">
-          Save
-        </Button>
-      </ActionListItem>
-      <ActionListItem>
-        <Button variant="link" id="with-cancel-cancel-button">
-          Cancel
-        </Button>
-      </ActionListItem>
+      <ActionListGroup>
+        <ActionListItem>
+          <Button variant="primary" id="with-cancel-save-button">
+            Save
+          </Button>
+        </ActionListItem>
+        <ActionListItem>
+          <Button variant="link" id="with-cancel-cancel-button">
+            Cancel
+          </Button>
+        </ActionListItem>
+      </ActionListGroup>
     </ActionList>
     <br />
     In wizards
diff --git a/packages/react-core/src/components/ActionList/examples/ActionListWithIcons.tsx b/packages/react-core/src/components/ActionList/examples/ActionListWithIcons.tsx
index 93ecedfeebf..59adbc69a05 100644
--- a/packages/react-core/src/components/ActionList/examples/ActionListWithIcons.tsx
+++ b/packages/react-core/src/components/ActionList/examples/ActionListWithIcons.tsx
@@ -1,19 +1,50 @@
 import React from 'react';
-import { ActionList, ActionListItem, Button } from '@patternfly/react-core';
+import { ActionList, ActionListGroup, ActionListItem, Button } from '@patternfly/react-core';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
 
 export const ActionListWithIcons: React.FunctionComponent = () => (
-  <ActionList isIconList>
-    <ActionListItem>
-      <Button variant="plain" id="with-icons-times-button" aria-label="times icon button">
-        <TimesIcon />
-      </Button>
-    </ActionListItem>
-    <ActionListItem>
-      <Button variant="plain" id="with-icons-check-button" aria-label="check icon button">
-        <CheckIcon />
-      </Button>
-    </ActionListItem>
-  </ActionList>
+  <>
+    <h4>With list icons wrapper</h4>
+    <ActionList isIconList>
+      <ActionListItem>
+        <Button variant="plain" id="with-icons-times-button" aria-label="times icon button">
+          <TimesIcon />
+        </Button>
+      </ActionListItem>
+      <ActionListItem>
+        <Button variant="plain" id="with-icons-check-button" aria-label="check icon button">
+          <CheckIcon />
+        </Button>
+      </ActionListItem>
+    </ActionList>
+    <br />
+    <h4>With group icons wrapper</h4>
+    <ActionList>
+      <ActionListGroup isIconGroup>
+        <ActionListItem>
+          <Button variant="plain" id="with-icons-times-button" aria-label="times icon button">
+            <TimesIcon />
+          </Button>
+        </ActionListItem>
+        <ActionListItem>
+          <Button variant="plain" id="with-icons-check-button" aria-label="check icon button">
+            <CheckIcon />
+          </Button>
+        </ActionListItem>
+      </ActionListGroup>
+      <ActionListGroup isIconGroup>
+        <ActionListItem>
+          <Button variant="plain" id="with-icons-times-button" aria-label="times icon button">
+            <TimesIcon />
+          </Button>
+        </ActionListItem>
+        <ActionListItem>
+          <Button variant="plain" id="with-icons-check-button" aria-label="check icon button">
+            <CheckIcon />
+          </Button>
+        </ActionListItem>
+      </ActionListGroup>
+    </ActionList>
+  </>
 );

From f73ad5014db7b98a253621aa2683105c6ab0f7d5 Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Wed, 24 Jan 2024 10:48:45 -0500
Subject: [PATCH 2/2] Updated id attrs to be unique

---
 .../ActionList/examples/ActionListWithIcons.tsx           | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/react-core/src/components/ActionList/examples/ActionListWithIcons.tsx b/packages/react-core/src/components/ActionList/examples/ActionListWithIcons.tsx
index 59adbc69a05..6b7cb33b45d 100644
--- a/packages/react-core/src/components/ActionList/examples/ActionListWithIcons.tsx
+++ b/packages/react-core/src/components/ActionList/examples/ActionListWithIcons.tsx
@@ -23,24 +23,24 @@ export const ActionListWithIcons: React.FunctionComponent = () => (
     <ActionList>
       <ActionListGroup isIconGroup>
         <ActionListItem>
-          <Button variant="plain" id="with-icons-times-button" aria-label="times icon button">
+          <Button variant="plain" id="with-icons-list-times-button" aria-label="times icon button">
             <TimesIcon />
           </Button>
         </ActionListItem>
         <ActionListItem>
-          <Button variant="plain" id="with-icons-check-button" aria-label="check icon button">
+          <Button variant="plain" id="with-icons-list-check-button" aria-label="check icon button">
             <CheckIcon />
           </Button>
         </ActionListItem>
       </ActionListGroup>
       <ActionListGroup isIconGroup>
         <ActionListItem>
-          <Button variant="plain" id="with-icons-times-button" aria-label="times icon button">
+          <Button variant="plain" id="with-icons-group-times-button" aria-label="times icon button">
             <TimesIcon />
           </Button>
         </ActionListItem>
         <ActionListItem>
-          <Button variant="plain" id="with-icons-check-button" aria-label="check icon button">
+          <Button variant="plain" id="with-icons-group-check-button" aria-label="check icon button">
             <CheckIcon />
           </Button>
         </ActionListItem>