Skip to content

Commit 4365bf8

Browse files
rebeccaalpertrebeccaalpert
authored
feat(ActionList): Add isVertical variant (#12090)
* feat(ActionList): Add isVertical variant * Mark as beta
1 parent 9421a92 commit 4365bf8

File tree

10 files changed

+96
-21
lines changed

10 files changed

+96
-21
lines changed

‎packages/react-core/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@
5454
"tslib": "^2.8.1"
5555
},
5656
"devDependencies": {
57-
"@patternfly/patternfly": "6.4.0",
57+
"@patternfly/patternfly": "6.5.0-prerelease.3",
5858
"case-anything": "^3.1.2",
5959
"css": "^3.0.0",
6060
"fs-extra": "^11.3.0"

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

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,26 @@ export interface ActionListProps extends React.HTMLProps<HTMLDivElement> {
88
isIconList?: boolean;
99
/** Additional classes added to the action list */
1010
className?: string;
11+
/** @beta Whether the layout of children is vertical or horizontal. */
12+
isVertical?: boolean;
1113
}
1214

1315
export const ActionList: React.FunctionComponent<ActionListProps> = ({
1416
children,
1517
isIconList,
1618
className,
19+
isVertical = false,
1720
...props
1821
}: ActionListProps) => (
19-
<div className={css(styles.actionList, isIconList && styles.modifiers.icons, className)} {...props}>
22+
<div
23+
className={css(
24+
styles.actionList,
25+
isIconList && styles.modifiers.icons,
26+
isVertical && styles.modifiers.vertical,
27+
className
28+
)}
29+
{...props}
30+
>
2031
{children}
2132
</div>
2233
);

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,18 @@ test(`Renders with class ${styles.modifiers.icons} when isIconList is true`, ()
3737
expect(screen.getByText('Test')).toHaveClass(styles.modifiers.icons);
3838
});
3939

40+
test(`Does not render with class ${styles.modifiers.vertical} by default`, () => {
41+
render(<ActionList>Test</ActionList>);
42+
43+
expect(screen.getByText('Test')).not.toHaveClass(styles.modifiers.vertical);
44+
});
45+
46+
test(`Renders with class ${styles.modifiers.vertical} when isVertical is true`, () => {
47+
render(<ActionList isVertical={true}>Test</ActionList>);
48+
49+
expect(screen.getByText('Test')).toHaveClass(styles.modifiers.vertical);
50+
});
51+
4052
test('Renders with inherited element props spread to the component', () => {
4153
render(<ActionList aria-label="Test label">Test</ActionList>);
4254

‎packages/react-core/src/components/ActionList/examples/ActionList.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,3 +35,9 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico
3535
```ts file="./ActionListWithCancelButton.tsx"
3636

3737
```
38+
39+
### Vertical action list
40+
41+
```ts file="./ActionListVertical.tsx" isBeta
42+
43+
```

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

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import { ActionList, ActionListGroup, ActionListItem, Button } from '@patternfly/react-core';
2+
import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
3+
import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
4+
5+
export const ActionListVertical: React.FunctionComponent = () => (
6+
<>
7+
<h4>Multiple groups</h4>
8+
<ActionList isVertical>
9+
<ActionListGroup>
10+
<ActionListItem>
11+
<Button>Next</Button>
12+
</ActionListItem>
13+
<ActionListItem>
14+
<Button variant="secondary">Back</Button>
15+
</ActionListItem>
16+
</ActionListGroup>
17+
<ActionListGroup>
18+
<ActionListItem>
19+
<Button>Submit</Button>
20+
</ActionListItem>
21+
<ActionListItem>
22+
<Button variant="link">Cancel</Button>
23+
</ActionListItem>
24+
</ActionListGroup>
25+
</ActionList>
26+
<h4>Icons, in two groups</h4>
27+
<ActionList isVertical>
28+
<ActionListGroup>
29+
<ActionListItem>
30+
<Button aria-label="Close vertical action list group 1" variant="plain" icon={<TimesIcon />} />
31+
</ActionListItem>
32+
<ActionListItem>
33+
<Button aria-label="Toggle vertical action list example group 1" variant="plain" icon={<CheckIcon />} />
34+
</ActionListItem>
35+
</ActionListGroup>
36+
<ActionListGroup>
37+
<ActionListItem>
38+
<Button aria-label="Close vertical action list group 2" variant="plain" icon={<TimesIcon />} />
39+
</ActionListItem>
40+
<ActionListItem>
41+
<Button aria-label="Toggle vertical action list example group 2" variant="plain" icon={<CheckIcon />} />
42+
</ActionListItem>
43+
</ActionListGroup>
44+
</ActionList>
45+
</>
46+
);

‎packages/react-docs/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
"test:a11y": "patternfly-a11y --config patternfly-a11y.config"
2424
},
2525
"dependencies": {
26-
"@patternfly/patternfly": "6.4.0",
26+
"@patternfly/patternfly": "6.5.0-prerelease.3",
2727
"@patternfly/react-charts": "workspace:^",
2828
"@patternfly/react-code-editor": "workspace:^",
2929
"@patternfly/react-core": "workspace:^",

‎packages/react-icons/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
"@fortawesome/free-brands-svg-icons": "^5.15.4",
3434
"@fortawesome/free-regular-svg-icons": "^5.15.4",
3535
"@fortawesome/free-solid-svg-icons": "^5.15.4",
36-
"@patternfly/patternfly": "6.4.0",
36+
"@patternfly/patternfly": "6.5.0-prerelease.3",
3737
"fs-extra": "^11.3.0",
3838
"tslib": "^2.8.1"
3939
},

‎packages/react-styles/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
"clean": "rimraf dist css"
2020
},
2121
"devDependencies": {
22-
"@patternfly/patternfly": "6.4.0",
22+
"@patternfly/patternfly": "6.5.0-prerelease.3",
2323
"change-case": "^5.4.4",
2424
"fs-extra": "^11.3.0"
2525
},

