@patternfly/react-core 5.0.0-alpha.7 → 5.0.0-alpha.71

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';
@@ -22,24 +30,32 @@ This is an example of toolbar usage in log viewer.
 
 ```js isFullscreen
 import React from 'react';
-import { Toolbar, ToolbarContent, ToolbarGroup, ToolbarItem, ToolbarToggleGroup } from '@patternfly/react-core';
 import {
   Badge,
   Button,
   Checkbox,
-  Dropdown,
-  DropdownItem,
-  DropdownToggle,
-  DropdownToggleAction,
-  DropdownPosition,
-  DropdownSeparator,
+  MenuToggle,
   SearchInput,
   Select,
+  SelectList,
   SelectOption,
   PageSection,
   PageSectionVariants,
+  Toolbar,
+  ToolbarContent, 
+  ToolbarGroup, 
+  ToolbarItem, 
+  ToolbarToggleGroup,
   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,15 +96,19 @@ class ConsoleLogViewerToolbar extends React.Component {
       mobileView: window.innerWidth >= 1450 ? false : true
     };
 
-    this.onContainerToggle = isExpanded => {
-      this.setState({
-        containerExpanded: isExpanded
+    this.onContainerToggle = () => {
+      this.setState(prevState => {
+        return {
+          containerExpanded: !prevState.containerExpanded
+        }
       });
     };
 
-    this.onContainerToggleMobile = isExpanded => {
-      this.setState({
-        containerExpandedMobile: isExpanded
+    this.onContainerToggleMobile = () => {
+      this.setState(prevState => {
+        return {
+          containerExpandedMobile: !prevState.containerExpandedMobile
+        }
       });
     };
 
@@ -106,101 +126,101 @@ 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
       });
@@ -214,7 +234,7 @@ class ConsoleLogViewerToolbar extends React.Component {
       });
     };
 
-    this.onSearchClear = event => {
+    this.onSearchClear = (event) => {
       this.setState({
         searchValue: '',
         searchResultsCount: 0,
@@ -222,8 +242,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 +252,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 +296,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 +325,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,27 +334,27 @@ 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 = (
-      <React.Fragment>
+      <SelectList>
         {Object.entries(this.firstOptions).map(([value, { type }]) => (
           <SelectOption
             key={value}
-            value={value}
+            hasCheckbox
+            itemId={value}
             isSelected={containerSelected === value}
-            isChecked={containerSelected === value}
           >
             <Badge key={value}>{type}</Badge>
             {` ${value}`}
           </SelectOption>
         ))}
-      </React.Fragment>
+      </SelectList>
     );
 
     const selectToggleContent = ({ showText }) => {
@@ -369,16 +389,26 @@ class ConsoleLogViewerToolbar extends React.Component {
       <React.Fragment>
         <ToolbarItem visibility={{ default: 'hidden', '2xl': 'visible' }}>
           <Select
-            onToggle={this.onContainerToggle}
+            toggle={(toggleRef) => (
+              <MenuToggle
+                ref={toggleRef}
+                onClick={this.onContainerToggle}
+                isExpanded={containerExpanded}
+                style={{ width: '250px' }}
+              >
+                {selectToggleContent({ showText: true })}
+              </MenuToggle>
+            )}
             onSelect={this.onContainerSelect}
-            selections={containerSelected}
+            onOpenChange={(isOpen) => this.setState({ containerExpanded: isOpen })}
+            selected={containerSelected}
             isOpen={containerExpanded}
-            customContent={selectDropdownContent}
-            placeholderText={selectToggleContent({ showText: true })}
-          />
+          >
+            {selectDropdownContent}
+          </Select>
         </ToolbarItem>
         <ToolbarItem visibility={{ default: 'hidden', '2xl': 'visible' }}>
-          <Dropdown
+          <DropdownDeprecated
             toggle={
               <DropdownToggle id="option-toggle-desktop" onToggle={this.onOptionToggle} icon={<CogIcon />}>
                 Options
@@ -402,20 +432,35 @@ class ConsoleLogViewerToolbar extends React.Component {
         <ToolbarItem visibility={{ default: 'visible', '2xl': 'hidden' }}>
           <Tooltip position="top" content={<div>Select container</div>}>
             <Select
-              onToggle={this.onContainerToggleMobile}
+              role="menu"
+              toggle={(toggleRef) => (
+                <MenuToggle
+                  ref={toggleRef}
+                  onClick={this.onContainerToggleMobile}
+                  isExpanded={containerExpandedMobile}
+                >
+                  {selectToggleContent({ showText: false })}
+                </MenuToggle>
+              )}
               onSelect={this.onContainerSelectMobile}
-              selections={containerSelected}
+              onOpenChange={(isOpen) => this.setState({ containerExpandedMobile: isOpen })}
+              selected={containerSelected}
               isOpen={containerExpandedMobile}
-              customContent={selectDropdownContent}
-              placeholderText={selectToggleContent({ showText: false })}
-            />
+            >
+              {selectDropdownContent}
+              </Select>
           </Tooltip>
         </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 +487,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 +499,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 +517,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 +534,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 +570,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

@@ -1,11 +1,13 @@
 ---
 id: Wizard
 section: components
+source: react-demos
 ---
 
 import imgBrand from './imgBrand.svg';
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
+import { Wizard as WizardDeprecated } from '@patternfly/react-core/deprecated';
 
 ## Demos
 
@@ -22,10 +24,10 @@ import {
   NavItem,
   NavList,
   PageSection,
-  Wizard,
   Modal,
   ModalVariant
 } from '@patternfly/react-core';
+import { Wizard as WizardDeprecated } from '@patternfly/react-core/deprecated';
 import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 
 class BasicWizardDemo extends React.Component {
@@ -89,7 +91,7 @@ class BasicWizardDemo extends React.Component {
           aria-describedby="wiz-modal-demo-description"
           aria-labelledby="wiz-modal-demo-title"
         >
-          <Wizard
+          <WizardDeprecated
             navAriaLabel={`${title} steps`}
             mainAriaLabel={`${title} content`}
             titleId="wiz-modal-demo-title"
@@ -117,9 +119,9 @@ import {
   DrawerPanelContent,
   DrawerHead,
   Modal,
-  ModalVariant,
-  Wizard
+  ModalVariant
 } from '@patternfly/react-core';
+import { Wizard as WizardDeprecated } from '@patternfly/react-core/deprecated';
 
 class WizardModalWithDrawerDemo extends React.Component {
   constructor(props) {
@@ -285,7 +287,7 @@ class WizardModalWithDrawerDemo extends React.Component {
         aria-describedby="wiz-modal-demo-description"
         aria-labelledby="wiz-modal-demo-title"
       >
-        <Wizard
+        <WizardDeprecated
           navAriaLabel={`${title} steps`}
           hasDrawer
           isDrawerExpanded={isDrawerExpanded}
@@ -317,9 +319,9 @@ import {
   Modal,
   ModalVariant,
   Text,
-  TextContent,
-  Wizard
+  TextContent
 } from '@patternfly/react-core';
+import { Wizard as WizardDeprecated } from '@patternfly/react-core/deprecated';
 
 class WizardModalWithDrawerDemo extends React.Component {
   constructor(props) {
@@ -536,7 +538,7 @@ class WizardModalWithDrawerDemo extends React.Component {
         aria-describedby="wiz-modal-demo-description"
         aria-labelledby="wiz-modal-demo-title"
       >
-        <Wizard
+        <WizardDeprecated
           navAriaLabel={`${title} steps`}
           hasDrawer
           isDrawerExpanded={isDrawerExpanded}
@@ -565,9 +567,9 @@ import {
   NavList,
   PageSection,
   PageSectionTypes,
-  PageSectionVariants,
-  Wizard
+  PageSectionVariants
 } from '@patternfly/react-core';
+import { Wizard as WizardDeprecated } from '@patternfly/react-core/deprecated';
 import imgBrand from './imgBrand.svg';
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
@@ -615,7 +617,7 @@ class FullPageWizard extends React.Component {
       <React.Fragment>
         <DashboardWrapper hasPageTemplateTitle>
           <PageSection type={PageSectionTypes.wizard} variant={PageSectionVariants.light}>
-            <Wizard navAriaLabel={`${title} steps`} mainAriaLabel={`${title} content`} steps={steps} />
+            <WizardDeprecated navAriaLabel={`${title} steps`} mainAriaLabel={`${title} content`} steps={steps} />
           </PageSection>
         </DashboardWrapper>
       </React.Fragment>
@@ -650,13 +652,13 @@ import {
   Text,
   TextContent,
   Title,
-  Wizard,
   Masthead,
   PageToggleButton,
   MastheadToggle,
   MastheadMain,
   MastheadBrand
 } from '@patternfly/react-core';
+import { Wizard as WizardDeprecated } from '@patternfly/react-core/deprecated';
 import imgBrand from './imgBrand.svg';
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 
@@ -876,7 +878,7 @@ class FullPageWizard extends React.Component {
             </TextContent>
           </PageSection>
           <PageSection type={PageSectionTypes.wizard} variant={PageSectionVariants.light}>
-            <Wizard
+            <WizardDeprecated
               hasDrawer
               isDrawerExpanded={isDrawerExpanded}
               onExpandDrawer={this.onExpand}
@@ -918,13 +920,13 @@ import {
   Text,
   TextContent,
   Title,
-  Wizard,
   Masthead,
   PageToggleButton,
   MastheadToggle,
   MastheadMain,
   MastheadBrand
 } from '@patternfly/react-core';
+import { Wizard as WizardDeprecated } from '@patternfly/react-core/deprecated';
 import imgBrand from './imgBrand.svg';
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 
@@ -1194,7 +1196,7 @@ class FullPageWizard extends React.Component {
             </TextContent>
           </PageSection>
           <PageSection type={PageSectionTypes.wizard} variant={PageSectionVariants.light}>
-            <Wizard
+            <WizardDeprecated
               hasDrawer
               isDrawerExpanded={isDrawerExpanded}
               onExpandDrawer={this.onExpand}