@patternfly/react-core 5.0.0-alpha.47 → 5.0.0-alpha.48
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/dist/esm/components/ApplicationLauncher/ApplicationLauncher.d.ts +1 -1
- package/dist/esm/components/ApplicationLauncher/ApplicationLauncher.d.ts.map +1 -1
- package/dist/esm/components/ApplicationLauncher/ApplicationLauncher.js +2 -2
- package/dist/esm/components/ApplicationLauncher/ApplicationLauncher.js.map +1 -1
- package/dist/esm/components/ApplicationLauncher/ApplicationLauncherGroup.d.ts +1 -1
- package/dist/esm/components/ApplicationLauncher/ApplicationLauncherGroup.d.ts.map +1 -1
- package/dist/esm/components/ApplicationLauncher/ApplicationLauncherGroup.js +1 -1
- package/dist/esm/components/ApplicationLauncher/ApplicationLauncherGroup.js.map +1 -1
- package/dist/esm/components/ApplicationLauncher/ApplicationLauncherItem.d.ts +1 -1
- package/dist/esm/components/ApplicationLauncher/ApplicationLauncherItem.d.ts.map +1 -1
- package/dist/esm/components/ApplicationLauncher/ApplicationLauncherItem.js +1 -1
- package/dist/esm/components/ApplicationLauncher/ApplicationLauncherItem.js.map +1 -1
- package/dist/esm/components/ApplicationLauncher/ApplicationLauncherSeparator.d.ts +1 -1
- package/dist/esm/components/ApplicationLauncher/ApplicationLauncherSeparator.d.ts.map +1 -1
- package/dist/esm/components/ApplicationLauncher/ApplicationLauncherSeparator.js +1 -1
- package/dist/esm/components/ApplicationLauncher/ApplicationLauncherSeparator.js.map +1 -1
- package/dist/esm/components/Dropdown/Dropdown.d.ts +24 -55
- package/dist/esm/components/Dropdown/Dropdown.d.ts.map +1 -1
- package/dist/esm/components/Dropdown/Dropdown.js +53 -12
- package/dist/esm/components/Dropdown/Dropdown.js.map +1 -1
- package/dist/esm/components/Dropdown/DropdownGroup.d.ts +8 -7
- package/dist/esm/components/Dropdown/DropdownGroup.d.ts.map +1 -1
- package/dist/esm/components/Dropdown/DropdownGroup.js +4 -9
- package/dist/esm/components/Dropdown/DropdownGroup.js.map +1 -1
- package/dist/esm/components/Dropdown/DropdownItem.d.ts +8 -41
- package/dist/esm/components/Dropdown/DropdownItem.d.ts.map +1 -1
- package/dist/esm/components/Dropdown/DropdownItem.js +5 -8
- package/dist/esm/components/Dropdown/DropdownItem.js.map +1 -1
- package/dist/esm/{next/components → components}/Dropdown/DropdownList.d.ts +1 -1
- package/dist/esm/components/Dropdown/DropdownList.d.ts.map +1 -0
- package/dist/esm/{next/components → components}/Dropdown/DropdownList.js +1 -1
- package/dist/esm/components/Dropdown/DropdownList.js.map +1 -0
- package/dist/esm/components/Dropdown/index.d.ts +1 -9
- package/dist/esm/components/Dropdown/index.d.ts.map +1 -1
- package/dist/esm/components/Dropdown/index.js +1 -9
- package/dist/esm/components/Dropdown/index.js.map +1 -1
- package/dist/esm/components/OverflowMenu/OverflowMenuDropdownItem.d.ts +1 -1
- package/dist/esm/components/OverflowMenu/OverflowMenuDropdownItem.d.ts.map +1 -1
- package/dist/esm/components/OverflowMenu/OverflowMenuDropdownItem.js +2 -2
- package/dist/esm/components/OverflowMenu/OverflowMenuDropdownItem.js.map +1 -1
- package/dist/esm/{components → deprecated/components}/Dropdown/BadgeToggle.d.ts +1 -1
- package/dist/esm/deprecated/components/Dropdown/BadgeToggle.d.ts.map +1 -0
- package/dist/esm/{components → deprecated/components}/Dropdown/BadgeToggle.js +1 -1
- package/dist/esm/deprecated/components/Dropdown/BadgeToggle.js.map +1 -0
- package/dist/esm/deprecated/components/Dropdown/Dropdown.d.ts +66 -0
- package/dist/esm/deprecated/components/Dropdown/Dropdown.d.ts.map +1 -0
- package/dist/esm/deprecated/components/Dropdown/Dropdown.js +16 -0
- package/dist/esm/deprecated/components/Dropdown/Dropdown.js.map +1 -0
- package/dist/esm/deprecated/components/Dropdown/DropdownGroup.d.ts +11 -0
- package/dist/esm/deprecated/components/Dropdown/DropdownGroup.d.ts.map +1 -0
- package/dist/esm/deprecated/components/Dropdown/DropdownGroup.js +15 -0
- package/dist/esm/deprecated/components/Dropdown/DropdownGroup.js.map +1 -0
- package/dist/esm/deprecated/components/Dropdown/DropdownItem.d.ts +52 -0
- package/dist/esm/deprecated/components/Dropdown/DropdownItem.d.ts.map +1 -0
- package/dist/esm/deprecated/components/Dropdown/DropdownItem.js +15 -0
- package/dist/esm/deprecated/components/Dropdown/DropdownItem.js.map +1 -0
- package/dist/esm/deprecated/components/Dropdown/DropdownMenu.d.ts.map +1 -0
- package/dist/esm/{components → deprecated/components}/Dropdown/DropdownMenu.js +7 -7
- package/dist/esm/deprecated/components/Dropdown/DropdownMenu.js.map +1 -0
- package/dist/esm/{components → deprecated/components}/Dropdown/DropdownSeparator.d.ts +1 -1
- package/dist/esm/deprecated/components/Dropdown/DropdownSeparator.d.ts.map +1 -0
- package/dist/esm/{components → deprecated/components}/Dropdown/DropdownSeparator.js +3 -3
- package/dist/esm/deprecated/components/Dropdown/DropdownSeparator.js.map +1 -0
- package/dist/{js → esm/deprecated}/components/Dropdown/DropdownToggle.d.ts +1 -1
- package/dist/esm/deprecated/components/Dropdown/DropdownToggle.d.ts.map +1 -0
- package/dist/esm/{components → deprecated/components}/Dropdown/DropdownToggle.js +1 -1
- package/dist/esm/deprecated/components/Dropdown/DropdownToggle.js.map +1 -0
- package/dist/esm/deprecated/components/Dropdown/DropdownToggleAction.d.ts.map +1 -0
- package/dist/esm/deprecated/components/Dropdown/DropdownToggleAction.js.map +1 -0
- package/dist/{js → esm/deprecated}/components/Dropdown/DropdownToggleCheckbox.d.ts +2 -2
- package/dist/esm/deprecated/components/Dropdown/DropdownToggleCheckbox.d.ts.map +1 -0
- package/dist/esm/{components → deprecated/components}/Dropdown/DropdownToggleCheckbox.js +2 -2
- package/dist/esm/deprecated/components/Dropdown/DropdownToggleCheckbox.js.map +1 -0
- package/dist/{js → esm/deprecated}/components/Dropdown/DropdownWithContext.d.ts +2 -2
- package/dist/esm/deprecated/components/Dropdown/DropdownWithContext.d.ts.map +1 -0
- package/dist/esm/{components → deprecated/components}/Dropdown/DropdownWithContext.js +2 -2
- package/dist/esm/deprecated/components/Dropdown/DropdownWithContext.js.map +1 -0
- package/dist/esm/deprecated/components/Dropdown/InternalDropdownItem.d.ts.map +1 -0
- package/dist/esm/{components → deprecated/components}/Dropdown/InternalDropdownItem.js +3 -3
- package/dist/esm/deprecated/components/Dropdown/InternalDropdownItem.js.map +1 -0
- package/dist/esm/deprecated/components/Dropdown/KebabToggle.d.ts.map +1 -0
- package/dist/esm/deprecated/components/Dropdown/KebabToggle.js.map +1 -0
- package/dist/{js → esm/deprecated}/components/Dropdown/Toggle.d.ts +1 -1
- package/dist/esm/deprecated/components/Dropdown/Toggle.d.ts.map +1 -0
- package/dist/esm/{components → deprecated/components}/Dropdown/Toggle.js +2 -2
- package/dist/esm/deprecated/components/Dropdown/Toggle.js.map +1 -0
- package/dist/esm/{components → deprecated/components}/Dropdown/dropdownConstants.d.ts +1 -1
- package/dist/esm/deprecated/components/Dropdown/dropdownConstants.d.ts.map +1 -0
- package/dist/esm/deprecated/components/Dropdown/dropdownConstants.js.map +1 -0
- package/dist/esm/deprecated/components/Dropdown/index.d.ts +13 -0
- package/dist/esm/deprecated/components/Dropdown/index.d.ts.map +1 -0
- package/dist/esm/deprecated/components/Dropdown/index.js +13 -0
- package/dist/esm/deprecated/components/Dropdown/index.js.map +1 -0
- package/dist/esm/deprecated/components/OptionsMenu/OptionsMenu.js +2 -2
- package/dist/esm/deprecated/components/OptionsMenu/OptionsMenu.js.map +1 -1
- package/dist/esm/deprecated/components/OptionsMenu/OptionsMenuItem.js +1 -1
- package/dist/esm/deprecated/components/OptionsMenu/OptionsMenuItem.js.map +1 -1
- package/dist/esm/deprecated/components/OptionsMenu/OptionsMenuToggle.js +1 -1
- package/dist/esm/deprecated/components/OptionsMenu/OptionsMenuToggle.js.map +1 -1
- package/dist/esm/deprecated/components/OptionsMenu/OptionsMenuToggleWithText.js +2 -2
- package/dist/esm/deprecated/components/OptionsMenu/OptionsMenuToggleWithText.js.map +1 -1
- package/dist/esm/deprecated/components/index.d.ts +1 -0
- package/dist/esm/deprecated/components/index.d.ts.map +1 -1
- package/dist/esm/deprecated/components/index.js +1 -0
- package/dist/esm/deprecated/components/index.js.map +1 -1
- package/dist/esm/next/components/index.d.ts +0 -1
- package/dist/esm/next/components/index.d.ts.map +1 -1
- package/dist/esm/next/components/index.js +0 -1
- package/dist/esm/next/components/index.js.map +1 -1
- package/dist/js/components/ApplicationLauncher/ApplicationLauncher.d.ts +1 -1
- package/dist/js/components/ApplicationLauncher/ApplicationLauncher.d.ts.map +1 -1
- package/dist/js/components/ApplicationLauncher/ApplicationLauncher.js +2 -2
- package/dist/js/components/ApplicationLauncher/ApplicationLauncher.js.map +1 -1
- package/dist/js/components/ApplicationLauncher/ApplicationLauncherGroup.d.ts +1 -1
- package/dist/js/components/ApplicationLauncher/ApplicationLauncherGroup.d.ts.map +1 -1
- package/dist/js/components/ApplicationLauncher/ApplicationLauncherGroup.js +1 -1
- package/dist/js/components/ApplicationLauncher/ApplicationLauncherGroup.js.map +1 -1
- package/dist/js/components/ApplicationLauncher/ApplicationLauncherItem.d.ts +1 -1
- package/dist/js/components/ApplicationLauncher/ApplicationLauncherItem.d.ts.map +1 -1
- package/dist/js/components/ApplicationLauncher/ApplicationLauncherItem.js +1 -1
- package/dist/js/components/ApplicationLauncher/ApplicationLauncherItem.js.map +1 -1
- package/dist/js/components/ApplicationLauncher/ApplicationLauncherSeparator.d.ts +1 -1
- package/dist/js/components/ApplicationLauncher/ApplicationLauncherSeparator.d.ts.map +1 -1
- package/dist/js/components/ApplicationLauncher/ApplicationLauncherSeparator.js +1 -1
- package/dist/js/components/ApplicationLauncher/ApplicationLauncherSeparator.js.map +1 -1
- package/dist/js/components/Dropdown/Dropdown.d.ts +24 -55
- package/dist/js/components/Dropdown/Dropdown.d.ts.map +1 -1
- package/dist/js/components/Dropdown/Dropdown.js +52 -12
- package/dist/js/components/Dropdown/Dropdown.js.map +1 -1
- package/dist/js/components/Dropdown/DropdownGroup.d.ts +8 -7
- package/dist/js/components/Dropdown/DropdownGroup.d.ts.map +1 -1
- package/dist/js/components/Dropdown/DropdownGroup.js +4 -9
- package/dist/js/components/Dropdown/DropdownGroup.js.map +1 -1
- package/dist/js/components/Dropdown/DropdownItem.d.ts +8 -41
- package/dist/js/components/Dropdown/DropdownItem.d.ts.map +1 -1
- package/dist/js/components/Dropdown/DropdownItem.js +5 -8
- package/dist/js/components/Dropdown/DropdownItem.js.map +1 -1
- package/dist/js/{next/components → components}/Dropdown/DropdownList.d.ts +1 -1
- package/dist/js/components/Dropdown/DropdownList.d.ts.map +1 -0
- package/dist/js/{next/components → components}/Dropdown/DropdownList.js +1 -1
- package/dist/js/components/Dropdown/DropdownList.js.map +1 -0
- package/dist/js/components/Dropdown/index.d.ts +1 -9
- package/dist/js/components/Dropdown/index.d.ts.map +1 -1
- package/dist/js/components/Dropdown/index.js +1 -9
- package/dist/js/components/Dropdown/index.js.map +1 -1
- package/dist/js/components/OverflowMenu/OverflowMenuDropdownItem.d.ts +1 -1
- package/dist/js/components/OverflowMenu/OverflowMenuDropdownItem.d.ts.map +1 -1
- package/dist/js/components/OverflowMenu/OverflowMenuDropdownItem.js +2 -2
- package/dist/js/components/OverflowMenu/OverflowMenuDropdownItem.js.map +1 -1
- package/dist/js/{components → deprecated/components}/Dropdown/BadgeToggle.d.ts +1 -1
- package/dist/js/deprecated/components/Dropdown/BadgeToggle.d.ts.map +1 -0
- package/dist/js/{components → deprecated/components}/Dropdown/BadgeToggle.js +1 -1
- package/dist/js/deprecated/components/Dropdown/BadgeToggle.js.map +1 -0
- package/dist/js/deprecated/components/Dropdown/Dropdown.d.ts +66 -0
- package/dist/js/deprecated/components/Dropdown/Dropdown.d.ts.map +1 -0
- package/dist/js/deprecated/components/Dropdown/Dropdown.js +20 -0
- package/dist/js/deprecated/components/Dropdown/Dropdown.js.map +1 -0
- package/dist/js/deprecated/components/Dropdown/DropdownGroup.d.ts +11 -0
- package/dist/js/deprecated/components/Dropdown/DropdownGroup.d.ts.map +1 -0
- package/dist/js/deprecated/components/Dropdown/DropdownGroup.js +19 -0
- package/dist/js/deprecated/components/Dropdown/DropdownGroup.js.map +1 -0
- package/dist/js/deprecated/components/Dropdown/DropdownItem.d.ts +52 -0
- package/dist/js/deprecated/components/Dropdown/DropdownItem.d.ts.map +1 -0
- package/dist/js/deprecated/components/Dropdown/DropdownItem.js +19 -0
- package/dist/js/deprecated/components/Dropdown/DropdownItem.js.map +1 -0
- package/dist/js/deprecated/components/Dropdown/DropdownMenu.d.ts.map +1 -0
- package/dist/js/{components → deprecated/components}/Dropdown/DropdownMenu.js +7 -7
- package/dist/js/deprecated/components/Dropdown/DropdownMenu.js.map +1 -0
- package/dist/js/{components → deprecated/components}/Dropdown/DropdownSeparator.d.ts +1 -1
- package/dist/js/deprecated/components/Dropdown/DropdownSeparator.d.ts.map +1 -0
- package/dist/js/{components → deprecated/components}/Dropdown/DropdownSeparator.js +3 -3
- package/dist/js/deprecated/components/Dropdown/DropdownSeparator.js.map +1 -0
- package/dist/{esm → js/deprecated}/components/Dropdown/DropdownToggle.d.ts +1 -1
- package/dist/js/deprecated/components/Dropdown/DropdownToggle.d.ts.map +1 -0
- package/dist/js/{components → deprecated/components}/Dropdown/DropdownToggle.js +1 -1
- package/dist/js/deprecated/components/Dropdown/DropdownToggle.js.map +1 -0
- package/dist/js/deprecated/components/Dropdown/DropdownToggleAction.d.ts.map +1 -0
- package/dist/js/deprecated/components/Dropdown/DropdownToggleAction.js.map +1 -0
- package/dist/{esm → js/deprecated}/components/Dropdown/DropdownToggleCheckbox.d.ts +2 -2
- package/dist/js/deprecated/components/Dropdown/DropdownToggleCheckbox.d.ts.map +1 -0
- package/dist/js/{components → deprecated/components}/Dropdown/DropdownToggleCheckbox.js +2 -2
- package/dist/js/deprecated/components/Dropdown/DropdownToggleCheckbox.js.map +1 -0
- package/dist/{esm → js/deprecated}/components/Dropdown/DropdownWithContext.d.ts +2 -2
- package/dist/js/deprecated/components/Dropdown/DropdownWithContext.d.ts.map +1 -0
- package/dist/js/{components → deprecated/components}/Dropdown/DropdownWithContext.js +2 -2
- package/dist/js/deprecated/components/Dropdown/DropdownWithContext.js.map +1 -0
- package/dist/js/deprecated/components/Dropdown/InternalDropdownItem.d.ts.map +1 -0
- package/dist/js/{components → deprecated/components}/Dropdown/InternalDropdownItem.js +3 -3
- package/dist/js/deprecated/components/Dropdown/InternalDropdownItem.js.map +1 -0
- package/dist/js/deprecated/components/Dropdown/KebabToggle.d.ts.map +1 -0
- package/dist/js/deprecated/components/Dropdown/KebabToggle.js.map +1 -0
- package/dist/{esm → js/deprecated}/components/Dropdown/Toggle.d.ts +1 -1
- package/dist/js/deprecated/components/Dropdown/Toggle.d.ts.map +1 -0
- package/dist/js/{components → deprecated/components}/Dropdown/Toggle.js +2 -2
- package/dist/js/deprecated/components/Dropdown/Toggle.js.map +1 -0
- package/dist/js/{components → deprecated/components}/Dropdown/dropdownConstants.d.ts +1 -1
- package/dist/js/deprecated/components/Dropdown/dropdownConstants.d.ts.map +1 -0
- package/dist/js/deprecated/components/Dropdown/dropdownConstants.js.map +1 -0
- package/dist/js/deprecated/components/Dropdown/index.d.ts +13 -0
- package/dist/js/deprecated/components/Dropdown/index.d.ts.map +1 -0
- package/dist/js/deprecated/components/Dropdown/index.js +16 -0
- package/dist/js/deprecated/components/Dropdown/index.js.map +1 -0
- package/dist/js/deprecated/components/OptionsMenu/OptionsMenu.js +2 -2
- package/dist/js/deprecated/components/OptionsMenu/OptionsMenu.js.map +1 -1
- package/dist/js/deprecated/components/OptionsMenu/OptionsMenuItem.js +1 -1
- package/dist/js/deprecated/components/OptionsMenu/OptionsMenuItem.js.map +1 -1
- package/dist/js/deprecated/components/OptionsMenu/OptionsMenuToggle.js +1 -1
- package/dist/js/deprecated/components/OptionsMenu/OptionsMenuToggle.js.map +1 -1
- package/dist/js/deprecated/components/OptionsMenu/OptionsMenuToggleWithText.js +2 -2
- package/dist/js/deprecated/components/OptionsMenu/OptionsMenuToggleWithText.js.map +1 -1
- package/dist/js/deprecated/components/index.d.ts +1 -0
- package/dist/js/deprecated/components/index.d.ts.map +1 -1
- package/dist/js/deprecated/components/index.js +1 -0
- package/dist/js/deprecated/components/index.js.map +1 -1
- package/dist/js/next/components/index.d.ts +0 -1
- package/dist/js/next/components/index.d.ts.map +1 -1
- package/dist/js/next/components/index.js +0 -1
- package/dist/js/next/components/index.js.map +1 -1
- package/dist/umd/react-core.min.js +3 -3
- package/package.json +2 -2
- package/src/components/ActionList/examples/ActionList.md +10 -0
- package/src/components/ActionList/examples/ActionListSingleGroup.tsx +15 -17
- package/src/components/ApplicationLauncher/ApplicationLauncher.tsx +8 -9
- package/src/components/ApplicationLauncher/ApplicationLauncherGroup.tsx +1 -1
- package/src/components/ApplicationLauncher/ApplicationLauncherItem.tsx +1 -1
- package/src/components/ApplicationLauncher/ApplicationLauncherSeparator.tsx +1 -1
- package/src/components/ApplicationLauncher/__tests__/ApplicationLauncher.test.tsx +1 -1
- package/src/components/ApplicationLauncher/__tests__/Generated/ApplicationLauncherSeparator.test.tsx +1 -1
- package/src/components/ApplicationLauncher/examples/ApplicationLauncher.md +11 -0
- package/src/components/ApplicationLauncher/examples/ApplicationLauncherAlignRight.tsx +3 -2
- package/src/components/ApplicationLauncher/examples/ApplicationLauncherAlignTop.tsx +3 -2
- package/src/components/Breadcrumb/examples/Breadcrumb.md +9 -0
- package/src/components/Breadcrumb/examples/BreadcrumbDropdown.tsx +11 -13
- package/src/components/Card/examples/Card.md +35 -17
- package/src/components/Card/examples/CardExpandable.tsx +18 -16
- package/src/components/Card/examples/CardExpandableWithIcon.tsx +16 -21
- package/src/components/Card/examples/CardHeaderInCardHead.tsx +16 -21
- package/src/components/Card/examples/CardLegacySelectable.tsx +16 -19
- package/src/components/Card/examples/CardOnlyActionsInCardHead.tsx +17 -20
- package/src/components/Card/examples/CardSelectable.tsx +16 -19
- package/src/components/Card/examples/CardWithImageAndActions.tsx +16 -22
- package/src/components/DataList/__tests__/DataList.test.tsx +10 -10
- package/src/components/DataList/examples/DataList.md +18 -1
- package/src/components/DataList/examples/DataListActions.tsx +12 -10
- package/src/components/DataList/examples/DataListCheckboxes.tsx +26 -24
- package/src/components/DataList/examples/DataListExpandable.tsx +25 -23
- package/src/components/DataList/examples/DataListMixedExpandable.tsx +25 -23
- package/src/components/DataList/examples/DataListSelectableRows.tsx +18 -16
- package/src/components/DataList/examples/DataListWidthModifiers.tsx +18 -16
- package/src/components/Dropdown/Dropdown.tsx +113 -98
- package/src/components/Dropdown/DropdownGroup.tsx +15 -26
- package/src/components/Dropdown/DropdownItem.tsx +14 -90
- package/src/{next/components → components}/Dropdown/DropdownList.tsx +1 -1
- package/src/components/Dropdown/__tests__/Dropdown.test.tsx +208 -270
- package/src/components/Dropdown/__tests__/DropdownGroup.test.tsx +68 -9
- package/src/{next/components → components}/Dropdown/__tests__/DropdownItem.test.tsx +1 -1
- package/src/{next/components → components}/Dropdown/__tests__/DropdownList.test.tsx +1 -1
- package/src/components/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap +32 -963
- package/src/components/Dropdown/__tests__/__snapshots__/DropdownGroup.test.tsx.snap +14 -15
- package/src/components/Dropdown/examples/Dropdown.md +20 -149
- package/src/components/Dropdown/examples/DropdownBasic.tsx +35 -43
- package/src/{next/components → components}/Dropdown/examples/DropdownWithDescriptions.tsx +1 -2
- package/src/{next/components → components}/Dropdown/examples/DropdownWithGroups.tsx +4 -5
- package/src/{next/components → components}/Dropdown/examples/DropdownWithKebabToggle.tsx +2 -3
- package/src/components/Dropdown/index.ts +1 -9
- package/src/components/DualListSelector/examples/DualListSelector.md +14 -1
- package/src/components/DualListSelector/examples/DualListSelectorComplexOptionsActions.tsx +11 -14
- package/src/components/Hint/examples/Hint.md +9 -0
- package/src/components/Hint/examples/HintBasicWithTitle.tsx +15 -19
- package/src/components/Hint/examples/HintBasicWithoutTitle.tsx +15 -18
- package/src/components/InputGroup/examples/InputGroup.md +17 -0
- package/src/components/InputGroup/examples/InputGroupWithDropdown.tsx +13 -8
- package/src/components/Menu/examples/Menu.md +27 -0
- package/src/components/Menu/examples/MenuWithDrilldownBreadcrumbs.tsx +30 -28
- package/src/components/Modal/examples/Modal.md +24 -4
- package/src/components/Modal/examples/ModalWithDropdown.tsx +14 -9
- package/src/components/NotificationDrawer/examples/NotificationDrawer.md +12 -1
- package/src/components/NotificationDrawer/examples/NotificationDrawerBasic.tsx +20 -18
- package/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx +22 -20
- package/src/components/OverflowMenu/OverflowMenuDropdownItem.tsx +2 -2
- package/src/components/OverflowMenu/examples/OverflowMenu.md +20 -17
- package/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainer.tsx +7 -6
- package/src/components/Toolbar/examples/Toolbar.md +20 -1
- package/src/components/Toolbar/examples/ToolbarStacked.tsx +43 -39
- package/src/components/Toolbar/examples/ToolbarWithFilters.tsx +19 -23
- package/src/components/TreeView/examples/TreeView.md +59 -59
- package/src/demos/AlertGroup.md +8 -2
- package/src/demos/Card/Card.md +38 -23
- package/src/demos/CardDemos.md +15 -12
- package/src/demos/DataListDemo.md +37 -29
- package/src/demos/DateTimePicker.md +6 -0
- package/src/demos/Masthead.md +8 -0
- package/src/demos/Nav.md +86 -78
- package/src/demos/NotificationDrawer/NotificationDrawer.md +94 -80
- package/src/demos/Page.md +12 -1
- package/src/demos/PrimaryDetail.md +51 -34
- package/src/demos/Tabs.md +5 -2
- package/src/demos/Toolbar.md +53 -43
- package/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx +16 -14
- package/src/demos/examples/DashboardHeader.js +31 -28
- package/src/demos/examples/DateTimePicker/DateTimePicker.tsx +8 -12
- package/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx +31 -28
- package/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx +31 -28
- package/src/demos/examples/Page/PageStickySectionGroup.tsx +31 -28
- package/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx +31 -28
- package/src/demos/examples/Page/PageStickySectionGroupUsingPageHeader.tsx +31 -28
- package/src/demos/examples/Tabs/TabsAndTable.tsx +15 -14
- package/src/{components → deprecated/components}/Dropdown/BadgeToggle.tsx +1 -1
- package/src/deprecated/components/Dropdown/Dropdown.tsx +115 -0
- package/src/deprecated/components/Dropdown/DropdownGroup.tsx +36 -0
- package/src/deprecated/components/Dropdown/DropdownItem.tsx +113 -0
- package/src/{components → deprecated/components}/Dropdown/DropdownMenu.tsx +11 -18
- package/src/{components → deprecated/components}/Dropdown/DropdownSeparator.tsx +3 -3
- package/src/{components → deprecated/components}/Dropdown/DropdownToggle.tsx +1 -1
- package/src/{components → deprecated/components}/Dropdown/DropdownToggleCheckbox.tsx +3 -3
- package/src/{components → deprecated/components}/Dropdown/DropdownWithContext.tsx +3 -3
- package/src/{components → deprecated/components}/Dropdown/InternalDropdownItem.tsx +3 -3
- package/src/{components → deprecated/components}/Dropdown/Toggle.tsx +4 -4
- package/src/deprecated/components/Dropdown/__tests__/Dropdown.test.tsx +278 -0
- package/src/deprecated/components/Dropdown/__tests__/DropdownGroup.test.tsx +10 -0
- package/src/deprecated/components/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap +978 -0
- package/src/deprecated/components/Dropdown/__tests__/__snapshots__/DropdownGroup.test.tsx.snap +21 -0
- package/src/{components → deprecated/components}/Dropdown/dropdownConstants.tsx +1 -1
- package/src/deprecated/components/Dropdown/examples/Dropdown.md +211 -0
- package/src/{components → deprecated/components}/Dropdown/examples/DropdownAlignmentOnBreakpoints.tsx +1 -1
- package/src/{components → deprecated/components}/Dropdown/examples/DropdownAppendBodyVsParent.tsx +2 -1
- package/src/{components → deprecated/components}/Dropdown/examples/DropdownBadge.tsx +1 -1
- package/src/deprecated/components/Dropdown/examples/DropdownBasic.tsx +59 -0
- package/src/{components → deprecated/components}/Dropdown/examples/DropdownBasicPanel.tsx +1 -1
- package/src/{components → deprecated/components}/Dropdown/examples/DropdownDescriptions.tsx +1 -1
- package/src/{components → deprecated/components}/Dropdown/examples/DropdownDirectionUp.tsx +7 -1
- package/src/{components → deprecated/components}/Dropdown/examples/DropdownDisabled.tsx +1 -1
- package/src/{components → deprecated/components}/Dropdown/examples/DropdownGroups.tsx +1 -1
- package/src/{components → deprecated/components}/Dropdown/examples/DropdownIconOnly.tsx +1 -1
- package/src/{components → deprecated/components}/Dropdown/examples/DropdownImageAndText.tsx +3 -3
- package/src/{components → deprecated/components}/Dropdown/examples/DropdownInitialSelection.tsx +1 -1
- package/src/{components → deprecated/components}/Dropdown/examples/DropdownKebab.tsx +1 -1
- package/src/{components → deprecated/components}/Dropdown/examples/DropdownPlainTextToggle.tsx +1 -1
- package/src/{components → deprecated/components}/Dropdown/examples/DropdownPositionRight.tsx +7 -1
- package/src/{components → deprecated/components}/Dropdown/examples/DropdownPrimaryToggle.tsx +1 -1
- package/src/{components → deprecated/components}/Dropdown/examples/DropdownRouterLink.tsx +1 -1
- package/src/{components → deprecated/components}/Dropdown/examples/DropdownSecondaryToggle.tsx +1 -1
- package/src/{components → deprecated/components}/Dropdown/examples/DropdownSplitButton.tsx +1 -1
- package/src/{components → deprecated/components}/Dropdown/examples/DropdownSplitButtonAction.tsx +1 -1
- package/src/{components → deprecated/components}/Dropdown/examples/DropdownSplitButtonActionPrimary.tsx +1 -1
- package/src/{components → deprecated/components}/Dropdown/examples/DropdownSplitButtonActionSecondary.tsx +1 -1
- package/src/{components → deprecated/components}/Dropdown/examples/DropdownSplitButtonDisabled.tsx +1 -1
- package/src/{components → deprecated/components}/Dropdown/examples/DropdownSplitButtonProgressCheckbox.tsx +1 -1
- package/src/{components → deprecated/components}/Dropdown/examples/DropdownSplitButtonText.tsx +1 -1
- package/src/deprecated/components/Dropdown/index.ts +12 -0
- package/src/deprecated/components/OptionsMenu/OptionsMenu.tsx +2 -2
- package/src/deprecated/components/OptionsMenu/OptionsMenuItem.tsx +1 -1
- package/src/deprecated/components/OptionsMenu/OptionsMenuToggle.tsx +1 -1
- package/src/deprecated/components/OptionsMenu/OptionsMenuToggleWithText.tsx +2 -2
- package/src/deprecated/components/OptionsMenu/__tests__/Generated/OptionsMenuItem.test.tsx +1 -1
- package/src/deprecated/components/index.ts +1 -0
- package/src/next/components/index.ts +0 -1
- package/dist/esm/components/Dropdown/BadgeToggle.d.ts.map +0 -1
- package/dist/esm/components/Dropdown/BadgeToggle.js.map +0 -1
- package/dist/esm/components/Dropdown/DropdownMenu.d.ts.map +0 -1
- package/dist/esm/components/Dropdown/DropdownMenu.js.map +0 -1
- package/dist/esm/components/Dropdown/DropdownSeparator.d.ts.map +0 -1
- package/dist/esm/components/Dropdown/DropdownSeparator.js.map +0 -1
- package/dist/esm/components/Dropdown/DropdownToggle.d.ts.map +0 -1
- package/dist/esm/components/Dropdown/DropdownToggle.js.map +0 -1
- package/dist/esm/components/Dropdown/DropdownToggleAction.d.ts.map +0 -1
- package/dist/esm/components/Dropdown/DropdownToggleAction.js.map +0 -1
- package/dist/esm/components/Dropdown/DropdownToggleCheckbox.d.ts.map +0 -1
- package/dist/esm/components/Dropdown/DropdownToggleCheckbox.js.map +0 -1
- package/dist/esm/components/Dropdown/DropdownWithContext.d.ts.map +0 -1
- package/dist/esm/components/Dropdown/DropdownWithContext.js.map +0 -1
- package/dist/esm/components/Dropdown/InternalDropdownItem.d.ts.map +0 -1
- package/dist/esm/components/Dropdown/InternalDropdownItem.js.map +0 -1
- package/dist/esm/components/Dropdown/KebabToggle.d.ts.map +0 -1
- package/dist/esm/components/Dropdown/KebabToggle.js.map +0 -1
- package/dist/esm/components/Dropdown/Toggle.d.ts.map +0 -1
- package/dist/esm/components/Dropdown/Toggle.js.map +0 -1
- package/dist/esm/components/Dropdown/dropdownConstants.d.ts.map +0 -1
- package/dist/esm/components/Dropdown/dropdownConstants.js.map +0 -1
- package/dist/esm/next/components/Dropdown/Dropdown.d.ts +0 -35
- package/dist/esm/next/components/Dropdown/Dropdown.d.ts.map +0 -1
- package/dist/esm/next/components/Dropdown/Dropdown.js +0 -57
- package/dist/esm/next/components/Dropdown/Dropdown.js.map +0 -1
- package/dist/esm/next/components/Dropdown/DropdownGroup.d.ts +0 -12
- package/dist/esm/next/components/Dropdown/DropdownGroup.d.ts.map +0 -1
- package/dist/esm/next/components/Dropdown/DropdownGroup.js +0 -10
- package/dist/esm/next/components/Dropdown/DropdownGroup.js.map +0 -1
- package/dist/esm/next/components/Dropdown/DropdownItem.d.ts +0 -19
- package/dist/esm/next/components/Dropdown/DropdownItem.d.ts.map +0 -1
- package/dist/esm/next/components/Dropdown/DropdownItem.js +0 -12
- package/dist/esm/next/components/Dropdown/DropdownItem.js.map +0 -1
- package/dist/esm/next/components/Dropdown/DropdownList.d.ts.map +0 -1
- package/dist/esm/next/components/Dropdown/DropdownList.js.map +0 -1
- package/dist/esm/next/components/Dropdown/index.d.ts +0 -5
- package/dist/esm/next/components/Dropdown/index.d.ts.map +0 -1
- package/dist/esm/next/components/Dropdown/index.js +0 -5
- package/dist/esm/next/components/Dropdown/index.js.map +0 -1
- package/dist/js/components/Dropdown/BadgeToggle.d.ts.map +0 -1
- package/dist/js/components/Dropdown/BadgeToggle.js.map +0 -1
- package/dist/js/components/Dropdown/DropdownMenu.d.ts.map +0 -1
- package/dist/js/components/Dropdown/DropdownMenu.js.map +0 -1
- package/dist/js/components/Dropdown/DropdownSeparator.d.ts.map +0 -1
- package/dist/js/components/Dropdown/DropdownSeparator.js.map +0 -1
- package/dist/js/components/Dropdown/DropdownToggle.d.ts.map +0 -1
- package/dist/js/components/Dropdown/DropdownToggle.js.map +0 -1
- package/dist/js/components/Dropdown/DropdownToggleAction.d.ts.map +0 -1
- package/dist/js/components/Dropdown/DropdownToggleAction.js.map +0 -1
- package/dist/js/components/Dropdown/DropdownToggleCheckbox.d.ts.map +0 -1
- package/dist/js/components/Dropdown/DropdownToggleCheckbox.js.map +0 -1
- package/dist/js/components/Dropdown/DropdownWithContext.d.ts.map +0 -1
- package/dist/js/components/Dropdown/DropdownWithContext.js.map +0 -1
- package/dist/js/components/Dropdown/InternalDropdownItem.d.ts.map +0 -1
- package/dist/js/components/Dropdown/InternalDropdownItem.js.map +0 -1
- package/dist/js/components/Dropdown/KebabToggle.d.ts.map +0 -1
- package/dist/js/components/Dropdown/KebabToggle.js.map +0 -1
- package/dist/js/components/Dropdown/Toggle.d.ts.map +0 -1
- package/dist/js/components/Dropdown/Toggle.js.map +0 -1
- package/dist/js/components/Dropdown/dropdownConstants.d.ts.map +0 -1
- package/dist/js/components/Dropdown/dropdownConstants.js.map +0 -1
- package/dist/js/next/components/Dropdown/Dropdown.d.ts +0 -35
- package/dist/js/next/components/Dropdown/Dropdown.d.ts.map +0 -1
- package/dist/js/next/components/Dropdown/Dropdown.js +0 -60
- package/dist/js/next/components/Dropdown/Dropdown.js.map +0 -1
- package/dist/js/next/components/Dropdown/DropdownGroup.d.ts +0 -12
- package/dist/js/next/components/Dropdown/DropdownGroup.d.ts.map +0 -1
- package/dist/js/next/components/Dropdown/DropdownGroup.js +0 -14
- package/dist/js/next/components/Dropdown/DropdownGroup.js.map +0 -1
- package/dist/js/next/components/Dropdown/DropdownItem.d.ts +0 -19
- package/dist/js/next/components/Dropdown/DropdownItem.d.ts.map +0 -1
- package/dist/js/next/components/Dropdown/DropdownItem.js +0 -16
- package/dist/js/next/components/Dropdown/DropdownItem.js.map +0 -1
- package/dist/js/next/components/Dropdown/DropdownList.d.ts.map +0 -1
- package/dist/js/next/components/Dropdown/DropdownList.js.map +0 -1
- package/dist/js/next/components/Dropdown/index.d.ts +0 -5
- package/dist/js/next/components/Dropdown/index.d.ts.map +0 -1
- package/dist/js/next/components/Dropdown/index.js +0 -8
- package/dist/js/next/components/Dropdown/index.js.map +0 -1
- package/src/next/components/Dropdown/Dropdown.tsx +0 -130
- package/src/next/components/Dropdown/DropdownGroup.tsx +0 -25
- package/src/next/components/Dropdown/DropdownItem.tsx +0 -37
- package/src/next/components/Dropdown/__tests__/Dropdown.test.tsx +0 -216
- package/src/next/components/Dropdown/__tests__/DropdownGroup.test.tsx +0 -69
- package/src/next/components/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap +0 -47
- package/src/next/components/Dropdown/__tests__/__snapshots__/DropdownGroup.test.tsx.snap +0 -20
- package/src/next/components/Dropdown/examples/Dropdown.md +0 -45
- package/src/next/components/Dropdown/examples/DropdownBasic.tsx +0 -52
- package/src/next/components/Dropdown/index.ts +0 -4
- /package/dist/esm/{components → deprecated/components}/Dropdown/DropdownMenu.d.ts +0 -0
- /package/dist/esm/{components → deprecated/components}/Dropdown/DropdownToggleAction.d.ts +0 -0
- /package/dist/esm/{components → deprecated/components}/Dropdown/DropdownToggleAction.js +0 -0
- /package/dist/esm/{components → deprecated/components}/Dropdown/InternalDropdownItem.d.ts +0 -0
- /package/dist/esm/{components → deprecated/components}/Dropdown/KebabToggle.d.ts +0 -0
- /package/dist/esm/{components → deprecated/components}/Dropdown/KebabToggle.js +0 -0
- /package/dist/esm/{components → deprecated/components}/Dropdown/dropdownConstants.js +0 -0
- /package/dist/js/{components → deprecated/components}/Dropdown/DropdownMenu.d.ts +0 -0
- /package/dist/js/{components → deprecated/components}/Dropdown/DropdownToggleAction.d.ts +0 -0
- /package/dist/js/{components → deprecated/components}/Dropdown/DropdownToggleAction.js +0 -0
- /package/dist/js/{components → deprecated/components}/Dropdown/InternalDropdownItem.d.ts +0 -0
- /package/dist/js/{components → deprecated/components}/Dropdown/KebabToggle.d.ts +0 -0
- /package/dist/js/{components → deprecated/components}/Dropdown/KebabToggle.js +0 -0
- /package/dist/js/{components → deprecated/components}/Dropdown/dropdownConstants.js +0 -0
- /package/src/{next/components → components}/Dropdown/__tests__/__snapshots__/DropdownItem.test.tsx.snap +0 -0
- /package/src/{next/components → components}/Dropdown/__tests__/__snapshots__/DropdownList.test.tsx.snap +0 -0
- /package/src/{components → deprecated/components}/Dropdown/DropdownToggleAction.tsx +0 -0
- /package/src/{components → deprecated/components}/Dropdown/KebabToggle.tsx +0 -0
- /package/src/{components → deprecated/components}/Dropdown/__tests__/DropdownToggle.test.tsx +0 -0
- /package/src/{components → deprecated/components}/Dropdown/__tests__/DropdownToggleAction.test.tsx +0 -0
- /package/src/{components → deprecated/components}/Dropdown/__tests__/DropdownToggleCheckbox.test.tsx +0 -0
- /package/src/{components → deprecated/components}/Dropdown/__tests__/Generated/DropdownItem.test.tsx +0 -0
- /package/src/{components → deprecated/components}/Dropdown/__tests__/Generated/DropdownMenu.test.tsx +0 -0
- /package/src/{components → deprecated/components}/Dropdown/__tests__/Generated/DropdownSeparator.test.tsx +0 -0
- /package/src/{components → deprecated/components}/Dropdown/__tests__/Generated/KebabToggle.test.tsx +0 -0
- /package/src/{components → deprecated/components}/Dropdown/__tests__/Generated/__snapshots__/DropdownItem.test.tsx.snap +0 -0
- /package/src/{components → deprecated/components}/Dropdown/__tests__/Generated/__snapshots__/DropdownMenu.test.tsx.snap +0 -0
- /package/src/{components → deprecated/components}/Dropdown/__tests__/Generated/__snapshots__/DropdownSeparator.test.tsx.snap +0 -0
- /package/src/{components → deprecated/components}/Dropdown/__tests__/Generated/__snapshots__/KebabToggle.test.tsx.snap +0 -0
- /package/src/{components → deprecated/components}/Dropdown/__tests__/InternalDropdownItem.test.tsx +0 -0
- /package/src/{components → deprecated/components}/Dropdown/__tests__/Toggle.test.tsx +0 -0
- /package/src/{components → deprecated/components}/Dropdown/__tests__/__snapshots__/DropdownToggle.test.tsx.snap +0 -0
- /package/src/{components → deprecated/components}/Dropdown/__tests__/__snapshots__/DropdownToggleAction.test.tsx.snap +0 -0
- /package/src/{components → deprecated/components}/Dropdown/__tests__/__snapshots__/DropdownToggleCheckbox.test.tsx.snap +0 -0
- /package/src/{components → deprecated/components}/Dropdown/__tests__/__snapshots__/InternalDropdownItem.test.tsx.snap +0 -0
- /package/src/{components → deprecated/components}/Dropdown/__tests__/__snapshots__/Toggle.test.tsx.snap +0 -0
package/src/deprecated/components/Dropdown/__tests__/__snapshots__/DropdownGroup.test.tsx.snap
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
2
|
+
|
|
3
|
+
exports[`dropdown groups basic render 1`] = `
|
|
4
|
+
<DocumentFragment>
|
|
5
|
+
<section
|
|
6
|
+
class=""
|
|
7
|
+
>
|
|
8
|
+
<h1
|
|
9
|
+
aria-hidden="true"
|
|
10
|
+
class=""
|
|
11
|
+
>
|
|
12
|
+
Group 1
|
|
13
|
+
</h1>
|
|
14
|
+
<ul
|
|
15
|
+
role="none"
|
|
16
|
+
>
|
|
17
|
+
Something
|
|
18
|
+
</ul>
|
|
19
|
+
</section>
|
|
20
|
+
</DocumentFragment>
|
|
21
|
+
`;
|
|
@@ -0,0 +1,211 @@
|
|
|
1
|
+
---
|
|
2
|
+
id: Dropdown
|
|
3
|
+
section: components
|
|
4
|
+
cssPrefix: pf-c-dropdown
|
|
5
|
+
propComponents:
|
|
6
|
+
[
|
|
7
|
+
'Dropdown',
|
|
8
|
+
'DropdownGroup',
|
|
9
|
+
'DropdownItem',
|
|
10
|
+
'DropdownToggle',
|
|
11
|
+
'DropdownToggleCheckbox',
|
|
12
|
+
'DropdownToggleAction',
|
|
13
|
+
DropdownSeparator
|
|
14
|
+
]
|
|
15
|
+
ouia: true
|
|
16
|
+
---
|
|
17
|
+
|
|
18
|
+
import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon';
|
|
19
|
+
import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
|
|
20
|
+
import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
|
|
21
|
+
import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
|
|
22
|
+
import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
|
|
23
|
+
import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
|
|
24
|
+
import { Link } from '@reach/router';
|
|
25
|
+
import avatarImg from '../../../../components/Avatar/examples/avatarImg.svg';
|
|
26
|
+
|
|
27
|
+
## Examples
|
|
28
|
+
|
|
29
|
+
### Basic dropdowns
|
|
30
|
+
|
|
31
|
+
Basic dropdowns present users with a menu of items upon clicking a dropdown toggle. The `isOpen` property is used to determine whether the menu is opened or not.
|
|
32
|
+
|
|
33
|
+
All of the items in a dropdown list are created as `<DropdownItem>` components. The following example shows a few different states of dropdown items. As shown in this example, dropdown items may:
|
|
34
|
+
|
|
35
|
+
- Use the `tooltip` property to enable tooltip support.
|
|
36
|
+
- Use the `isDisabled` property to disable an item.
|
|
37
|
+
- Use the `isAriaDisabled` property to style an item as disabled, while still allowing the item to receive keyboard focus and display a tooltip.
|
|
38
|
+
|
|
39
|
+
This example also uses a `<DropdownSeparator>`, which adds a horizontal line that splits the menu into 2 sections.
|
|
40
|
+
|
|
41
|
+
```ts file='./DropdownBasic.tsx'
|
|
42
|
+
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
### Autofocus on dropdown expansion
|
|
46
|
+
|
|
47
|
+
A `<DropdownItem>` may use the `autoFocus` property so that it automatically receives focus when the menu is expanded. `autoFocus` cannot be applied to disabled dropdown items.
|
|
48
|
+
|
|
49
|
+
```ts file="./DropdownInitialSelection.tsx"
|
|
50
|
+
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
### With groups of items
|
|
54
|
+
|
|
55
|
+
Use the `<DropdownGroup>` component to group sets of related dropdown items together. Use the `isGrouped` property on the `Dropdown` component to indicate that a dropdown contains grouped items.
|
|
56
|
+
|
|
57
|
+
```ts file="./DropdownGroups.tsx"
|
|
58
|
+
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
### With item descriptions
|
|
62
|
+
|
|
63
|
+
A `<DropdownItem>` may use the `description` property to provide users with more context. This description will appear in the menu below the dropdown item it corresponds to.
|
|
64
|
+
|
|
65
|
+
```ts file="./DropdownDescriptions.tsx"
|
|
66
|
+
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
### With custom content
|
|
70
|
+
|
|
71
|
+
You may replace standard dropdown items with custom content. If so, you must style the menu contents and manage focus within your custom implementation.
|
|
72
|
+
|
|
73
|
+
```ts file="./DropdownBasicPanel.tsx"
|
|
74
|
+
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
### With router link items
|
|
78
|
+
|
|
79
|
+
`<DropdownItem>` may use the `component` property to include router links.
|
|
80
|
+
|
|
81
|
+
```ts file="./DropdownRouterLink.tsx"
|
|
82
|
+
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
### Toggle styling
|
|
86
|
+
|
|
87
|
+
You can adjust the styling of a `<DropdownToggle>` using the `toggleVariant` property. `toggleVariant` may be set to 'primary', 'secondary', or 'default'.
|
|
88
|
+
|
|
89
|
+
```ts file="./DropdownPrimaryToggle.tsx"
|
|
90
|
+
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
### Plain text toggle
|
|
94
|
+
|
|
95
|
+
A toggle may be styled as plain text using the `isText` and `isPlain`properties. The following example applies these properties to a `<Dropdown>` component.
|
|
96
|
+
|
|
97
|
+
```ts file="./DropdownPlainTextToggle.tsx"
|
|
98
|
+
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
### Disabled toggles
|
|
102
|
+
|
|
103
|
+
A `<DropdownToggle>` may use the `isDisabled` property to disable the expansion of the dropdown menu.
|
|
104
|
+
|
|
105
|
+
```ts file="./DropdownDisabled.tsx"
|
|
106
|
+
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
### Icon toggle
|
|
110
|
+
|
|
111
|
+
`<DropdownToggle>` may use a recognizable icon instead of a text label if text would take up too much room. Set the `toggleIndicator` property to `{null}` to remove the default dropdown toggle caret.
|
|
112
|
+
|
|
113
|
+
```ts file="./DropdownIconOnly.tsx"
|
|
114
|
+
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
### Kebab toggle
|
|
118
|
+
|
|
119
|
+
Use `<KebabToggle>` to replace the default text label and caret with a kebab icon. A kebab toggle can be used to indicate that a dropdown connects to a menu.
|
|
120
|
+
|
|
121
|
+
```ts file="./DropdownKebab.tsx"
|
|
122
|
+
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
### Toggle with image
|
|
126
|
+
|
|
127
|
+
The `icon` property can be used to display an image in the `DropdownToggle` and can be used alongside a text label.
|
|
128
|
+
|
|
129
|
+
```ts file="./DropdownImageAndText.tsx"
|
|
130
|
+
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
### Toggle with badge
|
|
134
|
+
|
|
135
|
+
You may use a `<BadgeToggle>` to display the number of dropdown menu items.
|
|
136
|
+
|
|
137
|
+
```ts file="./DropdownBadge.tsx"
|
|
138
|
+
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
### Split button (checkbox)
|
|
142
|
+
|
|
143
|
+
To combine an action button or other control with a dropdown menu, use a split button. A `<DropdownToggle>` can be rendered as a split button by using the `splitButtonItems` property. Elements to be displayed before the toggle button must be included in `splitButtonItems`.
|
|
144
|
+
|
|
145
|
+
The following example shows a split button with a `<DropdownToggleCheckbox>`, which is primarily used for bulk select operations on large data sets.
|
|
146
|
+
|
|
147
|
+
```ts file="./DropdownSplitButton.tsx"
|
|
148
|
+
|
|
149
|
+
```
|
|
150
|
+
|
|
151
|
+
### Split button (checkbox with toggle text)
|
|
152
|
+
|
|
153
|
+
Text labels may optionally be used alongside actions within split buttons.
|
|
154
|
+
|
|
155
|
+
```ts file="./DropdownSplitButtonText.tsx"
|
|
156
|
+
|
|
157
|
+
```
|
|
158
|
+
|
|
159
|
+
### Split button (progress checkbox)
|
|
160
|
+
|
|
161
|
+
The `isInProgress` property can be used to indicate a progress state by rendering a spinner in place of a checkbox.
|
|
162
|
+
|
|
163
|
+
```ts isBeta file="./DropdownSplitButtonProgressCheckbox.tsx"
|
|
164
|
+
|
|
165
|
+
```
|
|
166
|
+
|
|
167
|
+
### Split button toggle variants
|
|
168
|
+
|
|
169
|
+
Use the `toggleVariant` and `splitButtonVariant` properties to adjust the styling of split button toggles.
|
|
170
|
+
|
|
171
|
+
The following example uses `toggleVariant="primary"` to apply primary visual styling and `splitButtonVariant="action"` to include an action.
|
|
172
|
+
|
|
173
|
+
```ts file="./DropdownSplitButtonActionPrimary.tsx"
|
|
174
|
+
|
|
175
|
+
```
|
|
176
|
+
|
|
177
|
+
### Dropdown alignment
|
|
178
|
+
|
|
179
|
+
The alignment of a dropdown menu may be changed to better fit the size of a user's browser window. A `<Dropdown>` may use the `alignments` property to indicate how the menu will align at different screen sizes.
|
|
180
|
+
|
|
181
|
+
```ts file="./DropdownAlignmentOnBreakpoints.tsx"
|
|
182
|
+
|
|
183
|
+
```
|
|
184
|
+
|
|
185
|
+
### Right-positioned menu
|
|
186
|
+
|
|
187
|
+
The following example demonstrates a `<Dropdown>` with a `position` equal to 'right'. By default, a dropdown menu is left-positioned, but a right-positioned menu may work better depending on where your dropdown is placed on a page.
|
|
188
|
+
|
|
189
|
+
```ts file="./DropdownPositionRight.tsx"
|
|
190
|
+
|
|
191
|
+
```
|
|
192
|
+
|
|
193
|
+
### Upwards directional menu
|
|
194
|
+
|
|
195
|
+
The following example demonstrates a `<Dropdown>` with a `direction` equal to 'up'. This will alter the default menu behavior so that the dropdown menu is displayed above the dropdown toggle.
|
|
196
|
+
|
|
197
|
+
```ts file="./DropdownDirectionUp.tsx"
|
|
198
|
+
|
|
199
|
+
```
|
|
200
|
+
|
|
201
|
+
### Using document parent element
|
|
202
|
+
|
|
203
|
+
Avoid passing in `document.body` to a `<Dropdown>` `menuAppendTo` property. Doing so can cause accessibility issues, such as being unable to navigate `<Dropdown>` options using keyboards or screen readers.
|
|
204
|
+
|
|
205
|
+
Instead, append to ‘parent’ to avoid sacrificing accessibility.
|
|
206
|
+
|
|
207
|
+
The following example demonstrates both methods of appending. After making a selection, both dropdowns retain focus on their respective `<Dropdown>`, but the options for the `document.body` variant cannot be navigated via Voice Over.
|
|
208
|
+
|
|
209
|
+
```ts file="./DropdownAppendBodyVsParent.tsx"
|
|
210
|
+
|
|
211
|
+
```
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core';
|
|
2
|
+
import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core/deprecated';
|
|
3
3
|
|
|
4
4
|
export const DropdownAlignmentOnBreakpoints: React.FunctionComponent = () => {
|
|
5
5
|
const [isOpen, setIsOpen] = React.useState(false);
|
package/src/{components → deprecated/components}/Dropdown/examples/DropdownAppendBodyVsParent.tsx
RENAMED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { Flex } from '@patternfly/react-core';
|
|
3
|
+
import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core/deprecated';
|
|
3
4
|
|
|
4
5
|
export const DropdownAppendBodyVsParent: React.FunctionComponent = () => {
|
|
5
6
|
const [isBodyOpen, setIsBodyOpen] = React.useState(false);
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { Dropdown, DropdownItem, BadgeToggle } from '@patternfly/react-core';
|
|
2
|
+
import { Dropdown, DropdownItem, BadgeToggle } from '@patternfly/react-core/deprecated';
|
|
3
3
|
import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
|
|
4
4
|
|
|
5
5
|
export const DropdownBadge: React.FunctionComponent = () => {
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core/deprecated';
|
|
3
|
+
|
|
4
|
+
export const DropdownBasic: React.FunctionComponent = () => {
|
|
5
|
+
const [isOpen, setIsOpen] = React.useState(false);
|
|
6
|
+
|
|
7
|
+
const onToggle = (_event: any, isOpen: boolean) => {
|
|
8
|
+
setIsOpen(isOpen);
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
const onFocus = () => {
|
|
12
|
+
const element = document.getElementById('toggle-basic');
|
|
13
|
+
element?.focus();
|
|
14
|
+
};
|
|
15
|
+
|
|
16
|
+
const onSelect = () => {
|
|
17
|
+
setIsOpen(false);
|
|
18
|
+
onFocus();
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
const dropdownItems = [
|
|
22
|
+
<DropdownItem key="link" tooltip="Tooltip for enabled link">
|
|
23
|
+
Link
|
|
24
|
+
</DropdownItem>,
|
|
25
|
+
<DropdownItem key="action" component="button" tooltip="Tooltip for enabled button">
|
|
26
|
+
Action
|
|
27
|
+
</DropdownItem>,
|
|
28
|
+
<DropdownItem key="disabled link" isDisabled href="www.google.com">
|
|
29
|
+
Disabled link
|
|
30
|
+
</DropdownItem>,
|
|
31
|
+
<DropdownItem
|
|
32
|
+
key="disabled action"
|
|
33
|
+
isAriaDisabled
|
|
34
|
+
component="button"
|
|
35
|
+
tooltip="Tooltip for disabled item"
|
|
36
|
+
tooltipProps={{ position: 'top' }}
|
|
37
|
+
>
|
|
38
|
+
Disabled action
|
|
39
|
+
</DropdownItem>,
|
|
40
|
+
<DropdownSeparator key="separator" />,
|
|
41
|
+
<DropdownItem key="separated link">Separated link</DropdownItem>,
|
|
42
|
+
<DropdownItem key="separated action" component="button">
|
|
43
|
+
Separated action
|
|
44
|
+
</DropdownItem>
|
|
45
|
+
];
|
|
46
|
+
|
|
47
|
+
return (
|
|
48
|
+
<Dropdown
|
|
49
|
+
onSelect={onSelect}
|
|
50
|
+
toggle={
|
|
51
|
+
<DropdownToggle id="toggle-basic" onToggle={onToggle}>
|
|
52
|
+
Dropdown
|
|
53
|
+
</DropdownToggle>
|
|
54
|
+
}
|
|
55
|
+
isOpen={isOpen}
|
|
56
|
+
dropdownItems={dropdownItems}
|
|
57
|
+
/>
|
|
58
|
+
);
|
|
59
|
+
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { Dropdown, DropdownToggle } from '@patternfly/react-core';
|
|
2
|
+
import { Dropdown, DropdownToggle } from '@patternfly/react-core/deprecated';
|
|
3
3
|
|
|
4
4
|
export const DropdownBasicPanel: React.FunctionComponent = () => {
|
|
5
5
|
const [isOpen, setIsOpen] = React.useState(false);
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { Dropdown, DropdownToggle, DropdownItem } from '@patternfly/react-core';
|
|
2
|
+
import { Dropdown, DropdownToggle, DropdownItem } from '@patternfly/react-core/deprecated';
|
|
3
3
|
import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
|
|
4
4
|
import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
|
|
5
5
|
|
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import {
|
|
3
|
+
Dropdown,
|
|
4
|
+
DropdownToggle,
|
|
5
|
+
DropdownItem,
|
|
6
|
+
DropdownSeparator,
|
|
7
|
+
DropdownDirection
|
|
8
|
+
} from '@patternfly/react-core/deprecated';
|
|
3
9
|
|
|
4
10
|
export const DropdownDirectionUp: React.FunctionComponent = () => {
|
|
5
11
|
const [isOpen, setIsOpen] = React.useState(false);
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core';
|
|
2
|
+
import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core/deprecated';
|
|
3
3
|
|
|
4
4
|
export const DropdownDisabled: React.FunctionComponent = () => {
|
|
5
5
|
const [isOpen, setIsOpen] = React.useState(false);
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { Dropdown, DropdownToggle, DropdownGroup, DropdownItem } from '@patternfly/react-core';
|
|
2
|
+
import { Dropdown, DropdownToggle, DropdownGroup, DropdownItem } from '@patternfly/react-core/deprecated';
|
|
3
3
|
|
|
4
4
|
export const DropdownGroups: React.FunctionComponent = () => {
|
|
5
5
|
const [isOpen, setIsOpen] = React.useState(false);
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core';
|
|
2
|
+
import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core/deprecated';
|
|
3
3
|
import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon';
|
|
4
4
|
|
|
5
5
|
export const DropdownIconOnly: React.FunctionComponent = () => {
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { Avatar } from '@patternfly/react-core';
|
|
2
3
|
import {
|
|
3
|
-
Avatar,
|
|
4
4
|
Dropdown,
|
|
5
5
|
DropdownGroup,
|
|
6
6
|
DropdownToggle,
|
|
7
7
|
DropdownItem,
|
|
8
8
|
DropdownSeparator
|
|
9
|
-
} from '@patternfly/react-core';
|
|
10
|
-
import avatarImg from '
|
|
9
|
+
} from '@patternfly/react-core/deprecated';
|
|
10
|
+
import avatarImg from '../../../../components/Avatar/examples/avatarImg.svg';
|
|
11
11
|
|
|
12
12
|
export const DropdownImageAndText: React.FunctionComponent = () => {
|
|
13
13
|
const [isOpen, setIsOpen] = React.useState(false);
|
package/src/{components → deprecated/components}/Dropdown/examples/DropdownInitialSelection.tsx
RENAMED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core';
|
|
2
|
+
import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core/deprecated';
|
|
3
3
|
|
|
4
4
|
export const DropdownInitialSelection: React.FunctionComponent = () => {
|
|
5
5
|
const [isOpen, setIsOpen] = React.useState(false);
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { Dropdown, DropdownItem, DropdownSeparator, KebabToggle } from '@patternfly/react-core';
|
|
2
|
+
import { Dropdown, DropdownItem, DropdownSeparator, KebabToggle } from '@patternfly/react-core/deprecated';
|
|
3
3
|
|
|
4
4
|
export const DropdownKebab: React.FunctionComponent = () => {
|
|
5
5
|
const [isOpen, setIsOpen] = React.useState(false);
|
package/src/{components → deprecated/components}/Dropdown/examples/DropdownPlainTextToggle.tsx
RENAMED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core';
|
|
2
|
+
import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core/deprecated';
|
|
3
3
|
|
|
4
4
|
export const DropdownPlainTextToggle: React.FunctionComponent = () => {
|
|
5
5
|
const [isOpen, setIsOpen] = React.useState(false);
|
package/src/{components → deprecated/components}/Dropdown/examples/DropdownPositionRight.tsx
RENAMED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import {
|
|
3
|
+
Dropdown,
|
|
4
|
+
DropdownToggle,
|
|
5
|
+
DropdownItem,
|
|
6
|
+
DropdownSeparator,
|
|
7
|
+
DropdownPosition
|
|
8
|
+
} from '@patternfly/react-core/deprecated';
|
|
3
9
|
|
|
4
10
|
export const DropdownPositionRight: React.FunctionComponent = () => {
|
|
5
11
|
const [isOpen, setIsOpen] = React.useState(false);
|
package/src/{components → deprecated/components}/Dropdown/examples/DropdownPrimaryToggle.tsx
RENAMED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core';
|
|
2
|
+
import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core/deprecated';
|
|
3
3
|
|
|
4
4
|
export const DropdownPrimaryToggle: React.FunctionComponent = () => {
|
|
5
5
|
const [isOpen, setIsOpen] = React.useState(false);
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { Dropdown, DropdownToggle, DropdownItem } from '@patternfly/react-core';
|
|
2
|
+
import { Dropdown, DropdownToggle, DropdownItem } from '@patternfly/react-core/deprecated';
|
|
3
3
|
import { Link } from '@reach/router';
|
|
4
4
|
|
|
5
5
|
export const DropdownRouterLink: React.FunctionComponent = () => {
|
package/src/{components → deprecated/components}/Dropdown/examples/DropdownSecondaryToggle.tsx
RENAMED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core';
|
|
2
|
+
import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core/deprecated';
|
|
3
3
|
|
|
4
4
|
export const DropdownPrimaryToggle: React.FunctionComponent = () => {
|
|
5
5
|
const [isOpen, setIsOpen] = React.useState(false);
|
|
@@ -5,7 +5,7 @@ import {
|
|
|
5
5
|
DropdownToggleCheckbox,
|
|
6
6
|
DropdownItem,
|
|
7
7
|
DropdownSeparator
|
|
8
|
-
} from '@patternfly/react-core';
|
|
8
|
+
} from '@patternfly/react-core/deprecated';
|
|
9
9
|
|
|
10
10
|
export const DropdownSplitButton: React.FunctionComponent = () => {
|
|
11
11
|
const [isOpen, setIsOpen] = React.useState(false);
|
package/src/{components → deprecated/components}/Dropdown/examples/DropdownSplitButtonAction.tsx
RENAMED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { Dropdown, DropdownToggle, DropdownToggleAction, DropdownItem } from '@patternfly/react-core';
|
|
2
|
+
import { Dropdown, DropdownToggle, DropdownToggleAction, DropdownItem } from '@patternfly/react-core/deprecated';
|
|
3
3
|
import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
|
|
4
4
|
import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
|
|
5
5
|
import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { Dropdown, DropdownToggle, DropdownToggleAction, DropdownItem } from '@patternfly/react-core';
|
|
2
|
+
import { Dropdown, DropdownToggle, DropdownToggleAction, DropdownItem } from '@patternfly/react-core/deprecated';
|
|
3
3
|
import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
|
|
4
4
|
import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
|
|
5
5
|
import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { Dropdown, DropdownToggle, DropdownToggleAction, DropdownItem } from '@patternfly/react-core';
|
|
2
|
+
import { Dropdown, DropdownToggle, DropdownToggleAction, DropdownItem } from '@patternfly/react-core/deprecated';
|
|
3
3
|
import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
|
|
4
4
|
import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
|
|
5
5
|
import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
|
package/src/{components → deprecated/components}/Dropdown/examples/DropdownSplitButtonDisabled.tsx
RENAMED
|
@@ -5,7 +5,7 @@ import {
|
|
|
5
5
|
DropdownToggleCheckbox,
|
|
6
6
|
DropdownItem,
|
|
7
7
|
DropdownSeparator
|
|
8
|
-
} from '@patternfly/react-core';
|
|
8
|
+
} from '@patternfly/react-core/deprecated';
|
|
9
9
|
|
|
10
10
|
export const DropdownSplitButtonDisabled: React.FunctionComponent = () => {
|
|
11
11
|
const [isOpen, setIsOpen] = React.useState(false);
|
|
@@ -5,7 +5,7 @@ import {
|
|
|
5
5
|
DropdownToggleCheckbox,
|
|
6
6
|
DropdownItem,
|
|
7
7
|
DropdownSeparator
|
|
8
|
-
} from '@patternfly/react-core';
|
|
8
|
+
} from '@patternfly/react-core/deprecated';
|
|
9
9
|
|
|
10
10
|
export const DropdownSplitButtonProgressCheckbox: React.FunctionComponent = () => {
|
|
11
11
|
const [isOpen1, setIsOpen1] = React.useState(false);
|
package/src/{components → deprecated/components}/Dropdown/examples/DropdownSplitButtonText.tsx
RENAMED
|
@@ -5,7 +5,7 @@ import {
|
|
|
5
5
|
DropdownToggleCheckbox,
|
|
6
6
|
DropdownItem,
|
|
7
7
|
DropdownSeparator
|
|
8
|
-
} from '@patternfly/react-core';
|
|
8
|
+
} from '@patternfly/react-core/deprecated';
|
|
9
9
|
|
|
10
10
|
export const DropdownSplitButtonText: React.FunctionComponent = () => {
|
|
11
11
|
const [isOpen, setIsOpen] = React.useState(false);
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
export * from './Dropdown';
|
|
2
|
+
export * from './DropdownMenu';
|
|
3
|
+
export * from './DropdownWithContext';
|
|
4
|
+
export * from './dropdownConstants';
|
|
5
|
+
export * from './DropdownGroup';
|
|
6
|
+
export * from './DropdownItem';
|
|
7
|
+
export * from './DropdownSeparator';
|
|
8
|
+
export * from './BadgeToggle';
|
|
9
|
+
export * from './KebabToggle';
|
|
10
|
+
export * from './DropdownToggle';
|
|
11
|
+
export * from './DropdownToggleCheckbox';
|
|
12
|
+
export * from './DropdownToggleAction';
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import styles from '@patternfly/react-styles/css/components/OptionsMenu/options-menu';
|
|
3
|
-
import { DropdownContext } from '
|
|
4
|
-
import { DropdownWithContext } from '
|
|
3
|
+
import { DropdownContext } from '../Dropdown';
|
|
4
|
+
import { DropdownWithContext } from '../Dropdown/DropdownWithContext';
|
|
5
5
|
import { OUIAProps, useOUIAId } from '../../../helpers';
|
|
6
6
|
|
|
7
7
|
export enum OptionsMenuPosition {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { css } from '@patternfly/react-styles';
|
|
3
3
|
import styles from '@patternfly/react-styles/css/components/OptionsMenu/options-menu';
|
|
4
|
-
import { DropdownItem } from '
|
|
4
|
+
import { DropdownItem } from '../Dropdown';
|
|
5
5
|
import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
|
|
6
6
|
|
|
7
7
|
export interface OptionsMenuItemProps
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { DropdownToggle, DropdownContext } from '
|
|
2
|
+
import { DropdownToggle, DropdownContext } from '../Dropdown';
|
|
3
3
|
|
|
4
4
|
export interface OptionsMenuToggleProps extends React.HTMLProps<HTMLButtonElement> {
|
|
5
5
|
/** Id of the parent options menu component */
|
|
@@ -2,7 +2,7 @@ import * as React from 'react';
|
|
|
2
2
|
import { css } from '@patternfly/react-styles';
|
|
3
3
|
import { KeyTypes } from '../../../helpers/constants';
|
|
4
4
|
import styles from '@patternfly/react-styles/css/components/OptionsMenu/options-menu';
|
|
5
|
-
import { DropdownContext } from '
|
|
5
|
+
import { DropdownContext } from '../Dropdown';
|
|
6
6
|
|
|
7
7
|
export interface OptionsMenuToggleWithTextProps extends React.HTMLProps<HTMLDivElement> {
|
|
8
8
|
/** Id of the parent options menu component */
|
|
@@ -133,7 +133,7 @@ export const OptionsMenuToggleWithText: React.FunctionComponent<OptionsMenuToggl
|
|
|
133
133
|
aria-expanded={isOpen}
|
|
134
134
|
ref={buttonRef}
|
|
135
135
|
disabled={isDisabled}
|
|
136
|
-
onClick={event => onToggle(event, !isOpen)}
|
|
136
|
+
onClick={(event) => onToggle(event, !isOpen)}
|
|
137
137
|
onKeyDown={onKeyDown}
|
|
138
138
|
>
|
|
139
139
|
<span className={css(styles.optionsMenuToggleButtonIcon)}>{toggleButtonContents}</span>
|
|
@@ -3,7 +3,7 @@ import React from 'react';
|
|
|
3
3
|
import { render } from '@testing-library/react';
|
|
4
4
|
|
|
5
5
|
import { OptionsMenuItem } from '../../OptionsMenuItem';
|
|
6
|
-
import { DropdownArrowContext } from '
|
|
6
|
+
import { DropdownArrowContext } from '../../../Dropdown';
|
|
7
7
|
|
|
8
8
|
describe('OptionsMenuItem', () => {
|
|
9
9
|
it('should match snapshot', () => {
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"BadgeToggle.d.ts","sourceRoot":"","sources":["../../../../src/components/Dropdown/BadgeToggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAGvD,OAAO,EAAS,UAAU,EAAE,MAAM,UAAU,CAAC;AAE7C,MAAM,WAAW,gBAAiB,SAAQ,mBAAmB;IAC3D,iCAAiC;IACjC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,wDAAwD;IACxD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,gCAAgC;IAChC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yCAAyC;IACzC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,0BAA0B;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE,UAAU,GAAG,UAAU,GAAG,aAAa,GAAG,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,EAC/G,MAAM,EAAE,OAAO,KACZ,IAAI,CAAC;IACV,iCAAiC;IACjC,SAAS,CAAC,EAAE,GAAG,CAAC;IAChB,uBAAuB;IACvB,UAAU,CAAC,EAAE,MAAM,WAAW,CAAC;IAC/B,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mCAAmC;IACnC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sDAAsD;IACtD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gCAAgC;IAChC,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,+CAA+C;IAC/C,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAuCjE,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"BadgeToggle.js","sourceRoot":"","sources":["../../../../src/components/Dropdown/BadgeToggle.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAC/C,OAAO,MAAM,MAAM,2DAA2D,CAAC;AAE/E,OAAO,aAAa,MAAM,wDAAwD,CAAC;AACnF,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,KAAK,EAAc,MAAM,UAAU,CAAC;AAoC7C,MAAM,CAAC,MAAM,WAAW,GAA8C,CAAC,EAiBpD,EAAE,EAAE;QAjBgD,EACrE,EAAE,GAAG,EAAE,EACP,QAAQ,GAAG,IAAI,EACf,UAAU,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,EAC7B,SAAS,GAAG,EAAE,EACd,MAAM,GAAG,KAAK,EACd,YAAY,EAAE,SAAS,GAAG,SAAS,EACnC,SAAS,GAAG,IAAI,EAChB,UAAU,GAAG,IAAI,EACjB,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,IAAI,EACd,UAAU,GAAG,KAAK,EAClB,WAAW,GAAG,KAAK,EACnB,QAAQ,GAAG,GAAG,EAAE,CAAC,SAAiB;IAClC,6DAA6D;IAC7D,GAAG,OAEc,EAFZ,4EAA4E;IAC9E,KAAK,cAhB6D,uKAiBtE,CADS;IACc,OAAA,CACtB,oBAAC,MAAM,kBACL,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,MAAM,gBACF,SAAS,EACrB,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,IAAI,IAAI,EACxB,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,IACpB,KAAK;QAET,oBAAC,KAAK,oBAAK,UAAU;YAClB,QAAQ;YACT,8BAAM,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,kBAAkB,CAAC;gBAC7C,oBAAC,aAAa,OAAG,CACZ,CACD,CACD,CACV,CAAA;CAAA,CAAC;AACF,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../../../src/components/Dropdown/DropdownMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAE,gBAAgB,EAAwB,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAE9F,MAAM,WAAW,iBAAiB;IAChC,uDAAuD;IACvD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yCAAyC;IACzC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,yDAAyD;IACzD,QAAQ,CAAC,EAAE,gBAAgB,GAAG,OAAO,GAAG,MAAM,CAAC;IAC/C,mEAAmE;IACnE,UAAU,CAAC,EAAE;QACX,EAAE,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;QACtB,EAAE,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;QACtB,EAAE,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;QACtB,EAAE,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;QACtB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;KAC1B,CAAC;IACF,0CAA0C;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,mBAAmB,CAAC,EAAE,GAAG,CAAC;CAC3B;AAED,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC;IACjE,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,GAAG,EAAE,WAAW,CAAC;CAClB;AAED,qBAAa,YAAa,SAAQ,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC;IAClE,MAAM,CAAC,WAAW,SAAkB;IACpC,OAAO,EAAG,KAAK,CAAC,WAAW,CAAC,OAAO,eAAe,CAAC,CAAC;IACpD,cAAc,kBAAyB;IAEvC,MAAM,CAAC,YAAY,EAAE,iBAAiB,CAQpC;IAEF,iBAAiB;IAcjB,oBAAoB,aAElB;IAEF,MAAM,CAAC,kBAAkB,WAAoE;IAC7F,MAAM,CAAC,aAAa,kBAAmB,WAAW,EAAE,UAIlD;IAEF,SAAS,UAAW,GAAG,UAqBrB;IAEF,qBAAqB;IAMrB,eAAe,UAAW,MAAM,cAAc,MAAM,YAAY,MAAM,4BASpE;IAEF,OAAO,UAAW,MAAM,SAAS,GAAG,EAAE,cAAc,OAAO,eAAe,OAAO,UAc/E;IAEF,cAAc;IA8Bd,MAAM;CAuFP"}
|