‎packages/react-tokens/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,8 @@
2929
"clean": "rimraf dist"
3030
},
3131
"devDependencies": {
32-
"@adobe/css-tools": "^4.4.4",
33-
"@patternfly/patternfly": "6.4.0",
32+
"@adobe/css-tools": "^4.4.2",
33+
"@patternfly/patternfly": "6.5.0-prerelease.3",
3434
"fs-extra": "^11.3.0"
3535
}
3636
}

‎yarn.lock‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,10 @@ __metadata:
1212
languageName: node
1313
linkType: hard
1414

15-
"@adobe/css-tools@npm:^4.4.4":
16-
version: 4.4.4
17-
resolution: "@adobe/css-tools@npm:4.4.4"
18-
checksum: 10c0/8f3e6cfaa5e6286e6f05de01d91d060425be2ebaef490881f5fe6da8bbdb336835c5d373ea337b0c3b0a1af4be048ba18780f0f6021d30809b4545922a7e13d9
15+
"@adobe/css-tools@npm:^4.4.2":
16+
version: 4.4.3
17+
resolution: "@adobe/css-tools@npm:4.4.3"
18+
checksum: 10c0/6d16c4d4b6752d73becf6e58611f893c7ed96e04017ff7084310901ccdbe0295171b722b158f6a2b0aa77182ef3446ffd62b39488fa5a7adab1f0dfe5ffafbae
1919
languageName: node
2020
linkType: hard
2121

@@ -4517,10 +4517,10 @@ __metadata:
45174517
languageName: node
45184518
linkType: hard
45194519

4520-
"@patternfly/patternfly@npm:6.4.0":
4521-
version: 6.4.0
4522-
resolution: "@patternfly/patternfly@npm:6.4.0"
4523-
checksum: 10c0/255c22e04a7649c9373790dbc66f97e2f01a121a843d3bc27627596f35296cc7f2228447d5866f63f17bccd36bae24ec68c45e1572778285dea617086d309737
4520+
"@patternfly/patternfly@npm:6.5.0-prerelease.3":
4521+
version: 6.5.0-prerelease.3
4522+
resolution: "@patternfly/patternfly@npm:6.5.0-prerelease.3"
4523+
checksum: 10c0/673d6822de21bfac92cb872389b52615dd808d0c8b11d30c3bd57e36a03cfaa5f17da27f5a23d36cecaa55beb801c64457c123192546e1179825fd6745a8abb3
45244524
languageName: node
45254525
linkType: hard
45264526

@@ -4618,7 +4618,7 @@ __metadata:
46184618
version: 0.0.0-use.local
46194619
resolution: "@patternfly/react-core@workspace:packages/react-core"
46204620
dependencies:
4621-
"@patternfly/patternfly": "npm:6.4.0"
4621+
"@patternfly/patternfly": "npm:6.5.0-prerelease.3"
46224622
"@patternfly/react-icons": "workspace:^"
46234623
"@patternfly/react-styles": "workspace:^"
46244624
"@patternfly/react-tokens": "workspace:^"
@@ -4639,7 +4639,7 @@ __metadata:
46394639
resolution: "@patternfly/react-docs@workspace:packages/react-docs"
46404640
dependencies:
46414641
"@patternfly/documentation-framework": "npm:^6.22.8"
4642-
"@patternfly/patternfly": "npm:6.4.0"
4642+
"@patternfly/patternfly": "npm:6.5.0-prerelease.3"
46434643
"@patternfly/patternfly-a11y": "npm:5.1.0"
46444644
"@patternfly/react-charts": "workspace:^"
46454645
"@patternfly/react-code-editor": "workspace:^"
@@ -4679,7 +4679,7 @@ __metadata:
46794679
"@fortawesome/free-brands-svg-icons": "npm:^5.15.4"
46804680
"@fortawesome/free-regular-svg-icons": "npm:^5.15.4"
46814681
"@fortawesome/free-solid-svg-icons": "npm:^5.15.4"
4682-
"@patternfly/patternfly": "npm:6.4.0"
4682+
"@patternfly/patternfly": "npm:6.5.0-prerelease.3"
46834683
fs-extra: "npm:^11.3.0"
46844684
tslib: "npm:^2.8.1"
46854685
peerDependencies:
@@ -4764,7 +4764,7 @@ __metadata:
47644764
version: 0.0.0-use.local
47654765
resolution: "@patternfly/react-styles@workspace:packages/react-styles"
47664766
dependencies:
4767-
"@patternfly/patternfly": "npm:6.4.0"
4767+
"@patternfly/patternfly": "npm:6.5.0-prerelease.3"
47684768
change-case: "npm:^5.4.4"
47694769
fs-extra: "npm:^11.3.0"
47704770
languageName: unknown
@@ -4805,8 +4805,8 @@ __metadata:
48054805
version: 0.0.0-use.local
48064806
resolution: "@patternfly/react-tokens@workspace:packages/react-tokens"
48074807
dependencies:
4808-
"@adobe/css-tools": "npm:^4.4.4"
4809-
"@patternfly/patternfly": "npm:6.4.0"
4808+
"@adobe/css-tools": "npm:^4.4.2"
4809+
"@patternfly/patternfly": "npm:6.5.0-prerelease.3"
48104810
fs-extra: "npm:^11.3.0"
48114811
languageName: unknown
48124812
linkType: soft

0 commit comments

Comments
 (0)