@patternfly/react-core 6.0.0-alpha.91 → 6.0.0-alpha.93

package/src/components/Masthead/examples/MastheadInsets.tsx

@@ -1,14 +1,24 @@
 import React from 'react';
-import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button } from '@patternfly/react-core';
+import {
+  Masthead,
+  MastheadMain,
+  MastheadToggle,
+  MastheadBrand,
+  MastheadLogo,
+  MastheadContent,
+  Button
+} from '@patternfly/react-core';
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 
 export const MastheadInsets: React.FunctionComponent = () => (
   <Masthead id="inset-masthead" inset={{ default: 'insetSm' }}>
-    <MastheadToggle>
-      <Button variant="plain" onClick={() => {}} aria-label="Global navigation" icon={<BarsIcon />} />
-    </MastheadToggle>
     <MastheadMain>
-      <MastheadBrand component="a">Logo</MastheadBrand>
+      <MastheadToggle>
+        <Button variant="plain" onClick={() => {}} aria-label="Global navigation" icon={<BarsIcon />} />
+      </MastheadToggle>
+      <MastheadBrand>
+        <MastheadLogo component="a">Logo</MastheadLogo>
+      </MastheadBrand>
     </MastheadMain>
     <MastheadContent>
       <span>Content</span>

package/src/components/Masthead/index.ts

@@ -1,5 +1,6 @@
 export * from './Masthead';
 export * from './MastheadBrand';
 export * from './MastheadContent';
+export * from './MastheadLogo';
 export * from './MastheadMain';
 export * from './MastheadToggle';

package/src/components/Page/examples/Page.md

@@ -16,7 +16,10 @@ import c_page_section_m_limit_width_MaxWidth from '@patternfly/react-tokens/dist
 A page will typically contain the following components:
 
 - A `<Page>` with a `masthead` prop that often contains a [masthead](/components/masthead) component
-  - Mastheads contain the `<PageToggleButton>`, a `<MastheadMain>` that contains a `<MastheadBrand>`, and the page's header toolbar within `<MastheadContent>`.
+
+The `<MastheadMain>` component includes the smaller area that typically contains the `<MastheadToggle>` and a `<MastheadLogo>`. `<MastheadContent>` represents the main portion of the masthead, and will typically contain a `<Toolbar>` or other menu-like components, like a `<Dropdown>`.
+
+  - Mastheads contain a `<MastheadMain>` component, which includes the `<MastheadToggle>`, a `<MastheadLogo>`,  and the page's toolbar (via `<MastheadContent>`.) The `<MastheadToggle>` component contains a `<PageToggleButton>`, and the `<MastheadLogo>` component contains a `<MastheadBrand>`. 
 - 1 or more `<PageSidebarBody>` components inside `<PageSidebar>` for vertical navigation or other sidebar content
 - 1 or more `<PageSection>` components
 

package/src/components/Page/examples/PageCenteredSection.tsx

@@ -2,9 +2,10 @@ import React from 'react';
 import {
   Page,
   Masthead,
-  MastheadToggle,
   MastheadMain,
+  MastheadToggle,
   MastheadBrand,
+  MastheadLogo,
   MastheadContent,
   PageSidebar,
   PageSidebarBody,
@@ -37,20 +38,22 @@ export const PageCenteredSection: React.FunctionComponent = () => {
 
   const masthead = (
     <Masthead>
-      <MastheadToggle>
-        <PageToggleButton
-          variant="plain"
-          aria-label="Global navigation"
-          isSidebarOpen={isSidebarOpen}
-          onSidebarToggle={onSidebarToggle}
-          id="centered-nav-toggle"
-        >
-          <BarsIcon />
-        </PageToggleButton>
-      </MastheadToggle>
       <MastheadMain>
-        <MastheadBrand href="https://patternfly.org" target="_blank">
-          Logo
+        <MastheadToggle>
+          <PageToggleButton
+            variant="plain"
+            aria-label="Global navigation"
+            isSidebarOpen={isSidebarOpen}
+            onSidebarToggle={onSidebarToggle}
+            id="centered-nav-toggle"
+          >
+            <BarsIcon />
+          </PageToggleButton>
+        </MastheadToggle>
+        <MastheadBrand>
+          <MastheadLogo href="https://patternfly.org" target="_blank">
+            Logo
+          </MastheadLogo>
         </MastheadBrand>
       </MastheadMain>
       <MastheadContent>{headerToolbar}</MastheadContent>

package/src/components/Page/examples/PageGroupSection.tsx

@@ -2,9 +2,10 @@ import React from 'react';
 import {
   Page,
   Masthead,
-  MastheadToggle,
   MastheadMain,
+  MastheadToggle,
   MastheadBrand,
+  MastheadLogo,
   MastheadContent,
   PageSidebar,
   PageSidebarBody,
@@ -40,20 +41,22 @@ export const PageGroupSection: React.FunctionComponent = () => {
 
   const masthead = (
     <Masthead>
-      <MastheadToggle>
-        <PageToggleButton
-          variant="plain"
-          aria-label="Global navigation"
-          isSidebarOpen={isSidebarOpen}
-          onSidebarToggle={onSidebarToggle}
-          id="group-section-nav-toggle"
-        >
-          <BarsIcon />
-        </PageToggleButton>
-      </MastheadToggle>
       <MastheadMain>
-        <MastheadBrand href="https://patternfly.org" target="_blank">
-          Logo
+        <MastheadToggle>
+          <PageToggleButton
+            variant="plain"
+            aria-label="Global navigation"
+            isSidebarOpen={isSidebarOpen}
+            onSidebarToggle={onSidebarToggle}
+            id="group-section-nav-toggle"
+          >
+            <BarsIcon />
+          </PageToggleButton>
+        </MastheadToggle>
+        <MastheadBrand>
+          <MastheadLogo href="https://patternfly.org" target="_blank">
+            Logo
+          </MastheadLogo>
         </MastheadBrand>
       </MastheadMain>
       <MastheadContent>{headerToolbar}</MastheadContent>

package/src/components/Page/examples/PageHorizontalNav.tsx

@@ -4,6 +4,7 @@ import {
   Masthead,
   MastheadMain,
   MastheadBrand,
+  MastheadLogo,
   MastheadContent,
   PageSection,
   Toolbar,
@@ -24,8 +25,10 @@ export const PageHorizontalNav: React.FunctionComponent = () => {
   const masthead = (
     <Masthead inset={{ default: 'insetXs' }}>
       <MastheadMain>
-        <MastheadBrand href="https://patternfly.org" target="_blank">
-          Logo
+        <MastheadBrand>
+          <MastheadLogo href="https://patternfly.org" target="_blank">
+            Logo
+          </MastheadLogo>
         </MastheadBrand>
       </MastheadMain>
       <MastheadContent>{headerToolbar}</MastheadContent>

package/src/components/Page/examples/PageMainSectionPadding.tsx

@@ -2,9 +2,10 @@ import React from 'react';
 import {
   Page,
   Masthead,
-  MastheadToggle,
   MastheadMain,
+  MastheadToggle,
   MastheadBrand,
+  MastheadLogo,
   MastheadContent,
   PageSidebar,
   PageSidebarBody,
@@ -33,20 +34,22 @@ export const PageMainSectionPadding: React.FunctionComponent = () => {
 
   const masthead = (
     <Masthead>
-      <MastheadToggle>
-        <PageToggleButton
-          variant="plain"
-          aria-label="Global navigation"
-          isSidebarOpen={isSidebarOpen}
-          onSidebarToggle={onSidebarToggle}
-          id="main-padding-nav-toggle"
-        >
-          <BarsIcon />
-        </PageToggleButton>
-      </MastheadToggle>
       <MastheadMain>
-        <MastheadBrand href="https://patternfly.org" target="_blank">
-          Logo
+        <MastheadToggle>
+          <PageToggleButton
+            variant="plain"
+            aria-label="Global navigation"
+            isSidebarOpen={isSidebarOpen}
+            onSidebarToggle={onSidebarToggle}
+            id="main-padding-nav-toggle"
+          >
+            <BarsIcon />
+          </PageToggleButton>
+        </MastheadToggle>
+        <MastheadBrand>
+          <MastheadLogo href="https://patternfly.org" target="_blank">
+            Logo
+          </MastheadLogo>
         </MastheadBrand>
       </MastheadMain>
       <MastheadContent>{headerToolbar}</MastheadContent>

package/src/components/Page/examples/PageMainSectionVariations.tsx

@@ -2,9 +2,10 @@ import React from 'react';
 import {
   Page,
   Masthead,
-  MastheadToggle,
   MastheadMain,
+  MastheadToggle,
   MastheadBrand,
+  MastheadLogo,
   MastheadContent,
   PageSidebar,
   PageSidebarBody,
@@ -33,20 +34,22 @@ export const PageMainSectionPadding: React.FunctionComponent = () => {
 
   const header = (
     <Masthead>
-      <MastheadToggle>
-        <PageToggleButton
-          variant="plain"
-          aria-label="Global navigation"
-          isSidebarOpen={isSidebarOpen}
-          onSidebarToggle={onSidebarToggle}
-          id="main-variations-nav-toggle"
-        >
-          <BarsIcon />
-        </PageToggleButton>
-      </MastheadToggle>
       <MastheadMain>
-        <MastheadBrand href="https://patternfly.org" target="_blank">
-          Logo
+        <MastheadToggle>
+          <PageToggleButton
+            variant="plain"
+            aria-label="Global navigation"
+            isSidebarOpen={isSidebarOpen}
+            onSidebarToggle={onSidebarToggle}
+            id="main-variations-nav-toggle"
+          >
+            <BarsIcon />
+          </PageToggleButton>
+        </MastheadToggle>
+        <MastheadBrand>
+          <MastheadLogo href="https://patternfly.org" target="_blank">
+            Logo
+          </MastheadLogo>
         </MastheadBrand>
       </MastheadMain>
       <MastheadContent>{headerToolbar}</MastheadContent>

package/src/components/Page/examples/PageMultipleSidebarBody.tsx

@@ -2,9 +2,10 @@ import React from 'react';
 import {
   Page,
   Masthead,
-  MastheadToggle,
   MastheadMain,
+  MastheadToggle,
   MastheadBrand,
+  MastheadLogo,
   MastheadContent,
   PageSidebar,
   PageSidebarBody,
@@ -33,20 +34,22 @@ export const PageMultipleSidebarBody: React.FunctionComponent = () => {
 
   const masthead = (
     <Masthead>
-      <MastheadToggle>
-        <PageToggleButton
-          variant="plain"
-          aria-label="Global navigation"
-          isSidebarOpen={isSidebarOpen}
-          onSidebarToggle={onSidebarToggle}
-          id="multiple-sidebar-body-nav-toggle"
-        >
-          <BarsIcon />
-        </PageToggleButton>
-      </MastheadToggle>
       <MastheadMain>
-        <MastheadBrand href="https://patternfly.org" target="_blank">
-          Logo
+        <MastheadToggle>
+          <PageToggleButton
+            variant="plain"
+            aria-label="Global navigation"
+            isSidebarOpen={isSidebarOpen}
+            onSidebarToggle={onSidebarToggle}
+            id="multiple-sidebar-body-nav-toggle"
+          >
+            <BarsIcon />
+          </PageToggleButton>
+        </MastheadToggle>
+        <MastheadBrand>
+          <MastheadLogo href="https://patternfly.org" target="_blank">
+            Logo
+          </MastheadLogo>
         </MastheadBrand>
       </MastheadMain>
       <MastheadContent>{headerToolbar}</MastheadContent>

package/src/components/Page/examples/PageUncontrolledNav.tsx

@@ -2,9 +2,10 @@ import React from 'react';
 import {
   Page,
   Masthead,
-  MastheadToggle,
   MastheadMain,
+  MastheadToggle,
   MastheadBrand,
+  MastheadLogo,
   MastheadContent,
   PageSidebar,
   PageSidebarBody,
@@ -27,14 +28,16 @@ export const PageUncontrolledNav: React.FunctionComponent = () => {
 
   const masthead = (
     <Masthead>
-      <MastheadToggle>
-        <PageToggleButton variant="plain" aria-label="Global navigation" id="uncontrolled-nav-toggle">
-          <BarsIcon />
-        </PageToggleButton>
-      </MastheadToggle>
       <MastheadMain>
-        <MastheadBrand href="https://patternfly.org" target="_blank">
-          Logo
+        <MastheadToggle>
+          <PageToggleButton variant="plain" aria-label="Global navigation" id="uncontrolled-nav-toggle">
+            <BarsIcon />
+          </PageToggleButton>
+        </MastheadToggle>
+        <MastheadBrand>
+          <MastheadLogo href="https://patternfly.org" target="_blank">
+            Logo
+          </MastheadLogo>
         </MastheadBrand>
       </MastheadMain>
       <MastheadContent>{headerToolbar}</MastheadContent>

package/src/components/Page/examples/PageVerticalNav.tsx

@@ -2,9 +2,10 @@ import React from 'react';
 import {
   Page,
   Masthead,
-  MastheadToggle,
   MastheadMain,
+  MastheadToggle,
   MastheadBrand,
+  MastheadLogo,
   MastheadContent,
   PageSidebar,
   PageSidebarBody,
@@ -33,20 +34,22 @@ export const PageVerticalNav: React.FunctionComponent = () => {
 
   const masthead = (
     <Masthead>
-      <MastheadToggle>
-        <PageToggleButton
-          variant="plain"
-          aria-label="Global navigation"
-          isSidebarOpen={isSidebarOpen}
-          onSidebarToggle={onSidebarToggle}
-          id="vertical-nav-toggle"
-        >
-          <BarsIcon />
-        </PageToggleButton>
-      </MastheadToggle>
       <MastheadMain>
-        <MastheadBrand href="https://patternfly.org" target="_blank">
-          Logo
+        <MastheadToggle>
+          <PageToggleButton
+            variant="plain"
+            aria-label="Global navigation"
+            isSidebarOpen={isSidebarOpen}
+            onSidebarToggle={onSidebarToggle}
+            id="vertical-nav-toggle"
+          >
+            <BarsIcon />
+          </PageToggleButton>
+        </MastheadToggle>
+        <MastheadBrand>
+          <MastheadLogo href="https://patternfly.org" target="_blank">
+            Logo
+          </MastheadLogo>
         </MastheadBrand>
       </MastheadMain>
       <MastheadContent>{headerToolbar}</MastheadContent>

package/src/components/Page/examples/PageWithOrWithoutFill.tsx

@@ -2,9 +2,10 @@ import React from 'react';
 import {
   Page,
   Masthead,
-  MastheadToggle,
   MastheadMain,
+  MastheadToggle,
   MastheadBrand,
+  MastheadLogo,
   MastheadContent,
   PageSidebar,
   PageSidebarBody,
@@ -33,20 +34,22 @@ export const PageWithOrWithoutFill: React.FunctionComponent = () => {
 
   const masthead = (
     <Masthead>
-      <MastheadToggle>
-        <PageToggleButton
-          variant="plain"
-          aria-label="Global navigation"
-          isSidebarOpen={isSidebarOpen}
-          onSidebarToggle={onSidebarToggle}
-          id="fill-nav-toggle"
-        >
-          <BarsIcon />
-        </PageToggleButton>
-      </MastheadToggle>
       <MastheadMain>
-        <MastheadBrand href="https://patternfly.org" target="_blank">
-          Logo
+        <MastheadToggle>
+          <PageToggleButton
+            variant="plain"
+            aria-label="Global navigation"
+            isSidebarOpen={isSidebarOpen}
+            onSidebarToggle={onSidebarToggle}
+            id="fill-nav-toggle"
+          >
+            <BarsIcon />
+          </PageToggleButton>
+        </MastheadToggle>
+        <MastheadBrand>
+          <MastheadLogo href="https://patternfly.org" target="_blank">
+            Logo
+          </MastheadLogo>
         </MastheadBrand>
       </MastheadMain>
       <MastheadContent>{headerToolbar}</MastheadContent>

package/src/demos/DashboardHeader.tsx

@@ -10,9 +10,10 @@ import {
   DropdownItem,
   DropdownList,
   Masthead,
-  MastheadToggle,
   MastheadMain,
+  MastheadToggle,
   MastheadBrand,
+  MastheadLogo,
   MastheadContent,
   MenuToggle,
   Toolbar,
@@ -85,14 +86,16 @@ export const DashboardHeader: React.FC<DashboardHeaderProps> = ({ notificationBa
 
   return (
     <Masthead>
-      <MastheadToggle>
-        <PageToggleButton variant="plain" aria-label="Global navigation">
-          <BarsIcon />
-        </PageToggleButton>
-      </MastheadToggle>
       <MastheadMain>
+        <MastheadToggle>
+          <PageToggleButton variant="plain" aria-label="Global navigation">
+            <BarsIcon />
+          </PageToggleButton>
+        </MastheadToggle>
         <MastheadBrand>
-          <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
+          <MastheadLogo>
+            <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
+          </MastheadLogo>
         </MastheadBrand>
       </MastheadMain>
       <MastheadContent>

package/src/demos/Masthead.md

@@ -4,10 +4,12 @@ section: components
 ---
 
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+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';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
+import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 import pfIcon from './assets/pf-logo-small.svg';
 import pfLogo from './assets/PF-HorizontalLogo-Color.svg';

package/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx

@@ -36,9 +36,10 @@ import {
   PageToggleButton,
   Masthead,
   MastheadMain,
+  MastheadBrand,
   MastheadToggle,
   MastheadContent,
-  MastheadBrand,
+  MastheadLogo,
   Toolbar,
   ToolbarItem,
   ToolbarGroup,
@@ -259,14 +260,16 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
 
   const masthead = (
     <Masthead>
-      <MastheadToggle>
-        <PageToggleButton variant="plain" aria-label="Global navigation">
-          <BarsIcon />
-        </PageToggleButton>
-      </MastheadToggle>
       <MastheadMain>
+        <MastheadToggle>
+          <PageToggleButton variant="plain" aria-label="Global navigation">
+            <BarsIcon />
+          </PageToggleButton>
+        </MastheadToggle>
         <MastheadBrand>
-          <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
+          <MastheadLogo>
+            <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
+          </MastheadLogo>
         </MastheadBrand>
       </MastheadMain>
       <MastheadContent>{headerToolbar}</MastheadContent>

package/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx

@@ -38,9 +38,10 @@ import {
   PageToggleButton,
   Masthead,
   MastheadMain,
+  MastheadBrand,
   MastheadToggle,
   MastheadContent,
-  MastheadBrand,
+  MastheadLogo,
   Toolbar,
   ToolbarItem,
   ToolbarGroup,
@@ -309,14 +310,16 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
 
   const masthead = (
     <Masthead>
-      <MastheadToggle>
-        <PageToggleButton variant="plain" aria-label="Global navigation">
-          <BarsIcon />
-        </PageToggleButton>
-      </MastheadToggle>
       <MastheadMain>
+        <MastheadToggle>
+          <PageToggleButton variant="plain" aria-label="Global navigation">
+            <BarsIcon />
+          </PageToggleButton>
+        </MastheadToggle>
         <MastheadBrand>
-          <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
+          <MastheadLogo>
+            <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
+          </MastheadLogo>
         </MastheadBrand>
       </MastheadMain>
       <MastheadContent>{headerToolbar}</MastheadContent>

package/src/demos/RTL/examples/PaginatedTable.jsx

@@ -17,9 +17,10 @@ import {
   Icon,
   Label,
   Masthead,
-  MastheadBrand,
-  MastheadContent,
   MastheadMain,
+  MastheadLogo,
+  MastheadContent,
+  MastheadBrand,
   MastheadToggle,
   MenuToggle,
   Nav,
@@ -323,15 +324,17 @@ export const PaginatedTableAction = () => {
 
   const masthead = (
     <Masthead>
-      <MastheadToggle>
-        <PageToggleButton variant="plain" aria-label={translation.mastheadToggleAriaLabel}>
-          <BarsIcon />
-        </PageToggleButton>
-      </MastheadToggle>
       <MastheadMain>
-        <MastheadBrand dir="ltr">
-          <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
-          {translation.brandLanguage && <span className="brand-language">{translation.brandLanguage}</span>}
+        <MastheadToggle>
+          <PageToggleButton variant="plain" aria-label={translation.mastheadToggleAriaLabel}>
+            <BarsIcon />
+          </PageToggleButton>
+        </MastheadToggle>
+        <MastheadBrand>
+          <MastheadLogo dir="ltr">
+            <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
+            {translation.brandLanguage && <span className="brand-language">{translation.brandLanguage}</span>}
+          </MastheadLogo>
         </MastheadBrand>
       </MastheadMain>
       <MastheadContent>

package/src/demos/RTL/examples/PaginatedTable.tsx

@@ -17,9 +17,10 @@ import {
   Icon,
   Label,
   Masthead,
-  MastheadBrand,
-  MastheadContent,
   MastheadMain,
+  MastheadLogo,
+  MastheadContent,
+  MastheadBrand,
   MastheadToggle,
   MenuToggle,
   Nav,
@@ -347,15 +348,17 @@ export const PaginatedTableAction: React.FunctionComponent = () => {
 
   const masthead = (
     <Masthead>
-      <MastheadToggle>
-        <PageToggleButton variant="plain" aria-label={translation.mastheadToggleAriaLabel}>
-          <BarsIcon />
-        </PageToggleButton>
-      </MastheadToggle>
       <MastheadMain>
-        <MastheadBrand dir="ltr">
-          <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
-          {translation.brandLanguage && <span className="brand-language">{translation.brandLanguage}</span>}
+        <MastheadToggle>
+          <PageToggleButton variant="plain" aria-label={translation.mastheadToggleAriaLabel}>
+            <BarsIcon />
+          </PageToggleButton>
+        </MastheadToggle>
+        <MastheadBrand>
+          <MastheadLogo dir="ltr">
+            <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
+            {translation.brandLanguage && <span className="brand-language">{translation.brandLanguage}</span>}
+          </MastheadLogo>
         </MastheadBrand>
       </MastheadMain>
       <MastheadContent>

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

@@ -16,9 +16,10 @@ import {
   Gallery,
   GalleryItem,
   Masthead,
-  MastheadBrand,
-  MastheadContent,
   MastheadMain,
+  MastheadLogo,
+  MastheadContent,
+  MastheadBrand,
   MenuToggle,
   MenuToggleElement,
   Nav,
@@ -273,7 +274,9 @@ export const MastheadWithHorizontalNav: React.FunctionComponent = () => {
     <Masthead>
       <MastheadMain>
         <MastheadBrand>
-          <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
+          <MastheadLogo>
+            <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
+          </MastheadLogo>
         </MastheadBrand>
       </MastheadMain>
       <MastheadContent>{headerToolbar}</MastheadContent>