@patternfly/react-core 5.0.0-alpha.47 → 5.0.0-alpha.49

package/src/demos/NotificationDrawer/NotificationDrawer.md

@@ -11,6 +11,16 @@ import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import imgBrand from '@patternfly/react-core/src/components/Brand/examples/pfLogo.svg';
 import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
+import {
+Dropdown as DropdownDeprecated,
+DropdownGroup as DropdownGroupDeprecated,
+DropdownPosition,
+DropdownDirection,
+DropdownToggle,
+DropdownItem as DropdownItemDeprecated,
+DropdownSeparator,
+KebabToggle
+} from '@patternfly/react-core/deprecated';
 
 ## Demos
 
@@ -30,13 +40,6 @@ import {
   BreadcrumbItem,
   Button,
   ButtonVariant,
-  Dropdown,
-  DropdownGroup,
-  DropdownPosition,
-  DropdownDirection,
-  DropdownToggle,
-  DropdownItem,
-  DropdownSeparator,
   EmptyState,
   EmptyStateActions,
   EmptyStateBody,
@@ -44,7 +47,6 @@ import {
   EmptyStateHeader,
   EmptyStateFooter,
   EmptyStateVariant,
-  KebabToggle,
   Nav,
   NavItem,
   NavList,
@@ -75,6 +77,16 @@ import {
   ToolbarGroup,
   ToolbarContent
 } from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownGroup as DropdownGroupDeprecated,
+  DropdownPosition,
+  DropdownDirection,
+  DropdownToggle,
+  DropdownItem as DropdownItemDeprecated,
+  DropdownSeparator,
+  KebabToggle
+} from '@patternfly/react-core/deprecated';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
@@ -221,21 +233,21 @@ class BasicNotificationDrawer extends React.Component {
       </Nav>
     );
     const kebabDropdownItems = [
-      <DropdownItem>
+      <DropdownItemDeprecated>
         <CogIcon /> Settings
-      </DropdownItem>,
-      <DropdownItem>
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated>
         <HelpIcon /> Help
-      </DropdownItem>
+      </DropdownItemDeprecated>
     ];
     const userDropdownItems = [
-      <DropdownGroup key="group 2">
-        <DropdownItem key="group 2 profile">My profile</DropdownItem>
-        <DropdownItem key="group 2 user" component="button">
+      <DropdownGroupDeprecated key="group 2">
+        <DropdownItemDeprecated key="group 2 profile">My profile</DropdownItemDeprecated>
+        <DropdownItemDeprecated key="group 2 user" component="button">
           User management
-        </DropdownItem>
-        <DropdownItem key="group 2 logout">Logout</DropdownItem>
-      </DropdownGroup>
+        </DropdownItemDeprecated>
+        <DropdownItemDeprecated key="group 2 logout">Logout</DropdownItemDeprecated>
+      </DropdownGroupDeprecated>
     ];
     const headerToolbar = (
       <Toolbar>
@@ -277,7 +289,7 @@ class BasicNotificationDrawer extends React.Component {
                   lg: 'hidden'
                 }} /** this kebab dropdown replaces the icon buttons and is hidden for desktop sizes */
               >
-                <Dropdown
+                <DropdownDeprecated
                   isPlain
                   position="right"
                   onSelect={this.onKebabDropdownSelect}
@@ -289,7 +301,7 @@ class BasicNotificationDrawer extends React.Component {
               <ToolbarItem
                 visibility={{ default: 'hidden', md: 'visible' }} /** this user dropdown is hidden on mobile sizes */
               >
-                <Dropdown
+                <DropdownDeprecated
                   position="right"
                   onSelect={this.onDropdownSelect}
                   isOpen={isDropdownOpen}
@@ -340,35 +352,35 @@ class BasicNotificationDrawer extends React.Component {
     const drawerContent = 'Panel content';
 
     const notificationDrawerActions = [
-      <DropdownItem key="markAllRead" onClick={this.markAllRead} component="button">
+      <DropdownItemDeprecated key="markAllRead" onClick={this.markAllRead} component="button">
         Mark all read
-      </DropdownItem>,
-      <DropdownItem key="clearAll" onClick={() => this.showNotifications(false)} component="button">
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="clearAll" onClick={() => this.showNotifications(false)} component="button">
         Clear all
-      </DropdownItem>,
-      <DropdownItem key="unclearLast" onClick={() => this.showNotifications(true)} component="button">
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="unclearLast" onClick={() => this.showNotifications(true)} component="button">
         Unclear last
-      </DropdownItem>,
-      <DropdownItem key="settings" component="button">
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="settings" component="button">
         Settings
-      </DropdownItem>
+      </DropdownItemDeprecated>
     ];
 
     const notificationDrawerDropdownItems = [
-      <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>
     ];
 
     const notificationDrawer = (
       <NotificationDrawer ref={this.drawerRef}>
         <NotificationDrawerHeader count={this.getNumberUnread()} onClose={this.onCloseNotificationDrawer}>
-          <Dropdown
+          <DropdownDeprecated
             onSelect={this.onSelect}
             toggle={
               <KebabToggle onToggle={(_event, isOpen) => this.onToggle('toggle-id-0', isOpen)} id="toggle-id-0" />
@@ -393,7 +405,7 @@ class BasicNotificationDrawer extends React.Component {
                   title="Unread info notification title"
                   srTitle="Info notification:"
                 >
-                  <Dropdown
+                  <DropdownDeprecated
                     position={DropdownPosition.right}
                     onSelect={this.onSelect}
                     toggle={
@@ -422,7 +434,7 @@ class BasicNotificationDrawer extends React.Component {
                   title="Unread danger notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines."
                   srTitle="Danger notification:"
                 >
-                  <Dropdown
+                  <DropdownDeprecated
                     position={DropdownPosition.right}
                     onSelect={this.onSelect}
                     toggle={
@@ -452,7 +464,7 @@ class BasicNotificationDrawer extends React.Component {
                   title="Read warning notification title"
                   srTitle="Warning notification:"
                 >
-                  <Dropdown
+                  <DropdownDeprecated
                     position={DropdownPosition.right}
                     onSelect={this.onSelect}
                     toggle={
@@ -481,7 +493,7 @@ class BasicNotificationDrawer extends React.Component {
                   title="Read success notification title"
                   srTitle="Success notification:"
                 >
-                  <Dropdown
+                  <DropdownDeprecated
                     position={DropdownPosition.right}
                     direction={DropdownDirection.up}
                     onSelect={this.onSelect}
@@ -569,13 +581,6 @@ import {
   BreadcrumbItem,
   Button,
   ButtonVariant,
-  Dropdown,
-  DropdownGroup,
-  DropdownPosition,
-  DropdownDirection,
-  DropdownToggle,
-  DropdownItem,
-  DropdownSeparator,
   EmptyState,
   EmptyStateActions,
   EmptyStateBody,
@@ -583,7 +588,6 @@ import {
   EmptyStateHeader,
   EmptyStateFooter,
   EmptyStateVariant,
-  KebabToggle,
   Nav,
   NavItem,
   NavList,
@@ -616,6 +620,16 @@ import {
   ToolbarGroup,
   ToolbarContent
 } from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownGroup as DropdownGroupDeprecated,
+  DropdownPosition,
+  DropdownDirection,
+  DropdownToggle,
+  DropdownItem as DropdownItemDeprecated,
+  DropdownSeparator,
+  KebabToggle
+} from '@patternfly/react-core/deprecated';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
@@ -815,21 +829,21 @@ class GroupedNotificationDrawer extends React.Component {
       </Nav>
     );
     const kebabDropdownItems = [
-      <DropdownItem>
+      <DropdownItemDeprecated>
         <CogIcon /> Settings
-      </DropdownItem>,
-      <DropdownItem>
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated>
         <HelpIcon /> Help
-      </DropdownItem>
+      </DropdownItemDeprecated>
     ];
     const userDropdownItems = [
-      <DropdownGroup key="group 2">
-        <DropdownItem key="group 2 profile">My profile</DropdownItem>
-        <DropdownItem key="group 2 user" component="button">
+      <DropdownGroupDeprecated key="group 2">
+        <DropdownItemDeprecated key="group 2 profile">My profile</DropdownItemDeprecated>
+        <DropdownItemDeprecated key="group 2 user" component="button">
           User management
-        </DropdownItem>
-        <DropdownItem key="group 2 logout">Logout</DropdownItem>
-      </DropdownGroup>
+        </DropdownItemDeprecated>
+        <DropdownItemDeprecated key="group 2 logout">Logout</DropdownItemDeprecated>
+      </DropdownGroupDeprecated>
     ];
     const headerToolbar = (
       <Toolbar>
@@ -871,7 +885,7 @@ class GroupedNotificationDrawer extends React.Component {
                   lg: 'hidden'
                 }} /** this kebab dropdown replaces the icon buttons and is hidden for desktop sizes */
               >
-                <Dropdown
+                <DropdownDeprecated
                   isPlain
                   position="right"
                   onSelect={this.onKebabDropdownSelect}
@@ -883,7 +897,7 @@ class GroupedNotificationDrawer extends React.Component {
               <ToolbarItem
                 visibility={{ default: 'hidden', md: 'visible' }} /** this user dropdown is hidden on mobile sizes */
               >
-                <Dropdown
+                <DropdownDeprecated
                   position="right"
                   onSelect={this.onDropdownSelect}
                   isOpen={isDropdownOpen}
@@ -934,35 +948,35 @@ class GroupedNotificationDrawer extends React.Component {
     const drawerContent = 'Panel content';
 
     const notificationDrawerDropdownItems = [
-      <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>
     ];
 
     const notificationDrawerActions = [
-      <DropdownItem key="markAllRead" onClick={this.markAllRead} component="button">
+      <DropdownItemDeprecated key="markAllRead" onClick={this.markAllRead} component="button">
         Mark all read
-      </DropdownItem>,
-      <DropdownItem key="clearAll" onClick={() => this.showNotifications(false)} component="button">
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="clearAll" onClick={() => this.showNotifications(false)} component="button">
         Clear all
-      </DropdownItem>,
-      <DropdownItem key="unclearLast" onClick={() => this.showNotifications(true)} component="button">
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="unclearLast" onClick={() => this.showNotifications(true)} component="button">
         Unclear last
-      </DropdownItem>,
-      <DropdownItem key="settings" component="button">
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="settings" component="button">
         Settings
-      </DropdownItem>
+      </DropdownItemDeprecated>
     ];
 
     const notificationDrawer = (
       <NotificationDrawer ref={this.drawerRef}>
         <NotificationDrawerHeader count={this.getNumberUnread()} onClose={this.onCloseNotificationDrawer}>
-          <Dropdown
+          <DropdownDeprecated
             onSelect={this.onSelect}
             toggle={
               <KebabToggle onToggle={(_event, isOpen) => this.onToggle('toggle-id-0', isOpen)} id="toggle-id-0" />
@@ -994,7 +1008,7 @@ class GroupedNotificationDrawer extends React.Component {
                       title="Unread info notification title"
                       srTitle="Info notification:"
                     >
-                      <Dropdown
+                      <DropdownDeprecated
                         position={DropdownPosition.right}
                         onSelect={this.onSelect}
                         toggle={
@@ -1023,7 +1037,7 @@ class GroupedNotificationDrawer extends React.Component {
                       title="Unread danger notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines."
                       srTitle="Danger notification:"
                     >
-                      <Dropdown
+                      <DropdownDeprecated
                         position={DropdownPosition.right}
                         onSelect={this.onSelect}
                         toggle={
@@ -1053,7 +1067,7 @@ class GroupedNotificationDrawer extends React.Component {
                       title="Read warning notification title"
                       srTitle="Warning notification:"
                     >
-                      <Dropdown
+                      <DropdownDeprecated
                         position={DropdownPosition.right}
                         onSelect={this.onSelect}
                         toggle={
@@ -1082,7 +1096,7 @@ class GroupedNotificationDrawer extends React.Component {
                       title="Read success notification title"
                       srTitle="Success notification:"
                     >
-                      <Dropdown
+                      <DropdownDeprecated
                         position={DropdownPosition.right}
                         direction={DropdownDirection.up}
                         onSelect={this.onSelect}
@@ -1121,7 +1135,7 @@ class GroupedNotificationDrawer extends React.Component {
                       title="Unread info notification title"
                       srTitle="Info notification:"
                     >
-                      <Dropdown
+                      <DropdownDeprecated
                         position={DropdownPosition.right}
                         onSelect={this.onSelect}
                         toggle={
@@ -1150,7 +1164,7 @@ class GroupedNotificationDrawer extends React.Component {
                       title="Unread danger notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines."
                       srTitle="Danger notification:"
                     >
-                      <Dropdown
+                      <DropdownDeprecated
                         position={DropdownPosition.right}
                         onSelect={this.onSelect}
                         toggle={
@@ -1180,7 +1194,7 @@ class GroupedNotificationDrawer extends React.Component {
                       title="Read warning notification title"
                       srTitle="Warning notification:"
                     >
-                      <Dropdown
+                      <DropdownDeprecated
                         position={DropdownPosition.right}
                         onSelect={this.onSelect}
                         toggle={
@@ -1209,7 +1223,7 @@ class GroupedNotificationDrawer extends React.Component {
                       title="Read success notification title"
                       srTitle="Success notification:"
                     >
-                      <Dropdown
+                      <DropdownDeprecated
                         position={DropdownPosition.right}
                         direction={DropdownDirection.up}
                         onSelect={this.onSelect}

package/src/demos/Page.md

@@ -12,6 +12,13 @@ import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/ava
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import AttentionBellIcon from '@patternfly/react-icons/dist/esm/icons/attention-bell-icon';
 import LightbulbIcon from '@patternfly/react-icons/dist/esm/icons/lightbulb-icon';
+import {
+Dropdown as DropdownDeprecated,
+DropdownGroup as DropdownGroupDeprecated,
+DropdownItem as DropdownItemDeprecated,
+DropdownToggle,
+KebabToggle
+} from '@patternfly/react-core/deprecated';
 
 - All examples set the `isManagedSidebar` prop on the Page component to have the sidebar automatically close for smaller screen widths. You can also manually control this behavior by not adding the `isManagedSidebar` prop and instead:
 
@@ -27,11 +34,13 @@ This demonstrates a variety of navigation patterns in the context of a full page
 ### Sticky section group
 
 ```ts file='./examples/Page/PageStickySectionGroup.tsx' isFullscreen
+
 ```
 
 ### Sticky section group (alternate syntax)
 
-```ts  file='./examples/Page/PageStickySectionGroupAlternate.tsx' isFullscreen
+```ts file='./examples/Page/PageStickySectionGroupAlternate.tsx' isFullscreen
+
 ```
 
 ### Sticky section group (using PageHeader)
@@ -39,9 +48,11 @@ This demonstrates a variety of navigation patterns in the context of a full page
 This demo is provided becuase PageHeader and PageHeaderTools are still in use; however, going forward Masthead and Toolbar should be used to make headers rather than PageHeader and PageHeaderTools.
 
 ```ts file='./examples/Page/PageStickySectionGroupUsingPageHeader.tsx' isFullscreen
+
 ```
 
 ### Sticky section breadcrumb (with breakpoints)
 
 ```ts file='./examples/Page/PageStickySectionBreadcrumb.tsx' isFullscreen
+
 ```

package/src/demos/PasswordGenerator.md

@@ -1,6 +1,6 @@
 ---
 id: Password generator
-section: demos
+section: components
 ---
 
 import RedoIcon from '@patternfly/react-icons/dist/esm/icons/redo-icon';

package/src/demos/PasswordStrength.md

@@ -1,6 +1,6 @@
 ---
 id: Password strength
-section: demos
+section: components
 ---
 
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';

package/src/demos/PrimaryDetail.md

@@ -1,8 +1,17 @@
 ---
 id: Primary-detail
-section: demos
+section: patterns
 ---
 
+import {
+Dropdown as DropdownDeprecated,
+DropdownToggle,
+DropdownToggleCheckbox,
+DropdownItem as DropdownItemDeprecated,
+DropdownPosition,
+DropdownSeparator,
+KebabToggle
+} from '@patternfly/react-core/deprecated';
 import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon';
@@ -960,12 +969,6 @@ import {
   CardTitle,
   Checkbox,
   Divider,
-  Dropdown,
-  DropdownToggle,
-  DropdownToggleCheckbox,
-  DropdownItem,
-  DropdownPosition,
-  DropdownSeparator,
   Drawer,
   DrawerActions,
   DrawerPanelBody,
@@ -977,7 +980,6 @@ import {
   Flex,
   FlexItem,
   Gallery,
-  KebabToggle,
   PageSection,
   PageSectionVariants,
   Pagination,
@@ -993,6 +995,15 @@ import {
   ToolbarContent,
   ToolbarFilter
 } from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownToggle,
+  DropdownToggleCheckbox,
+  DropdownItem as DropdownItemDeprecated,
+  DropdownPosition,
+  DropdownSeparator,
+  KebabToggle
+} from '@patternfly/react-core/deprecated';
 import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon';
 import pfIcon from './pf-logo-small.svg';
@@ -1346,19 +1357,19 @@ class PrimaryDetailCardView extends React.Component {
     const someChecked = anySelected ? null : false;
     const isChecked = allSelected ? true : someChecked;
     const splitButtonDropdownItems = [
-      <DropdownItem key="item-1" onClick={this.selectNone}>
+      <DropdownItemDeprecated key="item-1" onClick={this.selectNone}>
         Select none (0 items)
-      </DropdownItem>,
-      <DropdownItem key="item-2" onClick={this.selectPage}>
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="item-2" onClick={this.selectPage}>
         Select page ({this.state.res.length} items)
-      </DropdownItem>,
-      <DropdownItem key="item-3" onClick={this.selectAll}>
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="item-3" onClick={this.selectAll}>
         Select all ({this.state.totalItemCount} items)
-      </DropdownItem>
+      </DropdownItemDeprecated>
     ];
 
     return (
-      <Dropdown
+      <DropdownDeprecated
         position={DropdownPosition.left}
         onSelect={this.onSplitButtonSelect}
         toggle={
@@ -1388,21 +1399,21 @@ class PrimaryDetailCardView extends React.Component {
       this.state;
 
     const toolbarKebabDropdownItems = [
-      <DropdownItem key="link">Link</DropdownItem>,
-      <DropdownItem key="action" component="button">
+      <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="action" component="button">
         Action
-      </DropdownItem>,
-      <DropdownItem key="disabled link" isDisabled>
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="disabled link" isDisabled>
         Disabled Link
-      </DropdownItem>,
-      <DropdownItem key="disabled action" isDisabled component="button">
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="disabled action" isDisabled component="button">
         Disabled Action
-      </DropdownItem>,
+      </DropdownItemDeprecated>,
       <DropdownSeparator key="separator" />,
-      <DropdownItem key="separated link">Separated Link</DropdownItem>,
-      <DropdownItem key="separated action" component="button">
+      <DropdownItemDeprecated key="separated link">Separated Link</DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="separated action" component="button">
         Separated Action
-      </DropdownItem>
+      </DropdownItemDeprecated>
     ];
 
     const toolbarItems = (
@@ -1415,7 +1426,7 @@ class PrimaryDetailCardView extends React.Component {
           <Button variant="secondary">Action</Button>
         </ToolbarItem>
         <ToolbarItem>
-          <Dropdown
+          <DropdownDeprecated
             onSelect={this.onToolbarKebabDropdownSelect}
             toggle={<KebabToggle onToggle={this.onToolbarKebabDropdownToggle} id="card-view-data-toolbar-dropdown" />}
             isOpen={isLowerToolbarKebabDropdownOpen}
@@ -1463,7 +1474,7 @@ class PrimaryDetailCardView extends React.Component {
               actions={{
                 actions: (
                   <>
-                    <Dropdown
+                    <DropdownDeprecated
                       isPlain
                       position="right"
                       onSelect={(e) => this.onCardKebabDropdownSelect(key, e)}
@@ -1476,10 +1487,14 @@ class PrimaryDetailCardView extends React.Component {
                       }
                       isOpen={this.state[key]}
                       dropdownItems={[
-                        <DropdownItem key="trash" onClick={(e) => this.deleteItem(e, product)} position="right">
+                        <DropdownItemDeprecated
+                          key="trash"
+                          onClick={(e) => this.deleteItem(e, product)}
+                          position="right"
+                        >
                           <TrashIcon />
                           Delete
-                        </DropdownItem>
+                        </DropdownItemDeprecated>
                       ]}
                     />
                     <Checkbox
@@ -1748,9 +1763,6 @@ import {
   DrawerHead,
   DrawerPanelBody,
   DrawerPanelContent,
-  Dropdown,
-  DropdownToggle,
-  DropdownItem,
   Flex,
   FlexItem,
   PageSection,
@@ -1760,6 +1772,11 @@ import {
   TextContent,
   Title
 } from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownToggle,
+  DropdownItem as DropdownItemDeprecated
+} from '@patternfly/react-core/deprecated';
 import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 
@@ -1845,8 +1862,8 @@ class PrimaryDetailDataListInCard extends React.Component {
     );
 
     const dropdownItems = [
-      <DropdownItem key="option1">Option 1</DropdownItem>,
-      <DropdownItem key="option2">Option 2</DropdownItem>
+      <DropdownItemDeprecated key="option1">Option 1</DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="option2">Option 2</DropdownItemDeprecated>
     ];
 
     const drawerContent = (
@@ -1854,7 +1871,7 @@ class PrimaryDetailDataListInCard extends React.Component {
         <Toolbar id="data-list-data-toolbar" usePageInsets>
           <ToolbarContent>
             <ToolbarItem>
-              <Dropdown
+              <DropdownDeprecated
                 onSelect={this.onDropdownSelect}
                 toggle={
                   <DropdownToggle