npm - @patternfly/react-core - Versions diffs - 6.0.0-alpha.92 → 6.0.0-alpha.93 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (191) hide show

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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>

package/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx CHANGED Viewed

@@ -17,9 +17,10 @@ import {
   Gallery,
   GalleryItem,
   Masthead,
-  MastheadBrand,
-  MastheadContent,
   MastheadMain,
+  MastheadLogo,
+  MastheadContent,
+  MastheadBrand,
   MastheadToggle,
   Menu,
   MenuContent,
@@ -472,14 +473,16 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: 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>