@patternfly/react-core 5.0.0-alpha.46 → 5.0.0-alpha.48

package/src/components/NotificationDrawer/examples/NotificationDrawer.md

@@ -12,10 +12,18 @@ propComponents:
     'NotificationDrawerList',
     'NotificationDrawerListItem',
     'NotificationDrawerListItemBody',
-    'NotificationDrawerListItemHeader',
+    'NotificationDrawerListItemHeader'
   ]
 ---
 
+import {
+Dropdown as DropdownDeprecated,
+DropdownItem as DropdownItemDeprecated,
+DropdownPosition,
+DropdownDirection,
+DropdownSeparator,
+KebabToggle
+} from '@patternfly/react-core/deprecated';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 
 ## Examples
@@ -23,14 +31,17 @@ import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 ### Basic
 
 ```ts file="NotificationDrawerBasic.tsx"
+
 ```
 
 ### Groups
 
 ```ts file="NotificationDrawerGroups.tsx"
+
 ```
 
 ### Lightweight
 
 ```ts file="NotificationDrawerLightweight.tsx"
+
 ```

package/src/components/NotificationDrawer/examples/NotificationDrawerBasic.tsx

@@ -1,11 +1,5 @@
 import React from 'react';
 import {
-  Dropdown,
-  DropdownItem,
-  DropdownPosition,
-  DropdownDirection,
-  DropdownSeparator,
-  KebabToggle,
   NotificationDrawer,
   NotificationDrawerBody,
   NotificationDrawerHeader,
@@ -14,6 +8,14 @@ import {
   NotificationDrawerListItemBody,
   NotificationDrawerListItemHeader
 } from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownItem as DropdownItemDeprecated,
+  DropdownPosition,
+  DropdownDirection,
+  DropdownSeparator,
+  KebabToggle
+} from '@patternfly/react-core/deprecated';
 
 export const NotificationDrawerBasic: React.FunctionComponent = () => {
   const [isOpenMap, setIsOpenMap] = React.useState(new Array(7).fill(false));
@@ -34,19 +36,19 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
   const [isOpen0, isOpen1, isOpen2, isOpen3, isOpen4, isOpen5, isOpen6] = isOpenMap;
 
   const dropdownItems = [
-    <DropdownItem key="link">Link</DropdownItem>,
-    <DropdownItem key="action" component="button">
+    <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="action" component="button">
       Action
-    </DropdownItem>,
+    </DropdownItemDeprecated>,
     <DropdownSeparator key="separator" />,
-    <DropdownItem key="disabled link" isDisabled>
+    <DropdownItemDeprecated key="disabled link" isDisabled>
       Disabled link
-    </DropdownItem>
+    </DropdownItemDeprecated>
   ];
   return (
     <NotificationDrawer>
       <NotificationDrawerHeader count={3} onClose={onDrawerClose}>
-        <Dropdown
+        <DropdownDeprecated
           onSelect={onSelect}
           toggle={<KebabToggle onToggle={onToggle(0)} id="basic-kebab-toggle" />}
           isOpen={isOpen0}
@@ -64,7 +66,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
               title="Unread info notification title"
               srTitle="Info notification:"
             >
-              <Dropdown
+              <DropdownDeprecated
                 position={DropdownPosition.right}
                 onSelect={onSelect}
                 toggle={<KebabToggle onToggle={onToggle(1)} id="basic-toggle-id-1" />}
@@ -84,7 +86,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
               title="Unread danger notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines."
               srTitle="Danger notification:"
             >
-              <Dropdown
+              <DropdownDeprecated
                 position={DropdownPosition.right}
                 onSelect={onSelect}
                 toggle={<KebabToggle onToggle={onToggle(2)} id="basic-toggle-id-2" />}
@@ -106,7 +108,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
               title="Unread danger notification title. This is a long title to show how the title will be truncated if it is long and will be shown in a single line."
               srTitle="Danger notification:"
             >
-              <Dropdown
+              <DropdownDeprecated
                 position={DropdownPosition.right}
                 onSelect={onSelect}
                 toggle={<KebabToggle onToggle={onToggle(3)} id="basic-toggle-id-3" />}
@@ -127,7 +129,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
               title="Read warning notification title"
               srTitle="Warning notification:"
             >
-              <Dropdown
+              <DropdownDeprecated
                 position={DropdownPosition.right}
                 onSelect={onSelect}
                 toggle={<KebabToggle onToggle={onToggle(4)} id="basic-toggle-id-4" />}
@@ -147,7 +149,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
               title="Read success notification title"
               srTitle="Success notification:"
             >
-              <Dropdown
+              <DropdownDeprecated
                 position={DropdownPosition.right}
                 direction={DropdownDirection.up}
                 onSelect={onSelect}
@@ -164,7 +166,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
           </NotificationDrawerListItem>
           <NotificationDrawerListItem isRead>
             <NotificationDrawerListItemHeader title="Read (default) notification title" srTitle="notification:">
-              <Dropdown
+              <DropdownDeprecated
                 position={DropdownPosition.right}
                 onSelect={onSelect}
                 toggle={<KebabToggle onToggle={onToggle(6)} id="basic-toggle-id-6" />}

package/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx

@@ -1,16 +1,10 @@
 import React from 'react';
 import {
   Button,
-  Dropdown,
-  DropdownItem,
-  DropdownPosition,
-  DropdownDirection,
-  DropdownSeparator,
   EmptyState,
   EmptyStateBody,
   EmptyStateHeader,
   EmptyStateFooter,
-  KebabToggle,
   NotificationDrawer,
   NotificationDrawerBody,
   NotificationDrawerHeader,
@@ -24,6 +18,14 @@ import {
   EmptyStateActions,
   EmptyStateIcon
 } from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownItem as DropdownItemDeprecated,
+  DropdownPosition,
+  DropdownDirection,
+  DropdownSeparator,
+  KebabToggle
+} from '@patternfly/react-core/deprecated';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 
 export const NotificationDrawerGroups: React.FunctionComponent = () => {
@@ -59,20 +61,20 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
   };
 
   const dropdownItems = [
-    <DropdownItem key="link">Link</DropdownItem>,
-    <DropdownItem key="action" component="button">
+    <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="action" component="button">
       Action
-    </DropdownItem>,
+    </DropdownItemDeprecated>,
     <DropdownSeparator key="separator" />,
-    <DropdownItem key="disabled link" isDisabled>
+    <DropdownItemDeprecated key="disabled link" isDisabled>
       Disabled link
-    </DropdownItem>
+    </DropdownItemDeprecated>
   ];
 
   return (
     <NotificationDrawer>
       <NotificationDrawerHeader count={4}>
-        <Dropdown
+        <DropdownDeprecated
           onSelect={onSelect}
           toggle={
             <KebabToggle
@@ -102,7 +104,7 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                   title="Unread info notification title"
                   srTitle="Info notification:"
                 >
-                  <Dropdown
+                  <DropdownDeprecated
                     position={DropdownPosition.right}
                     onSelect={onSelect}
                     toggle={
@@ -127,7 +129,7 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                   title="Unread danger notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines."
                   srTitle="Danger notification:"
                 >
-                  <Dropdown
+                  <DropdownDeprecated
                     position={DropdownPosition.right}
                     onSelect={onSelect}
                     toggle={
@@ -153,7 +155,7 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                   title="Read warning notification title"
                   srTitle="Warning notification:"
                 >
-                  <Dropdown
+                  <DropdownDeprecated
                     position={DropdownPosition.right}
                     onSelect={onSelect}
                     toggle={
@@ -178,7 +180,7 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                   title="Read success notification title"
                   srTitle="Success notification:"
                 >
-                  <Dropdown
+                  <DropdownDeprecated
                     position={DropdownPosition.right}
                     direction={DropdownDirection.up}
                     onSelect={onSelect}
@@ -213,7 +215,7 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                   title="Unread info notification title"
                   srTitle="Info notification:"
                 >
-                  <Dropdown
+                  <DropdownDeprecated
                     position={DropdownPosition.right}
                     onSelect={onSelect}
                     toggle={
@@ -238,7 +240,7 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                   title="Unread danger notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines."
                   srTitle="Danger notification:"
                 >
-                  <Dropdown
+                  <DropdownDeprecated
                     position={DropdownPosition.right}
                     onSelect={onSelect}
                     toggle={
@@ -264,7 +266,7 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                   title="Read warning notification title"
                   srTitle="Warning notification:"
                 >
-                  <Dropdown
+                  <DropdownDeprecated
                     position={DropdownPosition.right}
                     onSelect={onSelect}
                     toggle={
@@ -289,7 +291,7 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                   title="Read success notification title"
                   srTitle="Success notification:"
                 >
-                  <Dropdown
+                  <DropdownDeprecated
                     position={DropdownPosition.right}
                     direction={DropdownDirection.up}
                     onSelect={onSelect}

package/src/components/OverflowMenu/OverflowMenuDropdownItem.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DropdownItem, DropdownItemProps } from '../../next/components/Dropdown';
+import { DropdownItem, DropdownItemProps } from '../Dropdown';
 import { OverflowMenuContext } from './OverflowMenuContext';
 
 export interface OverflowMenuDropdownItemProps extends Omit<DropdownItemProps, 'ref'> {
@@ -16,7 +16,7 @@ export const OverflowMenuDropdownItem: React.FunctionComponent<OverflowMenuDropd
   ...additionalProps
 }: OverflowMenuDropdownItemProps) => (
   <OverflowMenuContext.Consumer>
-    {value =>
+    {(value) =>
       (!isShared || value.isBelowBreakpoint) && (
         <DropdownItem component="button" itemId={itemId} {...additionalProps}>
           {children}

package/src/components/OverflowMenu/examples/OverflowMenu.md

@@ -17,7 +17,6 @@ import AlignLeftIcon from '@patternfly/react-icons/dist/esm/icons/align-left-ico
 import AlignCenterIcon from '@patternfly/react-icons/dist/esm/icons/align-center-icon';
 import AlignRightIcon from '@patternfly/react-icons/dist/esm/icons/align-right-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import { Dropdown as DropdownNext, DropdownList } from '@patternfly/react-core/next';
 
 ## Examples
 
@@ -32,9 +31,10 @@ import {
   OverflowMenuGroup,
   OverflowMenuItem,
   OverflowMenuDropdownItem,
-  MenuToggle
+  MenuToggle,
+  Dropdown,
+  DropdownList
 } from '@patternfly/react-core';
-import { Dropdown as DropdownNext, DropdownList } from '@patternfly/react-core/next';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 class SimpleOverflowMenu extends React.Component {
@@ -86,7 +86,7 @@ class SimpleOverflowMenu extends React.Component {
           </OverflowMenuGroup>
         </OverflowMenuContent>
         <OverflowMenuControl>
-          <DropdownNext
+          <Dropdown
             onSelect={this.onSelect}
             toggle={(toggleRef) => (
               <MenuToggle
@@ -107,7 +107,7 @@ class SimpleOverflowMenu extends React.Component {
             }
           >
             <DropdownList>{dropdownItems}</DropdownList>
-          </DropdownNext>
+          </Dropdown>
         </OverflowMenuControl>
       </OverflowMenu>
     );
@@ -128,9 +128,10 @@ import {
   OverflowMenuDropdownItem,
   MenuToggle,
   Button,
-  ButtonVariant
+  ButtonVariant,
+  Dropdown,
+  DropdownList
 } from '@patternfly/react-core';
-import { Dropdown as DropdownNext, DropdownList } from '@patternfly/react-core/next';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import AlignLeftIcon from '@patternfly/react-icons/dist/esm/icons/align-left-icon';
 import AlignCenterIcon from '@patternfly/react-icons/dist/esm/icons/align-center-icon';
@@ -223,7 +224,7 @@ class OverflowMenuGroupTypes extends React.Component {
           </OverflowMenuGroup>
         </OverflowMenuContent>
         <OverflowMenuControl>
-          <DropdownNext
+          <Dropdown
             onSelect={this.onSelect}
             toggle={(toggleRef) => (
               <MenuToggle
@@ -244,7 +245,7 @@ class OverflowMenuGroupTypes extends React.Component {
             }
           >
             <DropdownList>{dropdownItems}</DropdownList>
-          </DropdownNext>
+          </Dropdown>
         </OverflowMenuControl>
       </OverflowMenu>
     );
@@ -265,9 +266,10 @@ import {
   OverflowMenuDropdownItem,
   MenuToggle,
   Button,
-  ButtonVariant
+  ButtonVariant,
+  Dropdown,
+  DropdownList
 } from '@patternfly/react-core';
-import { Dropdown as DropdownNext, DropdownList } from '@patternfly/react-core/next';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import AlignLeftIcon from '@patternfly/react-icons/dist/esm/icons/align-left-icon';
 import AlignCenterIcon from '@patternfly/react-icons/dist/esm/icons/align-center-icon';
@@ -349,7 +351,7 @@ class OverflowMenuAdditionalOptions extends React.Component {
           </OverflowMenuGroup>
         </OverflowMenuContent>
         <OverflowMenuControl hasAdditionalOptions>
-          <DropdownNext
+          <Dropdown
             onSelect={this.onSelect}
             toggle={(toggleRef) => (
               <MenuToggle
@@ -370,7 +372,7 @@ class OverflowMenuAdditionalOptions extends React.Component {
             }
           >
             <DropdownList>{dropdownItems}</DropdownList>
-          </DropdownNext>
+          </Dropdown>
         </OverflowMenuControl>
       </OverflowMenu>
     );
@@ -391,9 +393,10 @@ import {
   OverflowMenuDropdownItem,
   MenuToggle,
   Button,
-  ButtonVariant
+  ButtonVariant,
+  Dropdown,
+  DropdownList
 } from '@patternfly/react-core';
-import { Dropdown as DropdownNext, DropdownList } from '@patternfly/react-core/next';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 class OverflowMenuPersist extends React.Component {
@@ -443,7 +446,7 @@ class OverflowMenuPersist extends React.Component {
           </OverflowMenuGroup>
         </OverflowMenuContent>
         <OverflowMenuControl hasAdditionalOptions>
-          <DropdownNext
+          <Dropdown
             onSelect={this.onSelect}
             toggle={(toggleRef) => (
               <MenuToggle
@@ -464,7 +467,7 @@ class OverflowMenuPersist extends React.Component {
             }
           >
             <DropdownList>{dropdownItems}</DropdownList>
-          </DropdownNext>
+          </Dropdown>
         </OverflowMenuControl>
       </OverflowMenu>
     );

package/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainer.tsx

@@ -7,9 +7,10 @@ import {
   OverflowMenuItem,
   OverflowMenuDropdownItem,
   MenuToggle,
-  Slider
+  Slider,
+  Dropdown,
+  DropdownList
 } from '@patternfly/react-core';
-import { Dropdown as DropdownNext, DropdownList } from '@patternfly/react-core/next';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 export const OverflowMenuBreakpointOnContainer: React.FunctionComponent = () => {
@@ -84,9 +85,9 @@ export const OverflowMenuBreakpointOnContainer: React.FunctionComponent = () =>
             </OverflowMenuGroup>
           </OverflowMenuContent>
           <OverflowMenuControl>
-            <DropdownNext
+            <Dropdown
               onSelect={onSelect}
-              toggle={toggleRef => (
+              toggle={(toggleRef) => (
                 <MenuToggle
                   ref={toggleRef}
                   aria-label="Breakpoint on container example overflow menu"
@@ -98,10 +99,10 @@ export const OverflowMenuBreakpointOnContainer: React.FunctionComponent = () =>
                 </MenuToggle>
               )}
               isOpen={isOpen}
-              onOpenChange={isOpen => setIsOpen(isOpen)}
+              onOpenChange={(isOpen) => setIsOpen(isOpen)}
             >
               <DropdownList>{dropdownItems}</DropdownList>
-            </DropdownNext>
+            </Dropdown>
           </OverflowMenuControl>
         </OverflowMenu>
       </div>

package/src/components/Toolbar/examples/Toolbar.md

@@ -11,7 +11,15 @@ import SyncIcon from '@patternfly/react-icons/dist/esm/icons/sync-icon';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import { Dropdown as DropdownNext, DropdownItem as DropdownItemNext, DropdownList } from '@patternfly/react-core/next';
+import {
+Dropdown as DropdownDeprecated,
+DropdownToggle,
+DropdownToggleCheckbox,
+DropdownItem as DropdownItemDeprecated,
+DropdownSeparator,
+DropdownPosition,
+KebabToggle
+} from '@patternfly/react-core/deprecated';
 
 ## Examples
 
@@ -20,26 +28,31 @@ import { Dropdown as DropdownNext, DropdownItem as DropdownItemNext, DropdownLis
 Toolbar items are individual components that can be placed inside of a toolbar. Buttons or select lists are examples of items. (Note: This example does not demonstrate the desired responsive behavior of the toolbar. That is handled in later examples.)
 
 ```ts file="./ToolbarItems.tsx"
+
 ```
 
 ### Adjusting item spacers
 
 ```ts file="./ToolbarSpacers.tsx"
+
 ```
 
 ### Adjusting item widths
 
 ```ts file="./ToolbarWidths.tsx"
+
 ```
 
 ### Adjusting toolbar inset
 
 ```ts file="./ToolbarInsets.tsx"
+
 ```
 
 ### Sticky
 
 ```ts file="./ToolbarSticky.tsx"
+
 ```
 
 ### Groups
@@ -47,6 +60,7 @@ Toolbar items are individual components that can be placed inside of a toolbar.
 Often, it makes sense to group sets of like items to create desired associations and to enable items to respond together to changes in viewport width. (Note: This example does not demonstrate the desired responsive behavior of the toolbar. That is handled in later examples.)
 
 ```ts file="./ToolbarGroups.tsx"
+
 ```
 
 ## Examples with toggle groups and filters
@@ -56,6 +70,7 @@ A toggle group can be used when you want to collapse a set of items into an over
 ### Component managed toggle groups
 
 ```ts file="./ToolbarComponentManagedToggleGroups.tsx"
+
 ```
 
 ### Consumer managed toggle groups
@@ -68,6 +83,7 @@ If the consumer would prefer to manage the expanded state of the toggle group fo
 - Note: Although the toggle group is aware of the consumer provided breakpoint, the expandable content is not. So if the expandable content is expanded and the screen width surpasses that of the breakpoint, then the expandable content will not know that and will remain open, this case should be considered and handled by the consumer as well.
 
 ```ts file="./ToolbarConsumerManagedToggleGroups.tsx"
+
 ```
 
 ### With filters
@@ -76,6 +92,7 @@ The ToolbarFilter component expects a consumer managed list of applied filters a
 When filters are applied, the toolbar will expand in height to make space for a row of filter chips. Upon clearing the applied filters, the toolbar will collapse to its default height.
 
 ```ts file="./ToolbarWithFilters.tsx"
+
 ```
 
 ### With custom chip group content
@@ -83,6 +100,7 @@ When filters are applied, the toolbar will expand in height to make space for a
 The chip groups generated by toolbar filters may be further customized through the `customChipGroupContent` property, which will append to the filter chip groups. This property will remove the default `Clear all filters` button.
 
 ```ts file="./ToolbarCustomChipGroupContent.tsx"
+
 ```
 
 ### Stacked example
@@ -90,4 +108,5 @@ The chip groups generated by toolbar filters may be further customized through t
 There may be situations where all of the required elements simply cannot fit in a single line.
 
 ```ts file="./ToolbarStacked.tsx"
+
 ```