fix(PageHeaderToolsItem): fix breakpoint typo

packages/react-core/src/components/Page/PageHeaderToolsItem.tsx

@@ -8,21 +8,24 @@ export interface PageHeaderToolsItemProps extends React.HTMLProps<HTMLDivElement
   children: React.ReactNode;
   /** Additional classes added to the page header tools item. */
   className?: string;
+  /** HTML id of the PageHeaderToolsItem */
+  id?: string;
   /** Visibility at various breakpoints. */
   visibility?: {
     default?: 'hidden' | 'visible';
     sm?: 'hidden' | 'visible';
     md?: 'hidden' | 'visible';
     lg?: 'hidden' | 'visible';
     xl?: 'hidden' | 'visible';
-    '2xl?': 'hidden' | 'visible';
+    '2xl'?: 'hidden' | 'visible';
   };
   /** True to make an icon button appear selected */
   isSelected?: boolean;
 }
 
 export const PageHeaderToolsItem: React.FunctionComponent<PageHeaderToolsItemProps> = ({
   children,
+  id,
   className,
   visibility,
   isSelected
@@ -34,6 +37,7 @@ export const PageHeaderToolsItem: React.FunctionComponent<PageHeaderToolsItemPro
       formatBreakpointMods(visibility, styles),
       className
     )}
+    id={id}
   >
     {children}
   </div>

packages/react-integration/cypress/integration/page.spec.ts

@@ -19,14 +19,16 @@ describe('Page Demo Test', () => {
       cy.get('div[class="pf-c-page__header-brand-link"]')
         .invoke('text')
         .should('eq', "Logo that's a <div>");
-      cy.get('.pf-c-page__header-tools')
-        .invoke('text')
-        .should('contain', 'PageHeaderTools | Avatar');
       cy.get('.pf-c-page__main-section.pf-m-dark-100').should('exist');
       cy.get('.pf-c-page__main-section.pf-m-dark-200').should('exist');
       cy.get('.pf-c-page__main-section.pf-m-light').should('exist');
       cy.get('.pf-c-page__main-section.pf-m-no-padding').should('exist');
       cy.get('.pf-c-page__main-section.pf-m-no-padding-on-md').should('exist');
+      cy.get('.pf-c-page__header-tools-item[id="kebab-dropdown"]').should('have.class', 'pf-m-hidden-on-lg');
+      cy.get('.pf-c-page__header-tools-item[id="user-dropdown"]').should(
+        'have.class',
+        'pf-m-hidden pf-m-visible-on-md pf-m-visible-on-lg pf-m-visible-on-xl pf-m-visible-on-2xl'
+      );
     });
   });
 });

packages/react-integration/demo-app-ts/src/components/demos/PageDemo/PageDemo.tsx

@@ -1,31 +1,70 @@
 import React from 'react';
 import {
+  Avatar,
+  Button,
+  Dropdown,
   Page,
   PageHeader,
   PageHeaderTools,
+  PageHeaderToolsGroup,
+  PageHeaderToolsItem,
   PageSidebar,
   PageSection,
   PageSectionVariants,
-  SkipToContent
+  SkipToContent,
+  KebabToggle,
+  DropdownToggle,
+  DropdownGroup,
+  DropdownItem
 } from '@patternfly/react-core';
