Skip to content

Commit 8c19252

Browse files
thatblindgeyethatblindgeye
authored
chore(Dropdown): updated deprecated usage to new dropdown (#8868)
* chore(Dropdown): updated deprecated usage to new dropdown * Updated Card through DataList * Fixed a11y errors * Updated duallistselector through menu * Updated modal through toolbar * Updated treeview * Fixed breadcrumbs and updated alertgroup demo * Updated demos Card through Nav * Updated final demos * Updated remaining usage in demos * Resolved a11y errors * Updated integration tests * Updated after rebase * Fixed build failure issues * Updated state variable * Updated per feedback * Updated snapshots * Updated datetimepicker demo * Updated MenuToggle icon rendering * Removed comma between divider and dropdownitem * Updated breacrumb badge toggle and import path for demos * Added onOpenChange to test demos
1 parent 696a96d commit 8c19252

File tree

84 files changed

+4913
-3908
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

84 files changed

+4913
-3908
lines changed

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

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,7 @@ propComponents: ['ActionList', 'ActionListGroup', 'ActionListItem']
77

88
import TimesIcon from '@patternfly/react-icons/dist/js/icons/times-icon';
99
import CheckIcon from '@patternfly/react-icons/dist/js/icons/check-icon';
10-
import {
11-
Dropdown as DropdownDeprecated,
12-
DropdownItem as DropdownItemDeprecated,
13-
DropdownSeparator,
14-
KebabToggle
15-
} from '@patternfly/react-core/deprecated';
10+
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
1611

1712
## Examples
1813

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

Lines changed: 50 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,48 @@
11
import React from 'react';
2-
import { ActionList, ActionListItem, Button } from '@patternfly/react-core';
32
import {
4-
Dropdown as DropdownDeprecated,
5-
DropdownItem as DropdownItemDeprecated,
6-
DropdownSeparator,
7-
KebabToggle
8-
} from '@patternfly/react-core/deprecated';
3+
ActionList,
4+
ActionListItem,
5+
Button,
6+
Dropdown,
7+
DropdownList,
8+
DropdownItem,
9+
MenuToggle,
10+
MenuToggleElement,
11+
Divider
12+
} from '@patternfly/react-core';
13+
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
914

