@patternfly/react-core 5.0.0-alpha.1 → 5.0.0-alpha.100

package/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx

@@ -1,12 +1,10 @@
 import React, { useEffect } from 'react';
 import {
   Button,
-  Dropdown,
-  DropdownItem,
   EmptyState,
   EmptyStateBody,
+  EmptyStateHeader,
   EmptyStateIcon,
-  KebabToggle,
   NotificationBadge,
   NotificationBadgeVariant,
   NotificationDrawer,
@@ -20,17 +18,21 @@ import {
   PageSectionVariants,
   TextContent,
   Text,
-  Title,
-  DropdownPosition,
   EmptyStateVariant,
   NumberInput,
   Alert,
   AlertProps,
   AlertGroup,
-  AlertActionCloseButton
+  AlertActionCloseButton,
+  ToolbarItem,
+  Dropdown,
+  DropdownList,
+  DropdownItem,
+  MenuToggle,
+  MenuToggleElement
 } from '@patternfly/react-core';
-
 import SearchIcon from '@patternfly/react-icons/dist/js/icons/search-icon';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import DashboardWrapper from '../DashboardWrapper';
 import DashboardHeader from '../DashboardHeader';
 
@@ -69,13 +71,13 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
     const key = getUniqueId();
     const timestamp = getTimeCreated();
 
-    setNotifications(prevNotifications => [
+    setNotifications((prevNotifications) => [
       { title, srTitle, variant, key, timestamp, description, isNotificationRead: false },
       ...prevNotifications
     ]);
 
     if (!isDrawerExpanded) {
-      setAlerts(prevAlerts => [
+      setAlerts((prevAlerts) => [
         <Alert
           variant={variant}
           title={title}
@@ -96,7 +98,7 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
   };
 
   const removeNotification = (key: React.Key) => {
-    setNotifications(prevNotifications => prevNotifications.filter(notification => notification.key !== key));
+    setNotifications((prevNotifications) => prevNotifications.filter((notification) => notification.key !== key));
   };
 
   const removeAllNotifications = () => {
@@ -104,28 +106,29 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
   };
 
   const isNotificationRead = (key: React.Key) =>
-    notifications.find(notification => notification.key === key)?.isNotificationRead;
+    notifications.find((notification) => notification.key === key)?.isNotificationRead;
 
   const markNotificationRead = (key: React.Key) => {
-    setNotifications(prevNotifications =>
-      prevNotifications.map(notification =>
+    setNotifications((prevNotifications) =>
+      prevNotifications.map((notification) =>
         notification.key === key ? { ...notification, isNotificationRead: true } : notification
       )
     );
   };
 
   const markAllNotificationsRead = () => {
-    setNotifications(prevNotifications =>
-      prevNotifications.map(notification => ({ ...notification, isNotificationRead: true }))
+    setNotifications((prevNotifications) =>
+      prevNotifications.map((notification) => ({ ...notification, isNotificationRead: true }))
     );
   };
 
   const getUnreadNotificationsNumber = () =>
-    notifications.filter(notification => notification.isNotificationRead === false).length;
+    notifications.filter((notification) => notification.isNotificationRead === false).length;
 
   const containsUnreadAlertNotification = () =>
-    notifications.filter(notification => notification.isNotificationRead === false && notification.variant === 'danger')
-      .length > 0;
+    notifications.filter(
+      (notification) => notification.isNotificationRead === false && notification.variant === 'danger'
+    ).length > 0;
 
   const getNotificationBadgeVariant = () => {
     if (getUnreadNotificationsNumber() === 0) {
@@ -142,8 +145,8 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
     setDrawerExpanded(!isDrawerExpanded);
   };
 
-  const onDropdownToggle = (id: React.Key, isActive: boolean) => {
-    if (isActive) {
+  const onDropdownToggle = (id: React.Key) => {
+    if (id && openDropdownKey !== id) {
       setOpenDropdownKey(id);
       return;
     }
@@ -176,7 +179,7 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
   };
 
   const removeAlert = (key: React.Key) => {
-    setAlerts(prevAlerts => prevAlerts.filter(alert => alert.props.id !== key.toString()));
+    setAlerts((prevAlerts) => prevAlerts.filter((alert) => alert.props.id !== key.toString()));
   };
 
   const removeAllAlerts = () => {
@@ -205,53 +208,62 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
   const alertButtonStyle = { marginRight: '8px', marginTop: '8px' };
 
   const notificationBadge = (
-    <NotificationBadge
-      variant={getNotificationBadgeVariant()}
-      onClick={onNotificationBadgeClick}
-      aria-label="Notifications"
-    ></NotificationBadge>
+    <ToolbarItem>
+      <NotificationBadge
+        variant={getNotificationBadgeVariant()}
+        onClick={onNotificationBadgeClick}
+        aria-label="Notifications"
+      ></NotificationBadge>
+    </ToolbarItem>
   );
 
-  const notificationDrawerActions = [
-    <DropdownItem key="markAllRead" onClick={markAllNotificationsRead} component="button">
-      Mark all read
-    </DropdownItem>,
-    <DropdownItem key="clearAll" onClick={removeAllNotifications} component="button">
-      Clear all
-    </DropdownItem>
-  ];
-
+  const notificationDrawerActions = (
+    <>
+      <DropdownItem key="markAllRead" onClick={markAllNotificationsRead}>
+        Mark all read
+      </DropdownItem>
+      <DropdownItem key="clearAll" onClick={removeAllNotifications}>
+        Clear all
+      </DropdownItem>
+    </>
+  );
   const notificationDrawerDropdownItems = (key: React.Key) => [
-    <DropdownItem key="markRead" component="button" onClick={() => markNotificationRead(key)}>
+    <DropdownItem key={`markRead-${key}`} onClick={() => markNotificationRead(key)}>
       Mark as read
     </DropdownItem>,
-    <DropdownItem key="action" component="button" onClick={() => removeNotification(key)}>
+    <DropdownItem key={`clear-${key}`} onClick={() => removeNotification(key)}>
       Clear
     </DropdownItem>
   ];
 
   const notificationDrawer = (
     <NotificationDrawer>
-      <NotificationDrawerHeader count={getUnreadNotificationsNumber()} onClose={() => setDrawerExpanded(false)}>
+      <NotificationDrawerHeader count={getUnreadNotificationsNumber()} onClose={(_event) => setDrawerExpanded(false)}>
         <Dropdown
-          onSelect={onDropdownSelect}
-          toggle={
-            <KebabToggle
-              onToggle={isActive => onDropdownToggle('dropdown-toggle-id-0', isActive)}
-              id="dropdown-toggle-id-0"
-            />
-          }
-          isOpen={openDropdownKey === 'dropdown-toggle-id-0'}
-          isPlain
-          dropdownItems={notificationDrawerActions}
           id="notification-drawer-0"
-          position={DropdownPosition.right}
-        />
+          isOpen={openDropdownKey === 'dropdown-toggle-id-0'}
+          onSelect={onDropdownSelect}
+          popperProps={{ position: 'right' }}
+          onOpenChange={(isOpen: boolean) => !isOpen && setOpenDropdownKey(null)}
+          toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+            <MenuToggle
+              ref={toggleRef}
+              isExpanded={openDropdownKey === 'dropdown-toggle-id-0'}
+              variant="plain"
+              onClick={() => onDropdownToggle('dropdown-toggle-id-0')}
+              aria-label="Notification drawer actions"
+            >
+              <EllipsisVIcon aria-hidden="true" />
+            </MenuToggle>
+          )}
+        >
+          <DropdownList>{notificationDrawerActions}</DropdownList>
+        </Dropdown>
       </NotificationDrawerHeader>
       <NotificationDrawerBody>
         {notifications.length !== 0 && (
           <NotificationDrawerList>
-            {notifications.map(({ key, variant, title, srTitle, description, timestamp }) => (
+            {notifications.map(({ key, variant, title, srTitle, description, timestamp }, index) => (
               <NotificationDrawerListItem
                 key={key}
                 variant={variant}
@@ -260,14 +272,25 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
               >
                 <NotificationDrawerListItemHeader variant={variant} title={title} srTitle={srTitle}>
                   <Dropdown
-                    position={DropdownPosition.right}
-                    onSelect={onDropdownSelect}
-                    toggle={<KebabToggle onToggle={isActive => onDropdownToggle(key, isActive)} id={key.toString()} />}
-                    isOpen={openDropdownKey === key}
-                    isPlain
-                    dropdownItems={notificationDrawerDropdownItems(key)}
                     id={key.toString()}
-                  />
+                    isOpen={openDropdownKey === key}
+                    onSelect={onDropdownSelect}
+                    popperProps={{ position: 'right' }}
+                    onOpenChange={(isOpen: boolean) => !isOpen && setOpenDropdownKey(null)}
+                    toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                      <MenuToggle
+                        ref={toggleRef}
+                        isExpanded={openDropdownKey === key}
+                        variant="plain"
+                        onClick={() => onDropdownToggle(key)}
+                        aria-label={`Notification ${index + 1} actions`}
+                      >
+                        <EllipsisVIcon aria-hidden="true" />
+                      </MenuToggle>
+                    )}
+                  >
+                    <DropdownList>{notificationDrawerDropdownItems(key)}</DropdownList>
+                  </Dropdown>
                 </NotificationDrawerListItemHeader>
                 <NotificationDrawerListItemBody timestamp={timestamp}> {description} </NotificationDrawerListItemBody>
               </NotificationDrawerListItem>
@@ -276,10 +299,11 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
         )}
         {notifications.length === 0 && (
           <EmptyState variant={EmptyStateVariant.full}>
-            <EmptyStateIcon icon={SearchIcon} />
-            <Title headingLevel="h2" size="lg">
-              No notifications found
-            </Title>
+            <EmptyStateHeader
+              headingLevel="h2"
+              titleText="No notifications found"
+              icon={<EmptyStateIcon icon={SearchIcon} />}
+            />
             <EmptyStateBody>There are currently no notifications.</EmptyStateBody>
           </EmptyState>
         )}

package/src/demos/examples/BackToTop/BackToTopNameDemo.tsx

@@ -17,7 +17,7 @@ import DashboardWrapper from '@patternfly/react-core/src/demos/examples/Dashboar
 export const Name = () => {
   const [isAlwaysVisible, setIsAlwaysVisible] = React.useState(false);
 
-  const handleChange = isChecked => {
+  const handleChange = (_event, isChecked) => {
     setIsAlwaysVisible(isChecked);
   };
 

package/src/demos/examples/DashboardHeader.js

@@ -1,7 +1,5 @@
 import React from 'react';
 import {
-  ApplicationLauncher,
-  ApplicationLauncherItem,
   Avatar,
   Brand,
   Button,
@@ -9,14 +7,14 @@ import {
   Divider,
   Dropdown,
   DropdownGroup,
-  DropdownToggle,
   DropdownItem,
-  KebabToggle,
+  DropdownList,
   Masthead,
   MastheadToggle,
   MastheadMain,
   MastheadBrand,
   MastheadContent,
+  MenuToggle,
   Toolbar,
   ToolbarContent,
   ToolbarGroup,
@@ -28,6 +26,7 @@ import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
 import pfColorLogo from '@patternfly/react-core/src/demos/examples/pfColorLogo.svg';
 
@@ -38,114 +37,74 @@ export default class DashboardHeader extends React.Component {
       isDropdownOpen: false,
       isKebabDropdownOpen: false,
       isFullKebabDropdownOpen: false,
-      isAppLauncherOpen: false,
       activeItem: 0
     };
 
-    this.onDropdownToggle = isDropdownOpen => {
-      this.setState({
-        isDropdownOpen
-      });
+    this.onDropdownToggle = () => {
+      this.setState((prevState) => ({
+        isDropdownOpen: !prevState.isDropdownOpen
+      }));
     };
 
     this.onDropdownSelect = () => {
       this.setState({
-        isDropdownOpen: !this.state.isDropdownOpen
+        isDropdownOpen: false
       });
     };
 
-    this.onKebabDropdownToggle = isKebabDropdownOpen => {
-      this.setState({
-        isKebabDropdownOpen
-      });
+    this.onKebabDropdownToggle = () => {
+      this.setState((prevState) => ({
+        isKebabDropdownOpen: !prevState.isKebabDropdownOpen
+      }));
     };
 
     this.onKebabDropdownSelect = () => {
       this.setState({
-        isKebabDropdownOpen: !this.state.isKebabDropdownOpen
+        isKebabDropdownOpen: false
       });
     };
 
-    this.onFullKebabToggle = isFullKebabDropdownOpen => {
-      this.setState({
-        isFullKebabDropdownOpen
-      });
+    this.onFullKebabToggle = () => {
+      this.setState((prevState) => ({
+        isFullKebabDropdownOpen: !prevState.isFullKebabDropdownOpen
+      }));
     };
 
     this.onFullKebabSelect = () => {
       this.setState({
-        isFullKebabDropdownOpen: !this.state.isFullKebabDropdownOpen
-      });
-    };
-
-    this.onAppLauncherToggle = isAppLauncherOpen => {
-      this.setState({
-        isAppLauncherOpen
-      });
-    };
-
-    this.onAppLauncherSelect = () => {
-      this.setState({
-        isAppLauncherOpen: !this.state.isAppLauncherOpen
+        isFullKebabDropdownOpen: false
       });
     };
   }
 
   render() {
-    const { isDropdownOpen, isKebabDropdownOpen, isFullKebabDropdownOpen, isAppLauncherOpen } = this.state;
+    const { isDropdownOpen, isKebabDropdownOpen, isFullKebabDropdownOpen } = this.state;
     const { notificationBadge } = this.props;
 
-    const kebabDropdownItems = [
-      <DropdownItem key="settings">
-        <CogIcon /> Settings
-      </DropdownItem>,
-      <DropdownItem key="help">
-        <HelpIcon /> Help
-      </DropdownItem>
-    ];
-
-    const fullKebabItems = [
-      <DropdownGroup key="group 2">
-        <DropdownItem key="group 2 profile">My profile</DropdownItem>
-        <DropdownItem key="group 2 user" component="button">
-          User management
+    const kebabDropdownItems = (
+      <>
+        <DropdownItem>
+          <CogIcon /> Settings
         </DropdownItem>
-        <DropdownItem key="group 2 logout">Logout</DropdownItem>
-      </DropdownGroup>,
-      <Divider key="divider" />,
-      <DropdownItem key="settings">
-        <CogIcon /> Settings
-      </DropdownItem>,
-      <DropdownItem key="help">
-        <HelpIcon /> Help
-      </DropdownItem>
-    ];
-
-    const userDropdownItems = [
-      <DropdownGroup key="group 2">
-        <DropdownItem key="group 2 profile">My profile</DropdownItem>
-        <DropdownItem key="group 2 user" component="button">
-          User management
+        <DropdownItem>
+          <HelpIcon /> Help
         </DropdownItem>
+      </>
+    );
+    const userDropdownItems = (
+      <>
+        <DropdownItem key="group 2 profile">My profile</DropdownItem>
+        <DropdownItem key="group 2 user">User management</DropdownItem>
         <DropdownItem key="group 2 logout">Logout</DropdownItem>
-      </DropdownGroup>
-    ];
-
-    const appLauncherItems = [
-      <ApplicationLauncherItem key="application_1a" href="#">
-        Application 1 (anchor link)
-      </ApplicationLauncherItem>,
-      <ApplicationLauncherItem key="application_2a" component="button" onClick={() => alert('Clicked item 2')}>
-        Application 2 (button with onClick)
-      </ApplicationLauncherItem>
-    ];
+      </>
+    );
 
     const headerToolbar = (
       <Toolbar id="toolbar" isFullHeight isStatic>
         <ToolbarContent>
           <ToolbarGroup
             variant="icon-button-group"
-            alignment={{ default: 'alignRight' }}
+            align={{ default: 'alignRight' }}
             spacer={{ default: 'spacerNone', md: 'spacerMd' }}
           >
             {notificationBadge ? (
@@ -161,14 +120,6 @@ export default class DashboardHeader extends React.Component {
               </ToolbarItem>
             )}
             <ToolbarGroup variant="icon-button-group" visibility={{ default: 'hidden', lg: 'visible' }}>
-              <ToolbarItem>
-                <ApplicationLauncher
-                  onSelect={this.onAppLauncherSelect}
-                  onToggle={this.onAppLauncherToggle}
-                  isOpen={isAppLauncherOpen}
-                  items={appLauncherItems}
-                />
-              </ToolbarItem>
               <ToolbarItem>
                 <Button aria-label="Settings" variant={ButtonVariant.plain} icon={<CogIcon />} />
               </ToolbarItem>
@@ -178,37 +129,71 @@ export default class DashboardHeader extends React.Component {
             </ToolbarGroup>
             <ToolbarItem visibility={{ default: 'hidden', md: 'visible', lg: 'hidden' }}>
               <Dropdown
-                isPlain
-                position="right"
-                onSelect={this.onKebabDropdownSelect}
-                toggle={<KebabToggle onToggle={this.onKebabDropdownToggle} />}
                 isOpen={isKebabDropdownOpen}
-                dropdownItems={kebabDropdownItems}
-              />
+                onSelect={this.onKebabDropdownSelect}
+                onOpenChange={(isOpen) => this.setState({ isKebabDropdownOpen: isOpen })}
+                popperProps={{ position: 'right' }}
+                toggle={(toggleRef) => (
+                  <MenuToggle
+                    ref={toggleRef}
+                    isExpanded={isKebabDropdownOpen}
+                    onClick={this.onKebabDropdownToggle}
+                    variant="plain"
+                    aria-label="Settings and help"
+                  >
+                    <EllipsisVIcon aria-hidden="true" />
+                  </MenuToggle>
+                )}
+              >
+                <DropdownList>{kebabDropdownItems}</DropdownList>
+              </Dropdown>
             </ToolbarItem>
             <ToolbarItem visibility={{ md: 'hidden' }}>
               <Dropdown
-                isPlain
-                position="right"
-                onSelect={this.onFullKebabSelect}
-                toggle={<KebabToggle onToggle={this.onFullKebabToggle} />}
                 isOpen={isFullKebabDropdownOpen}
-                dropdownItems={fullKebabItems}
-              />
+                onSelect={this.onFullKebabSelect}
+                onOpenChange={(isOpen) => this.setState({ isFullKebabDropdownOpen: isOpen })}
+                popperProps={{ position: 'right' }}
+                toggle={(toggleRef) => (
+                  <MenuToggle
+                    ref={toggleRef}
+                    isExpanded={isFullKebabDropdownOpen}
+                    onClick={this.onFullKebabToggle}
+                    variant="plain"
+                    aria-label="Toolbar menu"
+                  >
+                    <EllipsisVIcon aria-hidden="true" />
+                  </MenuToggle>
+                )}
+              >
+                <DropdownGroup key="group 2" aria-label="User actions">
+                  <DropdownList>{userDropdownItems}</DropdownList>
+                </DropdownGroup>
+                <Divider />
+                <DropdownList>{kebabDropdownItems}</DropdownList>
+              </Dropdown>
             </ToolbarItem>
           </ToolbarGroup>
           <ToolbarItem visibility={{ default: 'hidden', md: 'visible' }}>
             <Dropdown
-              isFullHeight
-              onSelect={this.onDropdownSelect}
               isOpen={isDropdownOpen}
-              toggle={
-                <DropdownToggle icon={<Avatar src={imgAvatar} alt="Avatar" />} onToggle={this.onDropdownToggle}>
+              onSelect={this.onDropdownSelect}
+              onOpenChange={(isOpen) => this.setState({ isDropdownOpen: isOpen })}
+              popperProps={{ position: 'right' }}
+              toggle={(toggleRef) => (
+                <MenuToggle
+                  ref={toggleRef}
+                  isExpanded={isDropdownOpen}
+                  onClick={this.onDropdownToggle}
+                  icon={<Avatar src={imgAvatar} alt="" />}
+                  isFullHeight
+                >
                   Ned Username
-                </DropdownToggle>
-              }
-              dropdownItems={userDropdownItems}
-            />
+                </MenuToggle>
+              )}
+            >
+              <DropdownList>{userDropdownItems}</DropdownList>
+            </Dropdown>
           </ToolbarItem>
         </ToolbarContent>
       </Toolbar>

package/src/demos/examples/DashboardWrapper.js

@@ -8,6 +8,7 @@ import {
   Page,
   PageSection,
   PageSidebar,
+  PageSidebarBody,
   SkipToContent,
   Text,
   TextContent
@@ -41,7 +42,7 @@ export default class DashboardWrapper extends React.Component {
       activeItem: 1
     };
 
-    this.onNavSelect = result => {
+    this.onNavSelect = (_event, result) => {
       this.setState({
         activeItem: result.itemId
       });
@@ -57,7 +58,7 @@ export default class DashboardWrapper extends React.Component {
       header,
       sidebar,
       sidebarNavOpen,
-      onPageResize,
+      onPageResize = () => {},
       hasNoBreadcrumb,
       notificationDrawer,
       isNotificationDrawerExpanded,
@@ -92,7 +93,11 @@ export default class DashboardWrapper extends React.Component {
       </Nav>
     );
 
-    const _sidebar = <PageSidebar nav={PageNav} isNavOpen={sidebarNavOpen || false} />;
+    const _sidebar = (
+      <PageSidebar isSidebarOpen={sidebarNavOpen || false}>
+        <PageSidebarBody>{PageNav}</PageSidebarBody>
+      </PageSidebar>
+    );
     const PageSkipToContent = (
       <SkipToContent href={`#${mainContainerId ? mainContainerId : 'main-content-page-layout-default-nav'}`}>
         Skip to content
@@ -109,7 +114,7 @@ export default class DashboardWrapper extends React.Component {
         mainContainerId={mainContainerId ? mainContainerId : 'main-content-page-layout-default-nav'}
         notificationDrawer={notificationDrawer}
         isNotificationDrawerExpanded={isNotificationDrawerExpanded}
-        onPageResize={onPageResize}
+        {...(typeof onPageResize === 'function' && { onPageResize: (event) => onPageResize(event) })}
         {...pageProps}
       >
         {hasPageTemplateTitle && PageTemplateTitle}