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 { export const ActionList: React.FunctionComponent = ({ children, isIconList, - className = '', + className, ...props }: ActionListProps) => (
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 { 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 = ({ children, - className = '', + className, + isIconGroup, ...props }: ActionListGroupProps) => ( -
+
{children}
); 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 { export const ActionListItem: React.FunctionComponent = ({ children, - className = '', + className, ...props }: ActionListItemProps) => (
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(Test); - 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(Test); + + 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 ( - - - - - - + + + + + + + +
With kebab - - - - - - - - ) => ( - - - - )} - isOpen={isOpen} - onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)} - > - {dropdownItems} - - + + + + + + + + + ) => ( + + + + )} + isOpen={isOpen} + onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)} + > + {dropdownItems} + + +
); 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 = () => ( In modals, forms, data lists - - - - - - + + + + + + + +
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..6b7cb33b45d 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 = () => ( - - - - - - - - + <> +

With list icons wrapper

+ + + + + + + + +
+

With group icons wrapper

+ + + + + + + + + + + + + + + + + + + );