@patternfly/react-core 5.0.0-alpha.87 → 5.0.0-alpha.89

package/src/demos/Nav.md

@@ -4,11 +4,6 @@ section: components
 ---
 
 import {
-Dropdown as DropdownDeprecated,
-DropdownGroup as DropdownGroupDeprecated,
-DropdownToggle,
-DropdownItem as DropdownItemDeprecated,
-KebabToggle,
 PageHeader,
 PageHeaderTools,
 PageHeaderToolsGroup,
@@ -20,6 +15,7 @@ import DashboardHeader from '@patternfly/react-core/src/demos/examples/Dashboard
 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 EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import imgBrand from '@patternfly/react-core/src/components/Brand/examples/pfLogo.svg';
 import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
 import imgColorBrand from '@patternfly/react-core/src/demos/examples/pfColorLogo.svg';
@@ -57,7 +53,7 @@ class PageLayoutDefaultNav extends React.Component {
       activeItem: 0
     };
 
-    this.onNavSelect = (result) => {
+    this.onNavSelect = (_event, result) => {
       this.setState({
         activeItem: result.itemId
       });
@@ -160,7 +156,7 @@ class PageLayoutGroupsNav extends React.Component {
       activeItem: 'grp-1_itm-1'
     };
 
-    this.onNavSelect = (result) => {
+    this.onNavSelect = (_event, result) => {
       this.setState({
         activeItem: result.itemId
       });
@@ -276,7 +272,7 @@ class PageLayoutExpandableNav extends React.Component {
       activeItem: 'grp-1_itm-1'
     };
 
-    this.onNavSelect = (result) => {
+    this.onNavSelect = (_event, result) => {
       this.setState({
         activeItem: result.itemId,
         activeGroup: result.groupId
@@ -386,8 +382,12 @@ import {
   ButtonVariant,
   Card,
   CardBody,
+  Dropdown,
+  DropdownItem,
+  DropdownList,
   Gallery,
   GalleryItem,
+  MenuToggle,
   Nav,
   NavItem,
   NavList,
@@ -403,17 +403,13 @@ import {
   PageHeader,
   PageHeaderTools,
   PageHeaderToolsGroup,
-  PageHeaderToolsItem,
-  Dropdown as DropdownDeprecated,
-  DropdownGroup as DropdownGroupDeprecated,
-  DropdownToggle,
-  DropdownItem as DropdownItemDeprecated,
-  KebabToggle
+  PageHeaderToolsItem
 } 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';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import imgBrand from '@patternfly/react-core/src/components/Brand/examples/pfLogo.svg';
 import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
 
@@ -426,31 +422,31 @@ class PageLayoutHorizontalNav extends React.Component {
       activeItem: 0
     };
 
-    this.onDropdownToggle = (_event, isDropdownOpen) => {
-      this.setState({
-        isDropdownOpen
-      });
+    this.onDropdownToggle = () => {
+      this.setState((prevState) => ({
+        isDropdownOpen: !prevState.isDropdownOpen
+      }));
     };
 
-    this.onDropdownSelect = (event) => {
+    this.onDropdownSelect = () => {
       this.setState({
-        isDropdownOpen: !this.state.isDropdownOpen
+        isDropdownOpen: false
       });
     };
 
-    this.onKebabDropdownToggle = (_event, isKebabDropdownOpen) => {
-      this.setState({
-        isKebabDropdownOpen
-      });
+    this.onKebabDropdownToggle = () => {
+      this.setState((prevState) => ({
+        isKebabDropdownOpen: !prevState.isKebabDropdownOpen
+      }));
     };
 
-    this.onKebabDropdownSelect = (event) => {
+    this.onKebabDropdownSelect = () => {
       this.setState({
-        isKebabDropdownOpen: !this.state.isKebabDropdownOpen
+        isKebabDropdownOpen: false
       });
     };
 
-    this.onNavSelect = (result) => {
+    this.onNavSelect = (_event, result) => {
       this.setState({
         activeItem: result.itemId
       });
@@ -481,23 +477,23 @@ class PageLayoutHorizontalNav extends React.Component {
         </NavList>
       </Nav>
     );
-    const kebabDropdownItems = [
-      <DropdownItemDeprecated>
-        <CogIcon /> Settings
-      </DropdownItemDeprecated>,
-      <DropdownItemDeprecated>
-        <HelpIcon /> Help
-      </DropdownItemDeprecated>
-    ];
-    const userDropdownItems = [
-      <DropdownGroupDeprecated key="group 2">
-        <DropdownItemDeprecated key="group 2 profile">My profile</DropdownItemDeprecated>
-        <DropdownItemDeprecated key="group 2 user" component="button">
-          User management
-        </DropdownItemDeprecated>
-        <DropdownItemDeprecated key="group 2 logout">Logout</DropdownItemDeprecated>
-      </DropdownGroupDeprecated>
-    ];
+    const kebabDropdownItems = (
+      <>
+        <DropdownItem>
+          <CogIcon /> Settings
+        </DropdownItem>
+        <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>
+      </>
+    );
     const headerTools = (
       <PageHeaderTools>
         <PageHeaderToolsGroup
@@ -523,29 +519,50 @@ class PageLayoutHorizontalNav extends React.Component {
               lg: 'hidden'
             }} /** this kebab dropdown replaces the icon buttons and is hidden for desktop sizes */
           >
-            <DropdownDeprecated
-              isPlain
-              position="right"
-              onSelect={this.onKebabDropdownSelect}
-              toggle={<KebabToggle onToggle={this.onKebabDropdownToggle} />}
+            <Dropdown
               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>
           </PageHeaderToolsItem>
           <PageHeaderToolsItem
             visibility={{ default: 'hidden', md: 'visible' }} /** this user dropdown is hidden on mobile sizes */
           >
-            <DropdownDeprecated
-              isPlain
-              position="right"
-              onSelect={this.onDropdownSelect}
+            <Dropdown
               isOpen={isDropdownOpen}
-              toggle={<DropdownToggle onToggle={this.onDropdownToggle}>John Smith</DropdownToggle>}
-              dropdownItems={userDropdownItems}
-            />
+              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
+                >
+                  John Smith
+                </MenuToggle>
+              )}
+            >
+              <DropdownList>{userDropdownItems}</DropdownList>
+            </Dropdown>
           </PageHeaderToolsItem>
         </PageHeaderToolsGroup>
-        <Avatar src={imgAvatar} alt="Avatar image" />
       </PageHeaderTools>
     );
 
@@ -623,13 +640,13 @@ class VerticalNavWithSubnav extends React.Component {
       activeSubNavItem: 7
     };
 
-    this.onNavSelect = (result) => {
+    this.onNavSelect = (_event, result) => {
       this.setState({
         activeItem: result.itemId
       });
     };
 
-    this.onSubNavSelect = (result) => {
+    this.onSubNavSelect = (_event, result) => {
       this.setState({
         activeSubNavItem: result.itemId
       });
@@ -750,8 +767,12 @@ import {
   ButtonVariant,
   Card,
   CardBody,
+  Dropdown,
+  DropdownItem,
+  DropdownList,
   Gallery,
   GalleryItem,
+  MenuToggle,
   Nav,
   NavItem,
   NavList,
@@ -764,11 +785,6 @@ import {
   Text
 } from '@patternfly/react-core';
 import {
-  Dropdown as DropdownDeprecated,
-  DropdownGroup as DropdownGroupDeprecated,
-  DropdownToggle,
-  DropdownItem as DropdownItemDeprecated,
-  KebabToggle,
   PageHeader,
   PageHeaderTools,
   PageHeaderToolsItem,
@@ -778,6 +794,7 @@ import { DashboardBreadcrumb } from '@patternfly/react-core/src/demos/examples/D
 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 EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import imgColorBrand from '@patternfly/react-core/src/demos/examples/pfColorLogo.svg';
 import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
 
@@ -791,37 +808,37 @@ class HorizontalNavWithSubnav extends React.Component {
       activeSubNavItem: 7
     };
 
-    this.onDropdownToggle = (_event, isDropdownOpen) => {
-      this.setState({
-        isDropdownOpen
-      });
+    this.onDropdownToggle = () => {
+      this.setState((prevState) => ({
+        isDropdownOpen: !prevState.isDropdownOpen
+      }));
     };
 
-    this.onDropdownSelect = (event) => {
+    this.onDropdownSelect = () => {
       this.setState({
-        isDropdownOpen: !this.state.isDropdownOpen
+        isDropdownOpen: false
       });
     };
 
-    this.onKebabDropdownToggle = (_event, isKebabDropdownOpen) => {
-      this.setState({
-        isKebabDropdownOpen
-      });
+    this.onKebabDropdownToggle = () => {
+      this.setState((prevState) => ({
+        isKebabDropdownOpen: !prevState.isKebabDropdownOpen
+      }));
     };
 
-    this.onKebabDropdownSelect = (event) => {
+    this.onKebabDropdownSelect = () => {
       this.setState({
-        isKebabDropdownOpen: !this.state.isKebabDropdownOpen
+        isKebabDropdownOpen: false
       });
     };
 
-    this.onNavSelect = (result) => {
+    this.onNavSelect = (_event, result) => {
       this.setState({
         activeItem: result.itemId
       });
     };
 
-    this.onSubNavSelect = (result) => {
+    this.onSubNavSelect = (_event, result) => {
       this.setState({
         activeSubNavItem: result.itemId
       });
@@ -858,23 +875,23 @@ class HorizontalNavWithSubnav extends React.Component {
         </NavList>
       </Nav>
     );
-    const kebabDropdownItems = [
-      <DropdownItemDeprecated>
-        <CogIcon /> Settings
-      </DropdownItemDeprecated>,
-      <DropdownItemDeprecated>
-        <HelpIcon /> Help
-      </DropdownItemDeprecated>
-    ];
-    const userDropdownItems = [
-      <DropdownGroupDeprecated key="group 2">
-        <DropdownItemDeprecated key="group 2 profile">My profile</DropdownItemDeprecated>
-        <DropdownItemDeprecated key="group 2 user" component="button">
-          User management
-        </DropdownItemDeprecated>
-        <DropdownItemDeprecated key="group 2 logout">Logout</DropdownItemDeprecated>
-      </DropdownGroupDeprecated>
-    ];
+    const kebabDropdownItems = (
+      <>
+        <DropdownItem>
+          <CogIcon /> Settings
+        </DropdownItem>
+        <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>
+      </>
+    );
     const headerTools = (
       <PageHeaderTools>
         <PageHeaderToolsGroup
@@ -900,29 +917,50 @@ class HorizontalNavWithSubnav extends React.Component {
               lg: 'hidden'
             }} /** this kebab dropdown replaces the icon buttons and is hidden for desktop sizes */
           >
-            <DropdownDeprecated
-              isPlain
-              position="right"
-              onSelect={this.onKebabDropdownSelect}
-              toggle={<KebabToggle onToggle={this.onKebabDropdownToggle} />}
+            <Dropdown
               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>
           </PageHeaderToolsItem>
           <PageHeaderToolsItem
             visibility={{ default: 'hidden', md: 'visible' }} /** this user dropdown is hidden on mobile sizes */
           >
-            <DropdownDeprecated
-              isPlain
-              position="right"
-              onSelect={this.onDropdownSelect}
+            <Dropdown
               isOpen={isDropdownOpen}
-              toggle={<DropdownToggle onToggle={this.onDropdownToggle}>John Smith</DropdownToggle>}
-              dropdownItems={userDropdownItems}
-            />
+              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
+                >
+                  John Smith
+                </MenuToggle>
+              )}
+            >
+              <DropdownList>{userDropdownItems}</DropdownList>
+            </Dropdown>
           </PageHeaderToolsItem>
         </PageHeaderToolsGroup>
-        <Avatar src={imgAvatar} alt="Avatar image" />
       </PageHeaderTools>
     );
 
@@ -1030,7 +1068,7 @@ class PageLayoutTertiaryNav extends React.Component {
       activeItem: 0
     };
 
-    this.onNavSelect = (result) => {
+    this.onNavSelect = (_event, result) => {
       this.setState({
         activeItem: result.itemId
       });
@@ -1133,7 +1171,7 @@ class PageLayoutLightNav extends React.Component {
       activeItem: 0
     };
 
-    this.onNavSelect = (result) => {
+    this.onNavSelect = (_event, result) => {
       this.setState({
         activeItem: result.itemId
       });
@@ -1220,8 +1258,12 @@ import {
   ButtonVariant,
   Card,
   CardBody,
+  Dropdown,
+  DropdownItem,
+  DropdownList,
   Gallery,
   GalleryItem,
+  MenuToggle,
   Nav,
   NavItem,
   NavList,
@@ -1235,11 +1277,6 @@ import {
   Text
 } from '@patternfly/react-core';
 import {
-  Dropdown as DropdownDeprecated,
-  DropdownGroup as DropdownGroupDeprecated,
-  DropdownToggle,
-  DropdownItem as DropdownItemDeprecated,
-  KebabToggle,
   PageHeader,
   PageHeaderTools,
   PageHeaderToolsItem,
@@ -1248,6 +1285,7 @@ import {
 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 EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import imgBrand from '@patternfly/react-core/src/components/Brand/examples/pfLogo.svg';
 import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
 
@@ -1263,31 +1301,31 @@ class PageLayoutManualNav extends React.Component {
       isNavOpenMobile: false
     };
 
-    this.onDropdownToggle = (_event, isDropdownOpen) => {
-      this.setState({
-        isDropdownOpen
-      });
+    this.onDropdownToggle = () => {
+      this.setState((prevState) => ({
+        isDropdownOpen: !prevState.isDropdownOpen
+      }));
     };
 
-    this.onDropdownSelect = (event) => {
+    this.onDropdownSelect = () => {
       this.setState({
-        isDropdownOpen: !this.state.isDropdownOpen
+        isDropdownOpen: false
       });
     };
 
-    this.onKebabDropdownToggle = (_event, isKebabDropdownOpen) => {
-      this.setState({
-        isKebabDropdownOpen
-      });
+    this.onKebabDropdownToggle = () => {
+      this.setState((prevState) => ({
+        isKebabDropdownOpen: !prevState.isKebabDropdownOpen
+      }));
     };
 
-    this.onKebabDropdownSelect = (event) => {
+    this.onKebabDropdownSelect = () => {
       this.setState({
-        isKebabDropdownOpen: !this.state.isKebabDropdownOpen
+        isKebabDropdownOpen: false
       });
     };
 
-    this.onNavSelect = (result) => {
+    this.onNavSelect = (_event, result) => {
       this.setState({
         activeItem: result.itemId
       });
@@ -1337,23 +1375,23 @@ class PageLayoutManualNav extends React.Component {
         </NavList>
       </Nav>
     );
-    const kebabDropdownItems = [
-      <DropdownItemDeprecated>
-        <CogIcon /> Settings
-      </DropdownItemDeprecated>,
-      <DropdownItemDeprecated>
-        <HelpIcon /> Help
-      </DropdownItemDeprecated>
-    ];
-    const userDropdownItems = [
-      <DropdownGroupDeprecated key="group 2">
-        <DropdownItemDeprecated key="group 2 profile">My profile</DropdownItemDeprecated>
-        <DropdownItemDeprecated key="group 2 user" component="button">
-          User management
-        </DropdownItemDeprecated>
-        <DropdownItemDeprecated key="group 2 logout">Logout</DropdownItemDeprecated>
-      </DropdownGroupDeprecated>
-    ];
+    const kebabDropdownItems = (
+      <>
+        <DropdownItem>
+          <CogIcon /> Settings
+        </DropdownItem>
+        <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>
+      </>
+    );
     const headerTools = (
       <PageHeaderTools>
         <PageHeaderToolsGroup
@@ -1376,33 +1414,53 @@ class PageLayoutManualNav extends React.Component {
         <PageHeaderToolsGroup>
           <PageHeaderToolsItem
             visibility={{
-              default: 'hidden',
-              breakpoint: 'lg'
+              lg: 'hidden'
             }} /** this kebab dropdown replaces the icon buttons and is hidden for desktop sizes */
           >
-            <DropdownDeprecated
-              isPlain
-              position="right"
-              onSelect={this.onKebabDropdownSelect}
-              toggle={<KebabToggle onToggle={this.onKebabDropdownToggle} />}
+            <Dropdown
               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>
           </PageHeaderToolsItem>
           <PageHeaderToolsItem
             visibility={{ default: 'hidden', md: 'visible' }} /** this user dropdown is hidden on mobile sizes */
           >
-            <DropdownDeprecated
-              isPlain
-              position="right"
-              onSelect={this.onDropdownSelect}
+            <Dropdown
               isOpen={isDropdownOpen}
-              toggle={<DropdownToggle onToggle={this.onDropdownToggle}>John Smith</DropdownToggle>}
-              dropdownItems={userDropdownItems}
-            />
+              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
+                >
+                  John Smith
+                </MenuToggle>
+              )}
+            >
+              <DropdownList>{userDropdownItems}</DropdownList>
+            </Dropdown>
           </PageHeaderToolsItem>
         </PageHeaderToolsGroup>
-        <Avatar src={imgAvatar} alt="Avatar image" />
       </PageHeaderTools>
     );
 
@@ -1487,7 +1545,7 @@ class VerticalPage extends React.Component {
       isNavOpen: true,
       activeItem: 0
     };
-    this.onNavSelect = (e, result) => {
+    this.onNavSelect = (_event, result) => {
       this.setState({
         activeItem: result.itemId
       });