+import CogIcon from '@patternfly/react-icons/dist/js/icons/cog-icon';
+import HelpIcon from '@patternfly/react-icons/dist/js/icons/help-icon';
+import imgAvatar from '@patternfly/react-integration/demo-app-ts/src/assets/images/imgAvatar.svg';
 
 export class PageDemo extends React.Component {
   static displayName = 'PageDemo';
   state = {
-    isNavOpen: true
+    isNavOpen: true,
+    isDropdownOpen: false,
+    isKebabDropdownOpen: false
   };
+
   onNavToggle = () => {
     this.setState({
       isNavOpen: !this.state.isNavOpen
     });
   };
 
+  onDropdownToggle = (isDropdownOpen: boolean) => {
+    this.setState({
+      isDropdownOpen
+    });
+  };
+
+  onDropdownSelect = (event: any) => {
+    this.setState({
+      isDropdownOpen: !this.state.isDropdownOpen
+    });
+  };
+
+  onKebabDropdownToggle = (isKebabDropdownOpen: boolean) => {
+    this.setState({
+      isKebabDropdownOpen
+    });
+  };
+
+  onKebabDropdownSelect = (event: any) => {
+    this.setState({
+      isKebabDropdownOpen: !this.state.isKebabDropdownOpen
+    });
+  };
+
   componentDidMount() {
     window.scrollTo(0, 0);
   }
 
   render() {
-    const { isNavOpen } = this.state;
+    const { isNavOpen, isDropdownOpen, isKebabDropdownOpen } = this.state;
     const headerRole: string | undefined = undefined;
     const pageRole: string | undefined = undefined;
     const logoProps = {
@@ -34,13 +73,93 @@ export class PageDemo extends React.Component {
       onClick: () => console.log('clicked logo'),
       target: '_blank'
     };
+
+    const kebabDropdownItems = [
+      <DropdownItem key="group 1 settings">
+        <CogIcon /> Settings
+      </DropdownItem>,
+      <DropdownItem key="group 1 help">
+        <HelpIcon /> Help
+      </DropdownItem>
+    ];
+
+    const userDropdownItems = [
+      <DropdownGroup key="group 2">
+        <DropdownItem key="group 2 profile">My profile</DropdownItem>
+        <DropdownItem key="group 2 user" component="button">
+          User management
+        </DropdownItem>
+        <DropdownItem key="group 2 logout">Logout</DropdownItem>
+      </DropdownGroup>
+    ];
+
+    const headerTools = (
+      <PageHeaderTools>
+        <PageHeaderToolsGroup
+          visibility={{
+            default: 'hidden',
+            lg: 'visible'
+          }} /** the settings and help icon buttons are only visible on desktop sizes and replaced by a kebab dropdown for other sizes */
+        >
+          <PageHeaderToolsItem>
+            <Button aria-label="Settings actions" variant="plain">
+              <CogIcon />
+            </Button>
+          </PageHeaderToolsItem>
+          <PageHeaderToolsItem>
+            <Button aria-label="Help actions" variant="plain">
+              <HelpIcon />
+            </Button>
+          </PageHeaderToolsItem>
+        </PageHeaderToolsGroup>
+        <PageHeaderToolsGroup>
+          <PageHeaderToolsItem
+            visibility={{
+              lg: 'hidden'
+            }}
+            id="kebab-dropdown"
+            /** this kebab dropdown replaces the icon buttons and is hidden for desktop sizes */
+          >
+            <Dropdown
+              isPlain
+              position="right"
+              onSelect={this.onKebabDropdownSelect}
+              toggle={<KebabToggle onToggle={this.onKebabDropdownToggle} />}
+              isOpen={isKebabDropdownOpen}
+              dropdownItems={kebabDropdownItems}
+            />
+          </PageHeaderToolsItem>
+          <PageHeaderToolsItem
+            id="user-dropdown"
+            visibility={{
+              default: 'hidden',
+              md: 'visible',
+              lg: 'visible',
+              xl: 'visible',
+              '2xl': 'visible'
+            }} /** this user dropdown is hidden on mobile sizes */
+          >
+            <Dropdown
+              isPlain
+              position="right"
+              onSelect={this.onDropdownSelect}
+              isOpen={isDropdownOpen}
+              toggle={<DropdownToggle onToggle={this.onDropdownToggle}>John Smith</DropdownToggle>}
+              dropdownItems={userDropdownItems}
+            />
+          </PageHeaderToolsItem>
+        </PageHeaderToolsGroup>
+        <Avatar src={imgAvatar} alt="Avatar image" />
+      </PageHeaderTools>
+    );
+
     const Header = (
       <PageHeader
         role={headerRole}
         id="page-demo-header"
         logo="Logo that's a <div>"
         logoProps={logoProps}
-        headerTools={<PageHeaderTools>PageHeaderTools | Avatar</PageHeaderTools>}
+        headerTools={headerTools}
         showNavToggle
         isNavOpen={isNavOpen}
         onNavToggle={this.onNavToggle}