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..630dd58a8ff 100644 --- a/packages/react-core/src/components/Breadcrumb/examples/Breadcrumb.md +++ b/packages/react-core/src/components/Breadcrumb/examples/Breadcrumb.md @@ -6,12 +6,8 @@ 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'; +import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-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..ca6d166c18c 100644 --- a/packages/react-core/src/components/Breadcrumb/examples/BreadcrumbDropdown.tsx +++ b/packages/react-core/src/components/Breadcrumb/examples/BreadcrumbDropdown.tsx @@ -1,29 +1,35 @@ 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'; +import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon'; -const dropdownItems: JSX.Element[] = [ - }> +const dropdownItems = [ + } key="edit"> Edit - , - }> + , + } key="action"> Deployment - , - }> + , + } key="apps"> 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 +40,23 @@ 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/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..2afaecee5b4 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,46 @@ 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" + aria-label="Card expandable example kebab toggle" + > + + )} 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..d19bfc8581d 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,47 @@ 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" + aria-label="Card expandable with icon example kebab toggle" + > + + )} 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..8f00a7e7431 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,47 @@ 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" + aria-label="Card title inline with images and actions example kebab toggle" + > + + )} 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..e3b92c96e8d 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,57 @@ 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..ceff2f1e042 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,47 @@ 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" + aria-label="Card header without title example kebab toggle" + > + + )} 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..90112a13be8 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,57 @@ 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..194f2410672 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,47 @@ 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" + aria-label="Card header images and actions example kebab toggle" + > + + )} 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..5bac84aabd1 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 @@ -129,32 +129,99 @@ exports[`DataList DataListAction dropdown 1`] = `
+
- +
  • + +
    • + , +
  • + +
    • + +
    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..68b5d53f1ec 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,38 @@ 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..c4eb52d718c 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,38 @@ 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 +131,38 @@ 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,38 @@ 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,26 +89,42 @@ 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 - - ]} - /> + + + @@ -151,22 +167,38 @@ export const DataListMixedExpandable: 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 - - ]} - /> + + + @@ -201,26 +233,42 @@ 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 - - ]} - /> + + + diff --git a/packages/react-core/src/components/DataList/examples/DataListSelectableRows.tsx b/packages/react-core/src/components/DataList/examples/DataListSelectableRows.tsx index ad69539a2dc..e9703ca890e 100644 --- a/packages/react-core/src/components/DataList/examples/DataListSelectableRows.tsx +++ b/packages/react-core/src/components/DataList/examples/DataListSelectableRows.tsx @@ -5,30 +5,30 @@ 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 DataListSelectableRows: React.FunctionComponent = () => { 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,38 @@ 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 +118,38 @@ 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..190e7feabba 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,43 @@ 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 +195,43 @@ 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/Dropdown.tsx b/packages/react-core/src/components/Dropdown/Dropdown.tsx index b8a7b17c4ba..0ed560ff053 100644 --- a/packages/react-core/src/components/Dropdown/Dropdown.tsx +++ b/packages/react-core/src/components/Dropdown/Dropdown.tsx @@ -52,7 +52,6 @@ const DropdownBase: React.FunctionComponent = ({ }: DropdownProps) => { const localMenuRef = React.useRef(); const toggleRef = React.useRef(); - const containerRef = React.useRef(); const ouiaProps = useOUIAProps(Dropdown.displayName, ouiaId, ouiaSafe); const menuRef = (innerRef as React.RefObject) || localMenuRef; @@ -106,23 +105,21 @@ const DropdownBase: React.FunctionComponent = ({ isPlain={isPlain} isScrollable={isScrollable} {...props} + {...ouiaProps} > {children} ); return ( -
    - -
    + ); }; 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-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..5137dc71577 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 @@ -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..080c3f151f2 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..c71ae8bc1b8 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 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 + + +

    - setIsDropdownOpen(isOpen)} + toggle={(toggleRef: React.Ref) => ( + + Dropdown + + )} + > + + + Action + + ev.preventDefault()} > - Dropdown with a menu that can break out - - } - isOpen={isDropdownOpen} - dropdownItems={dropdownItems} - menuAppendTo="parent" - /> + Link + + + Disabled Action + + + Disabled Link + + +
    diff --git a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawer.md b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawer.md index 97bbbf023ff..df8932d981a 100644 --- a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawer.md +++ b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawer.md @@ -16,15 +16,8 @@ propComponents: ] --- -import { -Dropdown as DropdownDeprecated, -DropdownItem as DropdownItemDeprecated, -DropdownPosition, -DropdownDirection, -DropdownSeparator, -KebabToggle -} from '@patternfly/react-core/deprecated'; 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/NotificationDrawer/examples/NotificationDrawerBasic.tsx b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerBasic.tsx index 549a22f1d2c..4c41f01bc72 100644 --- a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerBasic.tsx +++ b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerBasic.tsx @@ -6,22 +6,20 @@ import { NotificationDrawerList, NotificationDrawerListItem, NotificationDrawerListItemBody, - NotificationDrawerListItemHeader + NotificationDrawerListItemHeader, + Dropdown, + DropdownList, + DropdownItem, + MenuToggle, + MenuToggleElement } from '@patternfly/react-core'; -import { - Dropdown as DropdownDeprecated, - DropdownItem as DropdownItemDeprecated, - DropdownPosition, - DropdownDirection, - DropdownSeparator, - KebabToggle -} from '@patternfly/react-core/deprecated'; +import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; export const NotificationDrawerBasic: React.FunctionComponent = () => { const [isOpenMap, setIsOpenMap] = React.useState(new Array(7).fill(false)); - const onToggle = (index: number) => (_event: any, isOpen: boolean) => { - const newState = [...isOpenMap.slice(0, index), isOpen, ...isOpenMap.slice(index + 1)]; + const onToggle = (index: number) => () => { + const newState = [...isOpenMap.slice(0, index), !isOpenMap[index], ...isOpenMap.slice(index + 1)]; setIsOpenMap(newState); }; @@ -34,29 +32,45 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => { }; const [isOpen0, isOpen1, isOpen2, isOpen3, isOpen4, isOpen5, isOpen6] = isOpenMap; + const dropdownItems = ( + <> + Action + ev.preventDefault()} + > + Link + + Disabled Action + + Disabled Link + + + ); - const dropdownItems = [ - Link, - - Action - , - , - - Disabled link - - ]; return ( - onDrawerClose(event)}> - + } isOpen={isOpen0} - isPlain - dropdownItems={dropdownItems} - id="basic-notification-0" - position={DropdownPosition.right} - /> + onOpenChange={() => setIsOpenMap(new Array(7).fill(false))} + popperProps={{ position: 'right' }} + toggle={(toggleRef: React.Ref) => ( + + + )} + > + {dropdownItems} + @@ -66,15 +80,25 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => { title="Unread info notification title" srTitle="Info notification:" > - } isOpen={isOpen1} - isPlain - dropdownItems={dropdownItems} - id="basic-notification-1" - /> + onOpenChange={() => setIsOpenMap(new Array(7).fill(false))} + popperProps={{ position: 'right' }} + toggle={(toggleRef: React.Ref) => ( + + + )} + > + {dropdownItems} + This is an info notification description. @@ -86,15 +110,25 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => { title="Unread danger notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines." srTitle="Danger notification:" > - } isOpen={isOpen2} - isPlain - dropdownItems={dropdownItems} - id="basic-notification-2" - /> + onOpenChange={() => setIsOpenMap(new Array(7).fill(false))} + popperProps={{ position: 'right' }} + toggle={(toggleRef: React.Ref) => ( + + + )} + > + {dropdownItems} + This is a danger notification description. This is a long description to show how the title will wrap if @@ -108,15 +142,25 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => { title="Unread danger notification title. This is a long title to show how the title will be truncated if it is long and will be shown in a single line." srTitle="Danger notification:" > - } isOpen={isOpen3} - isPlain - dropdownItems={dropdownItems} - id="basic-notification-3" - /> + onOpenChange={() => setIsOpenMap(new Array(7).fill(false))} + popperProps={{ position: 'right' }} + toggle={(toggleRef: React.Ref) => ( + + + )} + > + {dropdownItems} + This is a danger notification description. This is a long description to show how the title will wrap if @@ -129,15 +173,25 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => { title="Read warning notification title" srTitle="Warning notification:" > - } isOpen={isOpen4} - isPlain - dropdownItems={dropdownItems} - id="basic-notification-4" - /> + onOpenChange={() => setIsOpenMap(new Array(7).fill(false))} + popperProps={{ position: 'right' }} + toggle={(toggleRef: React.Ref) => ( + + + )} + > + {dropdownItems} + This is a warning notification description. @@ -149,16 +203,25 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => { title="Read success notification title" srTitle="Success notification:" > - } isOpen={isOpen5} - isPlain - dropdownItems={dropdownItems} - id="basic-notification-5" - /> + onOpenChange={() => setIsOpenMap(new Array(7).fill(false))} + popperProps={{ position: 'right' }} + toggle={(toggleRef: React.Ref) => ( + + + )} + > + {dropdownItems} + This is a success notification description. @@ -166,15 +229,25 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => { - } isOpen={isOpen6} - isPlain - dropdownItems={dropdownItems} - id="basic-notification-6" - /> + onOpenChange={() => setIsOpenMap(new Array(7).fill(false))} + popperProps={{ position: 'right' }} + toggle={(toggleRef: React.Ref) => ( + + + )} + > + {dropdownItems} + This is a default notification description. diff --git a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx index 972ed343ab8..3021a7bfc6c 100644 --- a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx +++ b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx @@ -16,16 +16,14 @@ import { NotificationDrawerListItemHeader, EmptyStateVariant, EmptyStateActions, - EmptyStateIcon + EmptyStateIcon, + Dropdown, + DropdownList, + DropdownItem, + MenuToggle, + MenuToggleElement } from '@patternfly/react-core'; -import { - Dropdown as DropdownDeprecated, - DropdownItem as DropdownItemDeprecated, - DropdownPosition, - DropdownDirection, - DropdownSeparator, - KebabToggle -} from '@patternfly/react-core/deprecated'; +import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon'; export const NotificationDrawerGroups: React.FunctionComponent = () => { @@ -34,8 +32,8 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => { const [thirdGroupExpanded, setThirdGroupExpanded] = React.useState(false); const [isOpenMap, setIsOpenMap] = React.useState({}); - const onToggle = (id: string, isOpen: boolean) => { - setIsOpenMap({ [id]: isOpen }); + const onToggle = (id: string) => { + setIsOpenMap((prevState) => ({ ...prevState, [id]: !prevState[id] })); }; const onSelect = () => { @@ -60,34 +58,46 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => { setFirstGroupExpanded(false); }; - const dropdownItems = [ - Link, - - Action - , - , - - Disabled link - - ]; + const dropdownItems = ( + <> + Action + ev.preventDefault()} + > + Link + + Disabled Action + + Disabled Link + + + ); return ( - onToggle('groups-kebab-toggle-1', isOpen)} + isOpen={isOpenMap['groups-kebab-toggle-1'] || false} + onOpenChange={() => setIsOpenMap({})} + popperProps={{ position: 'right' }} + toggle={(toggleRef: React.Ref) => ( + - } - isOpen={isOpenMap && isOpenMap['groups-kebab-toggle-1']} - isPlain - dropdownItems={dropdownItems} - id="grouped-notification-1" - position={DropdownPosition.right} - /> + isExpanded={isOpenMap['groups-kebab-toggle-1'] || false} + onClick={() => onToggle('groups-kebab-toggle-1')} + variant="plain" + aria-label={`Groups example header kebab toggle`} + > + + )} + > + {dropdownItems} + @@ -104,20 +114,26 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => { title="Unread info notification title" srTitle="Info notification:" > - onToggle('groups-kebab-toggle-2', isOpen)} + isOpen={isOpenMap['groups-kebab-toggle-2'] || false} + onOpenChange={() => setIsOpenMap({})} + popperProps={{ position: 'right' }} + toggle={(toggleRef: React.Ref) => ( + - } - isOpen={isOpenMap && isOpenMap['groups-kebab-toggle-2']} - isPlain - dropdownItems={dropdownItems} - id="grouped-notification-2" - /> + isExpanded={isOpenMap['groups-kebab-toggle-2'] || false} + onClick={() => onToggle('groups-kebab-toggle-2')} + variant="plain" + aria-label={`Groups example group 1 notification 1 kebab toggle`} + > + + )} + > + {dropdownItems} + This is an info notification description. @@ -129,20 +145,26 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => { title="Unread danger notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines." srTitle="Danger notification:" > - onToggle('groups-kebab-toggle-3', isOpen)} + isOpen={isOpenMap['groups-kebab-toggle-3'] || false} + onOpenChange={() => setIsOpenMap({})} + popperProps={{ position: 'right' }} + toggle={(toggleRef: React.Ref) => ( + - } - isOpen={isOpenMap && isOpenMap['groups-kebab-toggle-3']} - isPlain - dropdownItems={dropdownItems} - id="grouped-notification-3" - /> + isExpanded={isOpenMap['groups-kebab-toggle-3'] || false} + onClick={() => onToggle('groups-kebab-toggle-3')} + variant="plain" + aria-label={`Groups example group 1 notification 2 kebab toggle`} + > + + )} + > + {dropdownItems} + This is a danger notification description. This is a long description to show how the title will wrap @@ -155,20 +177,26 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => { title="Read warning notification title" srTitle="Warning notification:" > - onToggle('groups-kebab-toggle-4', isOpen)} + isOpen={isOpenMap['groups-kebab-toggle-4'] || false} + onOpenChange={() => setIsOpenMap({})} + popperProps={{ position: 'right' }} + toggle={(toggleRef: React.Ref) => ( + - } - isOpen={isOpenMap && isOpenMap['groups-kebab-toggle-4']} - isPlain - dropdownItems={dropdownItems} - id="grouped-notification-7" - /> + isExpanded={isOpenMap['groups-kebab-toggle-4'] || false} + onClick={() => onToggle('groups-kebab-toggle-4')} + variant="plain" + aria-label={`Groups example group 1 notification 3 kebab toggle`} + > + + )} + > + {dropdownItems} + This is a warning notification description. @@ -180,21 +208,26 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => { title="Read success notification title" srTitle="Success notification:" > - onToggle('groups-kebab-toggle-5', isOpen)} + isOpen={isOpenMap['groups-kebab-toggle-5'] || false} + onOpenChange={() => setIsOpenMap({})} + popperProps={{ position: 'right' }} + toggle={(toggleRef: React.Ref) => ( + - } - isOpen={isOpenMap && isOpenMap['groups-kebab-toggle-5']} - isPlain - dropdownItems={dropdownItems} - id="grouped-notification-5" - /> + isExpanded={isOpenMap['groups-kebab-toggle-5'] || false} + onClick={() => onToggle('groups-kebab-toggle-5')} + variant="plain" + aria-label={`Groups example group 1 notification 4 kebab toggle`} + > + + )} + > + {dropdownItems} + This is a success notification description. @@ -215,20 +248,26 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => { title="Unread info notification title" srTitle="Info notification:" > - onToggle('groups-kebab-toggle-6', isOpen)} + isOpen={isOpenMap['groups-kebab-toggle-6'] || false} + onOpenChange={() => setIsOpenMap({})} + popperProps={{ position: 'right' }} + toggle={(toggleRef: React.Ref) => ( + - } - isOpen={isOpenMap && isOpenMap['groups-kebab-toggle-6']} - isPlain - dropdownItems={dropdownItems} - id="grouped-notification-6" - /> + isExpanded={isOpenMap['groups-kebab-toggle-6'] || false} + onClick={() => onToggle('groups-kebab-toggle-6')} + variant="plain" + aria-label={`Groups example group 2 notification 1 kebab toggle`} + > + + )} + > + {dropdownItems} + This is an info notification description. @@ -240,20 +279,26 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => { title="Unread danger notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines." srTitle="Danger notification:" > - onToggle('groups-kebab-toggle-7', isOpen)} + isOpen={isOpenMap['groups-kebab-toggle-7'] || false} + onOpenChange={() => setIsOpenMap({})} + popperProps={{ position: 'right' }} + toggle={(toggleRef: React.Ref) => ( + - } - isOpen={isOpenMap && isOpenMap['groups-kebab-toggle-7']} - isPlain - dropdownItems={dropdownItems} - id="gropued-notification-7" - /> + isExpanded={isOpenMap['groups-kebab-toggle-7'] || false} + onClick={() => onToggle('groups-kebab-toggle-7')} + variant="plain" + aria-label={`Groups example group 2 notification 2 kebab toggle`} + > + + )} + > + {dropdownItems} + This is a danger notification description. This is a long description to show how the title will wrap @@ -266,20 +311,26 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => { title="Read warning notification title" srTitle="Warning notification:" > - onToggle('groups-kebab-toggle-8', isOpen)} + isOpen={isOpenMap['groups-kebab-toggle-8'] || false} + onOpenChange={() => setIsOpenMap({})} + popperProps={{ position: 'right' }} + toggle={(toggleRef: React.Ref) => ( + - } - isOpen={isOpenMap && isOpenMap['groups-kebab-toggle-8']} - isPlain - dropdownItems={dropdownItems} - id="grouped-notification-8" - /> + isExpanded={isOpenMap['groups-kebab-toggle-8'] || false} + onClick={() => onToggle('groups-kebab-toggle-8')} + variant="plain" + aria-label={`Groups example group 2 notification 3 kebab toggle`} + > + + )} + > + {dropdownItems} + This is a warning notification description. @@ -291,21 +342,26 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => { title="Read success notification title" srTitle="Success notification:" > - onToggle('groups-kebab-toggle-9', isOpen)} + isOpen={isOpenMap['groups-kebab-toggle-9'] || false} + onOpenChange={() => setIsOpenMap({})} + popperProps={{ position: 'right' }} + toggle={(toggleRef: React.Ref) => ( + - } - isOpen={isOpenMap && isOpenMap['groups-kebab-toggle-9']} - isPlain - dropdownItems={dropdownItems} - id="grouped-notification-9" - /> + isExpanded={isOpenMap['groups-kebab-toggle-9'] || false} + onClick={() => onToggle('groups-kebab-toggle-9')} + variant="plain" + aria-label={`Groups example group 2 notification 4 kebab toggle`} + > + + )} + > + {dropdownItems} + This is a success notification description. diff --git a/packages/react-core/src/components/Toolbar/examples/Toolbar.md b/packages/react-core/src/components/Toolbar/examples/Toolbar.md index a35d30133f9..e05fc76d274 100644 --- a/packages/react-core/src/components/Toolbar/examples/Toolbar.md +++ b/packages/react-core/src/components/Toolbar/examples/Toolbar.md @@ -11,15 +11,6 @@ import SyncIcon from '@patternfly/react-icons/dist/esm/icons/sync-icon'; import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon'; import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; -import { -Dropdown as DropdownDeprecated, -DropdownToggle, -DropdownToggleCheckbox, -DropdownItem as DropdownItemDeprecated, -DropdownSeparator, -DropdownPosition, -KebabToggle -} from '@patternfly/react-core/deprecated'; ## Examples diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarStacked.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarStacked.tsx index 826b225fe19..7329c43489b 100644 --- a/packages/react-core/src/components/Toolbar/examples/ToolbarStacked.tsx +++ b/packages/react-core/src/components/Toolbar/examples/ToolbarStacked.tsx @@ -11,6 +11,7 @@ import { DropdownList, Divider, MenuToggle, + MenuToggleCheckbox, MenuToggleElement, OverflowMenu, OverflowMenuContent, @@ -22,12 +23,6 @@ import { ToolbarToggleGroup, ToolbarItem } from '@patternfly/react-core'; -import { - Dropdown as DropdownDeprecated, - DropdownToggle, - DropdownToggleCheckbox, - DropdownItem as DropdownItemDeprecated -} from '@patternfly/react-core/deprecated'; import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; @@ -42,7 +37,7 @@ export const ToolbarStacked: React.FunctionComponent = () => { const [resourceSelected, setResourceSelected] = React.useState(''); const [statusIsExpanded, setStatusIsExpanded] = React.useState(false); const [statusSelected, setStatusSelected] = React.useState(''); - const [splitButtonDropdownIsOpen, setSplitButtonDropdownIsOpen] = React.useState(false); + const [isSplitButtonDropdownOpen, setIsSplitButtonDropdownOpen] = React.useState(false); const [page, setPage] = React.useState(1); const [perPage, setPerPage] = React.useState(20); @@ -85,44 +80,52 @@ export const ToolbarStacked: React.FunctionComponent = () => { setPerPage(perPage); }; - const onSplitButtonToggle = (_event: any, isOpen: boolean) => { - setSplitButtonDropdownIsOpen(isOpen); + const onSplitButtonToggle = () => { + setIsSplitButtonDropdownOpen(!isSplitButtonDropdownOpen); }; const onSplitButtonSelect = () => { - setSplitButtonDropdownIsOpen(!splitButtonDropdownIsOpen); + setIsSplitButtonDropdownOpen(!isSplitButtonDropdownOpen); }; - const dropdownItems = [ - Link, - - Action - , - - Disabled Link - , - - Disabled Action - , - , - Separated Link, - - Separated Action - - ]; - - const splitButtonDropdownItems = [ - Link, - - Action - , - - Disabled Link - , - - Disabled Action - - ]; + const dropdownItems = ( + <> + Action + ev.preventDefault()} + > + Link + + Disabled Action + + Disabled Link + + + ); + const splitButtonDropdownItems = ( + <> + + Action + + ev.preventDefault()} + > + Link + + + Disabled Action + + + Disabled Link + + + ); const toggleGroupItems = ( @@ -147,13 +150,15 @@ export const ToolbarStacked: React.FunctionComponent = () => { )} onSelect={onResourceSelect} selected={resourceSelected} - onOpenChange={isOpen => setResourceIsExpanded(isOpen)} + onOpenChange={(isOpen) => setResourceIsExpanded(isOpen)} isOpen={resourceIsExpanded} aria-labelledby="stacked-example-resource-select" > {resourceOptions.map((option, index) => ( - {option} + + {option} + ))} @@ -178,13 +183,15 @@ export const ToolbarStacked: React.FunctionComponent = () => { )} onSelect={onStatusSelect} - onOpenChange={isOpen => setStatusIsExpanded(isOpen)} + onOpenChange={(isOpen) => setStatusIsExpanded(isOpen)} selected={statusSelected} isOpen={statusIsExpanded} > {statusOptions.map((option, index) => ( - {option} + + {option} + ))} @@ -214,8 +221,8 @@ export const ToolbarStacked: React.FunctionComponent = () => { setKebabIsOpen(isOpen)} - toggle={(toggleRef) => ( + onOpenChange={(isOpen: boolean) => setKebabIsOpen(isOpen)} + toggle={(toggleRef: React.Ref) => ( { - - ]} - onToggle={onSplitButtonToggle} + isOpen={isSplitButtonDropdownOpen} + onOpenChange={(isOpen: boolean) => setIsSplitButtonDropdownOpen(isOpen)} + toggle={(toggleRef: React.Ref) => ( + + ] + }} /> - } - isOpen={splitButtonDropdownIsOpen} - dropdownItems={splitButtonDropdownItems} - /> + )} + > + {splitButtonDropdownItems} + { const [inputValue, setInputValue] = React.useState(''); - const [statusIsExpanded, setStatusIsExpanded] = React.useState(false); - const [riskIsExpanded, setRiskIsExpanded] = React.useState(false); + const [isStatusExpanded, setIsStatusExpanded] = React.useState(false); + const [isRiskExpanded, setIsRiskExpanded] = React.useState(false); const [filters, setFilters] = React.useState({ risk: ['Low'], status: ['New', 'Pending'] }); - const [kebabIsOpen, setKebabIsOpen] = React.useState(false); + const [isKebabOpen, setIsKebabOpen] = React.useState(false); const onInputChange = (newValue: string) => { setInputValue(newValue); }; - const onSelect = ( - type: string, - event: React.MouseEvent | React.ChangeEvent, - selection: string - ) => { + const onSelect = (type: string, event: React.MouseEvent | React.ChangeEvent, selection: string) => { const checked = (event.target as HTMLInputElement).checked; setFilters((prev) => { const prevSelections = prev[type]; @@ -83,48 +76,33 @@ export const ToolbarWithFilters: React.FunctionComponent = () => { }; const onStatusToggle = () => { - setStatusIsExpanded(!statusIsExpanded); + setIsStatusExpanded(!isStatusExpanded); }; const onRiskToggle = () => { - setRiskIsExpanded(!statusIsExpanded); + setIsRiskExpanded(!isRiskExpanded); }; - const onKebabToggle = (_event: any, isOpen: boolean) => { - setKebabIsOpen(isOpen); + const onKebabToggle = () => { + setIsKebabOpen(!isKebabOpen); }; const statusMenuItems = ( - + New - + Pending - + Running Cancelled @@ -133,28 +111,13 @@ export const ToolbarWithFilters: React.FunctionComponent = () => { const riskMenuItems = ( - + Low - + Medium - + High @@ -186,7 +149,7 @@ export const ToolbarWithFilters: React.FunctionComponent = () => { { )} onSelect={onStatusSelect} selected={filters.status} - isOpen={statusIsExpanded} - onOpenChange={isOpen => setStatusIsExpanded(isOpen)} + isOpen={isStatusExpanded} + onOpenChange={(isOpen) => setIsStatusExpanded(isOpen)} > {statusMenuItems} @@ -217,7 +180,7 @@ export const ToolbarWithFilters: React.FunctionComponent = () => { { )} onSelect={onRiskSelect} selected={filters.risk} - isOpen={riskIsExpanded} - onOpenChange={isOpen => setRiskIsExpanded(isOpen)} + isOpen={isRiskExpanded} + onOpenChange={(isOpen) => setIsRiskExpanded(isOpen)} > {riskMenuItems} @@ -240,24 +203,6 @@ export const ToolbarWithFilters: React.FunctionComponent = () => { ); - const dropdownItems = [ - Link, - - Action - , - - Disabled Link - , - - Disabled Action - , - , - Separated Link, - - Separated Action - - ]; - const toolbarItems = ( } breakpoint="xl"> @@ -281,13 +226,37 @@ export const ToolbarWithFilters: React.FunctionComponent = () => { - } - isOpen={kebabIsOpen} - isPlain - dropdownItems={dropdownItems} - position={DropdownPosition.right} - /> + setIsKebabOpen(isOpen)} + toggle={(toggleRef: React.Ref) => ( + + + )} + > + + Action + ev.preventDefault()} + > + Link + + Disabled Action + + Disabled Link + + + ); diff --git a/packages/react-core/src/components/TreeView/examples/TreeView.md b/packages/react-core/src/components/TreeView/examples/TreeView.md index e2a1e2f5154..a76c1e83236 100644 --- a/packages/react-core/src/components/TreeView/examples/TreeView.md +++ b/packages/react-core/src/components/TreeView/examples/TreeView.md @@ -5,11 +5,6 @@ cssPrefix: pf-c-tree-view propComponents: ['TreeView', 'TreeViewDataItem', 'TreeViewSearch'] --- -import { -Dropdown as DropdownDeprecated, -DropdownItem as DropdownItemDeprecated, -KebabToggle -} from '@patternfly/react-core/deprecated'; import { FolderIcon, FolderOpenIcon, EllipsisVIcon, ClipboardIcon, HamburgerIcon } from '@patternfly/react-icons'; ## Examples @@ -863,14 +858,18 @@ class CustomBadgesTreeView extends React.Component { ```js import React from 'react'; -import { TreeView, Button } from '@patternfly/react-core'; import { - Dropdown as DropdownDeprecated, - DropdownItem as DropdownItemDeprecated, - KebabToggle -} from '@patternfly/react-core/deprecated'; + TreeView, + Button, + Dropdown, + DropdownList, + DropdownItem, + MenuToggle, + MenuToggleElement +} from '@patternfly/react-core'; import ClipboardIcon from '@patternfly/react-icons/dist/esm/icons/clipboard-icon'; import HamburgerIcon from '@patternfly/react-icons/dist/esm/icons/hamburger-icon'; +import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; class IconTreeView extends React.Component { constructor(props) { @@ -887,13 +886,13 @@ class IconTreeView extends React.Component { } }; - this.onToggle = (_event, isOpen) => { + this.onToggle = () => { this.setState({ - isOpen + isOpen: !this.state.isOpen }); }; - this.onAppLaunchSelect = (event) => { + this.onAppLaunchSelect = () => { this.setState({ isOpen: !this.state.isOpen }); @@ -902,30 +901,43 @@ class IconTreeView extends React.Component { render() { const { activeItems, isOpen } = this.state; - const dropdownItems = [ - Link, - - Action - , - - Disabled Link - , - - Disabled Action - - ]; + const options = [ { name: 'Application launcher', id: 'example7-AppLaunch', action: ( - } isOpen={isOpen} - isPlain - dropdownItems={dropdownItems} - /> + onOpenChange={(isOpen) => this.setState({ isOpen })} + toggle={(toggleRef) => ( + + + )} + > + + Action + ev.preventDefault()} + > + Link + + Disabled Action + + Disabled Link + + + ), children: [ { diff --git a/packages/react-core/src/demos/AlertGroup.md b/packages/react-core/src/demos/AlertGroup.md index d9f3fb68d7d..d2272693764 100644 --- a/packages/react-core/src/demos/AlertGroup.md +++ b/packages/react-core/src/demos/AlertGroup.md @@ -5,14 +5,9 @@ section: components import { useEffect } from 'react'; import SearchIcon from '@patternfly/react-icons/dist/js/icons/search-icon'; +import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; import DashboardWrapper from './examples/DashboardWrapper'; import DashboardHeader from './examples/DashboardHeader'; -import { -Dropdown as DropdownDeprecated, -DropdownItem as DropdownItemDeprecated, -KebabToggle, -DropdownPosition -} from '@patternfly/react-core/deprecated'; ## Demos diff --git a/packages/react-core/src/demos/Card/Card.md b/packages/react-core/src/demos/Card/Card.md index 5f387ba4225..c496bf11b5a 100644 --- a/packages/react-core/src/demos/Card/Card.md +++ b/packages/react-core/src/demos/Card/Card.md @@ -20,16 +20,6 @@ import azureIcon from './FuseConnector_Icons_AzureServices.png'; import restIcon from './FuseConnector_Icons_REST.png'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; -import { -Dropdown as DropdownDeprecated, -DropdownToggle, -DropdownItem as DropdownItemDeprecated, -DropdownSeparator, -DropdownPosition, -DropdownToggleCheckbox, -KebabToggle, -} from '@patternfly/react-core/deprecated'; - ## Demos This demonstrates how you can assemble a full page view that contains a grid of equal sized cards that includes a toolbar for managing card grid contents. @@ -47,7 +37,9 @@ import { CardTitle, CardBody, Checkbox, + Divider, Dropdown, + DropdownItem, DropdownList, EmptyState, EmptyStateHeader, @@ -57,6 +49,7 @@ import { EmptyStateActions, Gallery, MenuToggle, + MenuToggleCheckbox, OverflowMenu, OverflowMenuControl, OverflowMenuDropdownItem, @@ -75,15 +68,6 @@ import { SelectList, SelectOption } from '@patternfly/react-core'; -import { - Dropdown as DropdownDeprecated, - DropdownToggle, - DropdownItem as DropdownItemDeprecated, - DropdownSeparator, - DropdownPosition, - DropdownToggleCheckbox, - KebabToggle -} from '@patternfly/react-core/deprecated'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper'; @@ -150,10 +134,10 @@ class CardViewBasic extends React.Component { }); }; - this.onCardKebabDropdownToggle = (key, isCardKebabDropdownOpen) => { - this.setState({ - [key]: isCardKebabDropdownOpen - }); + this.onCardKebabDropdownToggle = (key) => { + this.setState((prevState) => ({ + [key]: !prevState[key] + })); }; this.onCardKebabDropdownSelect = (key, event) => { @@ -182,15 +166,15 @@ class CardViewBasic extends React.Component { }); }; - this.onSplitButtonToggle = (_event, isOpen) => { - this.setState({ - splitButtonDropdownIsOpen: isOpen - }); + this.onSplitButtonToggle = () => { + this.setState((prevState) => ({ + splitButtonDropdownIsOpen: !prevState.splitButtonDropdownIsOpen + })); }; - this.onSplitButtonSelect = (event) => { - this.setState((prevState, props) => { - return { splitButtonDropdownIsOpen: !prevState.splitButtonDropdownIsOpen }; + this.onSplitButtonSelect = () => { + this.setState({ + splitButtonDropdownIsOpen: false }); }; @@ -227,7 +211,6 @@ class CardViewBasic extends React.Component { }; this.onKeyDown = (event, productId) => { - console.log(productId); if (event.target !== event.currentTarget) { return; } @@ -422,41 +405,48 @@ class CardViewBasic extends React.Component { const anySelected = numSelected > 0; const someChecked = anySelected ? null : false; const isChecked = allSelected ? true : someChecked; - const splitButtonDropdownItems = [ - - Select none (0 items) - , - - Select page ({this.state.perPage} items) - , - - Select all ({this.state.totalItemCount} items) - - ]; - + const splitButtonDropdownItems = ( + <> + + Select none (0 items) + + + Select page ({this.state.perPage} items) + + + Select all ({this.state.totalItemCount} items) + + + ); return ( - - {numSelected !== 0 && `${numSelected} selected`} - - ]} - onToggle={this.onSplitButtonToggle} - > - } isOpen={splitButtonDropdownIsOpen} - dropdownItems={splitButtonDropdownItems} - /> + onOpenChange={(isOpen) => this.setState({ splitButtonDropdownIsOpen: isOpen })} + toggle={(toggleRef) => ( + + {numSelected !== 0 && `${numSelected} selected`} + + ] + }} + > + )} + > + {splitButtonDropdownItems} + ); } @@ -540,7 +530,7 @@ class CardViewBasic extends React.Component { Disabled Action , - , + , Separated Link , @@ -573,6 +563,7 @@ class CardViewBasic extends React.Component { )} isOpen={isLowerToolbarKebabDropdownOpen} + onOpenChange={(isOpen) => this.setState({ isLowerToolbarKebabDropdownOpen: isOpen })} > {toolbarKebabDropdownItems} @@ -650,25 +641,29 @@ class CardViewBasic extends React.Component { actions={{ actions: ( <> - this.onCardKebabDropdownSelect(key, e)} - toggle={ - - this.onCardKebabDropdownToggle(key, isCardKebabDropdownOpen) - } - /> - } + + onOpenChange={(isOpen) => this.setState({ [key]: isOpen })} + toggle={(toggleRef) => ( + this.onCardKebabDropdownToggle(key)} + isExpanded={this.state[key]} + > + + + )} + popperProps={{ position: 'right' }} + > + + Delete - - ]} - /> + + + { - this.setState({ - isDropdownOpen - }); + this.onActionToggle = () => { + this.setState((prevState) => ({ + isDropdownOpen: !prevState.isDropdownOpen + })); }; - this.onActionSelect = (event) => { + this.onActionSelect = () => { this.setState({ - isDropdownOpen: !this.state.isDropdownOpen + isDropdownOpen: false }); }; } render() { const { isCardExpanded, isDropdownOpen } = this.state; - const dropdownItems = [ - - Action 1 - , - - Action 2 - , - - Disabled Action 3 - , - - Action 4 - - ]; - + const dropdownItems = ( + <> + Action 1 + Action 2 + + Disabled Action 3 + + Action 4 + + ); const headerActions = ( - } isOpen={isDropdownOpen} - isPlain - dropdownItems={dropdownItems} - position="right" - /> + popperProps={{ position: 'right' }} + onOpenChange={(isOpen) => this.setState({ isDropdownOpen: isOpen })} + toggle={(toggleRef) => ( + + + )} + > + {dropdownItems} + ); return ( diff --git a/packages/react-core/src/demos/DataListDemo.md b/packages/react-core/src/demos/DataListDemo.md index 64a36d1b6e3..14327166b14 100644 --- a/packages/react-core/src/demos/DataListDemo.md +++ b/packages/react-core/src/demos/DataListDemo.md @@ -3,16 +3,10 @@ id: Data list section: components --- -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'; ## Demos @@ -31,6 +25,10 @@ import { DataListToggle, DataListContent, DataListItemCells, + Dropdown, + DropdownItem, + DropdownList, + MenuToggle, Toolbar, ToolbarGroup, ToolbarItem, @@ -39,14 +37,9 @@ import { SearchInput, Tooltip } from '@patternfly/react-core'; -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 AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon'; +import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; class ExpandableDataList extends React.Component { constructor(props) { @@ -78,34 +71,34 @@ class ExpandableDataList extends React.Component { ); }; - this.onToggle1 = (_event, isOpen1) => { - this.setState({ isOpen1 }); + this.onToggle1 = () => { + this.setState((prevState) => ({ isOpen1: !prevState.isOpen1 })); }; - this.onToggle2 = (_event, isOpen2) => { - this.setState({ isOpen2 }); + this.onToggle2 = () => { + this.setState((prevState) => ({ isOpen2: !prevState.isOpen2 })); }; - this.onToggle3 = (_event, isOpen3) => { - this.setState({ isOpen3 }); + this.onToggle3 = () => { + this.setState((prevState) => ({ isOpen3: !prevState.isOpen3 })); }; - this.onSelect1 = (event) => { - this.setState((prevState) => ({ - isOpen1: !prevState.isOpen1 - })); + this.onSelect1 = () => { + this.setState({ + isOpen1: false + }); }; - this.onSelect2 = (event) => { - this.setState((prevState) => ({ - isOpen2: !prevState.isOpen2 - })); + this.onSelect2 = () => { + this.setState({ + isOpen2: false + }); }; - this.onSelect3 = (event) => { - this.setState((prevState) => ({ - isOpen3: !prevState.isOpen3 - })); + this.onSelect3 = () => { + this.setState({ + isOpen3: false + }); }; } @@ -154,6 +147,7 @@ class ExpandableDataList extends React.Component { } render() { + const { isOpen1, isOpen2, isOpen3 } = this.state; const toggle = (id) => { const expanded = this.state.expanded; const index = expanded.indexOf(id); @@ -205,22 +199,44 @@ class ExpandableDataList extends React.Component { aria-label="Actions" isPlainButtonAction > - } - dropdownItems={[ - Link, - + popperProps={{ position: 'right' }} + onOpenChange={(isOpen) => this.setState({ isOpen1: isOpen })} + toggle={(toggleRef) => ( + + + )} + > + + Action - , - + + ev.preventDefault()} + > + Link + + + Disabled Action + + Disabled Link - - ]} - /> + + + - } - dropdownItems={[ - Link, - + popperProps={{ position: 'right' }} + onOpenChange={(isOpen) => this.setState({ isOpen2: isOpen })} + toggle={(toggleRef) => ( + + + )} + > + + Action - , - + + ev.preventDefault()} + > + Link + + + Disabled Action + + Disabled Link - - ]} - /> + + + - } - dropdownItems={[ - Link, - + popperProps={{ position: 'right' }} + onOpenChange={(isOpen) => this.setState({ isOpen3: isOpen })} + toggle={(toggleRef) => ( + + + )} + > + + Action - , - + + ev.preventDefault()} + > + Link + + + Disabled Action + + Disabled Link - - ]} - /> + + + { - this.setState({ - isDropdownOpen - }); + this.onDropdownToggle = () => { + this.setState((prevState) => ({ + isDropdownOpen: !prevState.isDropdownOpen + })); }; - this.onDropdownSelect = (event) => { + this.onDropdownSelect = () => { this.setState({ - isDropdownOpen: !this.state.isDropdownOpen + isDropdownOpen: false }); }; - this.onKebabDropdownToggle = (_event, isKebabDropdownOpen) => { - this.setState({ - isKebabDropdownOpen - }); + this.onKebabDropdownToggle = () => { + this.setState((prevState) => ({ + isKebabDropdownOpen: !prevState.isKebabDropdownOpen + })); }; - this.onKebabDropdownSelect = (event) => { + this.onKebabDropdownSelect = () => { this.setState({ - isKebabDropdownOpen: !this.state.isKebabDropdownOpen + isKebabDropdownOpen: false }); }; @@ -481,23 +477,23 @@ class PageLayoutHorizontalNav extends React.Component { ); - const kebabDropdownItems = [ - - Settings - , - - Help - - ]; - const userDropdownItems = [ - - My profile - - User management - - Logout - - ]; + const kebabDropdownItems = ( + <> + + Settings + + + Help + + + ); + const userDropdownItems = ( + <> + My profile + User management + Logout + + ); const headerTools = ( - ); @@ -750,8 +767,12 @@ import { ButtonVariant, Card, CardBody, + Dropdown, + DropdownItem, + DropdownList, Gallery, GalleryItem, + MenuToggle, Nav, NavItem, NavList, @@ -764,11 +785,6 @@ import { Text } from '@patternfly/react-core'; import { - Dropdown as DropdownDeprecated, - DropdownGroup as DropdownGroupDeprecated, - DropdownToggle, - DropdownItem as DropdownItemDeprecated, - KebabToggle, PageHeader, PageHeaderTools, PageHeaderToolsItem, @@ -778,6 +794,7 @@ import { DashboardBreadcrumb } from '@patternfly/react-core/src/demos/examples/D import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon'; import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon'; +import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; import imgColorBrand from '@patternfly/react-core/src/demos/examples/pfColorLogo.svg'; import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg'; @@ -791,27 +808,27 @@ class HorizontalNavWithSubnav extends React.Component { activeSubNavItem: 7 }; - this.onDropdownToggle = (_event, isDropdownOpen) => { - this.setState({ - isDropdownOpen - }); + this.onDropdownToggle = () => { + this.setState((prevState) => ({ + isDropdownOpen: !prevState.isDropdownOpen + })); }; - this.onDropdownSelect = (event) => { + this.onDropdownSelect = () => { this.setState({ - isDropdownOpen: !this.state.isDropdownOpen + isDropdownOpen: false }); }; - this.onKebabDropdownToggle = (_event, isKebabDropdownOpen) => { - this.setState({ - isKebabDropdownOpen - }); + this.onKebabDropdownToggle = () => { + this.setState((prevState) => ({ + isKebabDropdownOpen: !prevState.isKebabDropdownOpen + })); }; - this.onKebabDropdownSelect = (event) => { + this.onKebabDropdownSelect = () => { this.setState({ - isKebabDropdownOpen: !this.state.isKebabDropdownOpen + isKebabDropdownOpen: false }); }; @@ -858,23 +875,23 @@ class HorizontalNavWithSubnav extends React.Component { ); - const kebabDropdownItems = [ - - Settings - , - - Help - - ]; - const userDropdownItems = [ - - My profile - - User management - - Logout - - ]; + const kebabDropdownItems = ( + <> + + Settings + + + Help + + + ); + const userDropdownItems = ( + <> + My profile + User management + Logout + + ); const headerTools = ( - ); @@ -1220,8 +1258,12 @@ import { ButtonVariant, Card, CardBody, + Dropdown, + DropdownItem, + DropdownList, Gallery, GalleryItem, + MenuToggle, Nav, NavItem, NavList, @@ -1235,11 +1277,6 @@ import { Text } from '@patternfly/react-core'; import { - Dropdown as DropdownDeprecated, - DropdownGroup as DropdownGroupDeprecated, - DropdownToggle, - DropdownItem as DropdownItemDeprecated, - KebabToggle, PageHeader, PageHeaderTools, PageHeaderToolsItem, @@ -1248,6 +1285,7 @@ import { import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon'; import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon'; +import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; import imgBrand from '@patternfly/react-core/src/components/Brand/examples/pfLogo.svg'; import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg'; @@ -1263,27 +1301,27 @@ class PageLayoutManualNav extends React.Component { isNavOpenMobile: false }; - this.onDropdownToggle = (_event, isDropdownOpen) => { - this.setState({ - isDropdownOpen - }); + this.onDropdownToggle = () => { + this.setState((prevState) => ({ + isDropdownOpen: !prevState.isDropdownOpen + })); }; - this.onDropdownSelect = (event) => { + this.onDropdownSelect = () => { this.setState({ - isDropdownOpen: !this.state.isDropdownOpen + isDropdownOpen: false }); }; - this.onKebabDropdownToggle = (_event, isKebabDropdownOpen) => { - this.setState({ - isKebabDropdownOpen - }); + this.onKebabDropdownToggle = () => { + this.setState((prevState) => ({ + isKebabDropdownOpen: !prevState.isKebabDropdownOpen + })); }; - this.onKebabDropdownSelect = (event) => { + this.onKebabDropdownSelect = () => { this.setState({ - isKebabDropdownOpen: !this.state.isKebabDropdownOpen + isKebabDropdownOpen: false }); }; @@ -1337,23 +1375,23 @@ class PageLayoutManualNav extends React.Component { ); - const kebabDropdownItems = [ - - Settings - , - - Help - - ]; - const userDropdownItems = [ - - My profile - - User management - - Logout - - ]; + const kebabDropdownItems = ( + <> + + Settings + + + Help + + + ); + const userDropdownItems = ( + <> + My profile + User management + Logout + + ); const headerTools = ( - ); diff --git a/packages/react-core/src/demos/NotificationDrawer/NotificationDrawer.md b/packages/react-core/src/demos/NotificationDrawer/NotificationDrawer.md index 94d544a97d8..688b300e320 100644 --- a/packages/react-core/src/demos/NotificationDrawer/NotificationDrawer.md +++ b/packages/react-core/src/demos/NotificationDrawer/NotificationDrawer.md @@ -11,16 +11,7 @@ import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question- import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon'; import imgBrand from '@patternfly/react-core/src/components/Brand/examples/pfLogo.svg'; import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg'; -import { -Dropdown as DropdownDeprecated, -DropdownGroup as DropdownGroupDeprecated, -DropdownPosition, -DropdownDirection, -DropdownToggle, -DropdownItem as DropdownItemDeprecated, -DropdownSeparator, -KebabToggle -} from '@patternfly/react-core/deprecated'; +import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; ## Demos @@ -40,6 +31,10 @@ import { BreadcrumbItem, Button, ButtonVariant, + Divider, + Dropdown, + DropdownItem, + DropdownList, EmptyState, EmptyStateActions, EmptyStateBody, @@ -47,6 +42,7 @@ import { EmptyStateHeader, EmptyStateFooter, EmptyStateVariant, + MenuToggle, Nav, NavItem, NavList, @@ -78,20 +74,11 @@ import { ToolbarGroup, ToolbarContent } from '@patternfly/react-core'; -import { - Dropdown as DropdownDeprecated, - DropdownGroup as DropdownGroupDeprecated, - DropdownPosition, - DropdownDirection, - DropdownToggle, - DropdownItem as DropdownItemDeprecated, - DropdownSeparator, - KebabToggle -} from '@patternfly/react-core/deprecated'; import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon'; import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon'; +import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon'; import imgBrand from '@patternfly/react-core/src/components/Brand/examples/pfLogo.svg'; import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg'; @@ -111,29 +98,29 @@ class BasicNotificationDrawer extends React.Component { 'notification-2': true }, showNotifications: true, - isActionsMenuOpen: null + isActionsMenuOpen: {} }; - this.onDropdownToggle = (_event, isDropdownOpen) => { - this.setState({ - isDropdownOpen - }); + this.onDropdownToggle = () => { + this.setState((prevState) => ({ + isDropdownOpen: !prevState.isDropdownOpen + })); }; - this.onDropdownSelect = (event) => { + this.onDropdownSelect = () => { this.setState({ - isDropdownOpen: !this.state.isDropdownOpen + isDropdownOpen: false }); }; - this.onKebabDropdownToggle = (_event, isKebabDropdownOpen) => { - this.setState({ - isKebabDropdownOpen - }); + this.onKebabDropdownToggle = () => { + this.setState((prevState) => ({ + isKebabDropdownOpen: !prevState.isKebabDropdownOpen + })); }; - this.onKebabDropdownSelect = (event) => { + this.onKebabDropdownSelect = () => { this.setState({ - isKebabDropdownOpen: !this.state.isKebabDropdownOpen + isKebabDropdownOpen: false }); }; @@ -151,15 +138,15 @@ class BasicNotificationDrawer extends React.Component { }); }; - this.onToggle = (id, isOpen) => { - this.setState({ - isActionsMenuOpen: { [id]: isOpen } - }); + this.onToggle = (id) => { + this.setState((prevState) => ({ + isActionsMenuOpen: { [id]: !prevState.isActionsMenuOpen[id] } + })); }; - this.onSelect = (event) => { + this.onSelect = () => { this.setState({ - isActionsMenuOpen: null + isActionsMenuOpen: {} }); }; @@ -233,23 +220,23 @@ class BasicNotificationDrawer extends React.Component { ); - const kebabDropdownItems = [ - - Settings - , - - Help - - ]; - const userDropdownItems = [ - - My profile - - User management - - Logout - - ]; + const kebabDropdownItems = ( + <> + + Settings + + + Help + + + ); + const userDropdownItems = ( + <> + My profile + User management + Logout + + ); const headerToolbar = ( @@ -290,30 +277,48 @@ class BasicNotificationDrawer extends React.Component { lg: 'hidden' }} /** this kebab dropdown replaces the icon buttons and is hidden for desktop sizes */ > - } + + onSelect={this.onKebabDropdownSelect} + onOpenChange={(isOpen) => this.setState({ isKebabDropdownOpen: isOpen })} + popperProps={{ position: 'right' }} + toggle={(toggleRef) => ( + + + )} + > + {kebabDropdownItems} + @@ -357,46 +362,61 @@ class BasicNotificationDrawer extends React.Component { const drawerContent = 'Panel content'; - const notificationDrawerActions = [ - - Mark all read - , - this.showNotifications(false)} component="button"> - Clear all - , - this.showNotifications(true)} component="button"> - Unclear last - , - - Settings - - ]; - - const notificationDrawerDropdownItems = [ - Link, - - Action - , - , - - Disabled Link - - ]; - + const notificationDrawerActions = ( + <> + + Mark all read + + this.showNotifications(false)}> + Clear all + + this.showNotifications(true)}> + Unclear last + + Settings + + ); + const notificationDrawerDropdownItems = ( + <> + ev.preventDefault()} + > + Link + + Action + + + Disabled Link + + + ); const notificationDrawer = ( - this.onCloseNotificationDrawer(event)}> - + this.onToggle('toggle-id-0', isOpen)} id="toggle-id-0" /> - } - isOpen={isActionsMenuOpen && isActionsMenuOpen['toggle-id-0']} - isPlain - dropdownItems={notificationDrawerActions} + isOpen={isActionsMenuOpen['toggle-id-0'] || false} id="notification-0" - position={DropdownPosition.right} - /> + onOpenChange={(isOpen) => !isOpen && this.setState({ isActionsMenuOpen: {} })} + popperProps={{ position: 'right' }} + toggle={(toggleRef) => ( + this.onToggle('toggle-id-0')} + isExpanded={isActionsMenuOpen['toggle-id-0'] || false} + > + + )} + > + {notificationDrawerActions} + {showNotifications && ( @@ -411,20 +431,27 @@ class BasicNotificationDrawer extends React.Component { title="Unread info notification title" srTitle="Info notification:" > - this.onToggle('toggle-id-1', isOpen)} - id="toggle-id-1" - /> - } - isOpen={isActionsMenuOpen && isActionsMenuOpen['toggle-id-1']} - isPlain - dropdownItems={notificationDrawerDropdownItems} + isOpen={isActionsMenuOpen['toggle-id-1'] || false} id="notification-1" - /> + onOpenChange={(isOpen) => !isOpen && this.setState({ isActionsMenuOpen: {} })} + popperProps={{ position: 'right' }} + toggle={(toggleRef) => ( + this.onToggle('toggle-id-1')} + isExpanded={isActionsMenuOpen['toggle-id-1'] || false} + > + + )} + > + {notificationDrawerDropdownItems} + This is an info notification description. @@ -440,20 +467,27 @@ class BasicNotificationDrawer extends React.Component { title="Unread danger notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines." srTitle="Danger notification:" > - this.onToggle('toggle-id-2', isOpen)} - id="toggle-id-2" - /> - } - isOpen={isActionsMenuOpen && isActionsMenuOpen['toggle-id-2']} - isPlain - dropdownItems={notificationDrawerDropdownItems} + isOpen={isActionsMenuOpen['toggle-id-2'] || false} id="notification-2" - /> + onOpenChange={(isOpen) => !isOpen && this.setState({ isActionsMenuOpen: {} })} + popperProps={{ position: 'right' }} + toggle={(toggleRef) => ( + this.onToggle('toggle-id-2')} + isExpanded={isActionsMenuOpen['toggle-id-2'] || false} + > + + )} + > + {notificationDrawerDropdownItems} + This is a danger notification description. This is a long description to show how the title will wrap @@ -470,20 +504,27 @@ class BasicNotificationDrawer extends React.Component { title="Read warning notification title" srTitle="Warning notification:" > - this.onToggle('toggle-id-3', isOpen)} - id="toggle-id-3" - /> - } - isOpen={isActionsMenuOpen && isActionsMenuOpen['toggle-id-3']} - isPlain - dropdownItems={notificationDrawerDropdownItems} + isOpen={isActionsMenuOpen['toggle-id-3'] || false} id="notification-3" - /> + onOpenChange={(isOpen) => !isOpen && this.setState({ isActionsMenuOpen: {} })} + popperProps={{ position: 'right' }} + toggle={(toggleRef) => ( + this.onToggle('toggle-id-3')} + isExpanded={isActionsMenuOpen['toggle-id-3'] || false} + > + + )} + > + {notificationDrawerDropdownItems} + This is a warning notification description. @@ -499,21 +540,27 @@ class BasicNotificationDrawer extends React.Component { title="Read success notification title" srTitle="Success notification:" > - this.onToggle('toggle-id-4', isOpen)} - id="toggle-id-4" - /> - } - isOpen={isActionsMenuOpen && isActionsMenuOpen['toggle-id-4']} - isPlain - dropdownItems={notificationDrawerDropdownItems} + isOpen={isActionsMenuOpen['toggle-id-4'] || false} id="notification-4" - /> + onOpenChange={(isOpen) => !isOpen && this.setState({ isActionsMenuOpen: {} })} + popperProps={{ position: 'right' }} + toggle={(toggleRef) => ( + this.onToggle('toggle-id-4')} + isExpanded={isActionsMenuOpen['toggle-id-4'] || false} + > + + )} + > + {notificationDrawerDropdownItems} + This is a success notification description. @@ -587,6 +634,10 @@ import { BreadcrumbItem, Button, ButtonVariant, + Divider, + Dropdown, + DropdownItem, + DropdownList, EmptyState, EmptyStateActions, EmptyStateBody, @@ -594,6 +645,7 @@ import { EmptyStateHeader, EmptyStateFooter, EmptyStateVariant, + MenuToggle, Nav, NavItem, NavList, @@ -627,22 +679,13 @@ import { ToolbarGroup, ToolbarContent } from '@patternfly/react-core'; -import { - Dropdown as DropdownDeprecated, - DropdownGroup as DropdownGroupDeprecated, - DropdownPosition, - DropdownDirection, - DropdownToggle, - DropdownItem as DropdownItemDeprecated, - DropdownSeparator, - KebabToggle -} from '@patternfly/react-core/deprecated'; import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon'; import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon'; import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon'; import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon'; +import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; import imgBrand from '@patternfly/react-core/src/components/Brand/examples/pfLogo.svg'; import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg'; @@ -658,7 +701,7 @@ class GroupedNotificationDrawer extends React.Component { firstDrawerGroupExpanded: false, secondDrawerGroupExpanded: true, thirdDrawerGroupExpanded: false, - isActionsMenuOpen: null, + isActionsMenuOpen: {}, showNotifications: true, isUnreadMap: { 'group-1': { @@ -672,27 +715,27 @@ class GroupedNotificationDrawer extends React.Component { 'group-3': null } }; - this.onDropdownToggle = (_event, isDropdownOpen) => { - this.setState({ - isDropdownOpen - }); + this.onDropdownToggle = () => { + this.setState((prevState) => ({ + isDropdownOpen: !prevState.isDropdownOpen + })); }; - this.onDropdownSelect = (event) => { + this.onDropdownSelect = () => { this.setState({ - isDropdownOpen: !this.state.isDropdownOpen + isDropdownOpen: false }); }; - this.onKebabDropdownToggle = (_event, isKebabDropdownOpen) => { - this.setState({ - isKebabDropdownOpen - }); + this.onKebabDropdownToggle = () => { + this.setState((prevState) => ({ + isKebabDropdownOpen: !prevState.isKebabDropdownOpen + })); }; - this.onKebabDropdownSelect = (event) => { + this.onKebabDropdownSelect = () => { this.setState({ - isKebabDropdownOpen: !this.state.isKebabDropdownOpen + isKebabDropdownOpen: false }); }; @@ -710,15 +753,15 @@ class GroupedNotificationDrawer extends React.Component { }); }; - this.onToggle = (id, isOpen) => { - this.setState({ - isActionsMenuOpen: { [id]: isOpen } - }); + this.onToggle = (id) => { + this.setState((prevState) => ({ + isActionsMenuOpen: { [id]: !prevState.isActionsMenuOpen[id] } + })); }; - this.onSelect = (event) => { + this.onSelect = () => { this.setState({ - isActionsMenuOpen: null + isActionsMenuOpen: {} }); }; @@ -835,23 +878,23 @@ class GroupedNotificationDrawer extends React.Component { ); - const kebabDropdownItems = [ - - Settings - , - - Help - - ]; - const userDropdownItems = [ - - My profile - - User management - - Logout - - ]; + const kebabDropdownItems = ( + <> + + Settings + + + Help + + + ); + const userDropdownItems = ( + <> + My profile + User management + Logout + + ); const headerToolbar = ( @@ -892,30 +935,48 @@ class GroupedNotificationDrawer extends React.Component { lg: 'hidden' }} /** this kebab dropdown replaces the icon buttons and is hidden for desktop sizes */ > - } + + onSelect={this.onKebabDropdownSelect} + onOpenChange={(isOpen) => this.setState({ isKebabDropdownOpen: isOpen })} + popperProps={{ position: 'right' }} + toggle={(toggleRef) => ( + + + )} + > + {kebabDropdownItems} + @@ -958,47 +1019,62 @@ class GroupedNotificationDrawer extends React.Component { ); const drawerContent = 'Panel content'; - - const notificationDrawerDropdownItems = [ - Link, - - Action - , - , - - Disabled Link - - ]; - - const notificationDrawerActions = [ - - Mark all read - , - this.showNotifications(false)} component="button"> - Clear all - , - this.showNotifications(true)} component="button"> - Unclear last - , - - Settings - - ]; + const notificationDrawerActions = ( + <> + + Mark all read + + this.showNotifications(false)}> + Clear all + + this.showNotifications(true)}> + Unclear last + + Settings + + ); + const notificationDrawerDropdownItems = ( + <> + ev.preventDefault()} + > + Link + + Action + + + Disabled Link + + + ); const notificationDrawer = ( - this.onCloseNotificationDrawer(event)}> - + this.onToggle('toggle-id-0', isOpen)} id="toggle-id-0" /> - } - isOpen={isActionsMenuOpen && isActionsMenuOpen['toggle-id-0']} - isPlain - dropdownItems={notificationDrawerActions} + isOpen={isActionsMenuOpen['toggle-id-0'] || false} id="notification-0" - position={DropdownPosition.right} - /> + onOpenChange={(isOpen) => !isOpen && this.setState({ isActionsMenuOpen: {} })} + popperProps={{ position: 'right' }} + toggle={(toggleRef) => ( + this.onToggle('toggle-id-0')} + isExpanded={isActionsMenuOpen['toggle-id-0'] || false} + > + + )} + > + {notificationDrawerActions} + {showNotifications && ( @@ -1020,20 +1096,27 @@ class GroupedNotificationDrawer extends React.Component { title="Unread info notification title" srTitle="Info notification:" > - this.onToggle('toggle-id-5', isOpen)} - id="toggle-id-5" - /> - } - isOpen={isActionsMenuOpen && isActionsMenuOpen['toggle-id-5']} - isPlain - dropdownItems={notificationDrawerDropdownItems} + isOpen={isActionsMenuOpen['toggle-id-5'] || false} id="notification-5" - /> + onOpenChange={(isOpen) => !isOpen && this.setState({ isActionsMenuOpen: {} })} + popperProps={{ position: 'right' }} + toggle={(toggleRef) => ( + this.onToggle('toggle-id-5')} + isExpanded={isActionsMenuOpen['toggle-id-5'] || false} + > + + )} + > + {notificationDrawerDropdownItems} + This is an info notification description. @@ -1049,20 +1132,27 @@ class GroupedNotificationDrawer extends React.Component { title="Unread danger notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines." srTitle="Danger notification:" > - this.onToggle('toggle-id-6', isOpen)} - id="toggle-id-6" - /> - } - isOpen={isActionsMenuOpen && isActionsMenuOpen['toggle-id-6']} - isPlain - dropdownItems={notificationDrawerDropdownItems} + isOpen={isActionsMenuOpen['toggle-id-6'] || false} id="notification-6" - /> + onOpenChange={(isOpen) => !isOpen && this.setState({ isActionsMenuOpen: {} })} + popperProps={{ position: 'right' }} + toggle={(toggleRef) => ( + this.onToggle('toggle-id-6')} + isExpanded={isActionsMenuOpen['toggle-id-6'] || false} + > + + )} + > + {notificationDrawerDropdownItems} + This is a danger notification description. This is a long description to show how the title will @@ -1079,20 +1169,27 @@ class GroupedNotificationDrawer extends React.Component { title="Read warning notification title" srTitle="Warning notification:" > - this.onToggle('toggle-id-7', isOpen)} - id="toggle-id-7" - /> - } - isOpen={isActionsMenuOpen && isActionsMenuOpen['toggle-id-7']} - isPlain - dropdownItems={notificationDrawerDropdownItems} + isOpen={isActionsMenuOpen['toggle-id-7'] || false} id="notification-7" - /> + onOpenChange={(isOpen) => !isOpen && this.setState({ isActionsMenuOpen: {} })} + popperProps={{ position: 'right' }} + toggle={(toggleRef) => ( + this.onToggle('toggle-id-7')} + isExpanded={isActionsMenuOpen['toggle-id-7'] || false} + > + + )} + > + {notificationDrawerDropdownItems} + This is a warning notification description. @@ -1108,21 +1205,27 @@ class GroupedNotificationDrawer extends React.Component { title="Read success notification title" srTitle="Success notification:" > - this.onToggle('toggle-id-8', isOpen)} - id="toggle-id-8" - /> - } - isOpen={isActionsMenuOpen && isActionsMenuOpen['toggle-id-8']} - isPlain - dropdownItems={notificationDrawerDropdownItems} + isOpen={isActionsMenuOpen['toggle-id-8'] || false} id="notification-8" - /> + onOpenChange={(isOpen) => !isOpen && this.setState({ isActionsMenuOpen: {} })} + popperProps={{ position: 'right' }} + toggle={(toggleRef) => ( + this.onToggle('toggle-id-8')} + isExpanded={isActionsMenuOpen['toggle-id-8'] || false} + > + + )} + > + {notificationDrawerDropdownItems} + This is a success notification description. @@ -1147,20 +1250,27 @@ class GroupedNotificationDrawer extends React.Component { title="Unread info notification title" srTitle="Info notification:" > - this.onToggle('toggle-id-9', isOpen)} - id="toggle-id-9" - /> - } - isOpen={isActionsMenuOpen && isActionsMenuOpen['toggle-id-9']} - isPlain - dropdownItems={notificationDrawerDropdownItems} + isOpen={isActionsMenuOpen['toggle-id-9'] || false} id="notification-9" - /> + onOpenChange={(isOpen) => !isOpen && this.setState({ isActionsMenuOpen: {} })} + popperProps={{ position: 'right' }} + toggle={(toggleRef) => ( + this.onToggle('toggle-id-9')} + isExpanded={isActionsMenuOpen['toggle-id-9'] || false} + > + + )} + > + {notificationDrawerDropdownItems} + This is an info notification description. @@ -1176,20 +1286,27 @@ class GroupedNotificationDrawer extends React.Component { title="Unread danger notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines." srTitle="Danger notification:" > - this.onToggle('toggle-id-10', isOpen)} - id="toggle-id-10" - /> - } - isOpen={isActionsMenuOpen && isActionsMenuOpen['toggle-id-10']} - isPlain - dropdownItems={notificationDrawerDropdownItems} + isOpen={isActionsMenuOpen['toggle-id-10'] || false} id="notification-10" - /> + onOpenChange={(isOpen) => !isOpen && this.setState({ isActionsMenuOpen: {} })} + popperProps={{ position: 'right' }} + toggle={(toggleRef) => ( + this.onToggle('toggle-id-10')} + isExpanded={isActionsMenuOpen['toggle-id-10'] || false} + > + + )} + > + {notificationDrawerDropdownItems} + This is a danger notification description. This is a long description to show how the title will @@ -1206,20 +1323,27 @@ class GroupedNotificationDrawer extends React.Component { title="Read warning notification title" srTitle="Warning notification:" > - this.onToggle('toggle-id-11', isOpen)} - id="toggle-id-11" - /> - } - isOpen={isActionsMenuOpen && isActionsMenuOpen['toggle-id-11']} - isPlain - dropdownItems={notificationDrawerDropdownItems} + isOpen={isActionsMenuOpen['toggle-id-11'] || false} id="notification-11" - /> + onOpenChange={(isOpen) => !isOpen && this.setState({ isActionsMenuOpen: {} })} + popperProps={{ position: 'right' }} + toggle={(toggleRef) => ( + this.onToggle('toggle-id-11')} + isExpanded={isActionsMenuOpen['toggle-id-11'] || false} + > + + )} + > + {notificationDrawerDropdownItems} + This is a warning notification description. @@ -1235,21 +1359,27 @@ class GroupedNotificationDrawer extends React.Component { title="Read success notification title" srTitle="Success notification:" > - this.onToggle('toggle-id-12', isOpen)} - id="toggle-id-12" - /> - } - isOpen={isActionsMenuOpen && isActionsMenuOpen['toggle-id-12']} - isPlain - dropdownItems={notificationDrawerDropdownItems} + isOpen={isActionsMenuOpen['toggle-id-12'] || false} id="notification-12" - /> + onOpenChange={(isOpen) => !isOpen && this.setState({ isActionsMenuOpen: {} })} + popperProps={{ position: 'right' }} + toggle={(toggleRef) => ( + this.onToggle('toggle-id-12')} + isExpanded={isActionsMenuOpen['toggle-id-12'] || false} + > + + )} + > + {notificationDrawerDropdownItems} + This is a success notification description. diff --git a/packages/react-core/src/demos/Page.md b/packages/react-core/src/demos/Page.md index 3da896b7386..c2cde60c22c 100644 --- a/packages/react-core/src/demos/Page.md +++ b/packages/react-core/src/demos/Page.md @@ -12,13 +12,7 @@ import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/ava import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon'; import AttentionBellIcon from '@patternfly/react-icons/dist/esm/icons/attention-bell-icon'; import LightbulbIcon from '@patternfly/react-icons/dist/esm/icons/lightbulb-icon'; -import { -Dropdown as DropdownDeprecated, -DropdownGroup as DropdownGroupDeprecated, -DropdownItem as DropdownItemDeprecated, -DropdownToggle, -KebabToggle -} from '@patternfly/react-core/deprecated'; +import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; - All examples set the `isManagedSidebar` prop on the Page component to have the sidebar automatically close for smaller screen widths. You can also manually control this behavior by not adding the `isManagedSidebar` prop and instead: diff --git a/packages/react-core/src/demos/PrimaryDetail.md b/packages/react-core/src/demos/PrimaryDetail.md index 469dad712f7..4c525c9661b 100644 --- a/packages/react-core/src/demos/PrimaryDetail.md +++ b/packages/react-core/src/demos/PrimaryDetail.md @@ -3,15 +3,7 @@ id: Primary-detail section: patterns --- -import { -Dropdown as DropdownDeprecated, -DropdownToggle, -DropdownToggleCheckbox, -DropdownItem as DropdownItemDeprecated, -DropdownPosition, -DropdownSeparator, -KebabToggle -} from '@patternfly/react-core/deprecated'; +import { Select as SelectDeprecated, SelectOption as SelectOptionDeprecated, SelectVariant } from '@patternfly/react-core/deprecated'; import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper'; import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon'; import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon'; @@ -22,7 +14,6 @@ import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/excl import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon'; import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon'; import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon'; -import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon'; import pfIcon from './Card/pf-logo-small.svg'; import activeMQIcon from './Card/activemq-core_200x150.png'; import avroIcon from './Card/camel-avro_200x150.png'; @@ -33,6 +24,7 @@ import sparkIcon from './Card/camel-spark_200x150.png'; import swaggerIcon from './Card/camel-swagger-java_200x150.png'; import azureIcon from './Card/FuseConnector_Icons_AzureServices.png'; import restIcon from './Card/FuseConnector_Icons_REST.png'; +import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; ## Demos @@ -69,9 +61,6 @@ import { PageSection, PageSectionVariants, Progress, - Select, - SelectOption, - SelectVariant, Stack, StackItem, Text, @@ -79,6 +68,11 @@ import { TextInput, Title } from '@patternfly/react-core'; +import { + Select as SelectDeprecated, + SelectOption as SelectOptionDeprecated, + SelectVariant +} from '@patternfly/react-core/deprecated'; import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper'; import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon'; import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon'; @@ -88,6 +82,7 @@ import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/excl import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon'; import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon'; import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon'; +import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; class PrimaryDetailFullPage extends React.Component { constructor(props) { @@ -167,7 +162,7 @@ class PrimaryDetailFullPage extends React.Component { }); }; - this.onSelectDataListItem = (id) => { + this.onSelectDataListItem = (_event, id) => { this.setState({ selectedDataListItemId: id, isDrawerExpanded: true, @@ -217,7 +212,7 @@ class PrimaryDetailFullPage extends React.Component { - + - + @@ -529,9 +524,6 @@ import { PageSection, PageSectionVariants, Progress, - Select, - SelectOption, - SelectVariant, Stack, StackItem, Text, @@ -539,6 +531,11 @@ import { TextInput, Title } from '@patternfly/react-core'; +import { + Select as SelectDeprecated, + SelectOption as SelectOptionDeprecated, + SelectVariant +} from '@patternfly/react-core/deprecated'; import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper'; import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon'; import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon'; @@ -627,7 +624,7 @@ class PrimaryDetailContentPadding extends React.Component { }); }; - this.onSelectDataListItem = (id) => { + this.onSelectDataListItem = (_event, id) => { this.setState({ selectedDataListItemId: id, isDrawerExpanded: true, @@ -677,7 +674,7 @@ class PrimaryDetailContentPadding extends React.Component { - + - + @@ -977,16 +974,20 @@ import { DrawerContentBody, DrawerHead, DrawerPanelContent, + Dropdown, + DropdownItem, + DropdownList, Flex, FlexItem, Gallery, + MenuToggle, + MenuToggleCheckbox, PageSection, PageSectionVariants, Pagination, Progress, Select, SelectOption, - SelectVariant, TextContent, Text, Title, @@ -995,15 +996,6 @@ import { ToolbarContent, ToolbarFilter } from '@patternfly/react-core'; -import { - Dropdown as DropdownDeprecated, - DropdownToggle, - DropdownToggleCheckbox, - DropdownItem as DropdownItemDeprecated, - DropdownPosition, - DropdownSeparator, - KebabToggle -} from '@patternfly/react-core/deprecated'; import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper'; import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon'; import pfIcon from './pf-logo-small.svg'; @@ -1016,6 +1008,7 @@ import sparkIcon from './camel-spark_200x150.png'; import swaggerIcon from './camel-swagger-java_200x150.png'; import azureIcon from './FuseConnector_Icons_AzureServices.png'; import restIcon from './FuseConnector_Icons_REST.png'; +import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; class PrimaryDetailCardView extends React.Component { constructor(props) { @@ -1055,15 +1048,15 @@ class PrimaryDetailCardView extends React.Component { }); }; - this.onToolbarKebabDropdownToggle = (_event, isLowerToolbarKebabDropdownOpen) => { - this.setState({ - isLowerToolbarKebabDropdownOpen - }); + this.onToolbarKebabDropdownToggle = () => { + this.setState((prevState) => ({ + isLowerToolbarKebabDropdownOpen: !prevState.isLowerToolbarKebabDropdownOpen + })); }; - this.onToolbarKebabDropdownSelect = (_event) => { + this.onToolbarKebabDropdownSelect = () => { this.setState({ - isLowerToolbarKebabDropdownOpen: !this.state.isLowerToolbarKebabDropdownOpen + isLowerToolbarKebabDropdownOpen: false }); }; @@ -1231,30 +1224,29 @@ class PrimaryDetailCardView extends React.Component { ); }; - this.onSplitButtonSelect = (_event) => { - this.setState((prevState, _props) => ({ - splitButtonDropdownIsOpen: !prevState.splitButtonDropdownIsOpen, + this.onSplitButtonSelect = () => { + this.setState((prevState) => ({ + splitButtonDropdownIsOpen: false, isDrawerExpanded: false, activeCard: null })); }; - this.onSplitButtonToggle = (_event, isOpen) => { - this.setState({ - splitButtonDropdownIsOpen: isOpen - }); + this.onSplitButtonToggle = () => { + this.setState((prevState) => ({ + splitButtonDropdownIsOpen: !prevState.splitButtonDropdownIsOpen + })); }; - this.onCardKebabDropdownToggle = (event, key, isCardKebabDropdownOpen) => { - event.stopPropagation(); - this.setState({ - [key]: isCardKebabDropdownOpen - }); + this.onCardKebabDropdownToggle = (key) => { + this.setState((prevState) => ({ + [key]: !prevState[key] + })); }; - this.onCardKebabDropdownSelect = (key, _event) => { + this.onCardKebabDropdownSelect = (key) => { this.setState({ - [key]: !this.state[key] + [key]: false }); }; @@ -1316,39 +1308,6 @@ class PrimaryDetailCardView extends React.Component { this.fetch(this.state.page, this.state.perPage); } - buildFilterDropdown() { - const { isLowerToolbarDropdownOpen, filters } = this.state; - - const filterDropdownItems = [ - , - , - , - , - , - , - , - , - , - - ]; - - return ( - - - - ); - } - buildSelectDropdown() { const { splitButtonDropdownIsOpen, selectedItems, areAllSelected } = this.state; const numSelected = selectedItems.length; @@ -1356,41 +1315,49 @@ class PrimaryDetailCardView extends React.Component { const anySelected = numSelected > 0; const someChecked = anySelected ? null : false; const isChecked = allSelected ? true : someChecked; - const splitButtonDropdownItems = [ - - Select none (0 items) - , - - Select page ({this.state.res.length} items) - , - - Select all ({this.state.totalItemCount} items) - - ]; + const splitButtonDropdownItems = ( + <> + + Select none (0 items) + + + Select page ({this.state.perPage} items) + + + Select all ({this.state.totalItemCount} items) + + + ); return ( - - {numSelected !== 0 && `${numSelected} selected`} - - ]} - onToggle={this.onSplitButtonToggle} - > - } isOpen={splitButtonDropdownIsOpen} - dropdownItems={splitButtonDropdownItems} - /> + onOpenChange={(isOpen) => this.setState({ splitButtonDropdownIsOpen: isOpen })} + toggle={(toggleRef) => ( + + {numSelected !== 0 && `${numSelected} selected`} + + ] + }} + > + )} + > + {splitButtonDropdownItems} + ); } @@ -1398,24 +1365,35 @@ class PrimaryDetailCardView extends React.Component { const { isDrawerExpanded, isChecked, selectedItems, activeCard, isLowerToolbarKebabDropdownOpen, filters, res } = this.state; - const toolbarKebabDropdownItems = [ - Link, - - Action - , - - Disabled Link - , - - Disabled Action - , - , - Separated Link, - - Separated Action - - ]; - + const toolbarKebabDropdownItems = ( + <> + + Action + + ev.preventDefault()} + > + Link + + + Disabled Action + + + Disabled Link + + + + Separated Action + + ev.preventDefault()}> + Separated Link + + + ); const toolbarItems = ( {this.buildSelectDropdown()} @@ -1426,15 +1404,24 @@ class PrimaryDetailCardView extends React.Component { - } isOpen={isLowerToolbarKebabDropdownOpen} - isPlain - dropdownItems={toolbarKebabDropdownItems} - isFlipEnabled - menuAppendTo="parent" - /> + onOpenChange={(isOpen) => this.setState({ isLowerToolbarKebabDropdownOpen: isOpen })} + toggle={(toggleRef) => ( + + + )} + > + {toolbarKebabDropdownItems} + ); @@ -1474,29 +1461,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 +1751,12 @@ import { DrawerHead, DrawerPanelBody, DrawerPanelContent, + Dropdown, + DropdownItem, + DropdownList, Flex, FlexItem, + MenuToggle, PageSection, PageSectionVariants, Progress, @@ -1772,13 +1764,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 +1778,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 +1793,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 +1847,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 + + @@ -2019,9 +1999,6 @@ import { PageSection, PageSectionVariants, Progress, - Select, - SelectOption, - SelectVariant, Stack, StackItem, Text, @@ -2029,6 +2006,11 @@ import { TextInput, Title } from '@patternfly/react-core'; +import { + Select as SelectDeprecated, + SelectOption as SelectOptionDeprecated, + SelectVariant +} from '@patternfly/react-core/deprecated'; import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper'; import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon'; import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon'; @@ -2117,7 +2099,7 @@ class PrimaryDetailInlineModifier extends React.Component { }); }; - this.onSelectDataListItem = (id) => { + this.onSelectDataListItem = (_event, id) => { this.setState({ selectedDataListItemId: id, isDrawerExpanded: true, @@ -2167,7 +2149,7 @@ class PrimaryDetailInlineModifier extends React.Component { - + - + 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..6d93be33e0b 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,16 @@ import { PageSection, PageSectionVariants, Toolbar, - ToolbarContent, - ToolbarGroup, - ToolbarItem, + ToolbarContent, + ToolbarGroup, + ToolbarItem, ToolbarToggleGroup, - Tooltip + Tooltip, + Dropdown, + DropdownItem, + DropdownList, + Divider } 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 +84,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 +113,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 +187,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 +270,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 +374,18 @@ class ConsoleLogViewerToolbar extends React.Component { - }> - Options - - } + + onOpenChange={(isOpen) => this.setState({ optionExpanded: isOpen })} + onSelect={this.onOptionSelect} + toggle={(toggleRef) => ( + }> + Options + + )} + > + {optionDropdownItems} +
    }> - this.setState({ optionExpandedMobile: isOpen })} + onSelect={this.onOptionSelectMobile} + toggle={(toggleRef) => ( + } + aria-label="Options" /> - } - isOpen={optionExpandedMobile} - dropdownItems={optionDropdownItems} - /> + )} + > + {optionDropdownItems} + @@ -487,28 +456,32 @@ class ConsoleLogViewerToolbar extends React.Component { const rightAlignedItemsDesktop = ( - this.setState({ externalExpanded: isOpen })} onSelect={this.onExternalSelect} - toggle={ - + toggle={(toggleRef) => ( + External logs - - } - isOpen={externalExpanded} - dropdownItems={externalDropdownItems} - /> + + )} + > + {externalDropdownItems} + - this.setState({ downloadExpanded: isOpen })} onSelect={this.onDownloadSelect} - toggle={ - + toggle={(toggleRef) => ( + Download - - } - isOpen={downloadExpanded} - dropdownItems={downloadDropdownItems} - /> + + )} + > + {downloadDropdownItems} + ); @@ -517,37 +490,43 @@ class ConsoleLogViewerToolbar extends React.Component { External logs
    }> - this.setState({ externalExpandedMobile: isOpen })} onSelect={this.onExternalSelectMobile} - toggle={ - ( + } + aria-label="External logs" /> - } - isOpen={externalExpandedMobile} - dropdownItems={externalDropdownItems} - /> + )} + > + {externalDropdownItems} + Download}> - this.setState({ downloadExpandedMobile: isOpen })} onSelect={this.onDownloadSelectMobile} - toggle={ - ( + } + aria-label="Download" /> - } - isOpen={downloadExpandedMobile} - position={DropdownPosition.right} - dropdownItems={downloadDropdownItems} - /> + )} + > + {downloadDropdownItems} + diff --git a/packages/react-core/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx b/packages/react-core/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx index 9cbfa8b0690..0c2d9a80b0c 100644 --- a/packages/react-core/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx +++ b/packages/react-core/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx @@ -25,15 +25,14 @@ import { AlertGroup, AlertActionCloseButton, ToolbarItem, + Dropdown, + DropdownList, + DropdownItem, + MenuToggle, + MenuToggleElement } from '@patternfly/react-core'; -import { - Dropdown as DropdownDeprecated, - DropdownItem as DropdownItemDeprecated, - KebabToggle, - DropdownPosition -} from '@patternfly/react-core/deprecated'; - import SearchIcon from '@patternfly/react-icons/dist/js/icons/search-icon'; +import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; import DashboardWrapper from '../DashboardWrapper'; import DashboardHeader from '../DashboardHeader'; @@ -146,8 +145,8 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = () setDrawerExpanded(!isDrawerExpanded); }; - const onDropdownToggle = (id: React.Key, isActive: boolean) => { - if (isActive) { + const onDropdownToggle = (id: React.Key) => { + if (id && openDropdownKey !== id) { setOpenDropdownKey(id); return; } @@ -218,46 +217,53 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = () ); - const notificationDrawerActions = [ - - Mark all read - , - - Clear all - - ]; - + const notificationDrawerActions = ( + <> + + Mark all read + + + Clear all + + + ); const notificationDrawerDropdownItems = (key: React.Key) => [ - markNotificationRead(key)}> + markNotificationRead(key)}> Mark as read - , - removeNotification(key)}> + , + removeNotification(key)}> Clear - + ]; const notificationDrawer = ( setDrawerExpanded(false)}> - onDropdownToggle('dropdown-toggle-id-0', isActive)} - id="dropdown-toggle-id-0" - /> - } - isOpen={openDropdownKey === 'dropdown-toggle-id-0'} - isPlain - dropdownItems={notificationDrawerActions} + + isOpen={openDropdownKey === 'dropdown-toggle-id-0'} + onSelect={onDropdownSelect} + popperProps={{ position: 'right' }} + onOpenChange={(isOpen: boolean) => !isOpen && setOpenDropdownKey(null)} + toggle={(toggleRef: React.Ref) => ( + onDropdownToggle('dropdown-toggle-id-0')} + aria-label="Notification drawer actions" + > + + )} + > + {notificationDrawerActions} + {notifications.length !== 0 && ( - {notifications.map(({ key, variant, title, srTitle, description, timestamp }) => ( + {notifications.map(({ key, variant, title, srTitle, description, timestamp }, index) => ( markNotificationRead(key)} > - onDropdownToggle(key, isActive)} - id={key.toString()} - /> - } - isOpen={openDropdownKey === key} - isPlain - dropdownItems={notificationDrawerDropdownItems(key)} + + isOpen={openDropdownKey === key} + onSelect={onDropdownSelect} + popperProps={{ position: 'right' }} + onOpenChange={(isOpen: boolean) => !isOpen && setOpenDropdownKey(null)} + toggle={(toggleRef: React.Ref) => ( + onDropdownToggle(key)} + aria-label={`Notification ${index + 1} actions`} + > + + )} + > + {notificationDrawerDropdownItems(key)} + {description} diff --git a/packages/react-core/src/demos/examples/DashboardHeader.js b/packages/react-core/src/demos/examples/DashboardHeader.js index cd9b8142487..2fbca51b188 100644 --- a/packages/react-core/src/demos/examples/DashboardHeader.js +++ b/packages/react-core/src/demos/examples/DashboardHeader.js @@ -5,29 +5,28 @@ import { Button, ButtonVariant, Divider, + Dropdown, + DropdownGroup, + DropdownItem, + DropdownList, Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, + MenuToggle, Toolbar, ToolbarContent, ToolbarGroup, ToolbarItem, - PageToggleButton, + PageToggleButton } from '@patternfly/react-core'; -import { - Dropdown as DropdownDeprecated, - DropdownGroup as DropdownGroupDeprecated, - DropdownToggle, - DropdownItem as DropdownItemDeprecated, - KebabToggle -} from '@patternfly/react-core/deprecated'; import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon'; import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon'; import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon'; import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; +import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg'; import pfColorLogo from '@patternfly/react-core/src/demos/examples/pfColorLogo.svg'; @@ -41,39 +40,39 @@ export default class DashboardHeader extends React.Component { activeItem: 0 }; - this.onDropdownToggle = (_event, isDropdownOpen) => { - this.setState({ - isDropdownOpen - }); + this.onDropdownToggle = () => { + this.setState((prevState) => ({ + isDropdownOpen: !prevState.isDropdownOpen + })); }; this.onDropdownSelect = () => { this.setState({ - isDropdownOpen: !this.state.isDropdownOpen + isDropdownOpen: false }); }; - this.onKebabDropdownToggle = (_event, isKebabDropdownOpen) => { - this.setState({ - isKebabDropdownOpen - }); + this.onKebabDropdownToggle = () => { + this.setState((prevState) => ({ + isKebabDropdownOpen: !prevState.isKebabDropdownOpen + })); }; this.onKebabDropdownSelect = () => { this.setState({ - isKebabDropdownOpen: !this.state.isKebabDropdownOpen + isKebabDropdownOpen: false }); }; - this.onFullKebabToggle = (_event, isFullKebabDropdownOpen) => { - this.setState({ - isFullKebabDropdownOpen - }); + this.onFullKebabToggle = () => { + this.setState((prevState) => ({ + isFullKebabDropdownOpen: !prevState.isFullKebabDropdownOpen + })); }; this.onFullKebabSelect = () => { this.setState({ - isFullKebabDropdownOpen: !this.state.isFullKebabDropdownOpen + isFullKebabDropdownOpen: false }); }; } @@ -82,41 +81,23 @@ export default class DashboardHeader extends React.Component { const { isDropdownOpen, isKebabDropdownOpen, isFullKebabDropdownOpen } = this.state; const { notificationBadge } = this.props; - const kebabDropdownItems = [ - - Settings - , - - Help - - ]; - - const fullKebabItems = [ - - My profile - - User management - - Logout - , - , - - Settings - , - - Help - - ]; - - const userDropdownItems = [ - - My profile - - User management - - Logout - - ]; + const kebabDropdownItems = ( + <> + + Settings + + + Help + + + ); + const userDropdownItems = ( + <> + My profile + User management + Logout + + ); const headerToolbar = ( @@ -147,38 +128,72 @@ export default class DashboardHeader extends React.Component { - } + + onSelect={this.onKebabDropdownSelect} + onOpenChange={(isOpen) => this.setState({ isKebabDropdownOpen: isOpen })} + popperProps={{ position: 'right' }} + toggle={(toggleRef) => ( + + + )} + > + {kebabDropdownItems} + - } + + onSelect={this.onFullKebabSelect} + onOpenChange={(isOpen) => this.setState({ isFullKebabDropdownOpen: isOpen })} + popperProps={{ position: 'right' }} + toggle={(toggleRef) => ( + + + )} + > + + {userDropdownItems} + + + {kebabDropdownItems} + - } onToggle={this.onDropdownToggle}> + onSelect={this.onDropdownSelect} + onOpenChange={(isOpen) => this.setState({ isDropdownOpen: isOpen })} + popperProps={{ position: 'right' }} + toggle={(toggleRef) => ( + } + isFullHeight + > Ned Username - - } - dropdownItems={userDropdownItems} - /> + + )} + > + {userDropdownItems} + diff --git a/packages/react-core/src/demos/examples/DateTimePicker/DateTimePicker.tsx b/packages/react-core/src/demos/examples/DateTimePicker/DateTimePicker.tsx index c2552ed6d5a..07d5792a8e8 100644 --- a/packages/react-core/src/demos/examples/DateTimePicker/DateTimePicker.tsx +++ b/packages/react-core/src/demos/examples/DateTimePicker/DateTimePicker.tsx @@ -1,10 +1,16 @@ import React from 'react'; -import { CalendarMonth, InputGroup, TextInput, Button, Popover } from '@patternfly/react-core'; import { - Dropdown as DropdownDeprecated, - DropdownToggle, - DropdownItem as DropdownItemDeprecated -} from '@patternfly/react-core/deprecated'; + CalendarMonth, + InputGroup, + TextInput, + Button, + Popover, + Dropdown, + DropdownItem, + DropdownList, + MenuToggle, + MenuToggleElement +} from '@patternfly/react-core'; import OutlinedCalendarAltIcon from '@patternfly/react-icons/dist/esm/icons/outlined-calendar-alt-icon'; import OutlinedClockIcon from '@patternfly/react-icons/dist/esm/icons/outlined-clock-icon'; @@ -23,7 +29,7 @@ export const DateTimePicker: React.FunctionComponent = () => { setIsTimeOpen(false); }; - const onToggleTime = (_event: any, _value: boolean) => { + const onToggleTime = () => { setIsTimeOpen(!isTimeOpen); setIsCalendarOpen(false); }; @@ -38,35 +44,32 @@ export const DateTimePicker: React.FunctionComponent = () => { } }; - const onSelectTime = (ev: React.SyntheticEvent) => { - setValueTime(ev.currentTarget.textContent); + const onSelectTime = (ev: React.MouseEvent | undefined) => { + setValueTime(ev?.currentTarget?.textContent as string); setIsTimeOpen(!isTimeOpen); }; - const timeOptions = times.map((time) => ( - - {`${time}:00`} - - )); + const timeOptions = times.map((time) => {`${time}:00`}); const calendar = ; const time = ( - - - - } isOpen={isTimeOpen} - dropdownItems={timeOptions} - /> + onOpenChange={(isOpen: boolean) => setIsTimeOpen(isOpen)} + toggle={(toggleRef: React.Ref) => ( +