1015
export const ActionListSingleGroup: React.FunctionComponent = () => {
1116
const [isOpen, setIsOpen] = React.useState(false);
1217

13-
const onToggle = (
14-
event: MouseEvent | TouchEvent | KeyboardEvent | React.KeyboardEvent<any> | React.MouseEvent<HTMLButtonElement>,
15-
isOpen: boolean
16-
) => {
17-
event.stopPropagation();
18-
setIsOpen(isOpen);
18+
const onToggle = () => {
19+
setIsOpen(!isOpen);
1920
};
2021

21-
const onSelect = (event: React.SyntheticEvent<HTMLDivElement, Event>) => {
22-
event.stopPropagation();
22+
const onSelect = (event: React.MouseEvent<Element, MouseEvent> | undefined) => {
23+
event?.stopPropagation();
2324
setIsOpen(!isOpen);
2425
};
2526

26-
const dropdownItems = [
27-
<DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
28-
<DropdownItemDeprecated key="action" component="button">
29-
Action
30-
</DropdownItemDeprecated>,
31-
<DropdownItemDeprecated key="disabled link" isDisabled>
32-
Disabled Link
33-
</DropdownItemDeprecated>,
34-
<DropdownItemDeprecated key="disabled action" isDisabled component="button">
35-
Disabled Action
36-
</DropdownItemDeprecated>,
37-
<DropdownSeparator key="separator" />,
38-
<DropdownItemDeprecated key="separated link">Separated Link</DropdownItemDeprecated>,
39-
<DropdownItemDeprecated key="separated action" component="button">
40-
Separated Action
41-
</DropdownItemDeprecated>
42-
];
43-
27+
const dropdownItems = (
28+
<>
29+
<DropdownItem to="#" key="link">
30+
Link
31+
</DropdownItem>
32+
<DropdownItem key="action">Action</DropdownItem>
33+
<DropdownItem to="#" key="disabled link" isDisabled>
34+
Disabled Link
35+
</DropdownItem>
36+
<DropdownItem key="disabled action" isDisabled>
37+
Disabled Action
38+
</DropdownItem>
39+
<Divider component="li" key="separator" />
40+
<DropdownItem to="#" key="separated link">
41+
Separated Link
42+
</DropdownItem>
43+
<DropdownItem key="separated action">Separated Action</DropdownItem>
44+
</>
45+
);
4446
return (
4547
<React.Fragment>
4648
<ActionList>
@@ -69,14 +71,24 @@ export const ActionListSingleGroup: React.FunctionComponent = () => {
6971
</Button>
7072
</ActionListItem>
7173
<ActionListItem>
72-
<DropdownDeprecated
74+
<Dropdown
7375
onSelect={onSelect}
74-
toggle={<KebabToggle onToggle={onToggle} />}
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+
)}
7587
isOpen={isOpen}
76-
isPlain
77-
dropdownItems={dropdownItems}
78-
position="right"
79-
/>
88+
onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
89+
>
90+
<DropdownList>{dropdownItems}</DropdownList>
91+
</Dropdown>
8092
</ActionListItem>
8193
</ActionList>
8294
</React.Fragment>

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

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,8 @@ propComponents: ['Breadcrumb', 'BreadcrumbItem', 'BreadcrumbHeading']
66
ouia: true
77
---
88

9-
import {
10-
Dropdown as DropdownDeprecated,
11-
BadgeToggle,
12-
DropdownItem as DropdownItemDeprecated
13-
} from '@patternfly/react-core/deprecated';
149
import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
10+
import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
1511

1612
## Examples
1713

‎packages/react-core/src/components/Breadcrumb/examples/BreadcrumbDropdown.tsx‎

Lines changed: 34 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,35 @@
11
import React from 'react';
2-
import { Breadcrumb, BreadcrumbItem, BreadcrumbHeading } from '@patternfly/react-core';
32
import {
4-
Dropdown as DropdownDeprecated,
5-
BadgeToggle,
6-
DropdownItem as DropdownItemDeprecated
7-
} from '@patternfly/react-core/deprecated';
3+
Breadcrumb,
4+
BreadcrumbItem,
5+
BreadcrumbHeading,
6+
Badge,
7+
Dropdown,
8+
DropdownList,
9+
DropdownItem,
10+
MenuToggle,
11+
MenuToggleElement
12+
} from '@patternfly/react-core';
813
import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
14+
import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
915

10-
const dropdownItems: JSX.Element[] = [
11-
<DropdownItemDeprecated key="edit" component="button" icon={<AngleLeftIcon />}>
16+
const dropdownItems = [
17+
<DropdownItem icon={<AngleLeftIcon />} key="edit">
1218
Edit
13-
</DropdownItemDeprecated>,
14-
<DropdownItemDeprecated key="action" component="button" icon={<AngleLeftIcon />}>
19+
</DropdownItem>,
20+
<DropdownItem icon={<AngleLeftIcon />} key="action">
1521
Deployment
16-
</DropdownItemDeprecated>,
17-
<DropdownItemDeprecated key="apps" component="button" icon={<AngleLeftIcon />}>
22+
</DropdownItem>,
23+
<DropdownItem icon={<AngleLeftIcon />} key="apps">
1824
Applications
19-
</DropdownItemDeprecated>
25+
</DropdownItem>
2026
];
2127

2228
export const BreadcrumbDropdown: React.FunctionComponent = () => {
2329
const [isOpen, setIsOpen] = React.useState(false);
2430
const badgeToggleRef = React.useRef<HTMLButtonElement>();
2531

26-
const onToggle = (_event: any, isOpen: boolean) => setIsOpen(isOpen);
32+
const onToggle = () => setIsOpen(!isOpen);
2733

2834
const onSelect = () => {
2935
setIsOpen((prevIsOpen: boolean) => !prevIsOpen);
@@ -34,16 +40,23 @@ export const BreadcrumbDropdown: React.FunctionComponent = () => {
3440
<Breadcrumb>
3541
<BreadcrumbItem component="button">Section home</BreadcrumbItem>
3642
<BreadcrumbItem isDropdown>
37-
<DropdownDeprecated
43+
<Dropdown
3844
onSelect={onSelect}
39-
toggle={
40-
<BadgeToggle ref={badgeToggleRef} onToggle={onToggle}>
41-
{dropdownItems.length}
42-
</BadgeToggle>
43-
}
45+
onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
46+
toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
47+
<MenuToggle ref={toggleRef} onClick={onToggle} isExpanded={isOpen} variant="plain">
48+
<Badge isRead screenReaderText="additional items">
49+
{dropdownItems.length}{' '}
50+
<span>
51+
<CaretDownIcon />
52+
</span>
53+
</Badge>
54+
</MenuToggle>
55+
)}
4456
isOpen={isOpen}
45-
dropdownItems={dropdownItems}
46-
/>
57+
>
58+
<DropdownList>{dropdownItems.map((dropdownItem) => dropdownItem)}</DropdownList>
59+
</Dropdown>
4760
</BreadcrumbItem>
4861
<BreadcrumbHeading component="button">Section title</BreadcrumbHeading>
4962
</Breadcrumb>

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

Lines changed: 9 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,9 @@ propComponents:
77
ouia: true
88
---
99

10-
import {
11-
Dropdown as DropdownDeprecated,
12-
DropdownItem as DropdownItemDeprecated,
13-
DropdownSeparator,
14-
KebabToggle
15-
} from '@patternfly/react-core/deprecated';
1610
import pfLogo from './pfLogo.svg';
1711
import pfLogoSmall from './pf-logo-small.svg';
12+
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
1813

1914
## Examples
2015

@@ -36,14 +31,14 @@ Most modifiers can be used in combination with each other, except for `isCompact
3631

3732
```
3833

39-
| Modifier | Description |
40-
| ------------ | ------------------------------------------------------------------------------------ |
41-
| isCompact | Modifies the card to include compact styling. Should not be used with isLarge. |
42-
| isFlat | Modifies the card to include flat styling. |
43-
| isRounded | Modifies the card to include rounded border styling. |
44-
| isLarge | Modifies the card to be large. Should not be used with isCompact. |
45-
| isFullHeight | Modifies the card so that it fills the total available height of its container. |
46-
| isPlain | Modifies the card to include plain styling, which removes the border and background. |
34+
| Modifier | Description |
35+
| --- | --- |
36+
| isCompact | Modifies the card to include compact styling. Should not be used with isLarge. |
37+
| isFlat | Modifies the card to include flat styling. |
38+
| isRounded | Modifies the card to include rounded border styling. |
39+
| isLarge | Modifies the card to be large. Should not be used with isCompact. |
40+
| isFullHeight | Modifies the card so that it fills the total available height of its container. |
41+
| isPlain | Modifies the card to include plain styling, which removes the border and background. |
4742

4843
### Header images and actions
4944

‎packages/react-core/src/components/Card/examples/CardExpandable.tsx‎

Lines changed: 44 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,15 @@ import {
66
CardBody,
77
CardFooter,
88
CardExpandableContent,
9-
Checkbox
9+
Checkbox,
10+
Dropdown,
11+
DropdownList,
12+
DropdownItem,
13+
Divider,
14+
MenuToggle,
15+
MenuToggleElement
1016
} from '@patternfly/react-core';
11-
import {
12-
Dropdown as DropdownDeprecated,
13-
DropdownItem as DropdownItemDeprecated,
14-
DropdownSeparator,
15-
KebabToggle
16-
} from '@patternfly/react-core/deprecated';
17+
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
1718

1819
export const CardExpandable: React.FunctionComponent = () => {
1920
const [isOpen, setIsOpen] = React.useState<boolean>(false);
@@ -39,34 +40,46 @@ export const CardExpandable: React.FunctionComponent = () => {
3940
setIsToggleRightAligned(!isToggleRightAligned);
4041
};
4142

42-
const dropdownItems = [
43-
<DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
44-
<DropdownItemDeprecated key="action" component="button">
45-
Action
46-
</DropdownItemDeprecated>,
47-
<DropdownItemDeprecated key="disabled link" isDisabled>
48-
Disabled Link
49-
</DropdownItemDeprecated>,
50-
<DropdownItemDeprecated key="disabled action" isDisabled component="button">
51-
Disabled Action
52-
</DropdownItemDeprecated>,
53-
<DropdownSeparator key="separator" />,
54-
<DropdownItemDeprecated key="separated link">Separated Link</DropdownItemDeprecated>,
55-
<DropdownItemDeprecated key="separated action" component="button">
56-
Separated Action
57-
</DropdownItemDeprecated>
58-
];
59-
43+
const dropdownItems = (
44+
<>
45+
<DropdownItem key="action">Action</DropdownItem>
46+
{/* Prevent default onClick functionality for example purposes */}
47+
<DropdownItem key="link" to="#" onClick={(event: any) => event.preventDefault()}>
48+
Link
49+
</DropdownItem>
50+
<DropdownItem key="disabled action" isDisabled>
51+
Disabled Action
52+
</DropdownItem>
53+
<DropdownItem key="disabled link" isDisabled to="#" onClick={(event: any) => event.preventDefault()}>
54+
Disabled Link
55+
</DropdownItem>
56+
<Divider component="li" key="separator" />
57+
<DropdownItem key="separated action">Separated Action</DropdownItem>
58+
<DropdownItem key="separated link" to="#" onClick={(event: any) => event.preventDefault()}>
59+
Separated Link
60+
</DropdownItem>
61+
</>
62+
);
6063
const headerActions = (
6164
<>
62-
<DropdownDeprecated
65+
<Dropdown
6366
onSelect={onSelect}
64-
toggle={<KebabToggle onToggle={(_event: any, isOpen: boolean) => setIsOpen(isOpen)} />}
67+
toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
68+
<MenuToggle
69+
ref={toggleRef}
70+
isExpanded={isOpen}
71+
onClick={() => setIsOpen(!isOpen)}
72+
variant="plain"
73+
aria-label="Card expandable example kebab toggle"
74+
>
75+
<EllipsisVIcon aria-hidden="true" />
76+
</MenuToggle>
77+
)}
6578
isOpen={isOpen}
66-
isPlain
67-
dropdownItems={dropdownItems}
68-
position={'right'}
69-
/>
79+
onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
80+
>
81+
<DropdownList>{dropdownItems}</DropdownList>
82+
</Dropdown>
7083
<Checkbox
7184
isChecked={isChecked}
7285
onChange={(_event, checked) => onClick(checked)}

0 commit comments

Comments
 (0)