Skip to content

Commit d85ceff

Browse files
rebeccaalpertrebeccaalpert
committed
feat(ActionList): Add isVertical variant
1 parent c278d5a commit d85ceff

10 files changed

Lines changed: 95 additions & 21 deletions

File tree

‎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+
/** 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: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,10 @@ import { Fragment, useState } from 'react';
99
import TimesIcon from '@patternfly/react-icons/dist/js/icons/times-icon';
1010
import CheckIcon from '@patternfly/react-icons/dist/js/icons/check-icon';
1111
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
12+
import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
13+
import OutlinedPlusSquare from '@patternfly/react-icons/dist/esm/icons/outlined-plus-square-icon';
14+
import OutlinedCopy from '@patternfly/react-icons/dist/esm/icons/outlined-copy-icon';
15+
import OutlinedQuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-question-circle-icon';
1216

1317
## Examples
1418

@@ -35,3 +39,9 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico
3539
```ts file="./ActionListWithCancelButton.tsx"
3640

3741
```
42+
43+
### Action list with vertical modifier
44+
45+
```ts file="./ActionListVertical.tsx"
46+
47+
```

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

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import { ActionList, ActionListGroup, ActionListItem, Button } from '@patternfly/react-core';
2+
import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
3+
import OutlinedPlusSquare from '@patternfly/react-icons/dist/esm/icons/outlined-plus-square-icon';
4+
import OutlinedCopy from '@patternfly/react-icons/dist/esm/icons/outlined-copy-icon';
5+
import OutlinedQuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-question-circle-icon';
6+
7+
export const ActionListVertical: React.FunctionComponent = () => (
8+
<>
9+
<h4>With icons</h4>
10+
<ActionList isVertical>
11+
<ActionListItem>
12+
<Button variant="plain" icon={<PlayIcon />} />
13+
</ActionListItem>
14+
<ActionListItem>
15+
<Button variant="plain" icon={<OutlinedPlusSquare />} />
16+
</ActionListItem>
17+
<ActionListItem>
18+
<Button variant="plain" icon={<OutlinedQuestionCircleIcon />} />
19+
</ActionListItem>
20+
</ActionList>
21+
<h4>With icons in groups</h4>
22+
<ActionList isVertical>
23+
<ActionListGroup>
24+
<ActionListItem>
25+
<Button variant="plain" icon={<PlayIcon />} />
26+
</ActionListItem>
27+
<ActionListItem>
28+
<Button variant="plain" icon={<OutlinedPlusSquare />} />
29+
</ActionListItem>
30+
</ActionListGroup>
31+
<ActionListGroup>
32+
<ActionListItem>
33+
<Button variant="plain" icon={<OutlinedQuestionCircleIcon />} />
34+
</ActionListItem>
35+
<ActionListItem>
36+
<Button variant="plain" icon={<OutlinedCopy />} />
37+
</ActionListItem>
38+
</ActionListGroup>
39+
</ActionList>
40+
</>
41+
);

‎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

@@ -4318,10 +4318,10 @@ __metadata:
43184318
languageName: node
43194319
linkType: hard
43204320

4321-
"@patternfly/patternfly@npm:6.4.0":
4322-
version: 6.4.0
4323-
resolution: "@patternfly/patternfly@npm:6.4.0"
4324-
checksum: 10c0/255c22e04a7649c9373790dbc66f97e2f01a121a843d3bc27627596f35296cc7f2228447d5866f63f17bccd36bae24ec68c45e1572778285dea617086d309737
4321+
"@patternfly/patternfly@npm:6.5.0-prerelease.3":
4322+
version: 6.5.0-prerelease.3
4323+
resolution: "@patternfly/patternfly@npm:6.5.0-prerelease.3"
4324+
checksum: 10c0/673d6822de21bfac92cb872389b52615dd808d0c8b11d30c3bd57e36a03cfaa5f17da27f5a23d36cecaa55beb801c64457c123192546e1179825fd6745a8abb3
43254325
languageName: node
43264326
linkType: hard
43274327

@@ -4419,7 +4419,7 @@ __metadata:
44194419
version: 0.0.0-use.local
44204420
resolution: "@patternfly/react-core@workspace:packages/react-core"
44214421
dependencies:
4422-
"@patternfly/patternfly": "npm:6.4.0"
4422+
"@patternfly/patternfly": "npm:6.5.0-prerelease.3"
44234423
"@patternfly/react-icons": "workspace:^"
44244424
"@patternfly/react-styles": "workspace:^"
44254425
"@patternfly/react-tokens": "workspace:^"
@@ -4440,7 +4440,7 @@ __metadata:
44404440
resolution: "@patternfly/react-docs@workspace:packages/react-docs"
44414441
dependencies:
44424442
"@patternfly/documentation-framework": "npm:^6.22.8"
4443-
"@patternfly/patternfly": "npm:6.4.0"
4443+
"@patternfly/patternfly": "npm:6.5.0-prerelease.3"
44444444
"@patternfly/patternfly-a11y": "npm:5.1.0"
44454445
"@patternfly/react-charts": "workspace:^"
44464446
"@patternfly/react-code-editor": "workspace:^"
@@ -4480,7 +4480,7 @@ __metadata:
44804480
"@fortawesome/free-brands-svg-icons": "npm:^5.15.4"
44814481
"@fortawesome/free-regular-svg-icons": "npm:^5.15.4"
44824482
"@fortawesome/free-solid-svg-icons": "npm:^5.15.4"
4483-
"@patternfly/patternfly": "npm:6.4.0"
4483+
"@patternfly/patternfly": "npm:6.5.0-prerelease.3"
44844484
fs-extra: "npm:^11.3.0"
44854485
tslib: "npm:^2.8.1"
44864486
peerDependencies:
@@ -4565,7 +4565,7 @@ __metadata:
45654565
version: 0.0.0-use.local
45664566
resolution: "@patternfly/react-styles@workspace:packages/react-styles"
45674567
dependencies:
4568-
"@patternfly/patternfly": "npm:6.4.0"
4568+
"@patternfly/patternfly": "npm:6.5.0-prerelease.3"
45694569
change-case: "npm:^5.4.4"
45704570
fs-extra: "npm:^11.3.0"
45714571
languageName: unknown
@@ -4606,8 +4606,8 @@ __metadata:
46064606
version: 0.0.0-use.local
46074607
resolution: "@patternfly/react-tokens@workspace:packages/react-tokens"
46084608
dependencies:
4609-
"@adobe/css-tools": "npm:^4.4.4"
4610-
"@patternfly/patternfly": "npm:6.4.0"
4609+
"@adobe/css-tools": "npm:^4.4.2"
4610+
"@patternfly/patternfly": "npm:6.5.0-prerelease.3"
46114611
fs-extra: "npm:^11.3.0"
46124612
languageName: unknown
46134613
linkType: soft

0 commit comments

Comments
 (0)