@patternfly/react-core 5.0.0-alpha.5 → 5.0.0-alpha.51

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,19 +40,13 @@ import {
   BreadcrumbItem,
   Button,
   ButtonVariant,
-  Dropdown,
-  DropdownGroup,
-  DropdownPosition,
-  DropdownDirection,
-  DropdownToggle,
-  DropdownItem,
-  DropdownSeparator,
   EmptyState,
+  EmptyStateActions,
   EmptyStateBody,
   EmptyStateIcon,
-  EmptyStatePrimary,
+  EmptyStateHeader,
+  EmptyStateFooter,
   EmptyStateVariant,
-  KebabToggle,
   Nav,
   NavItem,
   NavList,
@@ -73,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';
@@ -98,38 +112,38 @@ class BasicNotificationDrawer extends React.Component {
       showNotifications: true,
       isActionsMenuOpen: null
     };
-    this.onDropdownToggle = isDropdownOpen => {
+    this.onDropdownToggle = (_event, isDropdownOpen) => {
       this.setState({
         isDropdownOpen
       });
     };
 
-    this.onDropdownSelect = event => {
+    this.onDropdownSelect = (event) => {
       this.setState({
         isDropdownOpen: !this.state.isDropdownOpen
       });
     };
 
-    this.onKebabDropdownToggle = isKebabDropdownOpen => {
+    this.onKebabDropdownToggle = (_event, isKebabDropdownOpen) => {
       this.setState({
         isKebabDropdownOpen
       });
     };
 
-    this.onKebabDropdownSelect = event => {
+    this.onKebabDropdownSelect = (event) => {
       this.setState({
         isKebabDropdownOpen: !this.state.isKebabDropdownOpen
       });
     };
 
-    this.onNavSelect = result => {
+    this.onNavSelect = (result) => {
       this.setState({
         activeItem: result.itemId
       });
     };
 
     this.onCloseNotificationDrawer = () => {
-      this.setState(prevState => {
+      this.setState((prevState) => {
         return {
           isDrawerExpanded: !prevState.isDrawerExpanded
         };
@@ -142,14 +156,14 @@ class BasicNotificationDrawer extends React.Component {
       });
     };
 
-    this.onSelect = event => {
+    this.onSelect = (event) => {
       this.setState({
         isActionsMenuOpen: null
       });
     };
 
-    this.onListItemClick = id => {
-      this.setState(prevState => {
+    this.onListItemClick = (id) => {
+      this.setState((prevState) => {
         if (!prevState.isUnreadMap) return;
         prevState.isUnreadMap[id] = false;
         return {
@@ -172,7 +186,7 @@ class BasicNotificationDrawer extends React.Component {
       });
     };
 
-    this.showNotifications = showNotifications => {
+    this.showNotifications = (showNotifications) => {
       this.setState({
         isUnreadMap: null,
         showNotifications: showNotifications
@@ -219,26 +233,26 @@ 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>
         <ToolbarContent>
-          <ToolbarGroup spaceItems={{ default: 'spacerNone' }} alignment={{ default: 'alignRight' }}>
+          <ToolbarGroup spaceItems={{ default: 'spacerNone' }} align={{ default: 'alignRight' }}>
             <ToolbarGroup variant="icon-button-group">
               <ToolbarItem visibility={{ default: 'visible' }} isSelected={isDrawerExpanded}>
                 <NotificationBadge
@@ -275,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}
@@ -287,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}
@@ -338,37 +352,39 @@ 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={isOpen => this.onToggle('toggle-id-0', isOpen)} id="toggle-id-0" />}
+            toggle={
+              <KebabToggle onToggle={(_event, isOpen) => this.onToggle('toggle-id-0', isOpen)} id="toggle-id-0" />
+            }
             isOpen={isActionsMenuOpen && isActionsMenuOpen['toggle-id-0']}
             isPlain
             dropdownItems={notificationDrawerActions}
@@ -389,10 +405,15 @@ class BasicNotificationDrawer extends React.Component {
                   title="Unread info notification title"
                   srTitle="Info notification:"
                 >
-                  <Dropdown
+                  <DropdownDeprecated
                     position={DropdownPosition.right}
                     onSelect={this.onSelect}
-                    toggle={<KebabToggle onToggle={isOpen => this.onToggle('toggle-id-1', isOpen)} id="toggle-id-1" />}
+                    toggle={
+                      <KebabToggle
+                        onToggle={(_event, isOpen) => this.onToggle('toggle-id-1', isOpen)}
+                        id="toggle-id-1"
+                      />
+                    }
                     isOpen={isActionsMenuOpen && isActionsMenuOpen['toggle-id-1']}
                     isPlain
                     dropdownItems={notificationDrawerDropdownItems}
@@ -413,10 +434,15 @@ 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={<KebabToggle onToggle={isOpen => this.onToggle('toggle-id-2', isOpen)} id="toggle-id-2" />}
+                    toggle={
+                      <KebabToggle
+                        onToggle={(_event, isOpen) => this.onToggle('toggle-id-2', isOpen)}
+                        id="toggle-id-2"
+                      />
+                    }
                     isOpen={isActionsMenuOpen && isActionsMenuOpen['toggle-id-2']}
                     isPlain
                     dropdownItems={notificationDrawerDropdownItems}
@@ -438,10 +464,15 @@ class BasicNotificationDrawer extends React.Component {
                   title="Read warning notification title"
                   srTitle="Warning notification:"
                 >
-                  <Dropdown
+                  <DropdownDeprecated
                     position={DropdownPosition.right}
                     onSelect={this.onSelect}
-                    toggle={<KebabToggle onToggle={isOpen => this.onToggle('toggle-id-3', isOpen)} id="toggle-id-3" />}
+                    toggle={
+                      <KebabToggle
+                        onToggle={(_event, isOpen) => this.onToggle('toggle-id-3', isOpen)}
+                        id="toggle-id-3"
+                      />
+                    }
                     isOpen={isActionsMenuOpen && isActionsMenuOpen['toggle-id-3']}
                     isPlain
                     dropdownItems={notificationDrawerDropdownItems}
@@ -462,11 +493,16 @@ class BasicNotificationDrawer extends React.Component {
                   title="Read success notification title"
                   srTitle="Success notification:"
                 >
-                  <Dropdown
+                  <DropdownDeprecated
                     position={DropdownPosition.right}
                     direction={DropdownDirection.up}
                     onSelect={this.onSelect}
-                    toggle={<KebabToggle onToggle={isOpen => this.onToggle('toggle-id-4', isOpen)} id="toggle-id-4" />}
+                    toggle={
+                      <KebabToggle
+                        onToggle={(_event, isOpen) => this.onToggle('toggle-id-4', isOpen)}
+                        id="toggle-id-4"
+                      />
+                    }
                     isOpen={isActionsMenuOpen && isActionsMenuOpen['toggle-id-4']}
                     isPlain
                     dropdownItems={notificationDrawerDropdownItems}
@@ -481,16 +517,19 @@ class BasicNotificationDrawer extends React.Component {
           )}
           {!showNotifications && (
             <EmptyState variant={EmptyStateVariant.full}>
-              <EmptyStateIcon icon={SearchIcon} />
-              <Title headingLevel="h2" size="lg">
-                No alerts found
-              </Title>
+              <EmptyStateHeader
+                headingLevel="h2"
+                titleText="No results found"
+                icon={<EmptyStateIcon icon={SearchIcon} />}
+              />
               <EmptyStateBody>
                 There are currently no alerts. There may be silenced critical alerts however.
               </EmptyStateBody>
-              <EmptyStatePrimary>
-                <Button variant="link">Action</Button>
-              </EmptyStatePrimary>
+              <EmptyStateFooter>
+                <EmptyStateActions>
+                  <Button variant="link">Action</Button>
+                </EmptyStateActions>
+              </EmptyStateFooter>
             </EmptyState>
           )}
         </NotificationDrawerBody>
@@ -542,19 +581,13 @@ import {
   BreadcrumbItem,
   Button,
   ButtonVariant,
-  Dropdown,
-  DropdownGroup,
-  DropdownPosition,
-  DropdownDirection,
-  DropdownToggle,
-  DropdownItem,
-  DropdownSeparator,
   EmptyState,
+  EmptyStateActions,
   EmptyStateBody,
   EmptyStateIcon,
-  EmptyStatePrimary,
+  EmptyStateHeader,
+  EmptyStateFooter,
   EmptyStateVariant,
-  KebabToggle,
   Nav,
   NavItem,
   NavList,
@@ -587,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';
@@ -622,38 +665,38 @@ class GroupedNotificationDrawer extends React.Component {
         'group-3': null
       }
     };
-    this.onDropdownToggle = isDropdownOpen => {
+    this.onDropdownToggle = (_event, isDropdownOpen) => {
       this.setState({
         isDropdownOpen
       });
     };
 
-    this.onDropdownSelect = event => {
+    this.onDropdownSelect = (event) => {
       this.setState({
         isDropdownOpen: !this.state.isDropdownOpen
       });
     };
 
-    this.onKebabDropdownToggle = isKebabDropdownOpen => {
+    this.onKebabDropdownToggle = (_event, isKebabDropdownOpen) => {
       this.setState({
         isKebabDropdownOpen
       });
     };
 
-    this.onKebabDropdownSelect = event => {
+    this.onKebabDropdownSelect = (event) => {
       this.setState({
         isKebabDropdownOpen: !this.state.isKebabDropdownOpen
       });
     };
 
-    this.onNavSelect = result => {
+    this.onNavSelect = (result) => {
       this.setState({
         activeItem: result.itemId
       });
     };
 
     this.onCloseNotificationDrawer = () => {
-      this.setState(prevState => {
+      this.setState((prevState) => {
         return {
           isDrawerExpanded: !prevState.isDrawerExpanded
         };
@@ -666,14 +709,14 @@ class GroupedNotificationDrawer extends React.Component {
       });
     };
 
-    this.onSelect = event => {
+    this.onSelect = (event) => {
       this.setState({
         isActionsMenuOpen: null
       });
     };
 
     this.onListItemClick = (groupId, id) => {
-      this.setState(prevState => {
+      this.setState((prevState) => {
         if (!prevState.isUnreadMap || !prevState.isUnreadMap[groupId]) return;
         console.log(prevState.isUnreadMap);
         prevState.isUnreadMap[groupId][id] = false;
@@ -688,7 +731,7 @@ class GroupedNotificationDrawer extends React.Component {
       return isUnreadMap && isUnreadMap[groupId] && isUnreadMap[groupId][id];
     };
 
-    this.getNumberUnread = groupId => {
+    this.getNumberUnread = (groupId) => {
       const { isUnreadMap } = this.state;
       if (isUnreadMap === null) return 0;
 
@@ -715,7 +758,7 @@ class GroupedNotificationDrawer extends React.Component {
       });
     };
 
-    this.showNotifications = showNotifications => {
+    this.showNotifications = (showNotifications) => {
       this.setState({
         isUnreadMap: null,
         showNotifications: showNotifications
@@ -786,26 +829,26 @@ 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>
         <ToolbarContent>
-          <ToolbarGroup spaceItems={{ default: 'spacerNone' }} alignment={{ default: 'alignRight' }}>
+          <ToolbarGroup spaceItems={{ default: 'spacerNone' }} align={{ default: 'alignRight' }}>
             <ToolbarGroup variant="icon-button-group">
               <ToolbarItem visibility={{ default: 'visible' }} isSelected={isDrawerExpanded}>
                 <NotificationBadge
@@ -842,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}
@@ -854,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}
@@ -905,37 +948,39 @@ 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={isOpen => this.onToggle('toggle-id-0', isOpen)} id="toggle-id-0" />}
+            toggle={
+              <KebabToggle onToggle={(_event, isOpen) => this.onToggle('toggle-id-0', isOpen)} id="toggle-id-0" />
+            }
             isOpen={isActionsMenuOpen && isActionsMenuOpen['toggle-id-0']}
             isPlain
             dropdownItems={notificationDrawerActions}
@@ -963,11 +1008,14 @@ class GroupedNotificationDrawer extends React.Component {
                       title="Unread info notification title"
                       srTitle="Info notification:"
                     >
-                      <Dropdown
+                      <DropdownDeprecated
                         position={DropdownPosition.right}
                         onSelect={this.onSelect}
                         toggle={
-                          <KebabToggle onToggle={isOpen => this.onToggle('toggle-id-5', isOpen)} id="toggle-id-5" />
+                          <KebabToggle
+                            onToggle={(_event, isOpen) => this.onToggle('toggle-id-5', isOpen)}
+                            id="toggle-id-5"
+                          />
                         }
                         isOpen={isActionsMenuOpen && isActionsMenuOpen['toggle-id-5']}
                         isPlain
@@ -989,11 +1037,14 @@ 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={
-                          <KebabToggle onToggle={isOpen => this.onToggle('toggle-id-6', isOpen)} id="toggle-id-6" />
+                          <KebabToggle
+                            onToggle={(_event, isOpen) => this.onToggle('toggle-id-6', isOpen)}
+                            id="toggle-id-6"
+                          />
                         }
                         isOpen={isActionsMenuOpen && isActionsMenuOpen['toggle-id-6']}
                         isPlain
@@ -1016,11 +1067,14 @@ class GroupedNotificationDrawer extends React.Component {
                       title="Read warning notification title"
                       srTitle="Warning notification:"
                     >
-                      <Dropdown
+                      <DropdownDeprecated
                         position={DropdownPosition.right}
                         onSelect={this.onSelect}
                         toggle={
-                          <KebabToggle onToggle={isOpen => this.onToggle('toggle-id-7', isOpen)} id="toggle-id-7" />
+                          <KebabToggle
+                            onToggle={(_event, isOpen) => this.onToggle('toggle-id-7', isOpen)}
+                            id="toggle-id-7"
+                          />
                         }
                         isOpen={isActionsMenuOpen && isActionsMenuOpen['toggle-id-7']}
                         isPlain
@@ -1042,12 +1096,15 @@ class GroupedNotificationDrawer extends React.Component {
                       title="Read success notification title"
                       srTitle="Success notification:"
                     >
-                      <Dropdown
+                      <DropdownDeprecated
                         position={DropdownPosition.right}
                         direction={DropdownDirection.up}
                         onSelect={this.onSelect}
                         toggle={
-                          <KebabToggle onToggle={isOpen => this.onToggle('toggle-id-8', isOpen)} id="toggle-id-8" />
+                          <KebabToggle
+                            onToggle={(_event, isOpen) => this.onToggle('toggle-id-8', isOpen)}
+                            id="toggle-id-8"
+                          />
                         }
                         isOpen={isActionsMenuOpen && isActionsMenuOpen['toggle-id-8']}
                         isPlain
@@ -1078,11 +1135,14 @@ class GroupedNotificationDrawer extends React.Component {
                       title="Unread info notification title"
                       srTitle="Info notification:"
                     >
-                      <Dropdown
+                      <DropdownDeprecated
                         position={DropdownPosition.right}
                         onSelect={this.onSelect}
                         toggle={
-                          <KebabToggle onToggle={isOpen => this.onToggle('toggle-id-9', isOpen)} id="toggle-id-9" />
+                          <KebabToggle
+                            onToggle={(_event, isOpen) => this.onToggle('toggle-id-9', isOpen)}
+                            id="toggle-id-9"
+                          />
                         }
                         isOpen={isActionsMenuOpen && isActionsMenuOpen['toggle-id-9']}
                         isPlain
@@ -1104,11 +1164,14 @@ 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={
-                          <KebabToggle onToggle={isOpen => this.onToggle('toggle-id-10', isOpen)} id="toggle-id-10" />
+                          <KebabToggle
+                            onToggle={(_event, isOpen) => this.onToggle('toggle-id-10', isOpen)}
+                            id="toggle-id-10"
+                          />
                         }
                         isOpen={isActionsMenuOpen && isActionsMenuOpen['toggle-id-10']}
                         isPlain
@@ -1131,11 +1194,14 @@ class GroupedNotificationDrawer extends React.Component {
                       title="Read warning notification title"
                       srTitle="Warning notification:"
                     >
-                      <Dropdown
+                      <DropdownDeprecated
                         position={DropdownPosition.right}
                         onSelect={this.onSelect}
                         toggle={
-                          <KebabToggle onToggle={isOpen => this.onToggle('toggle-id-11', isOpen)} id="toggle-id-11" />
+                          <KebabToggle
+                            onToggle={(_event, isOpen) => this.onToggle('toggle-id-11', isOpen)}
+                            id="toggle-id-11"
+                          />
                         }
                         isOpen={isActionsMenuOpen && isActionsMenuOpen['toggle-id-11']}
                         isPlain
@@ -1157,12 +1223,15 @@ class GroupedNotificationDrawer extends React.Component {
                       title="Read success notification title"
                       srTitle="Success notification:"
                     >
-                      <Dropdown
+                      <DropdownDeprecated
                         position={DropdownPosition.right}
                         direction={DropdownDirection.up}
                         onSelect={this.onSelect}
                         toggle={
-                          <KebabToggle onToggle={isOpen => this.onToggle('toggle-id-12', isOpen)} id="toggle-id-12" />
+                          <KebabToggle
+                            onToggle={(_event, isOpen) => this.onToggle('toggle-id-12', isOpen)}
+                            id="toggle-id-12"
+                          />
                         }
                         isOpen={isActionsMenuOpen && isActionsMenuOpen['toggle-id-12']}
                         isPlain
@@ -1184,17 +1253,20 @@ class GroupedNotificationDrawer extends React.Component {
               >
                 <NotificationDrawerList isHidden={!thirdDrawerGroupExpanded}>
                   <EmptyState variant={EmptyStateVariant.full}>
-                    <EmptyStateIcon icon={SearchIcon} />
-                    <Title headingLevel="h2" size="lg">
-                      No alerts found
-                    </Title>
+                    <EmptyStateHeader
+                      headingLevel="h2"
+                      titleText="No alerts found"
+                      icon={<EmptyStateIcon icon={SearchIcon} />}
+                    />
                     <EmptyStateBody>
                       There are currently no critical alerts firing. There may be firing alerts of other severities or
                       silenced critical alerts however.
                     </EmptyStateBody>
-                    <EmptyStatePrimary>
-                      <Button variant="link">Action</Button>
-                    </EmptyStatePrimary>
+                    <EmptyStateFooter>
+                      <EmptyStateActions>
+                        <Button variant="link">Action</Button>
+                      </EmptyStateActions>
+                    </EmptyStateFooter>
                   </EmptyState>
                 </NotificationDrawerList>
               </NotificationDrawerGroup>
@@ -1202,16 +1274,19 @@ class GroupedNotificationDrawer extends React.Component {
           )}
           {!showNotifications && (
             <EmptyState variant={EmptyStateVariant.full}>
-              <EmptyStateIcon icon={SearchIcon} />
-              <Title headingLevel="h2" size="lg">
-                No alerts found
-              </Title>
+              <EmptyStateHeader
+                headingLevel="h2"
+                titleText="No alerts found"
+                icon={<EmptyStateIcon icon={SearchIcon} />}
+              />
               <EmptyStateBody>
                 There are currently no alerts. There may be silenced critical alerts however.
               </EmptyStateBody>
-              <EmptyStatePrimary>
-                <Button variant="link">Action</Button>
-              </EmptyStatePrimary>
+              <EmptyStateFooter>
+                <EmptyStateActions>
+                  <Button variant="link">Action</Button>
+                </EmptyStateActions>
+              </EmptyStateFooter>
             </EmptyState>
           )}
         </NotificationDrawerBody>