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

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';
@@ -118,13 +128,13 @@ class ConsoleLogViewerToolbar extends React.Component {
       });
     };
 
-    this.onOptionSelect = event => {
+    this.onOptionSelect = (event) => {
       this.setState({
         optionExpanded: !this.state.optionExpanded
       });
     };
 
-    this.onOptionSelectMobile = event => {
+    this.onOptionSelectMobile = (event) => {
       this.setState({
         optionExpandedMobile: !this.state.optionExpandedMobile
       });
@@ -142,13 +152,13 @@ class ConsoleLogViewerToolbar extends React.Component {
       });
     };
 
-    this.onExternalSelect = event => {
+    this.onExternalSelect = (event) => {
       this.setState({
         externalExpanded: !this.state.externalExpanded
       });
     };
 
-    this.onExternalSelectMobile = event => {
+    this.onExternalSelectMobile = (event) => {
       this.setState({
         externalExpandedMobile: !this.state.externalExpandedMobile
       });
@@ -166,27 +176,27 @@ class ConsoleLogViewerToolbar extends React.Component {
       });
     };
 
-    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
       });
@@ -200,7 +210,7 @@ class ConsoleLogViewerToolbar extends React.Component {
       this.setState({ secondSwitchChecked });
     };
 
-    this.onClearLogs = event => {
+    this.onClearLogs = (event) => {
       this.setState({
         optionExpanded: false
       });
@@ -214,7 +224,7 @@ class ConsoleLogViewerToolbar extends React.Component {
       });
     };
 
-    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,7 +423,7 @@ 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"
@@ -447,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}>
@@ -459,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}>
@@ -477,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
@@ -494,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

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

