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

package/src/demos/Tabs.md

@@ -11,6 +11,8 @@ import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-i
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import { KebabToggle } from '@patternfly/react-core/deprecated';
 
 ## Demos
 
@@ -440,19 +442,23 @@ TabsOpenWithSecondaryTabsDemo = () => {
 ### Nested tabs
 
 ```js isFullscreen file="./examples/Tabs/NestedTabs.tsx"
+
 ```
 
 ### Nested, unindented tabs
 
 ```js isFullscreen file="./examples/Tabs/NestedUnindentedTabs.tsx"
+
 ```
 
 ### Tables and tabs
 
 ```js isFullscreen file="./examples/Tabs/TabsAndTable.tsx"
+
 ```
 
 ### Modal tabs
 
 ```js isFullscreen file="./examples/Tabs/ModalTabs.tsx"
+
 ```

package/src/demos/Toolbar.md

@@ -4,6 +4,14 @@ section: components
 ---
 
 import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
+import {
+Dropdown as DropdownDeprecated,
+DropdownItem as DropdownItemDeprecated,
+DropdownToggle,
+DropdownToggleAction,
+DropdownPosition,
+DropdownSeparator
+} from '@patternfly/react-core/deprecated';
 
 import PauseIcon from '@patternfly/react-icons/dist/esm/icons/pause-icon';
 import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
@@ -27,12 +35,6 @@ import {
   Badge,
   Button,
   Checkbox,
-  Dropdown,
-  DropdownItem,
-  DropdownToggle,
-  DropdownToggleAction,
-  DropdownPosition,
-  DropdownSeparator,
   SearchInput,
   Select,
   SelectOption,
@@ -40,6 +42,14 @@ import {
   PageSectionVariants,
   Tooltip
 } from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownItem as DropdownItemDeprecated,
+  DropdownToggle,
+  DropdownToggleAction,
+  DropdownPosition,
+  DropdownSeparator
+} from '@patternfly/react-core/deprecated';
 import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 
 import PauseIcon from '@patternfly/react-icons/dist/esm/icons/pause-icon';
@@ -80,13 +90,13 @@ class ConsoleLogViewerToolbar extends React.Component {
       mobileView: window.innerWidth >= 1450 ? false : true
     };
 
-    this.onContainerToggle = isExpanded => {
+    this.onContainerToggle = (_event, isExpanded) => {
       this.setState({
         containerExpanded: isExpanded
       });
     };
 
-    this.onContainerToggleMobile = isExpanded => {
+    this.onContainerToggleMobile = (_event, isExpanded) => {
       this.setState({
         containerExpandedMobile: isExpanded
       });
@@ -106,115 +116,115 @@ class ConsoleLogViewerToolbar extends React.Component {
       });
     };
 
-    this.onOptionToggle = isExpanded => {
+    this.onOptionToggle = (_event, isExpanded) => {
       this.setState({
         optionExpanded: isExpanded
       });
     };
 
-    this.onOptionToggleMobile = isExpanded => {
+    this.onOptionToggleMobile = (_event, isExpanded) => {
       this.setState({
         optionExpandedMobile: isExpanded
       });
     };
 
-    this.onOptionSelect = event => {
+    this.onOptionSelect = (event) => {
       this.setState({
         optionExpanded: !this.state.optionExpanded
       });
     };
 
-    this.onOptionSelectMobile = event => {
+    this.onOptionSelectMobile = (event) => {
       this.setState({
         optionExpandedMobile: !this.state.optionExpandedMobile
       });
     };
 
-    this.onExternalToggle = isExpanded => {
+    this.onExternalToggle = (_event, isExpanded) => {
       this.setState({
         externalExpanded: isExpanded
       });
     };
 
-    this.onExternalToggleMobile = isExpanded => {
+    this.onExternalToggleMobile = (_event, isExpanded) => {
       this.setState({
         externalExpandedMobile: isExpanded
       });
     };
 
-    this.onExternalSelect = event => {
+    this.onExternalSelect = (event) => {
       this.setState({
         externalExpanded: !this.state.externalExpanded
       });
     };
 
-    this.onExternalSelectMobile = event => {
+    this.onExternalSelectMobile = (event) => {
       this.setState({
         externalExpandedMobile: !this.state.externalExpandedMobile
       });
     };
 
-    this.onDownloadToggle = isExpanded => {
+    this.onDownloadToggle = (_event, isExpanded) => {
       this.setState({
         downloadExpanded: isExpanded
       });
     };
 
-    this.onDownloadToggleMobile = isExpanded => {
+    this.onDownloadToggleMobile = (_event, isExpanded) => {
       this.setState({
         downloadExpandedMobile: isExpanded
       });
     };
 
-    this.onDownloadSelect = event => {
+    this.onDownloadSelect = (event) => {
       this.setState({
         downloadExpanded: !this.state.downloadExpanded
       });
     };
 
-    this.onDownloadSelectMobile = event => {
+    this.onDownloadSelectMobile = (event) => {
       this.setState({
         downloadExpandedMobile: !this.state.downloadExpandedMobile
       });
     };
 
-    this.onExternalClick = event => {
+    this.onExternalClick = (event) => {
       window.alert('Open external logs!');
     };
 
-    this.onDownloadClick = event => {
+    this.onDownloadClick = (event) => {
       window.alert('Action!');
     };
 
-    this.pauseOrStart = event => {
+    this.pauseOrStart = (event) => {
       this.setState({
         isPaused: !this.state.isPaused
       });
     };
 
-    this.handleFirstSwitchChange = (firstSwitchChecked, event) => {
+    this.handleFirstSwitchChange = (event, firstSwitchChecked) => {
       this.setState({ firstSwitchChecked });
     };
 
-    this.handleSecondSwitchChange = (secondSwitchChecked, event) => {
+    this.handleSecondSwitchChange = (event, secondSwitchChecked) => {
       this.setState({ secondSwitchChecked });
     };
 
-    this.onClearLogs = event => {
+    this.onClearLogs = (event) => {
       this.setState({
         optionExpanded: false
       });
       window.alert('Clear Logs!');
     };
 
-    this.onSearchChange = (value, event) => {
+    this.onSearchChange = (event, value) => {
       this.setState({
         searchValue: value,
         searchResultsCount: 3
       });
     };
 
-    this.onSearchClear = event => {
+    this.onSearchClear = (event) => {
       this.setState({
         searchValue: '',
         searchResultsCount: 0,
@@ -222,8 +232,8 @@ class ConsoleLogViewerToolbar extends React.Component {
       });
     };
 
-    this.onSearchNext = event => {
-      this.setState(prevState => {
+    this.onSearchNext = (event) => {
+      this.setState((prevState) => {
         const newCurrentResult = prevState.currentSearchResult + 1;
         return {
           currentSearchResult:
@@ -232,8 +242,8 @@ class ConsoleLogViewerToolbar extends React.Component {
       });
     };
 
-    this.onSearchPrevious = event => {
-      this.setState(prevState => {
+    this.onSearchPrevious = (event) => {
+      this.setState((prevState) => {
         const newCurrentResult = prevState.currentSearchResult - 1;
         return {
           currentSearchResult: newCurrentResult > 0 ? newCurrentResult : 1
@@ -276,28 +286,28 @@ class ConsoleLogViewerToolbar extends React.Component {
     } = this.state;
 
     const externalDropdownItems = [
-      <DropdownItem key="action-1" component="button" onClick={this.onExternalClick}>
+      <DropdownItemDeprecated key="action-1" component="button" onClick={this.onExternalClick}>
         External logs
-      </DropdownItem>,
-      <DropdownItem key="action-2" component="button" onClick={this.onExternalClick}>
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="action-2" component="button" onClick={this.onExternalClick}>
         External logs
-      </DropdownItem>,
-      <DropdownItem key="action-3" component="button" onClick={this.onExternalClick}>
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="action-3" component="button" onClick={this.onExternalClick}>
         External logs
-      </DropdownItem>
+      </DropdownItemDeprecated>
     ];
 
     const downloadDropdownItems = [
-      <DropdownItem key="action-4" component="button" onClick={this.onDownloadClick}>
+      <DropdownItemDeprecated key="action-4" component="button" onClick={this.onDownloadClick}>
         Current container logs
-      </DropdownItem>,
-      <DropdownItem key="action-5" component="button" onClick={this.onDownloadClick}>
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="action-5" component="button" onClick={this.onDownloadClick}>
         All container logs
-      </DropdownItem>
+      </DropdownItemDeprecated>
     ];
 
     const optionDropdownItems = [
-      <DropdownItem key="switch-1">
+      <DropdownItemDeprecated key="switch-1">
         <Checkbox
           label="Display timestamp"
           isChecked={firstSwitchChecked}
@@ -305,8 +315,8 @@ class ConsoleLogViewerToolbar extends React.Component {
           id="switchMobileCheckbox1"
           name="check1"
         />
-      </DropdownItem>,
-      <DropdownItem key="switch-2">
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="switch-2">
         <Checkbox
           label="Wrap lines"
           isChecked={secondSwitchChecked}
@@ -314,11 +324,11 @@ class ConsoleLogViewerToolbar extends React.Component {
           id="switchMobileCheckbox2"
           name="check2"
         />
-      </DropdownItem>,
+      </DropdownItemDeprecated>,
       <DropdownSeparator key="separator" />,
-      <DropdownItem key="clear-log" onClick={this.onClearLogs}>
+      <DropdownItemDeprecated key="clear-log" onClick={this.onClearLogs}>
         Clear logs
-      </DropdownItem>
+      </DropdownItemDeprecated>
     ];
 
     const selectDropdownContent = (
@@ -378,7 +388,7 @@ class ConsoleLogViewerToolbar extends React.Component {
           />
         </ToolbarItem>
         <ToolbarItem visibility={{ default: 'hidden', '2xl': 'visible' }}>
-          <Dropdown
+          <DropdownDeprecated
             toggle={
               <DropdownToggle id="option-toggle-desktop" onToggle={this.onOptionToggle} icon={<CogIcon />}>
                 Options
@@ -413,9 +423,14 @@ class ConsoleLogViewerToolbar extends React.Component {
         </ToolbarItem>
         <ToolbarItem visibility={{ default: 'visible', '2xl': 'hidden' }}>
           <Tooltip position="top" content={<div>Options</div>}>
-            <Dropdown
+            <DropdownDeprecated
               toggle={
-                <DropdownToggle aria-label="Options" id="option-toggle-mobile" onToggle={this.onOptionToggleMobile} icon={<CogIcon />} />
+                <DropdownToggle
+                  aria-label="Options"
+                  id="option-toggle-mobile"
+                  onToggle={this.onOptionToggleMobile}
+                  icon={<CogIcon />}
+                />
               }
               isOpen={optionExpandedMobile}
               dropdownItems={optionDropdownItems}
@@ -442,7 +457,7 @@ class ConsoleLogViewerToolbar extends React.Component {
     const rightAlignedItemsDesktop = (
       <React.Fragment>
         <ToolbarItem visibility={{ default: 'hidden', '2xl': 'visible' }}>
-          <Dropdown
+          <DropdownDeprecated
             onSelect={this.onExternalSelect}
             toggle={
               <DropdownToggle id="external-toggle" onToggle={this.onExternalToggle}>
@@ -454,7 +469,7 @@ class ConsoleLogViewerToolbar extends React.Component {
           />
         </ToolbarItem>
         <ToolbarItem visibility={{ default: 'hidden', '2xl': 'visible' }}>
-          <Dropdown
+          <DropdownDeprecated
             onSelect={this.onDownloadSelect}
             toggle={
               <DropdownToggle id="download-toggle" onToggle={this.onDownloadToggle}>
@@ -472,7 +487,7 @@ class ConsoleLogViewerToolbar extends React.Component {
       <React.Fragment>
         <ToolbarItem visibility={{ default: 'visible', '2xl': 'hidden' }}>
           <Tooltip position="top" content={<div>External logs</div>}>
-            <Dropdown
+            <DropdownDeprecated
               onSelect={this.onExternalSelectMobile}
               toggle={
                 <DropdownToggle
@@ -489,7 +504,7 @@ class ConsoleLogViewerToolbar extends React.Component {
         </ToolbarItem>
         <ToolbarItem visibility={{ default: 'visible', '2xl': 'hidden' }}>
           <Tooltip position="top" content={<div>Download</div>}>
-            <Dropdown
+            <DropdownDeprecated
               onSelect={this.onDownloadSelectMobile}
               toggle={
                 <DropdownToggle
@@ -525,8 +540,8 @@ class ConsoleLogViewerToolbar extends React.Component {
 
     const items = (
       <React.Fragment>
-        <ToolbarGroup alignment={{ default: 'alignLeft' }}>{leftAlignedItems}</ToolbarGroup>
-        <ToolbarGroup alignment={{ default: 'alignRight' }}>{rightAlignedItems}</ToolbarGroup>
+        <ToolbarGroup align={{ default: 'alignLeft' }}>{leftAlignedItems}</ToolbarGroup>
+        <ToolbarGroup align={{ default: 'alignRight' }}>{rightAlignedItems}</ToolbarGroup>
       </React.Fragment>
     );
 

package/src/demos/Wizard/WizardDemo.md

@@ -289,6 +289,7 @@ class WizardModalWithDrawerDemo extends React.Component {
           navAriaLabel={`${title} steps`}
           hasDrawer
           isDrawerExpanded={isDrawerExpanded}
+          onExpandDrawer={this.onExpand}
           mainAriaLabel={`${title} content`}
           titleId="wiz-modal-demo-title"
           descriptionId="wiz-modal-demo-description"
@@ -539,6 +540,7 @@ class WizardModalWithDrawerDemo extends React.Component {
           navAriaLabel={`${title} steps`}
           hasDrawer
           isDrawerExpanded={isDrawerExpanded}
+          onExpandDrawer={this.onExpand}
           mainAriaLabel={`${title} content`}
           titleId="wiz-modal-demo-title"
           descriptionId="wiz-modal-demo-description"
@@ -877,6 +879,7 @@ class FullPageWizard extends React.Component {
             <Wizard
               hasDrawer
               isDrawerExpanded={isDrawerExpanded}
+              onExpandDrawer={this.onExpand}
               navAriaLabel={`${title} steps`}
               mainAriaLabel={`${title} content`}
               steps={steps}
@@ -1194,6 +1197,7 @@ class FullPageWizard extends React.Component {
             <Wizard
               hasDrawer
               isDrawerExpanded={isDrawerExpanded}
+              onExpandDrawer={this.onExpand}
               navAriaLabel={`${title} steps`}
               mainAriaLabel={`${title} content`}
               steps={steps}

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,8 +18,6 @@ import {
   PageSectionVariants,
   TextContent,
   Text,
-  Title,
-  DropdownPosition,
   EmptyStateVariant,
   NumberInput,
   Alert,
@@ -29,6 +25,12 @@ import {
   AlertGroup,
   AlertActionCloseButton
 } from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownItem as DropdownItemDeprecated,
+  KebabToggle,
+  DropdownPosition
+} from '@patternfly/react-core/deprecated';
 
 import SearchIcon from '@patternfly/react-icons/dist/js/icons/search-icon';
 import DashboardWrapper from '../DashboardWrapper';
@@ -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) {
@@ -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 = () => {
@@ -213,31 +216,31 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
   );
 
   const notificationDrawerActions = [
-    <DropdownItem key="markAllRead" onClick={markAllNotificationsRead} component="button">
+    <DropdownItemDeprecated key="markAllRead" onClick={markAllNotificationsRead} component="button">
       Mark all read
-    </DropdownItem>,
-    <DropdownItem key="clearAll" onClick={removeAllNotifications} component="button">
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="clearAll" onClick={removeAllNotifications} component="button">
       Clear all
-    </DropdownItem>
+    </DropdownItemDeprecated>
   ];
 
   const notificationDrawerDropdownItems = (key: React.Key) => [
-    <DropdownItem key="markRead" component="button" onClick={() => markNotificationRead(key)}>
+    <DropdownItemDeprecated key="markRead" component="button" onClick={() => markNotificationRead(key)}>
       Mark as read
-    </DropdownItem>,
-    <DropdownItem key="action" component="button" onClick={() => removeNotification(key)}>
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="action" component="button" onClick={() => removeNotification(key)}>
       Clear
-    </DropdownItem>
+    </DropdownItemDeprecated>
   ];
 
   const notificationDrawer = (
     <NotificationDrawer>
       <NotificationDrawerHeader count={getUnreadNotificationsNumber()} onClose={() => setDrawerExpanded(false)}>
-        <Dropdown
+        <DropdownDeprecated
           onSelect={onDropdownSelect}
           toggle={
             <KebabToggle
-              onToggle={isActive => onDropdownToggle('dropdown-toggle-id-0', isActive)}
+              onToggle={(_event: any, isActive: boolean) => onDropdownToggle('dropdown-toggle-id-0', isActive)}
               id="dropdown-toggle-id-0"
             />
           }
@@ -259,10 +262,15 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
                 onClick={() => markNotificationRead(key)}
               >
                 <NotificationDrawerListItemHeader variant={variant} title={title} srTitle={srTitle}>
-                  <Dropdown
+                  <DropdownDeprecated
                     position={DropdownPosition.right}
                     onSelect={onDropdownSelect}
-                    toggle={<KebabToggle onToggle={isActive => onDropdownToggle(key, isActive)} id={key.toString()} />}
+                    toggle={
+                      <KebabToggle
+                        onToggle={(_event: any, isActive: boolean) => onDropdownToggle(key, isActive)}
+                        id={key.toString()}
+                      />
+                    }
                     isOpen={openDropdownKey === key}
                     isPlain
                     dropdownItems={notificationDrawerDropdownItems(key)}
@@ -276,10 +284,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>
         )}