Skip to content

Commit dbe91f7

Browse files
author
Eric Olkowski
committed
chore(Dropdown): updated deprecated usage to new dropdown
1 parent 424a94a commit dbe91f7

File tree

9 files changed

+165
-131
lines changed

9 files changed

+165
-131
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: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,6 @@ 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';
1510

1611
## Examples

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

Lines changed: 33 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,37 @@
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';
914

10-
const dropdownItems: JSX.Element[] = [
11-
<DropdownItemDeprecated key="edit" component="button" icon={<AngleLeftIcon />}>
15+
const dropdownItems = [
16+
<DropdownItem key="edit">
17+
<AngleLeftIcon />
1218
Edit
13-
</DropdownItemDeprecated>,
14-
<DropdownItemDeprecated key="action" component="button" icon={<AngleLeftIcon />}>
19+
</DropdownItem>,
20+
<DropdownItem key="action">
21+
<AngleLeftIcon />
1522
Deployment
16-
</DropdownItemDeprecated>,
17-
<DropdownItemDeprecated key="apps" component="button" icon={<AngleLeftIcon />}>
23+
</DropdownItem>,
24+
<DropdownItem key="apps">
25+
<AngleLeftIcon />
1826
Applications
19-
</DropdownItemDeprecated>
27+
</DropdownItem>
2028
];
2129

2230
export const BreadcrumbDropdown: React.FunctionComponent = () => {
2331
const [isOpen, setIsOpen] = React.useState(false);
2432
const badgeToggleRef = React.useRef<HTMLButtonElement>();
2533

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

2836
const onSelect = () => {
2937
setIsOpen((prevIsOpen: boolean) => !prevIsOpen);
@@ -34,16 +42,20 @@ export const BreadcrumbDropdown: React.FunctionComponent = () => {
3442
<Breadcrumb>
3543
<BreadcrumbItem component="button">Section home</BreadcrumbItem>
3644
<BreadcrumbItem isDropdown>
37-
<DropdownDeprecated
45+
<Dropdown
3846
onSelect={onSelect}
39-
toggle={
40-
<BadgeToggle ref={badgeToggleRef} onToggle={onToggle}>
41-
{dropdownItems.length}
42-
</BadgeToggle>
43-
}
47+
onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
48+
toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
49+
<MenuToggle ref={toggleRef} onClick={onToggle} isExpanded={isOpen} variant="plainText">
50+
<Badge isRead screenReaderText="additional items">
51+
{dropdownItems.length}
52+
</Badge>
53+
</MenuToggle>
54+
)}
4455
isOpen={isOpen}
45-
dropdownItems={dropdownItems}
46-
/>
56+
>
57+
<DropdownList>{dropdownItems.map((dropdownItem) => dropdownItem)}</DropdownList>
58+
</Dropdown>
4759
</BreadcrumbItem>
4860
<BreadcrumbHeading component="button">Section title</BreadcrumbHeading>
4961
</Breadcrumb>

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ id: Dropdown
33
section: components
44
cssPrefix: pf-c-menu
55
propComponents: ['Dropdown', DropdownGroup, 'DropdownItem', 'DropdownList', 'MenuToggle']
6-
beta: true
76
---
87

98
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';

‎packages/react-core/src/components/Dropdown/examples/DropdownBasic.tsx‎

Lines changed: 18 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -26,24 +26,30 @@ export const DropdownBasic: React.FunctionComponent = () => {
2626
)}
2727
>
2828
<DropdownList>
29-
<DropdownItem itemId={0} key="link">
30-
Link
31-
</DropdownItem>
32-
<DropdownItem itemId={1} key="action" to="#default-link2" onClick={(ev) => ev.preventDefault()}>
29+
<DropdownItem itemId={0} key="action">
3330
Action
3431
</DropdownItem>
35-
<DropdownItem itemId={2} isDisabled key="disabled link">
36-
Disabled link
32+
<DropdownItem
33+
itemId={1}
34+
key="link"
35+
to="#default-link2"
36+
// Prevent the default onClick functionality for example purposes
37+
onClick={(ev: any) => ev.preventDefault()}
38+
>
39+
Link
40+
</DropdownItem>
41+
<DropdownItem itemId={2} isDisabled key="disabled action">
42+
Disabled Action
3743
</DropdownItem>
38-
<DropdownItem itemId={3} isDisabled key="disabled action" to="#default-link4">
39-
Disabled action
44+
<DropdownItem itemId={3} isDisabled key="disabled link" to="#default-link4">
45+
Disabled Link
4046
</DropdownItem>
4147
<Divider key="separator" />
42-
<DropdownItem itemId={4} key="separated link">
43-
Separated link
48+
<DropdownItem itemId={4} key="separated action">
49+
Separated Action
4450
</DropdownItem>
45-
<DropdownItem itemId={5} key="separated action">
46-
Separated action
51+
<DropdownItem itemId={5} key="separated link" to="#default-link6" onClick={(ev) => ev.preventDefault()}>
52+
Separated Link
4753
</DropdownItem>
4854
</DropdownList>
4955
</Dropdown>

‎packages/react-core/src/components/Dropdown/examples/DropdownWithDescriptions.tsx‎

Lines changed: 13 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { Dropdown, DropdownItem, DropdownList, MenuToggle } from '@patternfly/react-core';
2+
import { Dropdown, DropdownItem, DropdownList, MenuToggle, MenuToggleElement } from '@patternfly/react-core';
33

44
export const DropdownWithDescriptions: React.FunctionComponent = () => {
55
const [isOpen, setIsOpen] = React.useState(false);
@@ -18,38 +18,33 @@ export const DropdownWithDescriptions: React.FunctionComponent = () => {
1818
<Dropdown
1919
isOpen={isOpen}
2020
onSelect={onSelect}
21-
onOpenChange={(isOpen) => setIsOpen(isOpen)}
22-
toggle={(toggleRef) => (
21+
onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
22+
toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
2323
<MenuToggle ref={toggleRef} isFullWidth onClick={onToggleClick} isExpanded={isOpen}>
2424
Dropdown
2525
</MenuToggle>
2626
)}
2727
>
2828
<DropdownList>
29-
<DropdownItem itemId={0} key="link" description="This is a description">
30-
Link
29+
<DropdownItem itemId={0} key="action" description="This is a description">
30+
Action
3131
</DropdownItem>
3232
<DropdownItem
3333
itemId={1}
34-
key="action"
34+
key="link"
3535
description="This is a very long description that describes the menu item"
3636
to="#default-link2"
37-
onClick={(ev) => ev.preventDefault()}
37+
// Prevent the default onClick functionality for example purposes
38+
onClick={(ev: any) => ev.preventDefault()}
3839
>
39-
Action
40-
</DropdownItem>
41-
<DropdownItem itemId={2} isDisabled description="Disabled link description" key="disabled link">
42-
Disabled link
40+
Link
4341
</DropdownItem>
44-
<DropdownItem
45-
itemId={3}
46-
isDisabled
47-
description="This is a description"
48-
key="disabled action"
49-
to="#default-link4"
50-
>
42+
<DropdownItem itemId={2} isDisabled description="Disabled link description" key="disabled action">
5143
Disabled action
5244
</DropdownItem>
45+
<DropdownItem itemId={3} isDisabled description="This is a description" key="disabled link" to="#default-link4">
46+
Disabled link
47+
</DropdownItem>
5348
</DropdownList>
5449
</Dropdown>
5550
);

0 commit comments

Comments
 (0)