From 13ae0b6ed6f1c8025c38876808ca96a815d8994b Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Mon, 27 Mar 2023 09:22:59 -0400 Subject: [PATCH 01/22] chore(Dropdown): updated deprecated usage to new dropdown --- .../ActionList/examples/ActionList.md | 7 +- .../examples/ActionListSingleGroup.tsx | 88 +++++++++++-------- .../Breadcrumb/examples/Breadcrumb.md | 5 -- .../examples/BreadcrumbDropdown.tsx | 54 +++++++----- .../components/Dropdown/examples/Dropdown.md | 1 - .../Dropdown/examples/DropdownBasic.tsx | 30 ++++--- .../examples/DropdownWithDescriptions.tsx | 31 +++---- .../Dropdown/examples/DropdownWithGroups.tsx | 44 ++++++---- .../examples/DropdownWithKebabToggle.tsx | 36 ++++---- 9 files changed, 165 insertions(+), 131 deletions(-) diff --git a/packages/react-core/src/components/ActionList/examples/ActionList.md b/packages/react-core/src/components/ActionList/examples/ActionList.md index 6d0ab7d2b85..de0396bafb9 100644 --- a/packages/react-core/src/components/ActionList/examples/ActionList.md +++ b/packages/react-core/src/components/ActionList/examples/ActionList.md @@ -7,12 +7,7 @@ propComponents: ['ActionList', 'ActionListGroup', 'ActionListItem'] import TimesIcon from '@patternfly/react-icons/dist/js/icons/times-icon'; import CheckIcon from '@patternfly/react-icons/dist/js/icons/check-icon'; -import { -Dropdown as DropdownDeprecated, -DropdownItem as DropdownItemDeprecated, -DropdownSeparator, -KebabToggle -} from '@patternfly/react-core/deprecated'; +import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; ## Examples diff --git a/packages/react-core/src/components/ActionList/examples/ActionListSingleGroup.tsx b/packages/react-core/src/components/ActionList/examples/ActionListSingleGroup.tsx index 509332c9d2e..ab14d443179 100644 --- a/packages/react-core/src/components/ActionList/examples/ActionListSingleGroup.tsx +++ b/packages/react-core/src/components/ActionList/examples/ActionListSingleGroup.tsx @@ -1,46 +1,48 @@ import React from 'react'; -import { ActionList, ActionListItem, Button } from '@patternfly/react-core'; import { - Dropdown as DropdownDeprecated, - DropdownItem as DropdownItemDeprecated, - DropdownSeparator, - KebabToggle -} from '@patternfly/react-core/deprecated'; + ActionList, + ActionListItem, + Button, + Dropdown, + DropdownList, + DropdownItem, + MenuToggle, + MenuToggleElement, + Divider +} from '@patternfly/react-core'; +import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; export const ActionListSingleGroup: React.FunctionComponent = () => { const [isOpen, setIsOpen] = React.useState(false); - const onToggle = ( - event: MouseEvent | TouchEvent | KeyboardEvent | React.KeyboardEvent | React.MouseEvent, - isOpen: boolean - ) => { - event.stopPropagation(); - setIsOpen(isOpen); + const onToggle = () => { + setIsOpen(!isOpen); }; - const onSelect = (event: React.SyntheticEvent) => { - event.stopPropagation(); + const onSelect = (event: React.MouseEvent | undefined) => { + event?.stopPropagation(); setIsOpen(!isOpen); }; - const dropdownItems = [ - Link, - - Action - , - - Disabled Link - , - - Disabled Action - , - , - Separated Link, - - Separated Action - - ]; - + const dropdownItems = ( + <> + + Link + + Action + + Disabled Link + + + Disabled Action + + + + Separated Link + + Separated Action + + ); return ( @@ -69,14 +71,24 @@ export const ActionListSingleGroup: React.FunctionComponent = () => { - } + toggle={(toggleRef: React.Ref) => ( + + + + )} isOpen={isOpen} - isPlain - dropdownItems={dropdownItems} - position="right" - /> + onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)} + > + {dropdownItems} + diff --git a/packages/react-core/src/components/Breadcrumb/examples/Breadcrumb.md b/packages/react-core/src/components/Breadcrumb/examples/Breadcrumb.md index aa555aa221b..8e0927f1bda 100644 --- a/packages/react-core/src/components/Breadcrumb/examples/Breadcrumb.md +++ b/packages/react-core/src/components/Breadcrumb/examples/Breadcrumb.md @@ -6,11 +6,6 @@ propComponents: ['Breadcrumb', 'BreadcrumbItem', 'BreadcrumbHeading'] ouia: true --- -import { -Dropdown as DropdownDeprecated, -BadgeToggle, -DropdownItem as DropdownItemDeprecated -} from '@patternfly/react-core/deprecated'; import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon'; ## Examples diff --git a/packages/react-core/src/components/Breadcrumb/examples/BreadcrumbDropdown.tsx b/packages/react-core/src/components/Breadcrumb/examples/BreadcrumbDropdown.tsx index ead45febd25..d10dc7e2623 100644 --- a/packages/react-core/src/components/Breadcrumb/examples/BreadcrumbDropdown.tsx +++ b/packages/react-core/src/components/Breadcrumb/examples/BreadcrumbDropdown.tsx @@ -1,29 +1,37 @@ import React from 'react'; -import { Breadcrumb, BreadcrumbItem, BreadcrumbHeading } from '@patternfly/react-core'; import { - Dropdown as DropdownDeprecated, - BadgeToggle, - DropdownItem as DropdownItemDeprecated -} from '@patternfly/react-core/deprecated'; + Breadcrumb, + BreadcrumbItem, + BreadcrumbHeading, + Badge, + Dropdown, + DropdownList, + DropdownItem, + MenuToggle, + MenuToggleElement +} from '@patternfly/react-core'; import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon'; -const dropdownItems: JSX.Element[] = [ - }> +const dropdownItems = [ + + Edit - , - }> + , + + Deployment - , - }> + , + + Applications - + ]; export const BreadcrumbDropdown: React.FunctionComponent = () => { const [isOpen, setIsOpen] = React.useState(false); const badgeToggleRef = React.useRef(); - const onToggle = (_event: any, isOpen: boolean) => setIsOpen(isOpen); + const onToggle = () => setIsOpen(!isOpen); const onSelect = () => { setIsOpen((prevIsOpen: boolean) => !prevIsOpen); @@ -34,16 +42,20 @@ export const BreadcrumbDropdown: React.FunctionComponent = () => { Section home - - {dropdownItems.length} - - } + onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)} + toggle={(toggleRef: React.Ref) => ( + + + {dropdownItems.length} + + + )} isOpen={isOpen} - dropdownItems={dropdownItems} - /> + > + {dropdownItems.map((dropdownItem) => dropdownItem)} + Section title diff --git a/packages/react-core/src/components/Dropdown/examples/Dropdown.md b/packages/react-core/src/components/Dropdown/examples/Dropdown.md index 55a091c4f13..b8a696ff553 100644 --- a/packages/react-core/src/components/Dropdown/examples/Dropdown.md +++ b/packages/react-core/src/components/Dropdown/examples/Dropdown.md @@ -4,7 +4,6 @@ section: components subsection: menus cssPrefix: pf-c-menu propComponents: ['Dropdown', DropdownGroup, 'DropdownItem', 'DropdownList', 'MenuToggle'] -beta: true --- import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownBasic.tsx b/packages/react-core/src/components/Dropdown/examples/DropdownBasic.tsx index fd3c1a5510e..1efe5dda033 100644 --- a/packages/react-core/src/components/Dropdown/examples/DropdownBasic.tsx +++ b/packages/react-core/src/components/Dropdown/examples/DropdownBasic.tsx @@ -27,24 +27,30 @@ export const DropdownBasic: React.FunctionComponent = () => { ouiaId="BasicDropdown" > - - Link - - ev.preventDefault()}> + Action - - Disabled link + ev.preventDefault()} + > + Link + + + Disabled Action - - Disabled action + + Disabled Link - - Separated link + + Separated Action - - Separated action + ev.preventDefault()}> + Separated Link diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownWithDescriptions.tsx b/packages/react-core/src/components/Dropdown/examples/DropdownWithDescriptions.tsx index 9ddc6635191..9f756bbfa84 100644 --- a/packages/react-core/src/components/Dropdown/examples/DropdownWithDescriptions.tsx +++ b/packages/react-core/src/components/Dropdown/examples/DropdownWithDescriptions.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Dropdown, DropdownItem, DropdownList, MenuToggle } from '@patternfly/react-core'; +import { Dropdown, DropdownItem, DropdownList, MenuToggle, MenuToggleElement } from '@patternfly/react-core'; export const DropdownWithDescriptions: React.FunctionComponent = () => { const [isOpen, setIsOpen] = React.useState(false); @@ -18,38 +18,33 @@ export const DropdownWithDescriptions: React.FunctionComponent = () => { setIsOpen(isOpen)} - toggle={(toggleRef) => ( + onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)} + toggle={(toggleRef: React.Ref) => ( Dropdown )} > - - Link + + Action ev.preventDefault()} + // Prevent the default onClick functionality for example purposes + onClick={(ev: any) => ev.preventDefault()} > - Action - - - Disabled link + Link - + Disabled action + + Disabled link + ); diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownWithGroups.tsx b/packages/react-core/src/components/Dropdown/examples/DropdownWithGroups.tsx index 57c938dde34..7c88c3b0955 100644 --- a/packages/react-core/src/components/Dropdown/examples/DropdownWithGroups.tsx +++ b/packages/react-core/src/components/Dropdown/examples/DropdownWithGroups.tsx @@ -1,5 +1,13 @@ import React from 'react'; -import { Dropdown, DropdownGroup, DropdownItem, DropdownList, MenuToggle, Divider } from '@patternfly/react-core'; +import { + Dropdown, + DropdownGroup, + DropdownItem, + DropdownList, + MenuToggle, + MenuToggleElement, + Divider +} from '@patternfly/react-core'; export const DropdownWithGroups: React.FunctionComponent = () => { const [isOpen, setIsOpen] = React.useState(false); @@ -18,8 +26,8 @@ export const DropdownWithGroups: React.FunctionComponent = () => { setIsOpen(isOpen)} - toggle={(toggleRef) => ( + onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)} + toggle={(toggleRef: React.Ref) => ( Dropdown @@ -27,34 +35,40 @@ export const DropdownWithGroups: React.FunctionComponent = () => { > - - Link - - ev.preventDefault()}> + Action + ev.preventDefault()} + > + Link + - - Group 2 link + + Group 2 action - - group 2 action + ev.preventDefault()}> + Group 2 link - - Group 3 link - - + Group 3 action + ev.preventDefault()}> + Group 3 link + diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownWithKebabToggle.tsx b/packages/react-core/src/components/Dropdown/examples/DropdownWithKebabToggle.tsx index 25ae5e23fae..e0a8f56db05 100644 --- a/packages/react-core/src/components/Dropdown/examples/DropdownWithKebabToggle.tsx +++ b/packages/react-core/src/components/Dropdown/examples/DropdownWithKebabToggle.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Dropdown, DropdownItem, DropdownList, Divider, MenuToggle } from '@patternfly/react-core'; +import { Dropdown, DropdownItem, DropdownList, Divider, MenuToggle, MenuToggleElement } from '@patternfly/react-core'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; export const DropdownWithKebab: React.FunctionComponent = () => { @@ -19,8 +19,8 @@ export const DropdownWithKebab: React.FunctionComponent = () => { setIsOpen(isOpen)} - toggle={(toggleRef) => ( + onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)} + toggle={(toggleRef: React.Ref) => ( { )} > - - Link - - ev.preventDefault()}> + Action - - Disabled link + ev.preventDefault()} + > + Link + + + Disabled Action - - Disabled action + + Disabled Link - - Separated link + + Separated Action - - Separated action + ev.preventDefault()}> + Separated Link From 627be75a5d491a6cb658407255e00709ae670284 Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Tue, 28 Mar 2023 13:22:26 -0400 Subject: [PATCH 02/22] Updated Card through DataList --- .../src/components/Card/examples/Card.md | 23 ++- .../Card/examples/CardExpandable.tsx | 68 ++++---- .../Card/examples/CardExpandableWithIcon.tsx | 72 +++++---- .../Card/examples/CardHeaderInCardHead.tsx | 72 +++++---- .../Card/examples/CardLegacySelectable.tsx | 78 +++++---- .../examples/CardOnlyActionsInCardHead.tsx | 70 ++++---- .../Card/examples/CardSelectable.tsx | 81 +++++----- .../Card/examples/CardWithImageAndActions.tsx | 73 +++++---- .../DataList/__tests__/DataList.test.tsx | 21 ++- .../__snapshots__/DataList.test.tsx.snap | 103 ++++++++++-- .../components/DataList/examples/DataList.md | 7 +- .../DataList/examples/DataListActions.tsx | 56 ++++--- .../DataList/examples/DataListCheckboxes.tsx | 149 +++++++++++------- .../DataList/examples/DataListExpandable.tsx | 140 +++++++++------- .../examples/DataListMixedExpandable.tsx | 140 +++++++++------- .../examples/DataListSelectableRows.tsx | 98 +++++++----- .../examples/DataListWidthModifiers.tsx | 108 ++++++++----- .../Dropdown/examples/DropdownBasic.tsx | 6 +- 18 files changed, 828 insertions(+), 537 deletions(-) diff --git a/packages/react-core/src/components/Card/examples/Card.md b/packages/react-core/src/components/Card/examples/Card.md index d65ff910609..449fd16dece 100644 --- a/packages/react-core/src/components/Card/examples/Card.md +++ b/packages/react-core/src/components/Card/examples/Card.md @@ -7,14 +7,9 @@ propComponents: ouia: true --- -import { -Dropdown as DropdownDeprecated, -DropdownItem as DropdownItemDeprecated, -DropdownSeparator, -KebabToggle -} from '@patternfly/react-core/deprecated'; import pfLogo from './pfLogo.svg'; import pfLogoSmall from './pf-logo-small.svg'; +import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; ## Examples @@ -36,14 +31,14 @@ Most modifiers can be used in combination with each other, except for `isCompact ``` -| Modifier | Description | -| ------------ | ------------------------------------------------------------------------------------ | -| isCompact | Modifies the card to include compact styling. Should not be used with isLarge. | -| isFlat | Modifies the card to include flat styling. | -| isRounded | Modifies the card to include rounded border styling. | -| isLarge | Modifies the card to be large. Should not be used with isCompact. | -| isFullHeight | Modifies the card so that it fills the total available height of its container. | -| isPlain | Modifies the card to include plain styling, which removes the border and background. | +| Modifier | Description | +| --- | --- | +| isCompact | Modifies the card to include compact styling. Should not be used with isLarge. | +| isFlat | Modifies the card to include flat styling. | +| isRounded | Modifies the card to include rounded border styling. | +| isLarge | Modifies the card to be large. Should not be used with isCompact. | +| isFullHeight | Modifies the card so that it fills the total available height of its container. | +| isPlain | Modifies the card to include plain styling, which removes the border and background. | ### Header images and actions diff --git a/packages/react-core/src/components/Card/examples/CardExpandable.tsx b/packages/react-core/src/components/Card/examples/CardExpandable.tsx index 6871cba5068..54e388f0cea 100644 --- a/packages/react-core/src/components/Card/examples/CardExpandable.tsx +++ b/packages/react-core/src/components/Card/examples/CardExpandable.tsx @@ -6,14 +6,15 @@ import { CardBody, CardFooter, CardExpandableContent, - Checkbox + Checkbox, + Dropdown, + DropdownList, + DropdownItem, + Divider, + MenuToggle, + MenuToggleElement } from '@patternfly/react-core'; -import { - Dropdown as DropdownDeprecated, - DropdownItem as DropdownItemDeprecated, - DropdownSeparator, - KebabToggle -} from '@patternfly/react-core/deprecated'; +import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; export const CardExpandable: React.FunctionComponent = () => { const [isOpen, setIsOpen] = React.useState(false); @@ -39,34 +40,39 @@ export const CardExpandable: React.FunctionComponent = () => { setIsToggleRightAligned(!isToggleRightAligned); }; - const dropdownItems = [ - Link, - - Action - , - - Disabled Link - , - - Disabled Action - , - , - Separated Link, - - Separated Action - - ]; - + const dropdownItems = ( + <> + Action + {/* Prevent default onClick functionality for example purposes */} + event.preventDefault()}> + Link + + + Disabled Action + + event.preventDefault()}> + Disabled Link + + ,Separated Action + event.preventDefault()}> + Separated Link + + + ); const headerActions = ( <> - setIsOpen(isOpen)} />} + toggle={(toggleRef: React.Ref) => ( + setIsOpen(!isOpen)} variant="plain"> + + + )} isOpen={isOpen} - isPlain - dropdownItems={dropdownItems} - position={'right'} - /> + onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)} + > + {dropdownItems} + onClick(checked)} diff --git a/packages/react-core/src/components/Card/examples/CardExpandableWithIcon.tsx b/packages/react-core/src/components/Card/examples/CardExpandableWithIcon.tsx index 09df6296b8f..0d147739023 100644 --- a/packages/react-core/src/components/Card/examples/CardExpandableWithIcon.tsx +++ b/packages/react-core/src/components/Card/examples/CardExpandableWithIcon.tsx @@ -1,12 +1,20 @@ import React from 'react'; -import { Card, CardHeader, CardBody, CardFooter, CardExpandableContent, Checkbox } from '@patternfly/react-core'; import { - Dropdown as DropdownDeprecated, - DropdownItem as DropdownItemDeprecated, - DropdownSeparator, - KebabToggle -} from '@patternfly/react-core/deprecated'; + Card, + CardHeader, + CardBody, + CardFooter, + CardExpandableContent, + Checkbox, + Dropdown, + DropdownList, + DropdownItem, + Divider, + MenuToggle, + MenuToggleElement +} from '@patternfly/react-core'; import pfLogoSmall from './pf-logo-small.svg'; +import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; export const CardExpandableWithIcon: React.FunctionComponent = () => { const [isOpen, setIsOpen] = React.useState(false); @@ -27,34 +35,40 @@ export const CardExpandableWithIcon: React.FunctionComponent = () => { setIsExpanded(!isExpanded); }; - const dropdownItems = [ - Link, - - Action - , - - Disabled Link - , - - Disabled Action - , - , - Separated Link, - - Separated Action - - ]; + const dropdownItems = ( + <> + Action + {/* Prevent default onClick functionality for example purposes */} + event.preventDefault()}> + Link + + + Disabled Action + + event.preventDefault()}> + Disabled Link + + ,Separated Action + event.preventDefault()}> + Separated Link + + + ); const headerActions = ( <> - setIsOpen(isOpen)} />} + toggle={(toggleRef: React.Ref) => ( + setIsOpen(!isOpen)} variant="plain"> + + + )} isOpen={isOpen} - isPlain - dropdownItems={dropdownItems} - position={'right'} - /> + onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)} + > + {dropdownItems} + onClick(checked)} diff --git a/packages/react-core/src/components/Card/examples/CardHeaderInCardHead.tsx b/packages/react-core/src/components/Card/examples/CardHeaderInCardHead.tsx index 82b1af8b1f7..f0de19065f2 100644 --- a/packages/react-core/src/components/Card/examples/CardHeaderInCardHead.tsx +++ b/packages/react-core/src/components/Card/examples/CardHeaderInCardHead.tsx @@ -1,11 +1,19 @@ import React from 'react'; -import { Card, CardHeader, CardTitle, CardBody, CardFooter, Checkbox } from '@patternfly/react-core'; import { - Dropdown as DropdownDeprecated, - DropdownItem as DropdownItemDeprecated, - DropdownSeparator, - KebabToggle -} from '@patternfly/react-core/deprecated'; + Card, + CardHeader, + CardTitle, + CardBody, + CardFooter, + Checkbox, + Dropdown, + DropdownList, + DropdownItem, + MenuToggle, + MenuToggleElement, + Divider +} from '@patternfly/react-core'; +import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; export const CardTitleInHeader: React.FunctionComponent = () => { const [isOpen, setIsOpen] = React.useState(false); @@ -18,34 +26,40 @@ export const CardTitleInHeader: React.FunctionComponent = () => { setIsChecked(checked); }; - const dropdownItems = [ - Link, - - Action - , - - Disabled Link - , - - Disabled Action - , - , - Separated Link, - - Separated Action - - ]; + const dropdownItems = ( + <> + Action + {/* Prevent default onClick functionality for example purposes */} + event.preventDefault()}> + Link + + + Disabled Action + + event.preventDefault()}> + Disabled Link + + ,Separated Action + event.preventDefault()}> + Separated Link + + + ); const headerActions = ( <> - setIsOpen(isOpen)} />} + toggle={(toggleRef: React.Ref) => ( + setIsOpen(!isOpen)} variant="plain"> + + + )} isOpen={isOpen} - isPlain - dropdownItems={dropdownItems} - position={'right'} - /> + onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)} + > + {dropdownItems} + onClick(checked)} diff --git a/packages/react-core/src/components/Card/examples/CardLegacySelectable.tsx b/packages/react-core/src/components/Card/examples/CardLegacySelectable.tsx index cb1f647638e..d9e04a984f0 100644 --- a/packages/react-core/src/components/Card/examples/CardLegacySelectable.tsx +++ b/packages/react-core/src/components/Card/examples/CardLegacySelectable.tsx @@ -1,11 +1,17 @@ import React from 'react'; -import { Card, CardHeader, CardTitle, CardBody } from '@patternfly/react-core'; import { - Dropdown as DropdownDeprecated, - DropdownItem as DropdownItemDeprecated, - DropdownSeparator, - KebabToggle -} from '@patternfly/react-core/deprecated'; + Card, + CardHeader, + CardTitle, + CardBody, + Dropdown, + DropdownList, + DropdownItem, + MenuToggle, + MenuToggleElement, + Divider +} from '@patternfly/react-core'; +import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; export const CardLegacySelectable: React.FunctionComponent = () => { const [selected, setSelected] = React.useState(''); @@ -32,44 +38,50 @@ export const CardLegacySelectable: React.FunctionComponent = () => { setSelected(newSelected); }; - const onToggle = (event: any, isOpen: boolean) => { - event.stopPropagation(); - setIsKebabOpen(isOpen); + const onToggle = (event: React.MouseEvent) => { + event?.stopPropagation(); + setIsKebabOpen(!isKebabOpen); }; - const onSelect = (event: React.SyntheticEvent | undefined) => { + const onSelect = (event: React.MouseEvent | undefined) => { event?.stopPropagation(); setIsKebabOpen(!isKebabOpen); }; - const dropdownItems = [ - Link, - - Action - , - - Disabled Link - , - - Disabled Action - , - , - Separated Link, - - Separated Action - - ]; + const dropdownItems = ( + <> + Action + {/* Prevent default onClick functionality for example purposes */} + event.preventDefault()}> + Link + + + Disabled Action + + event.preventDefault()}> + Disabled Link + + ,Separated Action + event.preventDefault()}> + Separated Link + + + ); const headerActions = ( <> - } + toggle={(toggleRef: React.Ref) => ( + + + + )} isOpen={isKebabOpen} - isPlain - dropdownItems={dropdownItems} - position={'right'} - /> + onOpenChange={(isOpen: boolean) => setIsKebabOpen(isOpen)} + > + {dropdownItems} + ); diff --git a/packages/react-core/src/components/Card/examples/CardOnlyActionsInCardHead.tsx b/packages/react-core/src/components/Card/examples/CardOnlyActionsInCardHead.tsx index ef14942d7be..acce15d2bfa 100644 --- a/packages/react-core/src/components/Card/examples/CardOnlyActionsInCardHead.tsx +++ b/packages/react-core/src/components/Card/examples/CardOnlyActionsInCardHead.tsx @@ -1,11 +1,17 @@ import React from 'react'; -import { Checkbox, Card, CardHeader, CardBody } from '@patternfly/react-core'; import { - Dropdown as DropdownDeprecated, - DropdownItem as DropdownItemDeprecated, - DropdownSeparator, - KebabToggle -} from '@patternfly/react-core/deprecated'; + Checkbox, + Card, + CardHeader, + CardBody, + Dropdown, + DropdownList, + DropdownItem, + MenuToggle, + MenuToggleElement, + Divider +} from '@patternfly/react-core'; +import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; export const CardOnlyActionsInCardHead: React.FunctionComponent = () => { const [isOpen, setIsOpen] = React.useState(false); @@ -18,34 +24,40 @@ export const CardOnlyActionsInCardHead: React.FunctionComponent = () => { setIsChecked(checked); }; - const dropdownItems = [ - Link, - - Action - , - - Disabled Link - , - - Disabled Action - , - , - Separated Link, - - Separated Action - - ]; + const dropdownItems = ( + <> + Action + {/* Prevent default onClick functionality for example purposes */} + event.preventDefault()}> + Link + + + Disabled Action + + event.preventDefault()}> + Disabled Link + + ,Separated Action + event.preventDefault()}> + Separated Link + + + ); const headerActions = ( <> - setIsOpen(isOpen)} />} + toggle={(toggleRef: React.Ref) => ( + setIsOpen(!isOpen)} variant="plain"> + + + )} isOpen={isOpen} - isPlain - dropdownItems={dropdownItems} - position={'right'} - /> + onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)} + > + {dropdownItems} + onClick(checked)} diff --git a/packages/react-core/src/components/Card/examples/CardSelectable.tsx b/packages/react-core/src/components/Card/examples/CardSelectable.tsx index 9849709b62e..72129e48a81 100644 --- a/packages/react-core/src/components/Card/examples/CardSelectable.tsx +++ b/packages/react-core/src/components/Card/examples/CardSelectable.tsx @@ -1,11 +1,17 @@ import React from 'react'; -import { Card, CardHeader, CardTitle, CardBody } from '@patternfly/react-core'; import { - Dropdown as DropdownDeprecated, - DropdownItem as DropdownItemDeprecated, - DropdownSeparator, - KebabToggle -} from '@patternfly/react-core/deprecated'; + Card, + CardHeader, + CardTitle, + CardBody, + Dropdown, + DropdownList, + DropdownItem, + MenuToggle, + MenuToggleElement, + Divider +} from '@patternfly/react-core'; +import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; export const CardSelectable: React.FunctionComponent = () => { const [selected, setSelected] = React.useState(''); @@ -32,47 +38,50 @@ export const CardSelectable: React.FunctionComponent = () => { setSelected(newSelected); }; - const onToggle = ( - event: MouseEvent | TouchEvent | KeyboardEvent | React.KeyboardEvent | React.MouseEvent, - isOpen: boolean - ) => { - event.stopPropagation(); - setIsKebabOpen(isOpen); + const onToggle = (event: React.MouseEvent | undefined) => { + event?.stopPropagation(); + setIsKebabOpen(!isKebabOpen); }; - const onSelect = (event: React.SyntheticEvent | undefined) => { + const onSelect = (event: React.MouseEvent | undefined) => { event?.stopPropagation(); setIsKebabOpen(false); }; - const dropdownItems = [ - Link, - - Action - , - - Disabled Link - , - - Disabled Action - , - , - Separated Link, - - Separated Action - - ]; + const dropdownItems = ( + <> + Action + {/* Prevent default onClick functionality for example purposes */} + event.preventDefault()}> + Link + + + Disabled Action + + event.preventDefault()}> + Disabled Link + + ,Separated Action + event.preventDefault()}> + Separated Link + + + ); const headerActions = ( <> - } + toggle={(toggleRef: React.Ref) => ( + + + + )} isOpen={isKebabOpen} - isPlain - dropdownItems={dropdownItems} - position={'right'} - /> + onOpenChange={(isOpen: boolean) => setIsKebabOpen(isOpen)} + > + {dropdownItems} + ); diff --git a/packages/react-core/src/components/Card/examples/CardWithImageAndActions.tsx b/packages/react-core/src/components/Card/examples/CardWithImageAndActions.tsx index 4062d29ed03..7226077c85f 100644 --- a/packages/react-core/src/components/Card/examples/CardWithImageAndActions.tsx +++ b/packages/react-core/src/components/Card/examples/CardWithImageAndActions.tsx @@ -1,11 +1,20 @@ import React from 'react'; -import { Brand, Card, CardHeader, CardTitle, CardBody, CardFooter, Checkbox } from '@patternfly/react-core'; import { - Dropdown as DropdownDeprecated, - DropdownItem as DropdownItemDeprecated, - DropdownSeparator, - KebabToggle -} from '@patternfly/react-core/deprecated'; + Brand, + Card, + CardHeader, + CardTitle, + CardBody, + CardFooter, + Checkbox, + Dropdown, + DropdownList, + DropdownItem, + MenuToggle, + MenuToggleElement, + Divider +} from '@patternfly/react-core'; +import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; import pfLogo from './pfLogo.svg'; export const CardWithImageAndActions: React.FunctionComponent = () => { @@ -23,34 +32,40 @@ export const CardWithImageAndActions: React.FunctionComponent = () => { setHasNoOffset(checked); }; - const dropdownItems = [ - Link, - - Action - , - - Disabled Link - , - - Disabled Action - , - , - Separated Link, - - Separated Action - - ]; + const dropdownItems = ( + <> + Action + {/* Prevent default onClick functionality for example purposes */} + event.preventDefault()}> + Link + + + Disabled Action + + event.preventDefault()}> + Disabled Link + + ,Separated Action + event.preventDefault()}> + Separated Link + + + ); const headerActions = ( <> - setIsOpen(isOpen)} />} + toggle={(toggleRef: React.Ref) => ( + setIsOpen(!isOpen)} variant="plain"> + + + )} isOpen={isOpen} - isPlain - dropdownItems={dropdownItems} - position={'right'} - /> + onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)} + > + {dropdownItems} + onClick(checked)} diff --git a/packages/react-core/src/components/DataList/__tests__/DataList.test.tsx b/packages/react-core/src/components/DataList/__tests__/DataList.test.tsx index 52782d2e133..16d535b3a79 100644 --- a/packages/react-core/src/components/DataList/__tests__/DataList.test.tsx +++ b/packages/react-core/src/components/DataList/__tests__/DataList.test.tsx @@ -12,7 +12,8 @@ import { DataListItemCells } from '../DataListItemCells'; import { DataListItemRow } from '../DataListItemRow'; import { DataListContent } from '../DataListContent'; import { Button } from '../../Button'; -import { DropdownItem, Dropdown, KebabToggle, DropdownPosition } from '../../../deprecated/components/Dropdown'; +import { Dropdown, DropdownList, DropdownItem } from '../../Dropdown'; +import { MenuToggle } from '../../MenuToggle'; describe('DataList', () => { test('List default', () => { @@ -276,19 +277,17 @@ describe('DataList', () => { test('DataListAction dropdown', () => { const { asFragment } = render( - } - dropdownItems={[ - + }> + + action-1 - , - + + , + action-2 - ]} - /> + + ); expect(asFragment()).toMatchSnapshot(); diff --git a/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataList.test.tsx.snap b/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataList.test.tsx.snap index 1ea08354438..bb7e4cc088e 100644 --- a/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataList.test.tsx.snap +++ b/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataList.test.tsx.snap @@ -130,31 +130,104 @@ exports[`DataList DataListAction dropdown 1`] = ` class="pf-c-data-list__action" >
+
+
+ +
+
diff --git a/packages/react-core/src/components/DataList/examples/DataList.md b/packages/react-core/src/components/DataList/examples/DataList.md index 9a15bb60ac7..a9b28b5b001 100644 --- a/packages/react-core/src/components/DataList/examples/DataList.md +++ b/packages/react-core/src/components/DataList/examples/DataList.md @@ -18,15 +18,10 @@ propComponents: ] --- -import { -Dropdown as DropdownDeprecated, -DropdownItem as DropdownItemDeprecated, -DropdownPosition, -KebabToggle -} from '@patternfly/react-core/deprecated'; import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon'; import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-icon'; import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon'; +import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; import { css } from '@patternfly/react-styles'; ## Examples diff --git a/packages/react-core/src/components/DataList/examples/DataListActions.tsx b/packages/react-core/src/components/DataList/examples/DataListActions.tsx index d88eb552c6c..3647a764e11 100644 --- a/packages/react-core/src/components/DataList/examples/DataListActions.tsx +++ b/packages/react-core/src/components/DataList/examples/DataListActions.tsx @@ -6,21 +6,21 @@ import { DataListCell, DataListItemRow, DataListItemCells, - DataListAction + DataListAction, + Dropdown, + DropdownList, + DropdownItem, + MenuToggle, + MenuToggleElement } from '@patternfly/react-core'; -import { - Dropdown as DropdownDeprecated, - DropdownItem as DropdownItemDeprecated, - DropdownPosition, - KebabToggle -} from '@patternfly/react-core/deprecated'; +import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; export const DataListActions: React.FunctionComponent = () => { const [isOpen, setIsOpen] = React.useState(false); const [isDeleted, setIsDeleted] = React.useState(false); - const onToggle = (_event: any, isOpen: boolean) => { - setIsOpen(isOpen); + const onToggle = () => { + setIsOpen(!isOpen); }; const onSelect = () => { @@ -77,22 +77,32 @@ export const DataListActions: React.FunctionComponent = () => { aria-label="Actions" isPlainButtonAction > - } - dropdownItems={[ - Link, - - Action - , - + toggle={(toggleRef: React.Ref) => ( + + + + )} + isOpen={isOpen} + onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)} + > + + Action + {/* Prevent default onClick functionality for example + purposes */} + event.preventDefault()}> + Link + + + Disabled Action + + event.preventDefault()}> Disabled Link - - ]} - /> + + + diff --git a/packages/react-core/src/components/DataList/examples/DataListCheckboxes.tsx b/packages/react-core/src/components/DataList/examples/DataListCheckboxes.tsx index 0b7ddf037b5..c653690d8a7 100644 --- a/packages/react-core/src/components/DataList/examples/DataListCheckboxes.tsx +++ b/packages/react-core/src/components/DataList/examples/DataListCheckboxes.tsx @@ -7,42 +7,43 @@ import { DataListItemRow, DataListCell, DataListCheck, - DataListAction + DataListAction, + Dropdown, + DropdownList, + DropdownItem, + MenuToggle, + MenuToggleElement } from '@patternfly/react-core'; -import { - Dropdown as DropdownDeprecated, - DropdownItem as DropdownItemDeprecated, - DropdownPosition, - KebabToggle -} from '@patternfly/react-core/deprecated'; +import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; export const DataListCheckboxes: React.FunctionComponent = () => { const [isOpen1, setIsOpen1] = React.useState(false); const [isOpen2, setIsOpen2] = React.useState(false); const [isOpen3, setIsOpen3] = React.useState(false); - const onToggle1 = (_event: any, isOpen1: boolean) => { - setIsOpen1(isOpen1); + const onToggle1 = () => { + setIsOpen1(!isOpen1); }; const onSelect1 = () => { setIsOpen1(!isOpen1); }; - const onToggle2 = (_event: any, isOpen2: boolean) => { - setIsOpen2(isOpen2); + const onToggle2 = () => { + setIsOpen2(!isOpen2); }; const onSelect2 = () => { setIsOpen2(!isOpen2); }; - const onToggle3 = (_event: any, isOpen3: boolean) => { - setIsOpen3(isOpen3); + const onToggle3 = () => { + setIsOpen3(!isOpen3); }; const onSelect3 = () => { setIsOpen3(!isOpen3); }; + return ( @@ -74,22 +75,32 @@ export const DataListCheckboxes: React.FunctionComponent = () => { aria-label="Actions" isPlainButtonAction > - } - dropdownItems={[ - Link, - - Action - , - + toggle={(toggleRef: React.Ref) => ( + + + + )} + isOpen={isOpen1} + onOpenChange={(isOpen: boolean) => setIsOpen1(isOpen)} + > + + Action + {/* Prevent default onClick functionality for example + purposes */} + event.preventDefault()}> + Link + + + Disabled Action + + event.preventDefault()}> Disabled Link - - ]} - /> + + + @@ -114,21 +125,32 @@ export const DataListCheckboxes: React.FunctionComponent = () => { aria-label="Actions" isPlainButtonAction > - } - dropdownItems={[ - - Primary - , - - Secondary - - ]} - /> + toggle={(toggleRef: React.Ref) => ( + + + + )} + isOpen={isOpen2} + onOpenChange={(isOpen: boolean) => setIsOpen2(isOpen)} + > + + Action + {/* Prevent default onClick functionality for example + purposes */} + event.preventDefault()}> + Link + + + Disabled Action + + event.preventDefault()}> + Disabled Link + + + { aria-label="Actions" isPlainButtonAction > - } - dropdownItems={[ - - Primary - , - - Secondary - , - - Secondary - , - - Secondary - - ]} - /> + toggle={(toggleRef: React.Ref) => ( + + + + )} + isOpen={isOpen3} + onOpenChange={(isOpen: boolean) => setIsOpen3(isOpen)} + > + + Action + {/* Prevent default onClick functionality for example + purposes */} + event.preventDefault()}> + Link + + + Disabled Action + + event.preventDefault()}> + Disabled Link + + + { @@ -23,23 +23,23 @@ export const DataListExpandable: React.FunctionComponent = () => { const [isOpen3, setIsOpen3] = React.useState(false); const [expanded, setExpanded] = React.useState(['ex-toggle1', 'ex-toggle3']); - const onToggle1 = (_event: any, isOpen1: boolean) => { - setIsOpen1(isOpen1); + const onToggle1 = () => { + setIsOpen1(!isOpen1); }; const onSelect1 = () => { setIsOpen1(!isOpen1); }; - const onToggle2 = (_event: any, isOpen2: boolean) => { - setIsOpen2(isOpen2); + const onToggle2 = () => { + setIsOpen2(!isOpen2); }; const onSelect2 = () => { setIsOpen2(!isOpen2); }; - const onToggle3 = (_event: any, isOpen3: boolean) => { - setIsOpen3(isOpen3); + const onToggle3 = () => { + setIsOpen3(!isOpen3); }; const onSelect3 = () => { @@ -87,22 +87,32 @@ export const DataListExpandable: React.FunctionComponent = () => { aria-label="Actions" isPlainButtonAction > - } - dropdownItems={[ - Link, - - Action - , - + toggle={(toggleRef: React.Ref) => ( + + + + )} + isOpen={isOpen1} + onOpenChange={(isOpen: boolean) => setIsOpen1(isOpen)} + > + + Action + {/* Prevent default onClick functionality for example + purposes */} + event.preventDefault()}> + Link + + + Disabled Action + + event.preventDefault()}> Disabled Link - - ]} - /> + + + { aria-label="Actions" isPlainButtonAction > - } - dropdownItems={[ - Link, - - Action - , - + toggle={(toggleRef: React.Ref) => ( + + + + )} + isOpen={isOpen2} + onOpenChange={(isOpen: boolean) => setIsOpen2(isOpen)} + > + + Action + {/* Prevent default onClick functionality for example + purposes */} + event.preventDefault()}> + Link + + + Disabled Action + + event.preventDefault()}> Disabled Link - - ]} - /> + + + { aria-label="Actions" isPlainButtonAction > - } - dropdownItems={[ - Link, - - Action - , - + toggle={(toggleRef: React.Ref) => ( + + + + )} + isOpen={isOpen3} + onOpenChange={(isOpen: boolean) => setIsOpen3(isOpen)} + > + + Action + {/* Prevent default onClick functionality for example + purposes */} + event.preventDefault()}> + Link + + + Disabled Action + + event.preventDefault()}> Disabled Link - - ]} - /> + + + { @@ -23,24 +23,24 @@ export const DataListMixedExpandable: React.FunctionComponent = () => { const [isOpen3, setIsOpen3] = React.useState(false); const [expanded, setExpanded] = React.useState(['m-ex-toggle1', 'm-ex-toggle3']); - const onToggle1 = (_event: any, isOpen1: boolean) => { - setIsOpen1(isOpen1); + const onToggle1 = () => { + setIsOpen1(!isOpen1); }; const onSelect1 = () => { setIsOpen1(!isOpen1); }; - const onToggle2 = (_event: any, isOpen2: boolean) => { - setIsOpen2(isOpen2); + const onToggle2 = () => { + setIsOpen2(!isOpen2); }; const onSelect2 = () => { setIsOpen2(!isOpen2); }; - const onToggle3 = (_event: any, isOpen3: boolean) => { - setIsOpen3(isOpen3); + const onToggle3 = () => { + setIsOpen3(!isOpen3); }; const onSelect3 = () => { @@ -89,22 +89,32 @@ export const DataListMixedExpandable: React.FunctionComponent = () => { aria-label="Actions" isPlainButtonAction > - } - dropdownItems={[ - Link, - - Action - , - + toggle={(toggleRef: React.Ref) => ( + + + + )} + isOpen={isOpen1} + onOpenChange={(isOpen: boolean) => setIsOpen1(isOpen)} + > + + Action + {/* Prevent default onClick functionality for example + purposes */} + event.preventDefault()}> + Link + + + Disabled Action + + event.preventDefault()}> Disabled Link - - ]} - /> + + + { aria-label="Actions" isPlainButtonAction > - } - dropdownItems={[ - Link, - - Action - , - + toggle={(toggleRef: React.Ref) => ( + + + + )} + isOpen={isOpen2} + onOpenChange={(isOpen: boolean) => setIsOpen2(isOpen)} + > + + Action + {/* Prevent default onClick functionality for example + purposes */} + event.preventDefault()}> + Link + + + Disabled Action + + event.preventDefault()}> Disabled Link - - ]} - /> + + + @@ -201,22 +221,32 @@ export const DataListMixedExpandable: React.FunctionComponent = () => { aria-label="Actions" isPlainButtonAction > - } - dropdownItems={[ - Link, - - Action - , - + toggle={(toggleRef: React.Ref) => ( + + + + )} + isOpen={isOpen3} + onOpenChange={(isOpen: boolean) => setIsOpen3(isOpen)} + > + + Action + {/* Prevent default onClick functionality for example + purposes */} + event.preventDefault()}> + Link + + + Disabled Action + + event.preventDefault()}> Disabled Link - - ]} - /> + + + { const [isOpen1, setIsOpen1] = React.useState(false); const [isOpen2, setIsOpen2] = React.useState(false); const [selectedDataListItemId, setSelectedDataListItemId] = React.useState(''); - const onToggle1 = (_event: any, isOpen1: boolean) => { - setIsOpen1(isOpen1); + const onToggle1 = () => { + setIsOpen1(!isOpen1); }; const onSelect1 = () => { setIsOpen1(!isOpen1); }; - const onToggle2 = (_event: any, isOpen2: boolean) => { - setIsOpen2(isOpen2); + const onToggle2 = () => { + setIsOpen2(!isOpen2); }; const onSelect2 = () => { @@ -67,22 +67,32 @@ export const DataListSelectableRows: React.FunctionComponent = () => { aria-label="Actions" isPlainButtonAction > - } - dropdownItems={[ - Link, - - Action - , - + toggle={(toggleRef: React.Ref) => ( + + + + )} + isOpen={isOpen1} + onOpenChange={(isOpen: boolean) => setIsOpen1(isOpen)} + > + + Action + {/* Prevent default onClick functionality for example + purposes */} + event.preventDefault()}> + Link + + + Disabled Action + + event.preventDefault()}> Disabled Link - - ]} - /> + + + @@ -102,22 +112,32 @@ export const DataListSelectableRows: React.FunctionComponent = () => { aria-label="Actions" isPlainButtonAction > - } - dropdownItems={[ - Link, - - Action - , - + toggle={(toggleRef: React.Ref) => ( + + + + )} + isOpen={isOpen2} + onOpenChange={(isOpen: boolean) => setIsOpen2(isOpen)} + > + + Action + {/* Prevent default onClick functionality for example + purposes */} + event.preventDefault()}> + Link + + + Disabled Action + + event.preventDefault()}> Disabled Link - - ]} - /> + + + diff --git a/packages/react-core/src/components/DataList/examples/DataListWidthModifiers.tsx b/packages/react-core/src/components/DataList/examples/DataListWidthModifiers.tsx index 97e9ee0d807..8679cc59703 100644 --- a/packages/react-core/src/components/DataList/examples/DataListWidthModifiers.tsx +++ b/packages/react-core/src/components/DataList/examples/DataListWidthModifiers.tsx @@ -11,30 +11,30 @@ import { DataListItemRow, Text, TextVariants, - TextContent + TextContent, + Dropdown, + DropdownList, + DropdownItem, + MenuToggle, + MenuToggleElement } from '@patternfly/react-core'; -import { - Dropdown as DropdownDeprecated, - DropdownItem as DropdownItemDeprecated, - KebabToggle, - DropdownPosition -} from '@patternfly/react-core/deprecated'; +import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; export const DataListWidthModifiers: React.FunctionComponent = () => { const [show, setShow] = React.useState(true); const [isOpen1, setIsOpen1] = React.useState(false); const [isOpen2, setIsOpen2] = React.useState(false); - const onToggle1 = (_event: any, isOpen1: boolean) => { - setIsOpen1(isOpen1); + const onToggle1 = () => { + setIsOpen1(!isOpen1); }; const onSelect1 = () => { setIsOpen1(!isOpen1); }; - const onToggle2 = (_event: any, isOpen2: boolean) => { - setIsOpen2(isOpen2); + const onToggle2 = () => { + setIsOpen2(!isOpen2); }; const onSelect2 = () => { @@ -114,22 +114,37 @@ export const DataListWidthModifiers: React.FunctionComponent = () => { aria-label="Actions" isPlainButtonAction > - } - dropdownItems={[ - Link, - - Action - , - + toggle={(toggleRef: React.Ref) => ( + + + + )} + isOpen={isOpen1} + onOpenChange={(isOpen: boolean) => setIsOpen1(isOpen)} + > + + Action + {/* Prevent default onClick functionality for example + purposes */} + event.preventDefault()}> + Link + + + Disabled Action + + event.preventDefault()} + > Disabled Link - - ]} - /> + + + @@ -174,22 +189,37 @@ export const DataListWidthModifiers: React.FunctionComponent = () => { aria-label="Actions" isPlainButtonAction > - } - dropdownItems={[ - Link, - - Action - , - + toggle={(toggleRef: React.Ref) => ( + + + + )} + isOpen={isOpen2} + onOpenChange={(isOpen: boolean) => setIsOpen2(isOpen)} + > + + Action + {/* Prevent default onClick functionality for example + purposes */} + event.preventDefault()}> + Link + + + Disabled Action + + event.preventDefault()} + > Disabled Link - - ]} - /> + + + diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownBasic.tsx b/packages/react-core/src/components/Dropdown/examples/DropdownBasic.tsx index 1efe5dda033..d9b51fec407 100644 --- a/packages/react-core/src/components/Dropdown/examples/DropdownBasic.tsx +++ b/packages/react-core/src/components/Dropdown/examples/DropdownBasic.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Dropdown, DropdownItem, DropdownList, Divider, MenuToggle } from '@patternfly/react-core'; +import { Dropdown, DropdownItem, DropdownList, Divider, MenuToggle, MenuToggleElement } from '@patternfly/react-core'; export const DropdownBasic: React.FunctionComponent = () => { const [isOpen, setIsOpen] = React.useState(false); @@ -18,8 +18,8 @@ export const DropdownBasic: React.FunctionComponent = () => { setIsOpen(isOpen)} - toggle={(toggleRef) => ( + onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)} + toggle={(toggleRef: React.Ref) => ( Dropdown From 8cb8c21a08635219b7f0cef7cbf3871f6203a648 Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Tue, 28 Mar 2023 15:17:21 -0400 Subject: [PATCH 03/22] Fixed a11y errors --- .../Card/examples/CardExpandable.tsx | 10 ++++-- .../Card/examples/CardExpandableWithIcon.tsx | 10 ++++-- .../Card/examples/CardHeaderInCardHead.tsx | 10 ++++-- .../Card/examples/CardLegacySelectable.tsx | 10 ++++-- .../examples/CardOnlyActionsInCardHead.tsx | 10 ++++-- .../Card/examples/CardSelectable.tsx | 10 ++++-- .../Card/examples/CardWithImageAndActions.tsx | 10 ++++-- .../DataList/examples/DataListActions.tsx | 10 ++++-- .../DataList/examples/DataListCheckboxes.tsx | 30 ++++++++++++---- .../DataList/examples/DataListExpandable.tsx | 30 ++++++++++++---- .../examples/DataListMixedExpandable.tsx | 34 ++++++++++++++----- .../examples/DataListSelectableRows.tsx | 20 ++++++++--- .../examples/DataListWidthModifiers.tsx | 20 ++++++++--- 13 files changed, 170 insertions(+), 44 deletions(-) diff --git a/packages/react-core/src/components/Card/examples/CardExpandable.tsx b/packages/react-core/src/components/Card/examples/CardExpandable.tsx index 54e388f0cea..9ae7b71c8dd 100644 --- a/packages/react-core/src/components/Card/examples/CardExpandable.tsx +++ b/packages/react-core/src/components/Card/examples/CardExpandable.tsx @@ -64,8 +64,14 @@ export const CardExpandable: React.FunctionComponent = () => { ) => ( - setIsOpen(!isOpen)} variant="plain"> - + setIsOpen(!isOpen)} + variant="plain" + aria-label="Card expandable example kebab toggle" + > + )} isOpen={isOpen} diff --git a/packages/react-core/src/components/Card/examples/CardExpandableWithIcon.tsx b/packages/react-core/src/components/Card/examples/CardExpandableWithIcon.tsx index 0d147739023..db48c35c8ca 100644 --- a/packages/react-core/src/components/Card/examples/CardExpandableWithIcon.tsx +++ b/packages/react-core/src/components/Card/examples/CardExpandableWithIcon.tsx @@ -60,8 +60,14 @@ export const CardExpandableWithIcon: React.FunctionComponent = () => { ) => ( - setIsOpen(!isOpen)} variant="plain"> - + setIsOpen(!isOpen)} + variant="plain" + aria-label="Card expandable with icon example kebab toggle" + > + )} isOpen={isOpen} diff --git a/packages/react-core/src/components/Card/examples/CardHeaderInCardHead.tsx b/packages/react-core/src/components/Card/examples/CardHeaderInCardHead.tsx index f0de19065f2..1758591999e 100644 --- a/packages/react-core/src/components/Card/examples/CardHeaderInCardHead.tsx +++ b/packages/react-core/src/components/Card/examples/CardHeaderInCardHead.tsx @@ -51,8 +51,14 @@ export const CardTitleInHeader: React.FunctionComponent = () => { ) => ( - setIsOpen(!isOpen)} variant="plain"> - + setIsOpen(!isOpen)} + variant="plain" + aria-label="Card title inline with images and actions example kebab toggle" + > + )} isOpen={isOpen} diff --git a/packages/react-core/src/components/Card/examples/CardLegacySelectable.tsx b/packages/react-core/src/components/Card/examples/CardLegacySelectable.tsx index d9e04a984f0..30e2dc449aa 100644 --- a/packages/react-core/src/components/Card/examples/CardLegacySelectable.tsx +++ b/packages/react-core/src/components/Card/examples/CardLegacySelectable.tsx @@ -73,8 +73,14 @@ export const CardLegacySelectable: React.FunctionComponent = () => { ) => ( - - + + )} isOpen={isKebabOpen} diff --git a/packages/react-core/src/components/Card/examples/CardOnlyActionsInCardHead.tsx b/packages/react-core/src/components/Card/examples/CardOnlyActionsInCardHead.tsx index acce15d2bfa..65f5ea93fc1 100644 --- a/packages/react-core/src/components/Card/examples/CardOnlyActionsInCardHead.tsx +++ b/packages/react-core/src/components/Card/examples/CardOnlyActionsInCardHead.tsx @@ -49,8 +49,14 @@ export const CardOnlyActionsInCardHead: React.FunctionComponent = () => { ) => ( - setIsOpen(!isOpen)} variant="plain"> - + setIsOpen(!isOpen)} + variant="plain" + aria-label="Card header without title example kebab toggle" + > + )} isOpen={isOpen} diff --git a/packages/react-core/src/components/Card/examples/CardSelectable.tsx b/packages/react-core/src/components/Card/examples/CardSelectable.tsx index 72129e48a81..4d7109793b2 100644 --- a/packages/react-core/src/components/Card/examples/CardSelectable.tsx +++ b/packages/react-core/src/components/Card/examples/CardSelectable.tsx @@ -73,8 +73,14 @@ export const CardSelectable: React.FunctionComponent = () => { ) => ( - - + + )} isOpen={isKebabOpen} diff --git a/packages/react-core/src/components/Card/examples/CardWithImageAndActions.tsx b/packages/react-core/src/components/Card/examples/CardWithImageAndActions.tsx index 7226077c85f..3f23dd9f7d9 100644 --- a/packages/react-core/src/components/Card/examples/CardWithImageAndActions.tsx +++ b/packages/react-core/src/components/Card/examples/CardWithImageAndActions.tsx @@ -57,8 +57,14 @@ export const CardWithImageAndActions: React.FunctionComponent = () => { ) => ( - setIsOpen(!isOpen)} variant="plain"> - + setIsOpen(!isOpen)} + variant="plain" + aria-label="Card header images and actions example kebab toggle" + > + )} isOpen={isOpen} diff --git a/packages/react-core/src/components/DataList/examples/DataListActions.tsx b/packages/react-core/src/components/DataList/examples/DataListActions.tsx index 3647a764e11..68b5d53f1ec 100644 --- a/packages/react-core/src/components/DataList/examples/DataListActions.tsx +++ b/packages/react-core/src/components/DataList/examples/DataListActions.tsx @@ -81,8 +81,14 @@ export const DataListActions: React.FunctionComponent = () => { popperProps={{ position: 'right' }} onSelect={onSelect} toggle={(toggleRef: React.Ref) => ( - - + + )} isOpen={isOpen} diff --git a/packages/react-core/src/components/DataList/examples/DataListCheckboxes.tsx b/packages/react-core/src/components/DataList/examples/DataListCheckboxes.tsx index c653690d8a7..c4eb52d718c 100644 --- a/packages/react-core/src/components/DataList/examples/DataListCheckboxes.tsx +++ b/packages/react-core/src/components/DataList/examples/DataListCheckboxes.tsx @@ -79,8 +79,14 @@ export const DataListCheckboxes: React.FunctionComponent = () => { popperProps={{ position: 'right' }} onSelect={onSelect1} toggle={(toggleRef: React.Ref) => ( - - + + )} isOpen={isOpen1} @@ -129,8 +135,14 @@ export const DataListCheckboxes: React.FunctionComponent = () => { popperProps={{ position: 'right' }} onSelect={onSelect2} toggle={(toggleRef: React.Ref) => ( - - + + )} isOpen={isOpen2} @@ -188,8 +200,14 @@ export const DataListCheckboxes: React.FunctionComponent = () => { popperProps={{ position: 'right' }} onSelect={onSelect3} toggle={(toggleRef: React.Ref) => ( - - + + )} isOpen={isOpen3} diff --git a/packages/react-core/src/components/DataList/examples/DataListExpandable.tsx b/packages/react-core/src/components/DataList/examples/DataListExpandable.tsx index 83a7e3c672b..19a4564f57b 100644 --- a/packages/react-core/src/components/DataList/examples/DataListExpandable.tsx +++ b/packages/react-core/src/components/DataList/examples/DataListExpandable.tsx @@ -91,8 +91,14 @@ export const DataListExpandable: React.FunctionComponent = () => { popperProps={{ position: 'right' }} onSelect={onSelect1} toggle={(toggleRef: React.Ref) => ( - - + + )} isOpen={isOpen1} @@ -161,8 +167,14 @@ export const DataListExpandable: React.FunctionComponent = () => { popperProps={{ position: 'right' }} onSelect={onSelect2} toggle={(toggleRef: React.Ref) => ( - - + + )} isOpen={isOpen2} @@ -231,8 +243,14 @@ export const DataListExpandable: React.FunctionComponent = () => { popperProps={{ position: 'right' }} onSelect={onSelect3} toggle={(toggleRef: React.Ref) => ( - - + + )} isOpen={isOpen3} diff --git a/packages/react-core/src/components/DataList/examples/DataListMixedExpandable.tsx b/packages/react-core/src/components/DataList/examples/DataListMixedExpandable.tsx index 0bc9cde0e12..87648fdc0ed 100644 --- a/packages/react-core/src/components/DataList/examples/DataListMixedExpandable.tsx +++ b/packages/react-core/src/components/DataList/examples/DataListMixedExpandable.tsx @@ -93,8 +93,14 @@ export const DataListMixedExpandable: React.FunctionComponent = () => { popperProps={{ position: 'right' }} onSelect={onSelect1} toggle={(toggleRef: React.Ref) => ( - - + + )} isOpen={isOpen1} @@ -118,7 +124,7 @@ export const DataListMixedExpandable: React.FunctionComponent = () => { @@ -165,8 +171,14 @@ export const DataListMixedExpandable: React.FunctionComponent = () => { popperProps={{ position: 'right' }} onSelect={onSelect2} toggle={(toggleRef: React.Ref) => ( - - + + )} isOpen={isOpen2} @@ -225,8 +237,14 @@ export const DataListMixedExpandable: React.FunctionComponent = () => { popperProps={{ position: 'right' }} onSelect={onSelect3} toggle={(toggleRef: React.Ref) => ( - - + + )} isOpen={isOpen3} @@ -250,7 +268,7 @@ export const DataListMixedExpandable: React.FunctionComponent = () => { diff --git a/packages/react-core/src/components/DataList/examples/DataListSelectableRows.tsx b/packages/react-core/src/components/DataList/examples/DataListSelectableRows.tsx index 6904104f248..e9703ca890e 100644 --- a/packages/react-core/src/components/DataList/examples/DataListSelectableRows.tsx +++ b/packages/react-core/src/components/DataList/examples/DataListSelectableRows.tsx @@ -71,8 +71,14 @@ export const DataListSelectableRows: React.FunctionComponent = () => { popperProps={{ position: 'right' }} onSelect={onSelect1} toggle={(toggleRef: React.Ref) => ( - - + + )} isOpen={isOpen1} @@ -116,8 +122,14 @@ export const DataListSelectableRows: React.FunctionComponent = () => { popperProps={{ position: 'right' }} onSelect={onSelect2} toggle={(toggleRef: React.Ref) => ( - - + + )} isOpen={isOpen2} diff --git a/packages/react-core/src/components/DataList/examples/DataListWidthModifiers.tsx b/packages/react-core/src/components/DataList/examples/DataListWidthModifiers.tsx index 8679cc59703..190e7feabba 100644 --- a/packages/react-core/src/components/DataList/examples/DataListWidthModifiers.tsx +++ b/packages/react-core/src/components/DataList/examples/DataListWidthModifiers.tsx @@ -118,8 +118,14 @@ export const DataListWidthModifiers: React.FunctionComponent = () => { popperProps={{ position: 'right' }} onSelect={onSelect1} toggle={(toggleRef: React.Ref) => ( - - + + )} isOpen={isOpen1} @@ -193,8 +199,14 @@ export const DataListWidthModifiers: React.FunctionComponent = () => { popperProps={{ position: 'right' }} onSelect={onSelect2} toggle={(toggleRef: React.Ref) => ( - - + + )} isOpen={isOpen2} From cde956910de429d55fcfaf3aab6f448ab1f5a25d Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Fri, 31 Mar 2023 11:41:51 -0400 Subject: [PATCH 04/22] Updated duallistselector through menu --- .../examples/BreadcrumbDropdown.tsx | 9 +- .../Dropdown/examples/DropdownBasic.tsx | 2 +- .../Dropdown/examples/DropdownWithGroups.tsx | 2 +- .../examples/DropdownWithKebabToggle.tsx | 2 +- .../examples/DualListSelector.md | 6 +- .../DualListSelectorComplexOptionsActions.tsx | 96 +++++---- .../src/components/Hint/examples/Hint.md | 7 +- .../Hint/examples/HintBasicWithTitle.tsx | 90 +++++--- .../Hint/examples/HintBasicWithoutTitle.tsx | 89 +++++--- .../InputGroup/examples/InputGroup.md | 5 - .../examples/InputGroupWithDropdown.tsx | 56 ++--- .../examples/MenuWithDrilldownBreadcrumbs.tsx | 201 ++++++++++-------- 12 files changed, 327 insertions(+), 238 deletions(-) diff --git a/packages/react-core/src/components/Breadcrumb/examples/BreadcrumbDropdown.tsx b/packages/react-core/src/components/Breadcrumb/examples/BreadcrumbDropdown.tsx index d10dc7e2623..417a942ff21 100644 --- a/packages/react-core/src/components/Breadcrumb/examples/BreadcrumbDropdown.tsx +++ b/packages/react-core/src/components/Breadcrumb/examples/BreadcrumbDropdown.tsx @@ -13,16 +13,13 @@ import { import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon'; const dropdownItems = [ - - + } key="edit"> Edit , - - + } key="action"> Deployment , - - + } key="apps"> Applications ]; diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownBasic.tsx b/packages/react-core/src/components/Dropdown/examples/DropdownBasic.tsx index d9b51fec407..5137dc71577 100644 --- a/packages/react-core/src/components/Dropdown/examples/DropdownBasic.tsx +++ b/packages/react-core/src/components/Dropdown/examples/DropdownBasic.tsx @@ -45,7 +45,7 @@ export const DropdownBasic: React.FunctionComponent = () => { Disabled Link - + Separated Action diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownWithGroups.tsx b/packages/react-core/src/components/Dropdown/examples/DropdownWithGroups.tsx index 7c88c3b0955..080c3f151f2 100644 --- a/packages/react-core/src/components/Dropdown/examples/DropdownWithGroups.tsx +++ b/packages/react-core/src/components/Dropdown/examples/DropdownWithGroups.tsx @@ -49,7 +49,7 @@ export const DropdownWithGroups: React.FunctionComponent = () => { - + diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownWithKebabToggle.tsx b/packages/react-core/src/components/Dropdown/examples/DropdownWithKebabToggle.tsx index e0a8f56db05..c71ae8bc1b8 100644 --- a/packages/react-core/src/components/Dropdown/examples/DropdownWithKebabToggle.tsx +++ b/packages/react-core/src/components/Dropdown/examples/DropdownWithKebabToggle.tsx @@ -51,7 +51,7 @@ export const DropdownWithKebab: React.FunctionComponent = () => { Disabled Link - + Separated Action diff --git a/packages/react-core/src/components/DualListSelector/examples/DualListSelector.md b/packages/react-core/src/components/DualListSelector/examples/DualListSelector.md index 428c33971c0..28eeac88b1a 100644 --- a/packages/react-core/src/components/DualListSelector/examples/DualListSelector.md +++ b/packages/react-core/src/components/DualListSelector/examples/DualListSelector.md @@ -15,17 +15,13 @@ propComponents: ] --- -import { -Dropdown as DropdownDeprecated, -DropdownItem as DropdownItemDeprecated, -KebabToggle -} from '@patternfly/react-core/deprecated'; import AngleDoubleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-left-icon'; import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon'; import AngleDoubleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-right-icon'; import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon'; import PficonSortCommonAscIcon from '@patternfly/react-icons/dist/esm/icons/pficon-sort-common-asc-icon'; import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon'; +import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; ## Examples diff --git a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComplexOptionsActions.tsx b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComplexOptionsActions.tsx index 4865cfd4ef3..8ef67fb8ae6 100644 --- a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComplexOptionsActions.tsx +++ b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComplexOptionsActions.tsx @@ -1,11 +1,17 @@ import React from 'react'; -import { Button, ButtonVariant, Checkbox, DualListSelector } from '@patternfly/react-core'; import { - Dropdown as DropdownDeprecated, - DropdownItem as DropdownItemDeprecated, - KebabToggle -} from '@patternfly/react-core/deprecated'; + Button, + ButtonVariant, + Checkbox, + DualListSelector, + Dropdown, + DropdownList, + DropdownItem, + MenuToggle, + MenuToggleElement +} from '@patternfly/react-core'; import PficonSortCommonAscIcon from '@patternfly/react-icons/dist/esm/icons/pficon-sort-common-asc-icon'; +import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; export const DualListSelectorComplexOptionsActions: React.FunctionComponent = () => { const [availableOptions, setAvailableOptions] = React.useState([ @@ -43,27 +49,17 @@ export const DualListSelectorComplexOptionsActions: React.FunctionComponent = () } }; - const onToggle = (isOpen: boolean, pane: string) => { + const onToggle = (pane: string) => { if (pane === 'available') { - setIsAvailableKebabOpen(isOpen); + setIsAvailableKebabOpen(!isAvailableKebabOpen); } else { - setIsChosenKebabOpen(isOpen); + setIsChosenKebabOpen(!isChosenKebabOpen); } }; const filterOption = (option: React.ReactNode, input: string) => (option as React.ReactElement).props.children.includes(input); - const dropdownItems = [ - Link, - - Action - , - - Second Action - - ]; - const availableOptionsActions = [ , - ) => ( + onToggle(isOpen, 'available')} + isExpanded={isAvailableKebabOpen} + onClick={() => onToggle('available')} + variant="plain" id="complex-available-toggle" - /> - } + aria-label="Complex actions example available kebab toggle" + > + + )} isOpen={isAvailableKebabOpen} - isPlain - dropdownItems={dropdownItems} + onOpenChange={(isOpen: boolean) => setIsAvailableKebabOpen(isOpen)} + onSelect={() => setIsAvailableKebabOpen(false)} key="availableDropdown" - /> + > + + Action + {/* Prevent default onClick functionality for example purposes */} + event.preventDefault()}> + Link + + + ]; const chosenOptionsActions = [ @@ -99,19 +109,33 @@ export const DualListSelectorComplexOptionsActions: React.FunctionComponent = () > , - ) => ( + onToggle(isOpen, 'chosen')} + isExpanded={isChosenKebabOpen} + variant="plain" + onClick={() => onToggle('chosen')} id="complex-chosen-toggle" - /> - } + aria-label="Complex actions example chosen kebab toggle" + > + + )} isOpen={isChosenKebabOpen} - isPlain - dropdownItems={dropdownItems} + onOpenChange={(isOpen) => setIsChosenKebabOpen(isOpen)} + onSelect={() => setIsChosenKebabOpen(false)} key="chosenDropdown" - /> + > + + Action + {/* Prevent default onClick functionality for example purposes */} + event.preventDefault()}> + Link + + + ]; return ( diff --git a/packages/react-core/src/components/Hint/examples/Hint.md b/packages/react-core/src/components/Hint/examples/Hint.md index 1bcedae2a09..db5f7a5d1fd 100644 --- a/packages/react-core/src/components/Hint/examples/Hint.md +++ b/packages/react-core/src/components/Hint/examples/Hint.md @@ -5,12 +5,7 @@ cssPrefix: null propComponents: ['Hint', 'HintTitle', 'HintBody', 'HintFooter'] --- -import { -Dropdown as DropdownDeprecated, -DropdownItem as DropdownItemDeprecated, -DropdownSeparator, -KebabToggle -} from '@patternfly/react-core/deprecated'; +import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; ## Examples diff --git a/packages/react-core/src/components/Hint/examples/HintBasicWithTitle.tsx b/packages/react-core/src/components/Hint/examples/HintBasicWithTitle.tsx index 411a65cca17..e24b6d089f4 100644 --- a/packages/react-core/src/components/Hint/examples/HintBasicWithTitle.tsx +++ b/packages/react-core/src/components/Hint/examples/HintBasicWithTitle.tsx @@ -1,49 +1,75 @@ import React from 'react'; -import { Hint, HintTitle, HintBody, HintFooter, Button } from '@patternfly/react-core'; import { - Dropdown as DropdownDeprecated, - DropdownItem as DropdownItemDeprecated, - DropdownSeparator, - KebabToggle -} from '@patternfly/react-core/deprecated'; + Hint, + HintTitle, + HintBody, + HintFooter, + Button, + Dropdown, + DropdownList, + DropdownItem, + Divider, + MenuToggle, + MenuToggleElement +} from '@patternfly/react-core'; +import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; export const HintBasicWithTitle: React.FunctionComponent = () => { const [isOpen, setIsOpen] = React.useState(false); - const onToggle = (_event: any, isOpen: boolean) => { - setIsOpen(isOpen); + const onToggle = () => { + setIsOpen(!isOpen); }; const onSelect = () => { setIsOpen(!isOpen); }; - const dropdownItems = [ - Link, - - Action - , - - Disabled Link - , - - Disabled Action - , - , - Separated Link, - - Separated Action - - ]; const actions = ( - } + + onSelect={onSelect} + onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)} + toggle={(toggleRef: React.Ref) => ( + + + + )} + > + + + Action + + ev.preventDefault()} + > + Link + + + Disabled Action + + + Disabled Link + + + + Separated Action + + ev.preventDefault()}> + Separated Link + + + ); return ( diff --git a/packages/react-core/src/components/Hint/examples/HintBasicWithoutTitle.tsx b/packages/react-core/src/components/Hint/examples/HintBasicWithoutTitle.tsx index a9a53fbb91f..2b4432a7a2a 100644 --- a/packages/react-core/src/components/Hint/examples/HintBasicWithoutTitle.tsx +++ b/packages/react-core/src/components/Hint/examples/HintBasicWithoutTitle.tsx @@ -1,49 +1,74 @@ import React from 'react'; -import { Hint, HintBody, HintFooter, Button } from '@patternfly/react-core'; import { - Dropdown as DropdownDeprecated, - DropdownItem as DropdownItemDeprecated, - DropdownSeparator, - KebabToggle -} from '@patternfly/react-core/deprecated'; + Hint, + HintBody, + HintFooter, + Button, + Dropdown, + DropdownList, + DropdownItem, + Divider, + MenuToggle, + MenuToggleElement +} from '@patternfly/react-core'; +import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; export const HintBasicWithoutTitle: React.FunctionComponent = () => { const [isOpen, setIsOpen] = React.useState(false); - const onToggle = (_event: any, isOpen: boolean) => { - setIsOpen(isOpen); + const onToggle = () => { + setIsOpen(!isOpen); }; const onSelect = () => { setIsOpen(!isOpen); }; - const dropdownItems = [ - Link, - - Action - , - - Disabled Link - , - - Disabled Action - , - , - Separated Link, - - Separated Action - - ]; const actions = ( - } + + onSelect={onSelect} + onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)} + toggle={(toggleRef: React.Ref) => ( + + + + )} + > + + + Action + + ev.preventDefault()} + > + Link + + + Disabled Action + + + Disabled Link + + + + Separated Action + + ev.preventDefault()}> + Separated Link + + + ); return ( diff --git a/packages/react-core/src/components/InputGroup/examples/InputGroup.md b/packages/react-core/src/components/InputGroup/examples/InputGroup.md index 1304a7ff8b8..51a1bb722fc 100644 --- a/packages/react-core/src/components/InputGroup/examples/InputGroup.md +++ b/packages/react-core/src/components/InputGroup/examples/InputGroup.md @@ -5,11 +5,6 @@ cssPrefix: null propComponents: ['InputGroup', 'InputGroupText'] --- -import { -Dropdown as DropdownDeprecated, -DropdownToggle, -DropdownItem as DropdownItemDeprecated -} from '@patternfly/react-core/deprecated'; import AtIcon from '@patternfly/react-icons/dist/esm/icons/at-icon'; import DollarSignIcon from '@patternfly/react-icons/dist/esm/icons/dollar-sign-icon'; import CalendarAltIcon from '@patternfly/react-icons/dist/esm/icons/calendar-alt-icon'; diff --git a/packages/react-core/src/components/InputGroup/examples/InputGroupWithDropdown.tsx b/packages/react-core/src/components/InputGroup/examples/InputGroupWithDropdown.tsx index 341c88e27c2..1e0e6ebb67b 100644 --- a/packages/react-core/src/components/InputGroup/examples/InputGroupWithDropdown.tsx +++ b/packages/react-core/src/components/InputGroup/examples/InputGroupWithDropdown.tsx @@ -1,43 +1,51 @@ import React from 'react'; -import { Button, InputGroup, TextInput } from '@patternfly/react-core'; import { - Dropdown as DropdownDeprecated, - DropdownToggle, - DropdownItem as DropdownItemDeprecated -} from '@patternfly/react-core/deprecated'; + Button, + InputGroup, + TextInput, + Dropdown, + DropdownList, + DropdownItem, + MenuToggle, + MenuToggleElement +} from '@patternfly/react-core'; export const InputGroupWithDropdown: React.FunctionComponent = () => { const [isOpen, setIsOpen] = React.useState(false); - const onToggle = (_event: any, isOpen: boolean) => { - setIsOpen(isOpen); + const onToggle = () => { + setIsOpen(!isOpen); }; const onSelect = () => { setIsOpen(false); }; - const dropdownItems = [ - - Option 1 - , - - Option 2 - , - - Option 3 - - ]; - return ( - Dropdown} + + onSelect={onSelect} + onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)} + toggle={(toggleRef: React.Ref) => ( + + Dropdown + + )} + > + + + Option 1 + + + Option 2 + + + Option 3 + + + - } isOpen={isLowerToolbarKebabDropdownOpen} - isPlain - dropdownItems={toolbarKebabDropdownItems} - isFlipEnabled - menuAppendTo="parent" - /> + onOpenChange={(isOpen) => this.setState({ isLowerToolbarKebabDropdownOpen: isOpen })} + toggle={(toggleRef) => ( + + + )} + > + {toolbarKebabDropdownItems} + ); @@ -1474,29 +1490,30 @@ class PrimaryDetailCardView extends React.Component { actions={{ actions: ( <> - this.onCardKebabDropdownSelect(key, e)} - toggle={ - - this.onCardKebabDropdownToggle(event, key, isCardKebabDropdownOpen) - } - /> - } - isOpen={this.state[key]} - dropdownItems={[ - this.deleteItem(e, product)} - position="right" + this.onCardKebabDropdownSelect(key)} + isOpen={this.state[key] || false} + onOpenChange={(isOpen) => this.setState({ [key]: isOpen })} + popperProps={{ position: 'right' }} + toggle={(toggleRef) => ( + this.onCardKebabDropdownToggle(key)} > + + )} + > + + this.deleteItem(e, product)}> Delete - - ]} - /> + + + this.onCheckboxClick(event, product.id)} @@ -1763,8 +1780,12 @@ import { DrawerHead, DrawerPanelBody, DrawerPanelContent, + Dropdown, + DropdownItem, + DropdownList, Flex, FlexItem, + MenuToggle, PageSection, PageSectionVariants, Progress, @@ -1772,13 +1793,7 @@ import { TextContent, Title } from '@patternfly/react-core'; -import { - Dropdown as DropdownDeprecated, - DropdownToggle, - DropdownItem as DropdownItemDeprecated -} from '@patternfly/react-core/deprecated'; import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper'; -import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon'; class PrimaryDetailDataListInCard extends React.Component { constructor(props) { @@ -1792,14 +1807,14 @@ class PrimaryDetailDataListInCard extends React.Component { isExpanded: false }; - this.onDropdownToggle = (_event, isOpen) => { - this.setState({ - isDropdownOpen: isOpen - }); + this.onDropdownToggle = () => { + this.setState((prevState) => ({ + isDropdownOpen: !prevState.isDropdownOpen + })); }; - this.onDropdownSelect = (event) => { + this.onDropdownSelect = () => { this.setState({ - isDropdownOpen: !this.state.isDropdownOpen + isDropdownOpen: false }); this.onDropdownFocus(); }; @@ -1807,7 +1822,7 @@ class PrimaryDetailDataListInCard extends React.Component { const element = document.getElementById('toggle-id'); element.focus(); }; - this.onSelectDataListItem = (id) => { + this.onSelectDataListItem = (_event, id) => { this.setState({ selectedDataListItemId: id, drawerPanelBodyContent: id.charAt(id.length - 1), @@ -1861,32 +1876,26 @@ class PrimaryDetailDataListInCard extends React.Component { ); - const dropdownItems = [ - Option 1, - Option 2 - ]; - const drawerContent = ( - - Dropdown - - } isOpen={isDropdownOpen} - dropdownItems={dropdownItems} - isFlipEnabled - menuAppendTo="parent" - /> + onOpenChange={(isOpen) => this.setState({ isDropdownOpen: isOpen })} + toggle={(toggleRef) => ( + + Dropdown + + )} + > + + Option 1 + Option 2 + + @@ -2117,7 +2126,7 @@ class PrimaryDetailInlineModifier extends React.Component { }); }; - this.onSelectDataListItem = (id) => { + this.onSelectDataListItem = (_event, id) => { this.setState({ selectedDataListItemId: id, isDrawerExpanded: true, diff --git a/packages/react-core/src/demos/Tabs.md b/packages/react-core/src/demos/Tabs.md index 8c225424935..2d107f03be3 100644 --- a/packages/react-core/src/demos/Tabs.md +++ b/packages/react-core/src/demos/Tabs.md @@ -12,7 +12,6 @@ import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon'; import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon'; import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; -import { KebabToggle } from '@patternfly/react-core/deprecated'; ## Demos diff --git a/packages/react-core/src/demos/Toolbar.md b/packages/react-core/src/demos/Toolbar.md index 11c48b3f685..a138c99e04d 100644 --- a/packages/react-core/src/demos/Toolbar.md +++ b/packages/react-core/src/demos/Toolbar.md @@ -4,15 +4,6 @@ section: components --- import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper'; -import { -Dropdown as DropdownDeprecated, -DropdownItem as DropdownItemDeprecated, -DropdownToggle, -DropdownToggleAction, -DropdownPosition, -DropdownSeparator -} from '@patternfly/react-core/deprecated'; - import PauseIcon from '@patternfly/react-icons/dist/esm/icons/pause-icon'; import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon'; import ExpandIcon from '@patternfly/react-icons/dist/esm/icons/expand-icon'; @@ -42,20 +33,17 @@ import { PageSection, PageSectionVariants, Toolbar, - ToolbarContent, - ToolbarGroup, - ToolbarItem, + ToolbarContent, + ToolbarGroup, + ToolbarItem, ToolbarToggleGroup, - Tooltip + Tooltip, + Dropdown, + DropdownItem, + DropdownList, + Divider, + MenuToggle } from '@patternfly/react-core'; -import { - Dropdown as DropdownDeprecated, - DropdownItem as DropdownItemDeprecated, - DropdownToggle, - DropdownToggleAction, - DropdownPosition, - DropdownSeparator -} from '@patternfly/react-core/deprecated'; import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper'; import PauseIcon from '@patternfly/react-icons/dist/esm/icons/pause-icon'; @@ -97,18 +85,18 @@ class ConsoleLogViewerToolbar extends React.Component { }; this.onContainerToggle = () => { - this.setState(prevState => { + this.setState((prevState) => { return { containerExpanded: !prevState.containerExpanded - } + }; }); }; this.onContainerToggleMobile = () => { - this.setState(prevState => { + this.setState((prevState) => { return { containerExpandedMobile: !prevState.containerExpandedMobile - } + }; }); }; @@ -126,84 +114,72 @@ class ConsoleLogViewerToolbar extends React.Component { }); }; - this.onOptionToggle = (_event, isExpanded) => { - this.setState({ - optionExpanded: isExpanded - }); + this.onOptionToggle = () => { + this.setState((prevState) => ({ + optionExpanded: !prevState.optionExpanded + })); }; - this.onOptionToggleMobile = (_event, isExpanded) => { - this.setState({ - optionExpandedMobile: isExpanded - }); + this.onOptionToggleMobile = () => { + this.setState((prevState) => ({ + optionExpandedMobile: !prevState.optionExpandedMobile + })); }; - this.onOptionSelect = (event) => { - this.setState({ - optionExpanded: !this.state.optionExpanded - }); + this.onExternalToggle = () => { + this.setState((prevState) => ({ + externalExpanded: !prevState.externalExpanded + })); }; - this.onOptionSelectMobile = (event) => { - this.setState({ - optionExpandedMobile: !this.state.optionExpandedMobile - }); + this.onExternalToggleMobile = () => { + this.setState((prevState) => ({ + externalExpandedMobile: !prevState.externalExpandedMobile + })); }; - this.onExternalToggle = (_event, isExpanded) => { + this.onExternalSelect = () => { this.setState({ - externalExpanded: isExpanded + externalExpanded: false }); }; - this.onExternalToggleMobile = (_event, isExpanded) => { + this.onExternalSelectMobile = () => { this.setState({ - externalExpandedMobile: isExpanded + externalExpandedMobile: false }); }; - this.onExternalSelect = (event) => { - this.setState({ - externalExpanded: !this.state.externalExpanded - }); + this.onDownloadToggle = () => { + this.setState((prevState) => ({ + downloadExpanded: !prevState.downloadExpanded + })); }; - this.onExternalSelectMobile = (event) => { - this.setState({ - externalExpandedMobile: !this.state.externalExpandedMobile - }); + this.onDownloadToggleMobile = () => { + this.setState((prevState) => ({ + downloadExpandedMobile: !prevState.downloadExpandedMobile + })); }; - this.onDownloadToggle = (_event, isExpanded) => { + this.onDownloadSelect = () => { this.setState({ - downloadExpanded: isExpanded + downloadExpanded: false }); }; - this.onDownloadToggleMobile = (_event, isExpanded) => { + this.onDownloadSelectMobile = () => { this.setState({ - downloadExpandedMobile: isExpanded - }); - }; - - this.onDownloadSelect = (event) => { - this.setState({ - downloadExpanded: !this.state.downloadExpanded - }); - }; - - this.onDownloadSelectMobile = (event) => { - this.setState({ - downloadExpandedMobile: !this.state.downloadExpandedMobile + downloadExpandedMobile: false }); }; this.onExternalClick = (event) => { - window.alert('Open external logs!'); + console.log('External logs opened!'); }; this.onDownloadClick = (event) => { - window.alert('Action!'); + console.log('Download action clicked!'); }; this.pauseOrStart = (event) => { @@ -212,19 +188,19 @@ class ConsoleLogViewerToolbar extends React.Component { }); }; - this.handleFirstSwitchChange = (event, firstSwitchChecked) => { - this.setState({ firstSwitchChecked }); + this.handleFirstSwitchChange = () => { + this.setState((prevState) => ({ firstSwitchChecked: !prevState.firstSwitchChecked })); }; - this.handleSecondSwitchChange = (event, secondSwitchChecked) => { - this.setState({ secondSwitchChecked }); + this.handleSecondSwitchChange = () => { + this.setState((prevState) => ({ secondSwitchChecked: !prevState.secondSwitchChecked })); }; - this.onClearLogs = (event) => { + this.onClearLogs = () => { this.setState({ optionExpanded: false }); - window.alert('Clear Logs!'); + console.log('Logs cleared!'); }; this.onSearchChange = (event, value) => { @@ -295,61 +271,52 @@ class ConsoleLogViewerToolbar extends React.Component { mobileView } = this.state; - const externalDropdownItems = [ - - External logs - , - - External logs - , - - External logs - - ]; - - const downloadDropdownItems = [ - - Current container logs - , - - All container logs - - ]; - - const optionDropdownItems = [ - - - , - - - , - , - - Clear logs - - ]; - + const externalDropdownItems = ( + <> + + External logs 1 + + + External logs 2 + + + External logs 3 + + + ); + const downloadDropdownItems = ( + <> + + Current container logs + + + All container logs + + + ); + const optionDropdownItems = ( + <> + + Display timestamp + + + Wrap lines + + + + Clear logs + + + ); const selectDropdownContent = ( {Object.entries(this.firstOptions).map(([value, { type }]) => ( - + {type} {` ${value}`} @@ -408,15 +375,18 @@ class ConsoleLogViewerToolbar extends React.Component { - }> - Options - - } + + onOpenChange={(isOpen) => this.setState({ optionExpanded: isOpen })} + onSelect={this.onOptionSelect} + toggle={(toggleRef) => ( + }> + Options + + )} + > + {optionDropdownItems} + , - this.onToggle(isOpen, 'available')} id="toggle-id-6" />} - isOpen={this.state.isAvailableKebabOpen} - isPlain - dropdownItems={dropdownItems} + + isOpen={this.state.isAvailableKebabOpen} + toggle={(toggleRef) => ( + this.onToggle('available')} + > + + + )} + > + {dropdownItems} + ]; const chosenOptionsActions = [ @@ -151,13 +162,23 @@ export class DualListSelectorWithActionsDemo extends React.Component {this.state.chosenDescending ? : } , - this.onToggle(isOpen, 'chosen')} id="toggle-id-6" />} + + toggle={(toggleRef) => ( + this.onToggle('chosen')} + > + + + )} + > + {dropdownItems} + ]; return ( diff --git a/packages/react-integration/demo-app-ts/src/components/demos/InputGroupDemo/InputGroupDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/InputGroupDemo/InputGroupDemo.tsx index bc9cc8777dc..b438ed8de41 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/InputGroupDemo/InputGroupDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/InputGroupDemo/InputGroupDemo.tsx @@ -14,13 +14,12 @@ import { TextInput, Popover, PopoverPosition, - ValidatedOptions + ValidatedOptions, + Dropdown, + DropdownItem, + DropdownList, + MenuToggle } from '@patternfly/react-core'; -import { - Dropdown as DropdownDeprecated, - DropdownToggle, - DropdownItem as DropdownItemDeprecated -} from '@patternfly/react-core/deprecated'; interface InputGroupState { isOpen: boolean; @@ -29,7 +28,7 @@ interface InputGroupState { export class InputGroupDemo extends React.Component<{}, InputGroupState> { static displayName = 'InputGroupDemo'; - onToggle: (event: any, isOpen: boolean) => void; + onToggle: () => void; onSelect: (event: any) => void; constructor(props: {}) { super(props); @@ -37,10 +36,10 @@ export class InputGroupDemo extends React.Component<{}, InputGroupState> { isOpen: false, selected: '' }; - this.onToggle = (_event, isOpen) => { - this.setState({ - isOpen - }); + this.onToggle = () => { + this.setState((prevState) => ({ + isOpen: !prevState.isOpen + })); }; this.onSelect = (event) => { this.setState({ @@ -81,26 +80,22 @@ export class InputGroupDemo extends React.Component<{}, InputGroupState> {

- - {this.state.selected ? this.state.selected : 'Dropdown'} - - } isOpen={this.state.isOpen} - dropdownItems={[ - - Option 1 - , - - Option 2 - , - - Option 3 - - ]} - > + onOpenChange={(isOpen) => this.setState({ isOpen })} + toggle={(toggleRef) => ( + + {this.state.selected ? this.state.selected : 'Dropdown'} + + )} + > + + Option 1 + Option 2 + Option 3 + + + + +
- + + + +
diff --git a/packages/react-core/src/components/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap b/packages/react-core/src/components/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap index b6e17bbdd28..bf39a827fe9 100644 --- a/packages/react-core/src/components/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap +++ b/packages/react-core/src/components/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap @@ -2,46 +2,43 @@ exports[`match snapshot 1`] = ` -
-
-
+
+
+
-
- Dropdown children -
+ Dropdown children
-
- Mock item -
-

- isPlain: true -

-

- isScrollable: true -

-

- minWidth: undefined -

+
+
+ Mock item

- zIndex: 9999 + isPlain: true

- isOpen: true + isScrollable: true

-
- -
+

+ minWidth: undefined +

+
+

+ zIndex: 9999 +

+

+ isOpen: true +

+
+
`; diff --git a/packages/react-table/src/deprecated/components/Table/__tests__/__snapshots__/Table.test.tsx.snap b/packages/react-table/src/deprecated/components/Table/__tests__/__snapshots__/Table.test.tsx.snap index 99f9caafd8c..e9900d038ac 100644 --- a/packages/react-table/src/deprecated/components/Table/__tests__/__snapshots__/Table.test.tsx.snap +++ b/packages/react-table/src/deprecated/components/Table/__tests__/__snapshots__/Table.test.tsx.snap @@ -145,30 +145,24 @@ exports[`Table Actions table 1`] = ` data-key="5" style="padding-right: 0px;" > - + + + - + + + - + + + - + + + - + + + - + + + - + + + - + + + - + + + @@ -5304,30 +5250,24 @@ exports[`Table Simple Actions table 1`] = ` data-key="5" style="padding-right: 0px;" > - + + + - + + + - + + + - + + + - + + + - + + + - + + + - + + + - + + + - + + + From 5842e7f3b9a763c8a7a5d7b68bb4f9cc03b45338 Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Fri, 14 Apr 2023 10:23:23 -0400 Subject: [PATCH 18/22] Updated datetimepicker demo --- .../demos/examples/DateTimePicker/DateTimePicker.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/react-core/src/demos/examples/DateTimePicker/DateTimePicker.tsx b/packages/react-core/src/demos/examples/DateTimePicker/DateTimePicker.tsx index e33b04b46dc..07d5792a8e8 100644 --- a/packages/react-core/src/demos/examples/DateTimePicker/DateTimePicker.tsx +++ b/packages/react-core/src/demos/examples/DateTimePicker/DateTimePicker.tsx @@ -59,9 +59,13 @@ export const DateTimePicker: React.FunctionComponent = () => { isOpen={isTimeOpen} onOpenChange={(isOpen: boolean) => setIsTimeOpen(isOpen)} toggle={(toggleRef: React.Ref) => ( - - +