@patternfly/react-core 5.0.0-alpha.47 → 5.0.0-alpha.49

package/src/demos/DataListDemo.md

@@ -3,6 +3,12 @@ id: Data list
 section: components
 ---
 
+import {
+Dropdown as DropdownDeprecated,
+DropdownItem as DropdownItemDeprecated,
+DropdownPosition,
+KebabToggle
+} from '@patternfly/react-core/deprecated';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-icon';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
@@ -25,10 +31,6 @@ import {
   DataListToggle,
   DataListContent,
   DataListItemCells,
-  Dropdown,
-  DropdownItem,
-  DropdownPosition,
-  KebabToggle,
   Toolbar,
   ToolbarGroup,
   ToolbarItem,
@@ -37,6 +39,12 @@ import {
   SearchInput,
   Tooltip
 } from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownItem as DropdownItemDeprecated,
+  DropdownPosition,
+  KebabToggle
+} from '@patternfly/react-core/deprecated';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 
@@ -82,20 +90,20 @@ class ExpandableDataList extends React.Component {
       this.setState({ isOpen3 });
     };
 
-    this.onSelect1 = event => {
-      this.setState(prevState => ({
+    this.onSelect1 = (event) => {
+      this.setState((prevState) => ({
         isOpen1: !prevState.isOpen1
       }));
     };
 
-    this.onSelect2 = event => {
-      this.setState(prevState => ({
+    this.onSelect2 = (event) => {
+      this.setState((prevState) => ({
         isOpen2: !prevState.isOpen2
       }));
     };
 
-    this.onSelect3 = event => {
-      this.setState(prevState => ({
+    this.onSelect3 = (event) => {
+      this.setState((prevState) => ({
         isOpen3: !prevState.isOpen3
       }));
     };
@@ -146,7 +154,7 @@ class ExpandableDataList extends React.Component {
   }
 
   render() {
-    const toggle = id => {
+    const toggle = (id) => {
       const expanded = this.state.expanded;
       const index = expanded.indexOf(id);
       const newExpanded =
@@ -197,20 +205,20 @@ class ExpandableDataList extends React.Component {
                 aria-label="Actions"
                 isPlainButtonAction
               >
-                <Dropdown
+                <DropdownDeprecated
                   isPlain
                   position={DropdownPosition.right}
                   isOpen={this.state.isOpen1}
                   onSelect={this.onSelect1}
                   toggle={<KebabToggle onToggle={this.onToggle1} />}
                   dropdownItems={[
-                    <DropdownItem key="link">Link</DropdownItem>,
-                    <DropdownItem key="action" component="button">
+                    <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+                    <DropdownItemDeprecated key="action" component="button">
                       Action
-                    </DropdownItem>,
-                    <DropdownItem key="disabled link" isDisabled>
+                    </DropdownItemDeprecated>,
+                    <DropdownItemDeprecated key="disabled link" isDisabled>
                       Disabled Link
-                    </DropdownItem>
+                    </DropdownItemDeprecated>
                   ]}
                 />
               </DataListAction>
@@ -257,20 +265,20 @@ class ExpandableDataList extends React.Component {
                 aria-label="Actions"
                 isPlainButtonAction
               >
-                <Dropdown
+                <DropdownDeprecated
                   isPlain
                   position={DropdownPosition.right}
                   isOpen={this.state.isOpen2}
                   onSelect={this.onSelect2}
                   toggle={<KebabToggle onToggle={this.onToggle2} />}
                   dropdownItems={[
-                    <DropdownItem key="link">Link</DropdownItem>,
-                    <DropdownItem key="action" component="button">
+                    <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+                    <DropdownItemDeprecated key="action" component="button">
                       Action
-                    </DropdownItem>,
-                    <DropdownItem key="disabled link" isDisabled>
+                    </DropdownItemDeprecated>,
+                    <DropdownItemDeprecated key="disabled link" isDisabled>
                       Disabled Link
-                    </DropdownItem>
+                    </DropdownItemDeprecated>
                   ]}
                 />
               </DataListAction>
@@ -317,20 +325,20 @@ class ExpandableDataList extends React.Component {
                 aria-label="Actions"
                 isPlainButtonAction
               >
-                <Dropdown
+                <DropdownDeprecated
                   isPlain
                   position={DropdownPosition.right}
                   isOpen={this.state.isOpen3}
                   onSelect={this.onSelect3}
                   toggle={<KebabToggle onToggle={this.onToggle3} />}
                   dropdownItems={[
-                    <DropdownItem key="link">Link</DropdownItem>,
-                    <DropdownItem key="action" component="button">
+                    <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+                    <DropdownItemDeprecated key="action" component="button">
                       Action
-                    </DropdownItem>,
-                    <DropdownItem key="disabled link" isDisabled>
+                    </DropdownItemDeprecated>,
+                    <DropdownItemDeprecated key="disabled link" isDisabled>
                       Disabled Link
-                    </DropdownItem>
+                    </DropdownItemDeprecated>
                   ]}
                 />
               </DataListAction>

package/src/demos/DatePicker/DatePicker.md

@@ -1,6 +1,7 @@
 ---
-id: Date picker
+id: Date range picker
 section: components
+subsection: date-and-time
 beta: true
 ---
 

package/src/demos/DateTimePicker.md

@@ -1,11 +1,17 @@
 ---
 id: Date and time picker
-section: demos
+section: components
+subsection: date-and-time
 beta: true
 ---
 
 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';
+import {
+Dropdown as DropdownDeprecated,
+DropdownToggle,
+DropdownItem as DropdownItemDeprecated
+} from '@patternfly/react-core/deprecated';
 
 ## Demos
 
@@ -14,4 +20,5 @@ In this demo, learn how to use a [CalendarMonth](/components/calendar-month) com
 ### Date and time picker
 
 ```ts file="./examples/DateTimePicker/DateTimePicker.tsx"
+
 ```

package/src/demos/Filters/FilterDemos.md

@@ -1,6 +1,6 @@
 ---
 id: Filters
-section: demos
+section: patterns
 ---
 
 import {

package/src/demos/Masthead.md

@@ -9,6 +9,13 @@ 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 imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
+import {
+Dropdown as DropdownDeprecated,
+DropdownGroup as DropdownGroupDeprecated,
+DropdownItem as DropdownItemDeprecated,
+DropdownToggle,
+KebabToggle
+} from '@patternfly/react-core/deprecated';
 
 ## Demos
 
@@ -17,4 +24,5 @@ import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/ava
 Many mastheads contain utilities which collapse into a dropdown at smaller viewport widths. These utilities could include a notification badge to open and close a notification drawer, a link to app or user settings, a help icon which could launch quick starts or link to other resources, and many other utilities. In this demo, the notification badge does not collapse down into the mobile menu so that it is always visible even at narrower viewport widths.
 
 ```ts file='./examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx' isFullscreen
+
 ```

package/src/demos/MultipleFileUploadDemos.md

@@ -1,6 +1,7 @@
 ---
-id: File upload - multiple
+id: Multiple file upload
 section: components
+subsection: file-upload
 ---
 
 import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';

package/src/demos/Nav.md

@@ -3,6 +3,13 @@ id: Navigation
 section: components
 ---
 
+import {
+Dropdown as DropdownDeprecated,
+DropdownGroup as DropdownGroupDeprecated,
+DropdownToggle,
+DropdownItem as DropdownItemDeprecated,
+KebabToggle
+} from '@patternfly/react-core/deprecated';
 import { DashboardBreadcrumb } from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 import DashboardHeader from '@patternfly/react-core/src/demos/examples/DashboardHeader';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
@@ -44,7 +51,7 @@ class PageLayoutDefaultNav extends React.Component {
       activeItem: 0
     };
 
-    this.onNavSelect = result => {
+    this.onNavSelect = (result) => {
       this.setState({
         activeItem: result.itemId
       });
@@ -142,7 +149,7 @@ class PageLayoutGroupsNav extends React.Component {
       activeItem: 'grp-1_itm-1'
     };
 
-    this.onNavSelect = result => {
+    this.onNavSelect = (result) => {
       this.setState({
         activeItem: result.itemId
       });
@@ -253,7 +260,7 @@ class PageLayoutExpandableNav extends React.Component {
       activeItem: 'grp-1_itm-1'
     };
 
-    this.onNavSelect = result => {
+    this.onNavSelect = (result) => {
       this.setState({
         activeItem: result.itemId,
         activeGroup: result.groupId
@@ -359,13 +366,8 @@ import {
   ButtonVariant,
   Card,
   CardBody,
-  Dropdown,
-  DropdownGroup,
-  DropdownToggle,
-  DropdownItem,
   Gallery,
   GalleryItem,
-  KebabToggle,
   Nav,
   NavItem,
   NavList,
@@ -380,6 +382,13 @@ import {
   PageHeaderToolsGroup,
   PageHeaderToolsItem
 } from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownGroup as DropdownGroupDeprecated,
+  DropdownToggle,
+  DropdownItem as DropdownItemDeprecated,
+  KebabToggle
+} from '@patternfly/react-core/deprecated';
 import { DashboardBreadcrumb } from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
@@ -402,7 +411,7 @@ class PageLayoutHorizontalNav extends React.Component {
       });
     };
 
-    this.onDropdownSelect = event => {
+    this.onDropdownSelect = (event) => {
       this.setState({
         isDropdownOpen: !this.state.isDropdownOpen
       });
@@ -414,13 +423,13 @@ class PageLayoutHorizontalNav extends React.Component {
       });
     };
 
-    this.onKebabDropdownSelect = event => {
+    this.onKebabDropdownSelect = (event) => {
       this.setState({
         isKebabDropdownOpen: !this.state.isKebabDropdownOpen
       });
     };
 
-    this.onNavSelect = result => {
+    this.onNavSelect = (result) => {
       this.setState({
         activeItem: result.itemId
       });
@@ -452,21 +461,21 @@ class PageLayoutHorizontalNav 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 headerTools = (
       <PageHeaderTools>
@@ -493,7 +502,7 @@ class PageLayoutHorizontalNav 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}
@@ -505,7 +514,7 @@ class PageLayoutHorizontalNav extends React.Component {
           <PageHeaderToolsItem
             visibility={{ default: 'hidden', md: 'visible' }} /** this user dropdown is hidden on mobile sizes */
           >
-            <Dropdown
+            <DropdownDeprecated
               isPlain
               position="right"
               onSelect={this.onDropdownSelect}
@@ -592,13 +601,13 @@ class VerticalNavWithSubnav extends React.Component {
       activeSubNavItem: 7
     };
 
-    this.onNavSelect = result => {
+    this.onNavSelect = (result) => {
       this.setState({
         activeItem: result.itemId
       });
     };
 
-    this.onSubNavSelect = result => {
+    this.onSubNavSelect = (result) => {
       this.setState({
         activeSubNavItem: result.itemId
       });
@@ -715,13 +724,8 @@ import {
   ButtonVariant,
   Card,
   CardBody,
-  Dropdown,
-  DropdownGroup,
-  DropdownToggle,
-  DropdownItem,
   Gallery,
   GalleryItem,
-  KebabToggle,
   Nav,
   NavItem,
   NavList,
@@ -737,6 +741,13 @@ import {
   PageHeaderToolsGroup,
   PageHeaderToolsItem
 } from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownGroup as DropdownGroupDeprecated,
+  DropdownToggle,
+  DropdownItem as DropdownItemDeprecated,
+  KebabToggle
+} from '@patternfly/react-core/deprecated';
 import { DashboardBreadcrumb } from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
@@ -760,7 +771,7 @@ class HorizontalNavWithSubnav extends React.Component {
       });
     };
 
-    this.onDropdownSelect = event => {
+    this.onDropdownSelect = (event) => {
       this.setState({
         isDropdownOpen: !this.state.isDropdownOpen
       });
@@ -772,19 +783,19 @@ class HorizontalNavWithSubnav extends React.Component {
       });
     };
 
-    this.onKebabDropdownSelect = event => {
+    this.onKebabDropdownSelect = (event) => {
       this.setState({
         isKebabDropdownOpen: !this.state.isKebabDropdownOpen
       });
     };
 
-    this.onNavSelect = result => {
+    this.onNavSelect = (result) => {
       this.setState({
         activeItem: result.itemId
       });
     };
 
-    this.onSubNavSelect = result => {
+    this.onSubNavSelect = (result) => {
       this.setState({
         activeSubNavItem: result.itemId
       });
@@ -822,21 +833,21 @@ class HorizontalNavWithSubnav 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 headerTools = (
       <PageHeaderTools>
@@ -863,7 +874,7 @@ class HorizontalNavWithSubnav 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}
@@ -875,7 +886,7 @@ class HorizontalNavWithSubnav extends React.Component {
           <PageHeaderToolsItem
             visibility={{ default: 'hidden', md: 'visible' }} /** this user dropdown is hidden on mobile sizes */
           >
-            <Dropdown
+            <DropdownDeprecated
               isPlain
               position="right"
               onSelect={this.onDropdownSelect}
@@ -994,7 +1005,7 @@ class PageLayoutTertiaryNav extends React.Component {
       activeItem: 0
     };
 
-    this.onNavSelect = result => {
+    this.onNavSelect = (result) => {
       this.setState({
         activeItem: result.itemId
       });
@@ -1096,7 +1107,7 @@ class PageLayoutLightNav extends React.Component {
       activeItem: 0
     };
 
-    this.onNavSelect = result => {
+    this.onNavSelect = (result) => {
       this.setState({
         activeItem: result.itemId
       });
@@ -1179,13 +1190,8 @@ import {
   ButtonVariant,
   Card,
   CardBody,
-  Dropdown,
-  DropdownGroup,
-  DropdownToggle,
-  DropdownItem,
   Gallery,
   GalleryItem,
-  KebabToggle,
   Nav,
   NavItem,
   NavList,
@@ -1201,6 +1207,13 @@ import {
   PageHeaderToolsGroup,
   PageHeaderToolsItem
 } from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownGroup as DropdownGroupDeprecated,
+  DropdownToggle,
+  DropdownItem as DropdownItemDeprecated,
+  KebabToggle
+} from '@patternfly/react-core/deprecated';
 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';
@@ -1225,7 +1238,7 @@ class PageLayoutManualNav extends React.Component {
       });
     };
 
-    this.onDropdownSelect = event => {
+    this.onDropdownSelect = (event) => {
       this.setState({
         isDropdownOpen: !this.state.isDropdownOpen
       });
@@ -1237,13 +1250,13 @@ class PageLayoutManualNav extends React.Component {
       });
     };
 
-    this.onKebabDropdownSelect = event => {
+    this.onKebabDropdownSelect = (event) => {
       this.setState({
         isKebabDropdownOpen: !this.state.isKebabDropdownOpen
       });
     };
 
-    this.onNavSelect = result => {
+    this.onNavSelect = (result) => {
       this.setState({
         activeItem: result.itemId
       });
@@ -1269,14 +1282,8 @@ class PageLayoutManualNav extends React.Component {
   }
 
   render() {
-    const {
-      isDropdownOpen,
-      isKebabDropdownOpen,
-      activeItem,
-      isNavOpenDesktop,
-      isNavOpenMobile,
-      isMobileView
-    } = this.state;
+    const { isDropdownOpen, isKebabDropdownOpen, activeItem, isNavOpenDesktop, isNavOpenMobile, isMobileView } =
+      this.state;
 
     const PageNav = (
       <Nav onSelect={this.onNavSelect} aria-label="Nav">
@@ -1300,21 +1307,21 @@ class PageLayoutManualNav 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 headerTools = (
       <PageHeaderTools>
@@ -1342,7 +1349,7 @@ class PageLayoutManualNav extends React.Component {
               breakpoint: 'lg'
             }} /** this kebab dropdown replaces the icon buttons and is hidden for desktop sizes */
           >
-            <Dropdown
+            <DropdownDeprecated
               isPlain
               position="right"
               onSelect={this.onKebabDropdownSelect}
@@ -1354,7 +1361,7 @@ class PageLayoutManualNav extends React.Component {
           <PageHeaderToolsItem
             visibility={{ default: 'hidden', md: 'visible' }} /** this user dropdown is hidden on mobile sizes */
           >
-            <Dropdown
+            <DropdownDeprecated
               isPlain
               position="right"
               onSelect={this.onDropdownSelect}
@@ -1445,7 +1452,7 @@ class VerticalPage extends React.Component {
       isNavOpen: true,
       activeItem: 0
     };
-    this.onNavSelect = result => {
+    this.onNavSelect = (result) => {
       this.setState({
         activeItem: result.itemId
       });
@@ -1466,7 +1473,7 @@ class VerticalPage extends React.Component {
             <MenuItem flyoutMenu={children} itemId={`next-menu-${depth}`}>
               Additional settings
             </MenuItem>
-            {[...Array(numFlyouts - depth).keys()].map(j => (
+            {[...Array(numFlyouts - depth).keys()].map((j) => (
               <MenuItem key={`${depth}-${j}`} itemId={`${depth}-${j}`} to={`#menu-link-${depth}-${j}`}>
                 Settings menu {depth} item {j}
               </MenuItem>
@@ -1519,4 +1526,5 @@ class VerticalPage extends React.Component {
 ### Drilldown nav
 
 ```js isBeta isFullscreen file="./examples/Nav/NavDrilldown.tsx"
+
 ```