@@ -1,13 +1,10 @@
 import React, { useEffect } from 'react';
 import {
   Button,
-  Dropdown,
-  DropdownItem,
   EmptyState,
   EmptyStateBody,
   EmptyStateHeader,
   EmptyStateIcon,
-  KebabToggle,
   NotificationBadge,
   NotificationBadgeVariant,
   NotificationDrawer,
@@ -21,7 +18,6 @@ import {
   PageSectionVariants,
   TextContent,
   Text,
-  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';
@@ -214,27 +216,27 @@ 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
@@ -260,7 +262,7 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
                 onClick={() => markNotificationRead(key)}
               >
                 <NotificationDrawerListItemHeader variant={variant} title={title} srTitle={srTitle}>
-                  <Dropdown
+                  <DropdownDeprecated
                     position={DropdownPosition.right}
                     onSelect={onDropdownSelect}
                     toggle={

package/src/demos/examples/DashboardHeader.js

@@ -7,11 +7,6 @@ import {
   Button,
   ButtonVariant,
   Divider,
-  Dropdown,
-  DropdownGroup,
-  DropdownToggle,
-  DropdownItem,
-  KebabToggle,
   Masthead,
   MastheadToggle,
   MastheadMain,
@@ -23,6 +18,13 @@ import {
   ToolbarItem,
   PageToggleButton
 } from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownGroup as DropdownGroupDeprecated,
+  DropdownToggle,
+  DropdownItem as DropdownItemDeprecated,
+  KebabToggle
+} from '@patternfly/react-core/deprecated';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
@@ -96,39 +98,39 @@ export default class DashboardHeader extends React.Component {
     const { notificationBadge } = this.props;
 
     const kebabDropdownItems = [
-      <DropdownItem key="settings">
+      <DropdownItemDeprecated key="settings">
         <CogIcon /> Settings
-      </DropdownItem>,
-      <DropdownItem key="help">
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="help">
         <HelpIcon /> Help
-      </DropdownItem>
+      </DropdownItemDeprecated>
     ];
 
     const fullKebabItems = [
-      <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>,
       <Divider key="divider" />,
-      <DropdownItem key="settings">
+      <DropdownItemDeprecated key="settings">
         <CogIcon /> Settings
-      </DropdownItem>,
-      <DropdownItem key="help">
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="help">
         <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 appLauncherItems = [
@@ -167,6 +169,7 @@ export default class DashboardHeader extends React.Component {
                   onToggle={this.onAppLauncherToggle}
                   isOpen={isAppLauncherOpen}
                   items={appLauncherItems}
+                  toggleId="dashboard-header-app-launcher"
                 />
               </ToolbarItem>
               <ToolbarItem>
@@ -177,7 +180,7 @@ export default class DashboardHeader extends React.Component {
               </ToolbarItem>
             </ToolbarGroup>
             <ToolbarItem visibility={{ default: 'hidden', md: 'visible', lg: 'hidden' }}>
-              <Dropdown
+              <DropdownDeprecated
                 isPlain
                 position="right"
                 onSelect={this.onKebabDropdownSelect}
@@ -187,7 +190,7 @@ export default class DashboardHeader extends React.Component {
               />
             </ToolbarItem>
             <ToolbarItem visibility={{ md: 'hidden' }}>
-              <Dropdown
+              <DropdownDeprecated
                 isPlain
                 position="right"
                 onSelect={this.onFullKebabSelect}
@@ -198,7 +201,7 @@ export default class DashboardHeader extends React.Component {
             </ToolbarItem>
           </ToolbarGroup>
           <ToolbarItem visibility={{ default: 'hidden', md: 'visible' }}>
-            <Dropdown
+            <DropdownDeprecated
               isFullHeight
               onSelect={this.onDropdownSelect}
               isOpen={isDropdownOpen}

package/src/demos/examples/DateTimePicker/DateTimePicker.tsx

@@ -1,14 +1,10 @@
 import React from 'react';
+import { CalendarMonth, InputGroup, TextInput, Button, Popover } from '@patternfly/react-core';
 import {
-  Dropdown,
+  Dropdown as DropdownDeprecated,
   DropdownToggle,
-  DropdownItem,
-  CalendarMonth,
-  InputGroup,
-  TextInput,
-  Button,
-  Popover
-} from '@patternfly/react-core';
+  DropdownItem as DropdownItemDeprecated
+} from '@patternfly/react-core/deprecated';
 import OutlinedCalendarAltIcon from '@patternfly/react-icons/dist/esm/icons/outlined-calendar-alt-icon';
 import OutlinedClockIcon from '@patternfly/react-icons/dist/esm/icons/outlined-clock-icon';
 
@@ -47,16 +43,16 @@ export const DateTimePicker: React.FunctionComponent = () => {
     setIsTimeOpen(!isTimeOpen);
   };
 
-  const timeOptions = times.map(time => (
-    <DropdownItem key={time} component="button" value={`${time}:00`}>
+  const timeOptions = times.map((time) => (
+    <DropdownItemDeprecated key={time} component="button" value={`${time}:00`}>
       {`${time}:00`}
-    </DropdownItem>
+    </DropdownItemDeprecated>
   ));
 
   const calendar = <CalendarMonth date={new Date(valueDate)} onChange={onSelectCalendar} />;
 
   const time = (
-    <Dropdown
+    <DropdownDeprecated
       onSelect={onSelectTime}
       toggle={
         <DropdownToggle

package/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx

@@ -11,13 +11,8 @@ import {
   Card,
   CardBody,
   Divider,
-  Dropdown,
-  DropdownGroup,
-  DropdownItem,
-  DropdownToggle,
   Gallery,
   GalleryItem,
-  KebabToggle,
   Masthead,
   MastheadBrand,
   MastheadContent,
@@ -39,6 +34,13 @@ import {
   ToolbarGroup,
   ToolbarItem
 } from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownGroup as DropdownGroupDeprecated,
+  DropdownItem as DropdownItemDeprecated,
+  DropdownToggle,
+  KebabToggle
+} from '@patternfly/react-core/deprecated';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
@@ -108,39 +110,39 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
   );
 
   const kebabDropdownItems = [
-    <DropdownItem key="settings">
+    <DropdownItemDeprecated key="settings">
       <CogIcon /> Settings
-    </DropdownItem>,
-    <DropdownItem key="help">
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="help">
       <HelpIcon /> Help
-    </DropdownItem>
+    </DropdownItemDeprecated>
   ];
 
   const fullKebabDropdownItems = [
-    <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>,
     <Divider key="divider" />,
-    <DropdownItem key="settings">
+    <DropdownItemDeprecated key="settings">
       <CogIcon /> Settings
-    </DropdownItem>,
-    <DropdownItem key="help">
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="help">
       <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 appLauncherItems = [
@@ -170,6 +172,7 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
                 onToggle={onAppLauncherToggle}
                 isOpen={isAppLauncherOpen}
                 items={appLauncherItems}
+                toggleId="dashboard-header-app-launcher"
               />
             </ToolbarItem>
             <ToolbarItem>
@@ -180,7 +183,7 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
             </ToolbarItem>
           </ToolbarGroup>
           <ToolbarItem visibility={{ default: 'hidden', md: 'visible', lg: 'hidden' }}>
-            <Dropdown
+            <DropdownDeprecated
               isPlain
               position="right"
               onSelect={onKebabDropdownSelect}
@@ -190,7 +193,7 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
             />
           </ToolbarItem>
           <ToolbarItem visibility={{ md: 'hidden' }}>
-            <Dropdown
+            <DropdownDeprecated
               isPlain
               position="right"
               onSelect={onFullKebabDropdownSelect}
@@ -201,7 +204,7 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
           </ToolbarItem>
         </ToolbarGroup>
         <ToolbarItem visibility={{ default: 'hidden', md: 'visible' }}>
-          <Dropdown
+          <DropdownDeprecated
             isFullHeight
             onSelect={onDropdownSelect}
             isOpen={isDropdownOpen}