Skip to content

Commit b6874a8

Browse files
thatblindgeyethatblindgeye
authored
feat(ActionList): consumed Penta updates (#10041)
1 parent 9a34525 commit b6874a8

File tree

7 files changed

+116
-69
lines changed

7 files changed

+116
-69
lines changed

‎packages/react-core/src/components/ActionList/ActionList.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export interface ActionListProps extends React.HTMLProps<HTMLDivElement> {
1414
export const ActionList: React.FunctionComponent<ActionListProps> = ({
1515
children,
1616
isIconList,
17-
className = '',
17+
className,
1818
...props
1919
}: ActionListProps) => (
2020
<div className={css(styles.actionList, isIconList && styles.modifiers.icons, className)} {...props}>

‎packages/react-core/src/components/ActionList/ActionListGroup.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,17 @@ export interface ActionListGroupProps extends React.HTMLProps<HTMLDivElement> {
77
children?: React.ReactNode;
88
/** Additional classes added to the action list group */
99
className?: string;
10+
/** Flag indicating the action list group contains multiple icons and item padding should be removed */
11+
isIconGroup?: boolean;
1012
}
1113

1214
export const ActionListGroup: React.FunctionComponent<ActionListGroupProps> = ({
1315
children,
14-
className = '',
16+
className,
17+
isIconGroup,
1518
...props
1619
}: ActionListGroupProps) => (
17-
<div className={css(styles.actionListGroup, className)} {...props}>
20+
<div className={css(styles.actionListGroup, isIconGroup && styles.modifiers.icons, className)} {...props}>
1821
{children}
1922
</div>
2023
);

‎packages/react-core/src/components/ActionList/ActionListItem.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export interface ActionListItemProps extends React.HTMLProps<HTMLDivElement> {
1111

1212
export const ActionListItem: React.FunctionComponent<ActionListItemProps> = ({
1313
children,
14-
className = '',
14+
className,
1515
...props
1616
}: ActionListItemProps) => (
1717
<div className={css(`${styles.actionList}__item`, className)} {...props}>

‎packages/react-core/src/components/ActionList/__tests__/ActionListGroup.test.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,16 @@ test('Renders children', () => {
1414
expect(screen.getByText('Test')).toBeVisible();
1515
});
1616

17-
test(`Renders with class ${styles.actionListGroup}`, () => {
17+
test(`Renders with only class ${styles.actionListGroup} by default`, () => {
1818
render(<ActionListGroup>Test</ActionListGroup>);
1919

20-
expect(screen.getByText('Test')).toHaveClass(styles.actionListGroup);
20+
expect(screen.getByText('Test')).toHaveClass(styles.actionListGroup, { exact: true });
21+
});
22+
23+
test(`Renders with class ${styles.modifiers.icons} when isIconGroup is true`, () => {
24+
render(<ActionListGroup isIconGroup>Test</ActionListGroup>);
25+
26+
expect(screen.getByText('Test')).toHaveClass(styles.modifiers.icons);
2127
});
2228

2329
test('Renders with custom class names provided via prop', () => {

‎packages/react-core/src/components/ActionList/examples/ActionListSingleGroup.tsx‎

Lines changed: 45 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
22
import {
33
ActionList,
4+
ActionListGroup,
45
ActionListItem,
56
Button,
67
Dropdown,
@@ -46,50 +47,54 @@ export const ActionListSingleGroup: React.FunctionComponent = () => {
4647
return (
4748
<React.Fragment>
4849
<ActionList>
49-
<ActionListItem>
50-
<Button variant="primary" id="single-group-next-button">
51-
Next
52-
</Button>
53-
</ActionListItem>
54-
<ActionListItem>
55-
<Button variant="secondary" id="single-group-back-button">
56-
Back
57-
</Button>
58-
</ActionListItem>
50+
<ActionListGroup>
51+
<ActionListItem>
52+
<Button variant="primary" id="single-group-next-button">
53+
Next
54+
</Button>
55+
</ActionListItem>
56+
<ActionListItem>
57+
<Button variant="secondary" id="single-group-back-button">
58+
Back
59+
</Button>
60+
</ActionListItem>
61+
</ActionListGroup>
5962
</ActionList>
6063
<br />
6164
With kebab
6265
<ActionList>
63-
<ActionListItem>
64-
<Button variant="primary" id="single-group-next-button2">
65-
Next
66-
</Button>
67-
</ActionListItem>
68-
<ActionListItem>
69-
<Button variant="secondary" id="single-group-back-button2">
70-
Back
71-
</Button>
72-
</ActionListItem>
73-
<ActionListItem>
74-
<Dropdown
75-
onSelect={onSelect}
76-
toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
77-
<MenuToggle
78-
ref={toggleRef}
79-
onClick={onToggle}
80-
variant="plain"
81-
isExpanded={isOpen}
82-
aria-label="Action list single group kebab"
83-
>
84-
<EllipsisVIcon />
85-
</MenuToggle>
86-
)}
87-
isOpen={isOpen}
88-
onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
89-
>
90-
<DropdownList>{dropdownItems}</DropdownList>
91-
</Dropdown>
92-
</ActionListItem>
66+
<ActionListGroup>
67+
<ActionListItem>
68+
<Button variant="primary" id="single-group-next-button2">
69+
Next
70+
</Button>
71+
</ActionListItem>
72+
<ActionListItem>
73+
<Button variant="secondary" id="single-group-back-button2">
74+
Back
75+
</Button>
76+
</ActionListItem>
77+
<ActionListItem>
78+
<Dropdown
79+
onSelect={onSelect}
80+
toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
81+
<MenuToggle
82+
ref={toggleRef}
83+
onClick={onToggle}
84+
variant="plain"
85+
isExpanded={isOpen}
86+
aria-label="Action list single group kebab"
87+
>
88+
<EllipsisVIcon />
89+
</MenuToggle>
90+
)}
91+
isOpen={isOpen}
92+
onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
93+
>
94+
<DropdownList>{dropdownItems}</DropdownList>
95+
</Dropdown>
96+
</ActionListItem>
97+
</ActionListGroup>
9398
</ActionList>
9499
</React.Fragment>
95100
);

‎packages/react-core/src/components/ActionList/examples/ActionListWithCancelButton.tsx‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,18 @@ export const ActionListWithCancelButton: React.FunctionComponent = () => (
55
<React.Fragment>
66
In modals, forms, data lists
77
<ActionList>
8-
<ActionListItem>
9-
<Button variant="primary" id="with-cancel-save-button">
10-
Save
11-
</Button>
12-
</ActionListItem>
13-
<ActionListItem>
14-
<Button variant="link" id="with-cancel-cancel-button">
15-
Cancel
16-
</Button>
17-
</ActionListItem>
8+
<ActionListGroup>
9+
<ActionListItem>
10+
<Button variant="primary" id="with-cancel-save-button">
11+
Save
12+
</Button>
13+
</ActionListItem>
14+
<ActionListItem>
15+
<Button variant="link" id="with-cancel-cancel-button">
16+
Cancel
17+
</Button>
18+
</ActionListItem>
19+
</ActionListGroup>
1820
</ActionList>
1921
<br />
2022
In wizards

‎packages/react-core/src/components/ActionList/examples/ActionListWithIcons.tsx‎

Lines changed: 44 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,50 @@
11
import React from 'react';
2-
import { ActionList, ActionListItem, Button } from '@patternfly/react-core';
2+
import { ActionList, ActionListGroup, ActionListItem, Button } from '@patternfly/react-core';
33
import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
44
import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
55

66
export const ActionListWithIcons: React.FunctionComponent = () => (
7-
<ActionList isIconList>
8-
<ActionListItem>
9-
<Button variant="plain" id="with-icons-times-button" aria-label="times icon button">
10-
<TimesIcon />
11-
</Button>
12-
</ActionListItem>
13-
<ActionListItem>
14-
<Button variant="plain" id="with-icons-check-button" aria-label="check icon button">
15-
<CheckIcon />
16-
</Button>
17-
</ActionListItem>
18-
</ActionList>
7+
<>
8+
<h4>With list icons wrapper</h4>
9+
<ActionList isIconList>
10+
<ActionListItem>
11+
<Button variant="plain" id="with-icons-times-button" aria-label="times icon button">
12+
<TimesIcon />
13+
</Button>
14+
</ActionListItem>
15+
<ActionListItem>
16+
<Button variant="plain" id="with-icons-check-button" aria-label="check icon button">
17+
<CheckIcon />
18+
</Button>
19+
</ActionListItem>
20+
</ActionList>
21+
<br />
22+
<h4>With group icons wrapper</h4>
23+
<ActionList>
24+
<ActionListGroup isIconGroup>
25+
<ActionListItem>
26+
<Button variant="plain" id="with-icons-list-times-button" aria-label="times icon button">
27+
<TimesIcon />
28+
</Button>
29+
</ActionListItem>
30+
<ActionListItem>
31+
<Button variant="plain" id="with-icons-list-check-button" aria-label="check icon button">
32+
<CheckIcon />
33+
</Button>
34+
</ActionListItem>
35+
</ActionListGroup>
36+
<ActionListGroup isIconGroup>
37+
<ActionListItem>
38+
<Button variant="plain" id="with-icons-group-times-button" aria-label="times icon button">
39+
<TimesIcon />
40+
</Button>
41+
</ActionListItem>
42+
<ActionListItem>
43+
<Button variant="plain" id="with-icons-group-check-button" aria-label="check icon button">
44+
<CheckIcon />
45+
</Button>
46+
</ActionListItem>
47+
</ActionListGroup>
48+
</ActionList>
49+
</>
1950
);

0 commit comments

Comments
 (0)