From 2a4f2134cd716c1e38964e93270c536023e5e2bb Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Mon, 20 Mar 2023 16:02:03 -0400 Subject: [PATCH 1/5] feat(Dropdown): depreacted old and promoted Next --- .../ActionList/examples/ActionList.md | 10 + .../examples/ActionListSingleGroup.tsx | 32 +- .../ApplicationLauncher.tsx | 17 +- .../ApplicationLauncherGroup.tsx | 2 +- .../ApplicationLauncherItem.tsx | 2 +- .../ApplicationLauncherSeparator.tsx | 2 +- .../__tests__/ApplicationLauncher.test.tsx | 2 +- .../ApplicationLauncherSeparator.test.tsx | 2 +- .../examples/ApplicationLauncher.md | 11 + .../ApplicationLauncherAlignRight.tsx | 5 +- .../examples/ApplicationLauncherAlignTop.tsx | 5 +- .../Breadcrumb/examples/Breadcrumb.md | 9 + .../examples/BreadcrumbDropdown.tsx | 24 +- .../src/components/Card/examples/Card.md | 52 +- .../Card/examples/CardExpandable.tsx | 34 +- .../Card/examples/CardExpandableWithIcon.tsx | 37 +- .../Card/examples/CardHeaderInCardHead.tsx | 37 +- .../Card/examples/CardLegacySelectable.tsx | 35 +- .../examples/CardOnlyActionsInCardHead.tsx | 37 +- .../Card/examples/CardSelectable.tsx | 35 +- .../Card/examples/CardWithImageAndActions.tsx | 38 +- .../DataList/__tests__/DataList.test.tsx | 20 +- .../components/DataList/examples/DataList.md | 19 +- .../DataList/examples/DataListActions.tsx | 22 +- .../DataList/examples/DataListCheckboxes.tsx | 50 +- .../DataList/examples/DataListExpandable.tsx | 48 +- .../examples/DataListMixedExpandable.tsx | 48 +- .../examples/DataListSelectableRows.tsx | 34 +- .../examples/DataListWidthModifiers.tsx | 34 +- .../src/components/Dropdown/Dropdown.tsx | 211 ++-- .../src/components/Dropdown/DropdownGroup.tsx | 41 +- .../src/components/Dropdown/DropdownItem.tsx | 104 +- .../components/Dropdown/DropdownList.tsx | 2 +- .../Dropdown/__tests__/Dropdown.test.tsx | 478 ++++----- .../Dropdown/__tests__/DropdownGroup.test.tsx | 77 +- .../Dropdown/__tests__/DropdownItem.test.tsx | 2 +- .../Dropdown/__tests__/DropdownList.test.tsx | 2 +- .../__snapshots__/Dropdown.test.tsx.snap | 995 +----------------- .../__snapshots__/DropdownGroup.test.tsx.snap | 29 +- .../__snapshots__/DropdownItem.test.tsx.snap | 0 .../__snapshots__/DropdownList.test.tsx.snap | 0 .../components/Dropdown/examples/Dropdown.md | 169 +-- .../Dropdown/examples/DropdownBasic.tsx | 78 +- .../examples/DropdownWithDescriptions.tsx | 3 +- .../Dropdown/examples/DropdownWithGroups.tsx | 9 +- .../examples/DropdownWithKebabToggle.tsx | 3 +- .../src/components/Dropdown/index.ts | 10 +- .../examples/DualListSelector.md | 15 +- .../DualListSelectorComplexOptionsActions.tsx | 25 +- .../src/components/Hint/examples/Hint.md | 9 + .../Hint/examples/HintBasicWithTitle.tsx | 34 +- .../Hint/examples/HintBasicWithoutTitle.tsx | 33 +- .../InputGroup/examples/InputGroup.md | 17 + .../examples/InputGroupWithDropdown.tsx | 21 +- .../src/components/Menu/examples/Menu.md | 27 + .../examples/MenuWithDrilldownBreadcrumbs.tsx | 58 +- .../src/components/Modal/examples/Modal.md | 28 +- .../Modal/examples/ModalWithDropdown.tsx | 23 +- .../examples/NotificationDrawer.md | 13 +- .../examples/NotificationDrawerBasic.tsx | 38 +- .../examples/NotificationDrawerGroups.tsx | 42 +- .../OverflowMenu/OverflowMenuDropdownItem.tsx | 4 +- .../OverflowMenu/examples/OverflowMenu.md | 37 +- .../OverflowMenuBreakpointOnContainer.tsx | 13 +- .../components/Toolbar/examples/Toolbar.md | 21 +- .../Toolbar/examples/ToolbarStacked.tsx | 82 +- .../Toolbar/examples/ToolbarWithFilters.tsx | 42 +- .../components/TreeView/examples/TreeView.md | 118 +-- packages/react-core/src/demos/AlertGroup.md | 10 +- packages/react-core/src/demos/Card/Card.md | 61 +- packages/react-core/src/demos/CardDemos.md | 27 +- packages/react-core/src/demos/DataListDemo.md | 66 +- .../react-core/src/demos/DateTimePicker.md | 6 + packages/react-core/src/demos/Masthead.md | 8 + packages/react-core/src/demos/Nav.md | 164 +-- .../NotificationDrawer/NotificationDrawer.md | 174 +-- packages/react-core/src/demos/Page.md | 13 +- .../react-core/src/demos/PrimaryDetail.md | 85 +- packages/react-core/src/demos/Tabs.md | 7 +- packages/react-core/src/demos/Toolbar.md | 96 +- .../AlertGroupToastWithNotificationDrawer.tsx | 30 +- .../src/demos/examples/DashboardHeader.js | 58 +- .../DateTimePicker/DateTimePicker.tsx | 20 +- ...stheadWithUtilitiesAndUserDropdownMenu.tsx | 58 +- .../Page/PageStickySectionBreadcrumb.tsx | 58 +- .../examples/Page/PageStickySectionGroup.tsx | 58 +- .../Page/PageStickySectionGroupAlternate.tsx | 58 +- .../PageStickySectionGroupUsingPageHeader.tsx | 58 +- .../src/demos/examples/Tabs/TabsAndTable.tsx | 29 +- .../components/Dropdown/BadgeToggle.tsx | 2 +- .../components/Dropdown/Dropdown.tsx | 115 ++ .../components/Dropdown/DropdownGroup.tsx | 36 + .../components/Dropdown/DropdownItem.tsx | 113 ++ .../components/Dropdown/DropdownMenu.tsx | 29 +- .../components/Dropdown/DropdownSeparator.tsx | 6 +- .../components/Dropdown/DropdownToggle.tsx | 2 +- .../Dropdown/DropdownToggleAction.tsx | 0 .../Dropdown/DropdownToggleCheckbox.tsx | 6 +- .../Dropdown/DropdownWithContext.tsx | 6 +- .../Dropdown/InternalDropdownItem.tsx | 6 +- .../components/Dropdown/KebabToggle.tsx | 0 .../components/Dropdown/Toggle.tsx | 8 +- .../Dropdown/__tests__/Dropdown.test.tsx | 278 +++++ .../Dropdown/__tests__/DropdownGroup.test.tsx | 10 + .../__tests__/DropdownToggle.test.tsx | 0 .../__tests__/DropdownToggleAction.test.tsx | 0 .../__tests__/DropdownToggleCheckbox.test.tsx | 0 .../__tests__/Generated/DropdownItem.test.tsx | 0 .../__tests__/Generated/DropdownMenu.test.tsx | 0 .../Generated/DropdownSeparator.test.tsx | 0 .../__tests__/Generated/KebabToggle.test.tsx | 0 .../__snapshots__/DropdownItem.test.tsx.snap | 0 .../__snapshots__/DropdownMenu.test.tsx.snap | 0 .../DropdownSeparator.test.tsx.snap | 0 .../__snapshots__/KebabToggle.test.tsx.snap | 0 .../__tests__/InternalDropdownItem.test.tsx | 0 .../Dropdown/__tests__/Toggle.test.tsx | 0 .../__snapshots__/Dropdown.test.tsx.snap | 978 +++++++++++++++++ .../__snapshots__/DropdownGroup.test.tsx.snap | 21 + .../DropdownToggle.test.tsx.snap | 0 .../DropdownToggleAction.test.tsx.snap | 0 .../DropdownToggleCheckbox.test.tsx.snap | 0 .../InternalDropdownItem.test.tsx.snap | 0 .../__snapshots__/Toggle.test.tsx.snap | 0 .../components/Dropdown/dropdownConstants.tsx | 2 +- .../components/Dropdown/examples/Dropdown.md | 211 ++++ .../DropdownAlignmentOnBreakpoints.tsx | 2 +- .../examples/DropdownAppendBodyVsParent.tsx | 3 +- .../Dropdown/examples/DropdownBadge.tsx | 2 +- .../Dropdown/examples/DropdownBasic.tsx | 59 ++ .../Dropdown/examples/DropdownBasicPanel.tsx | 2 +- .../examples/DropdownDescriptions.tsx | 2 +- .../Dropdown/examples/DropdownDirectionUp.tsx | 8 +- .../Dropdown/examples/DropdownDisabled.tsx | 2 +- .../Dropdown/examples/DropdownGroups.tsx | 2 +- .../Dropdown/examples/DropdownIconOnly.tsx | 2 +- .../examples/DropdownImageAndText.tsx | 6 +- .../examples/DropdownInitialSelection.tsx | 2 +- .../Dropdown/examples/DropdownKebab.tsx | 2 +- .../examples/DropdownPlainTextToggle.tsx | 2 +- .../examples/DropdownPositionRight.tsx | 8 +- .../examples/DropdownPrimaryToggle.tsx | 2 +- .../Dropdown/examples/DropdownRouterLink.tsx | 2 +- .../examples/DropdownSecondaryToggle.tsx | 2 +- .../Dropdown/examples/DropdownSplitButton.tsx | 2 +- .../examples/DropdownSplitButtonAction.tsx | 2 +- .../DropdownSplitButtonActionPrimary.tsx | 2 +- .../DropdownSplitButtonActionSecondary.tsx | 2 +- .../examples/DropdownSplitButtonDisabled.tsx | 2 +- .../DropdownSplitButtonProgressCheckbox.tsx | 2 +- .../examples/DropdownSplitButtonText.tsx | 2 +- .../deprecated/components/Dropdown/index.ts | 12 + .../components/OptionsMenu/OptionsMenu.tsx | 4 +- .../OptionsMenu/OptionsMenuItem.tsx | 2 +- .../OptionsMenu/OptionsMenuToggle.tsx | 2 +- .../OptionsMenu/OptionsMenuToggleWithText.tsx | 4 +- .../Generated/OptionsMenuItem.test.tsx | 2 +- .../src/deprecated/components/index.ts | 1 + .../src/next/components/Dropdown/Dropdown.tsx | 130 --- .../components/Dropdown/DropdownGroup.tsx | 25 - .../next/components/Dropdown/DropdownItem.tsx | 37 - .../Dropdown/__tests__/Dropdown.test.tsx | 216 ---- .../Dropdown/__tests__/DropdownGroup.test.tsx | 69 -- .../__snapshots__/Dropdown.test.tsx.snap | 47 - .../__snapshots__/DropdownGroup.test.tsx.snap | 20 - .../components/Dropdown/examples/Dropdown.md | 45 - .../Dropdown/examples/DropdownBasic.tsx | 52 - .../src/next/components/Dropdown/index.ts | 4 - .../react-core/src/next/components/index.ts | 1 - .../cypress/integration/dropdown.spec.ts | 468 +------- .../integration/dropdowndeprecated.spec.ts | 359 +++++++ .../cypress/integration/dropdownnext.spec.ts | 45 - .../demo-app-ts/src/Demos.ts | 10 +- .../demos/BreadcrumbDemo/BreadcrumbDemo.tsx | 25 +- .../components/demos/CardDemo/CardDemo.tsx | 32 +- .../demos/DataListDemo/DataListDemo.tsx | 22 +- .../demos/DropdownDemo/DropdownDemo.tsx | 438 ++------ .../DropdownDeprecatedDemo.tsx | 378 +++++++ .../DropdownNextDemo/DropdownNextDemo.tsx | 61 -- .../DualListSelectorWithActionsDemo.tsx | 25 +- .../demos/InputGroupDemo/InputGroupDemo.tsx | 26 +- .../demos/MastheadDemo/MastheadDemo.tsx | 36 +- .../NotificationDrawerBasicDemo.tsx | 36 +- .../NotificationDrawerGroupsDemo.tsx | 43 +- .../OverflowMenuDemo/OverflowMenuDemo.tsx | 13 +- .../components/demos/PageDemo/PageDemo.tsx | 36 +- .../demos/ToolbarDemo/ToolbarDemo.tsx | 42 +- .../demo-app-ts/src/components/demos/index.ts | 2 +- .../src/components/Table/ActionsColumn.tsx | 4 +- .../src/components/Table/Table.tsx | 11 +- .../src/components/Table/TableTypes.tsx | 7 +- .../src/components/Table/base/types.tsx | 10 +- .../Table/utils/transformers.test.tsx | 6 +- .../examples/ComposableTable.md | 33 +- .../ComposableTableActionsOverflow.tsx | 9 +- packages/react-table/src/docs/demos/Table.md | 41 +- .../demos/table-demos/SortableResponsive.jsx | 31 +- 197 files changed, 4960 insertions(+), 4675 deletions(-) rename packages/react-core/src/{next => }/components/Dropdown/DropdownList.tsx (89%) rename packages/react-core/src/{next => }/components/Dropdown/__tests__/DropdownItem.test.tsx (98%) rename packages/react-core/src/{next => }/components/Dropdown/__tests__/DropdownList.test.tsx (96%) rename packages/react-core/src/{next => }/components/Dropdown/__tests__/__snapshots__/DropdownItem.test.tsx.snap (100%) rename packages/react-core/src/{next => }/components/Dropdown/__tests__/__snapshots__/DropdownList.test.tsx.snap (100%) rename packages/react-core/src/{next => }/components/Dropdown/examples/DropdownWithDescriptions.tsx (92%) rename packages/react-core/src/{next => }/components/Dropdown/examples/DropdownWithGroups.tsx (85%) rename packages/react-core/src/{next => }/components/Dropdown/examples/DropdownWithKebabToggle.tsx (92%) rename packages/react-core/src/{ => deprecated}/components/Dropdown/BadgeToggle.tsx (97%) create mode 100644 packages/react-core/src/deprecated/components/Dropdown/Dropdown.tsx create mode 100644 packages/react-core/src/deprecated/components/Dropdown/DropdownGroup.tsx create mode 100644 packages/react-core/src/deprecated/components/Dropdown/DropdownItem.tsx rename packages/react-core/src/{ => deprecated}/components/Dropdown/DropdownMenu.tsx (91%) rename packages/react-core/src/{ => deprecated}/components/Dropdown/DropdownSeparator.tsx (91%) rename packages/react-core/src/{ => deprecated}/components/Dropdown/DropdownToggle.tsx (98%) rename packages/react-core/src/{ => deprecated}/components/Dropdown/DropdownToggleAction.tsx (100%) rename packages/react-core/src/{ => deprecated}/components/Dropdown/DropdownToggleCheckbox.tsx (97%) rename packages/react-core/src/{ => deprecated}/components/Dropdown/DropdownWithContext.tsx (97%) rename packages/react-core/src/{ => deprecated}/components/Dropdown/InternalDropdownItem.tsx (98%) rename packages/react-core/src/{ => deprecated}/components/Dropdown/KebabToggle.tsx (100%) rename packages/react-core/src/{ => deprecated}/components/Dropdown/Toggle.tsx (96%) create mode 100644 packages/react-core/src/deprecated/components/Dropdown/__tests__/Dropdown.test.tsx create mode 100644 packages/react-core/src/deprecated/components/Dropdown/__tests__/DropdownGroup.test.tsx rename packages/react-core/src/{ => deprecated}/components/Dropdown/__tests__/DropdownToggle.test.tsx (100%) rename packages/react-core/src/{ => deprecated}/components/Dropdown/__tests__/DropdownToggleAction.test.tsx (100%) rename packages/react-core/src/{ => deprecated}/components/Dropdown/__tests__/DropdownToggleCheckbox.test.tsx (100%) rename packages/react-core/src/{ => deprecated}/components/Dropdown/__tests__/Generated/DropdownItem.test.tsx (100%) rename packages/react-core/src/{ => deprecated}/components/Dropdown/__tests__/Generated/DropdownMenu.test.tsx (100%) rename packages/react-core/src/{ => deprecated}/components/Dropdown/__tests__/Generated/DropdownSeparator.test.tsx (100%) rename packages/react-core/src/{ => deprecated}/components/Dropdown/__tests__/Generated/KebabToggle.test.tsx (100%) rename packages/react-core/src/{ => deprecated}/components/Dropdown/__tests__/Generated/__snapshots__/DropdownItem.test.tsx.snap (100%) rename packages/react-core/src/{ => deprecated}/components/Dropdown/__tests__/Generated/__snapshots__/DropdownMenu.test.tsx.snap (100%) rename packages/react-core/src/{ => deprecated}/components/Dropdown/__tests__/Generated/__snapshots__/DropdownSeparator.test.tsx.snap (100%) rename packages/react-core/src/{ => deprecated}/components/Dropdown/__tests__/Generated/__snapshots__/KebabToggle.test.tsx.snap (100%) rename packages/react-core/src/{ => deprecated}/components/Dropdown/__tests__/InternalDropdownItem.test.tsx (100%) rename packages/react-core/src/{ => deprecated}/components/Dropdown/__tests__/Toggle.test.tsx (100%) create mode 100644 packages/react-core/src/deprecated/components/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap create mode 100644 packages/react-core/src/deprecated/components/Dropdown/__tests__/__snapshots__/DropdownGroup.test.tsx.snap rename packages/react-core/src/{ => deprecated}/components/Dropdown/__tests__/__snapshots__/DropdownToggle.test.tsx.snap (100%) rename packages/react-core/src/{ => deprecated}/components/Dropdown/__tests__/__snapshots__/DropdownToggleAction.test.tsx.snap (100%) rename packages/react-core/src/{ => deprecated}/components/Dropdown/__tests__/__snapshots__/DropdownToggleCheckbox.test.tsx.snap (100%) rename packages/react-core/src/{ => deprecated}/components/Dropdown/__tests__/__snapshots__/InternalDropdownItem.test.tsx.snap (100%) rename packages/react-core/src/{ => deprecated}/components/Dropdown/__tests__/__snapshots__/Toggle.test.tsx.snap (100%) rename packages/react-core/src/{ => deprecated}/components/Dropdown/dropdownConstants.tsx (96%) create mode 100644 packages/react-core/src/deprecated/components/Dropdown/examples/Dropdown.md rename packages/react-core/src/{ => deprecated}/components/Dropdown/examples/DropdownAlignmentOnBreakpoints.tsx (97%) rename packages/react-core/src/{ => deprecated}/components/Dropdown/examples/DropdownAppendBodyVsParent.tsx (96%) rename packages/react-core/src/{ => deprecated}/components/Dropdown/examples/DropdownBadge.tsx (97%) create mode 100644 packages/react-core/src/deprecated/components/Dropdown/examples/DropdownBasic.tsx rename packages/react-core/src/{ => deprecated}/components/Dropdown/examples/DropdownBasicPanel.tsx (98%) rename packages/react-core/src/{ => deprecated}/components/Dropdown/examples/DropdownDescriptions.tsx (98%) rename packages/react-core/src/{ => deprecated}/components/Dropdown/examples/DropdownDirectionUp.tsx (91%) rename packages/react-core/src/{ => deprecated}/components/Dropdown/examples/DropdownDisabled.tsx (96%) rename packages/react-core/src/{ => deprecated}/components/Dropdown/examples/DropdownGroups.tsx (97%) rename packages/react-core/src/{ => deprecated}/components/Dropdown/examples/DropdownIconOnly.tsx (97%) rename packages/react-core/src/{ => deprecated}/components/Dropdown/examples/DropdownImageAndText.tsx (89%) rename packages/react-core/src/{ => deprecated}/components/Dropdown/examples/DropdownInitialSelection.tsx (96%) rename packages/react-core/src/{ => deprecated}/components/Dropdown/examples/DropdownKebab.tsx (96%) rename packages/react-core/src/{ => deprecated}/components/Dropdown/examples/DropdownPlainTextToggle.tsx (96%) rename packages/react-core/src/{ => deprecated}/components/Dropdown/examples/DropdownPositionRight.tsx (91%) rename packages/react-core/src/{ => deprecated}/components/Dropdown/examples/DropdownPrimaryToggle.tsx (96%) rename packages/react-core/src/{ => deprecated}/components/Dropdown/examples/DropdownRouterLink.tsx (96%) rename packages/react-core/src/{ => deprecated}/components/Dropdown/examples/DropdownSecondaryToggle.tsx (96%) rename packages/react-core/src/{ => deprecated}/components/Dropdown/examples/DropdownSplitButton.tsx (97%) rename packages/react-core/src/{ => deprecated}/components/Dropdown/examples/DropdownSplitButtonAction.tsx (98%) rename packages/react-core/src/{ => deprecated}/components/Dropdown/examples/DropdownSplitButtonActionPrimary.tsx (98%) rename packages/react-core/src/{ => deprecated}/components/Dropdown/examples/DropdownSplitButtonActionSecondary.tsx (98%) rename packages/react-core/src/{ => deprecated}/components/Dropdown/examples/DropdownSplitButtonDisabled.tsx (97%) rename packages/react-core/src/{ => deprecated}/components/Dropdown/examples/DropdownSplitButtonProgressCheckbox.tsx (98%) rename packages/react-core/src/{ => deprecated}/components/Dropdown/examples/DropdownSplitButtonText.tsx (97%) create mode 100644 packages/react-core/src/deprecated/components/Dropdown/index.ts delete mode 100644 packages/react-core/src/next/components/Dropdown/Dropdown.tsx delete mode 100644 packages/react-core/src/next/components/Dropdown/DropdownGroup.tsx delete mode 100644 packages/react-core/src/next/components/Dropdown/DropdownItem.tsx delete mode 100644 packages/react-core/src/next/components/Dropdown/__tests__/Dropdown.test.tsx delete mode 100644 packages/react-core/src/next/components/Dropdown/__tests__/DropdownGroup.test.tsx delete mode 100644 packages/react-core/src/next/components/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap delete mode 100644 packages/react-core/src/next/components/Dropdown/__tests__/__snapshots__/DropdownGroup.test.tsx.snap delete mode 100644 packages/react-core/src/next/components/Dropdown/examples/Dropdown.md delete mode 100644 packages/react-core/src/next/components/Dropdown/examples/DropdownBasic.tsx delete mode 100644 packages/react-core/src/next/components/Dropdown/index.ts create mode 100644 packages/react-integration/cypress/integration/dropdowndeprecated.spec.ts delete mode 100644 packages/react-integration/cypress/integration/dropdownnext.spec.ts create mode 100644 packages/react-integration/demo-app-ts/src/components/demos/DropdownDeprecatedDemo/DropdownDeprecatedDemo.tsx delete mode 100644 packages/react-integration/demo-app-ts/src/components/demos/DropdownNextDemo/DropdownNextDemo.tsx diff --git a/packages/react-core/src/components/ActionList/examples/ActionList.md b/packages/react-core/src/components/ActionList/examples/ActionList.md index c3efc39c11d..6d0ab7d2b85 100644 --- a/packages/react-core/src/components/ActionList/examples/ActionList.md +++ b/packages/react-core/src/components/ActionList/examples/ActionList.md @@ -7,25 +7,35 @@ 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'; ## Examples ### Action list single group ```ts file="ActionListSingleGroup.tsx" + ``` ### Action list with icons ```ts file="./ActionListWithIcons.tsx" + ``` ### Action list multiple groups ```ts file="./ActionListMultipleGroups.tsx" + ``` ### Action list with cancel button ```ts file="./ActionListWithCancelButton.tsx" + ``` diff --git a/packages/react-core/src/components/ActionList/examples/ActionListSingleGroup.tsx b/packages/react-core/src/components/ActionList/examples/ActionListSingleGroup.tsx index e06a26aeb68..509332c9d2e 100644 --- a/packages/react-core/src/components/ActionList/examples/ActionListSingleGroup.tsx +++ b/packages/react-core/src/components/ActionList/examples/ActionListSingleGroup.tsx @@ -1,13 +1,11 @@ import React from 'react'; +import { ActionList, ActionListItem, Button } from '@patternfly/react-core'; import { - ActionList, - ActionListItem, - Button, - Dropdown, - DropdownItem, + Dropdown as DropdownDeprecated, + DropdownItem as DropdownItemDeprecated, DropdownSeparator, KebabToggle -} from '@patternfly/react-core'; +} from '@patternfly/react-core/deprecated'; export const ActionListSingleGroup: React.FunctionComponent = () => { const [isOpen, setIsOpen] = React.useState(false); @@ -26,21 +24,21 @@ export const ActionListSingleGroup: React.FunctionComponent = () => { }; const dropdownItems = [ - Link, - + Link, + Action - , - + , + Disabled Link - , - + , + Disabled Action - , + , , - Separated Link, - + Separated Link, + Separated Action - + ]; return ( @@ -71,7 +69,7 @@ export const ActionListSingleGroup: React.FunctionComponent = () => { - } isOpen={isOpen} diff --git a/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncher.tsx b/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncher.tsx index 812fa2bfb85..9437f82c0e0 100644 --- a/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncher.tsx +++ b/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncher.tsx @@ -2,8 +2,13 @@ import * as React from 'react'; import { css } from '@patternfly/react-styles'; import styles from '@patternfly/react-styles/css/components/AppLauncher/app-launcher'; import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon'; -import { DropdownDirection, DropdownPosition, DropdownToggle, DropdownContext } from '../Dropdown'; -import { DropdownWithContext } from '../Dropdown/DropdownWithContext'; +import { + DropdownDirection, + DropdownPosition, + DropdownToggle, + DropdownContext +} from '../../deprecated/components/Dropdown'; +import { DropdownWithContext } from '../../deprecated/components/Dropdown/DropdownWithContext'; import { ApplicationLauncherGroup } from './ApplicationLauncherGroup'; import { ApplicationLauncherSeparator } from './ApplicationLauncherSeparator'; import { ApplicationLauncherItem } from './ApplicationLauncherItem'; @@ -94,13 +99,7 @@ export class ApplicationLauncher extends React.Component - } + customChild={} > ); diff --git a/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncherGroup.tsx b/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncherGroup.tsx index 7be51bf49d4..bf0754f2b19 100644 --- a/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncherGroup.tsx +++ b/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncherGroup.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { DropdownGroup, DropdownGroupProps } from '../Dropdown'; +import { DropdownGroup, DropdownGroupProps } from '../../deprecated/components/Dropdown'; export const ApplicationLauncherGroup: React.FunctionComponent = ({ children, diff --git a/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncherItem.tsx b/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncherItem.tsx index f1a53a0c72c..67a99a31626 100644 --- a/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncherItem.tsx +++ b/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncherItem.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { css } from '@patternfly/react-styles'; import styles from '@patternfly/react-styles/css/components/AppLauncher/app-launcher'; -import { DropdownItem, DropdownItemProps } from '../Dropdown'; +import { DropdownItem, DropdownItemProps } from '../../deprecated/components/Dropdown'; import { ApplicationLauncherContent } from './ApplicationLauncherContent'; import { ApplicationLauncherContext } from './ApplicationLauncherContext'; import { ApplicationLauncherItemContext } from './ApplicationLauncherItemContext'; diff --git a/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncherSeparator.tsx b/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncherSeparator.tsx index 59ca4ac3aba..82d63ca61db 100644 --- a/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncherSeparator.tsx +++ b/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncherSeparator.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { DropdownSeparator, SeparatorProps } from '../Dropdown/DropdownSeparator'; +import { DropdownSeparator, SeparatorProps } from '../../deprecated/components/Dropdown/DropdownSeparator'; export const ApplicationLauncherSeparator: React.FunctionComponent = ({ // eslint-disable-next-line @typescript-eslint/no-unused-vars diff --git a/packages/react-core/src/components/ApplicationLauncher/__tests__/ApplicationLauncher.test.tsx b/packages/react-core/src/components/ApplicationLauncher/__tests__/ApplicationLauncher.test.tsx index bbb07940e19..bc68f8bec52 100644 --- a/packages/react-core/src/components/ApplicationLauncher/__tests__/ApplicationLauncher.test.tsx +++ b/packages/react-core/src/components/ApplicationLauncher/__tests__/ApplicationLauncher.test.tsx @@ -4,7 +4,7 @@ import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon'; import { ApplicationLauncher } from '../ApplicationLauncher'; import { ApplicationLauncherItem } from '../ApplicationLauncherItem'; -import { DropdownPosition, DropdownDirection } from '../../Dropdown/dropdownConstants'; +import { DropdownPosition, DropdownDirection } from '../../../../deprecated/components/Dropdown/dropdownConstants'; import { ApplicationLauncherSeparator } from '../ApplicationLauncherSeparator'; const dropdownItems = [ diff --git a/packages/react-core/src/components/ApplicationLauncher/__tests__/Generated/ApplicationLauncherSeparator.test.tsx b/packages/react-core/src/components/ApplicationLauncher/__tests__/Generated/ApplicationLauncherSeparator.test.tsx index fbba4de4795..1dfd81edec5 100644 --- a/packages/react-core/src/components/ApplicationLauncher/__tests__/Generated/ApplicationLauncherSeparator.test.tsx +++ b/packages/react-core/src/components/ApplicationLauncher/__tests__/Generated/ApplicationLauncherSeparator.test.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { render } from '@testing-library/react'; import { ApplicationLauncherSeparator } from '../../ApplicationLauncherSeparator'; -import { DropdownArrowContext } from '../../../Dropdown/dropdownConstants'; +import { DropdownArrowContext } from '../../../../deprecated/components/Dropdown/dropdownConstants'; describe('ApplicationLauncherSeparator', () => { it('should match snapshot', () => { diff --git a/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncher.md b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncher.md index db5d30e9e52..ee9df4ff57e 100644 --- a/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncher.md +++ b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncher.md @@ -6,6 +6,7 @@ propComponents: ['ApplicationLauncher', 'ApplicationLauncherItem', 'ApplicationL ouia: true --- +import { DropdownDirection, DropdownPosition } from '@patternfly/react-core/deprecated'; import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon'; import { Link } from '@reach/router'; import pfLogoSm from './pf-logo-small.svg'; @@ -18,49 +19,59 @@ To add a tooltip, use the `tooltip` prop and optionally add more tooltip props b ### Basic ```ts file="./ApplicationLauncherBasic.tsx" + ``` ### Router link ```ts file="./ApplicationLauncherRouterLink.tsx" + ``` ### Disabled ```ts file="./ApplicationLauncherDisabled.tsx" + ``` ### Aligned right ```ts file="./ApplicationLauncherAlignRight.tsx" + ``` ### Aligned top ```ts file="./ApplicationLauncherAlignTop.tsx" + ``` ### With tooltip ```ts file="./ApplicationLauncherTooltip.tsx" + ``` ### With sections and icons ```ts file="./ApplicationLauncherSectionsAndIcons.tsx" + ``` ### With favorites and search ```ts file="./ApplicationLauncherFavoritesAndSearch.tsx" + ``` ### With custom icon ```ts file="./ApplicationLauncherCustomIcon.tsx" + ``` ### Basic with menu appended to document body ```ts file="./ApplicationLauncherDocumentBody.tsx" + ``` diff --git a/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherAlignRight.tsx b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherAlignRight.tsx index ca7f9a2a220..72fd38819b9 100644 --- a/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherAlignRight.tsx +++ b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherAlignRight.tsx @@ -1,5 +1,6 @@ import React from 'react'; -import { ApplicationLauncher, ApplicationLauncherItem, DropdownPosition } from '@patternfly/react-core'; +import { ApplicationLauncher, ApplicationLauncherItem } from '@patternfly/react-core'; +import { DropdownPosition } from '@patternfly/react-core/deprecated'; const appLauncherItems: React.ReactElement[] = [ @@ -17,7 +18,7 @@ export const ApplicationLauncherAlignRight: React.FunctionComponent = () => { const [isOpen, setIsOpen] = React.useState(false); const onToggle = (_event: any, isOpen: boolean) => setIsOpen(isOpen); - const onSelect = (_event: any) => setIsOpen(prevIsOpen => !prevIsOpen); + const onSelect = (_event: any) => setIsOpen((prevIsOpen) => !prevIsOpen); return ( @@ -17,7 +18,7 @@ export const ApplicationLauncherAlignTop: React.FunctionComponent = () => { const [isOpen, setIsOpen] = React.useState(false); const onToggle = (_event: any, isOpen: boolean) => setIsOpen(isOpen); - const onSelect = (_event: any) => setIsOpen(prevIsOpen => !prevIsOpen); + const onSelect = (_event: any) => setIsOpen((prevIsOpen) => !prevIsOpen); return ( }> + }> Edit - , - }> + , + }> Deployment - , - }> + , + }> Applications - + ]; export const BreadcrumbDropdown: React.FunctionComponent = () => { @@ -36,7 +34,7 @@ export const BreadcrumbDropdown: React.FunctionComponent = () => { Section home - diff --git a/packages/react-core/src/components/Card/examples/Card.md b/packages/react-core/src/components/Card/examples/Card.md index 912b8734457..d65ff910609 100644 --- a/packages/react-core/src/components/Card/examples/Card.md +++ b/packages/react-core/src/components/Card/examples/Card.md @@ -2,21 +2,28 @@ id: Card section: components cssPrefix: pf-c-card -propComponents: ['Card', 'CardHeader', 'CardHeaderActionsObject', 'CardTitle', 'CardBody', 'CardFooter', 'CardExpandableContent'] +propComponents: + ['Card', 'CardHeader', 'CardHeaderActionsObject', 'CardTitle', 'CardBody', 'CardFooter', 'CardExpandableContent'] 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'; - -## Examples +## Examples ### Basic cards Basic cards typically have a ``, `` and ``. You may omit these components as needed, but it is recommended to at least include a `` to provide details about the card item. ```ts file='./CardBasic.tsx' + ``` ### Modifiers @@ -26,29 +33,30 @@ You can further modify the styling of the card's content by using the properties Most modifiers can be used in combination with each other, except for `isCompact` and `isLarge`, since they are contradictory. ```ts file='./CardWithModifiers.tsx' -``` -| 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 You can include header actions with the `actions` property of `` . The following example includes an image using the [Brand](/components/brand) component, and also includes a kebab dropdown and a checkbox in `` actions. -The `actions` property for `` includes the `hasNoOffset` property, which is `false` by default. When `hasNoOffset` is `false`, a negative margin is applied to help align default-sized card titles with card actions. +The `actions` property for `` includes the `hasNoOffset` property, which is `false` by default. When `hasNoOffset` is `false`, a negative margin is applied to help align default-sized card titles with card actions. -You may use `hasNoOffset` to remove this negative margin, which better aligns card actions in implementations that use large card titles or tall header images, for example. +You may use `hasNoOffset` to remove this negative margin, which better aligns card actions in implementations that use large card titles or tall header images, for example. Select the "actions hasNoOffset" checkbox in the example below to illustrate this behavior. ```ts file='./CardWithImageAndActions.tsx' + ``` ### Title inline with images and actions @@ -56,6 +64,7 @@ Select the "actions hasNoOffset" checkbox in the example below to illustrate thi Moving `` within the `` will style it inline with any images or actions. ```ts file='./CardHeaderInCardHead.tsx' + ``` ### Card header without title @@ -65,6 +74,7 @@ Card actions can be placed in the card header even without a ``. Images can also be placed in the card header without a ``. ```ts file='./CardOnlyActionsInCardHead.tsx' + ``` ### With HTML heading element @@ -72,6 +82,7 @@ Images can also be placed in the card header without a ``. You may use the `component` property to place the card's title within an HTML heading element. ```ts file='./CardWithHeadingElement.tsx' + ``` ### With multiple body sections @@ -79,15 +90,17 @@ You may use the `component` property to place the card's title within an HTML he You may use multiple body sections to visually separate blocks of content. ```ts file='./CardWithMultipleBodySections.tsx' + ``` ### With a primary body section that fills `` sections will fill the available height of the card when `isFilled` equals `{true}`, which is the default value. Set `isFilled` to `{false}` to disable this behavior for one or more body sections. The remaining available height of the card will be split between any `` section that does not set `isFilled` to `{false}`. -A common use case of this is to set all but one body section to `isFilled={false}` so that a primary body section fills the available space of the card as seen in the example below. This example has 3 `` sections, two of which set `isFilled` to `{false}`. The third `` fills the remaining height of the card. +A common use case of this is to set all but one body section to `isFilled={false}` so that a primary body section fills the available space of the card as seen in the example below. This example has 3 `` sections, two of which set `isFilled` to `{false}`. The third `` fills the remaining height of the card. ```ts file='./CardWithBodySectionFills.tsx' + ``` ### Selectable cards @@ -95,6 +108,7 @@ A common use case of this is to set all but one body section to `isFilled={false Selectable cards can only be selected one at a time, and are intended for use with [primary-detail layout](/demos/primary-detail). ```ts file='./CardSelectable.tsx' + ``` ### Legacy selectable cards @@ -102,6 +116,7 @@ Selectable cards can only be selected one at a time, and are intended for use wi The following example shows a legacy implementation of selectable cards. This example uses the `isSelectable` property instead of `isSelectableRaised`, which is the current recommendation for implementation. `isSelectable` applies selectable styling, but does not apply raised styling on hover and selection as `isSelectableRaised` does. ```ts file='./CardLegacySelectable.tsx' + ``` ### Selectable card accessibility features @@ -114,20 +129,22 @@ By default, this input will have an aria-label that corresponds to the `