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/demos/examples/Nav/NavFlyout.tsx CHANGED Viewed

@@ -10,9 +10,10 @@ import {
   DropdownItem,
   DropdownList,
   Masthead,
-  MastheadBrand,
-  MastheadContent,
   MastheadMain,
+  MastheadLogo,
+  MastheadContent,
+  MastheadBrand,
   MastheadToggle,
   Menu,
   MenuContent,
@@ -217,18 +218,20 @@ export const NavFlyout: React.FunctionComponent = () => {
   const masthead = (
     <Masthead>
-      <MastheadToggle>
-        <PageToggleButton
-          onSidebarToggle={isMobileView ? onSidebarToggleMobile : onSidebarToggleDesktop}
-          variant="plain"
-          aria-label="Global navigation"
-        >
-          <BarsIcon />
-        </PageToggleButton>
-      </MastheadToggle>
       <MastheadMain>
+        <MastheadToggle>
+          <PageToggleButton
+            onSidebarToggle={isMobileView ? onSidebarToggleMobile : onSidebarToggleDesktop}
+            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/examples/Nav/NavHorizontal.tsx CHANGED Viewed

@@ -17,6 +17,7 @@ import {
   Masthead,
   MastheadMain,
   MastheadBrand,
+  MastheadLogo,
   MastheadContent,
   MenuToggle,
   Nav,
@@ -196,7 +197,9 @@ export const NavHorizontal: 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/Nav/NavHorizontalWithSubnav.tsx CHANGED Viewed

@@ -16,9 +16,10 @@ import {
   GalleryItem,
   MenuToggle,
   Masthead,
-  MastheadBrand,
-  MastheadContent,
   MastheadMain,
+  MastheadLogo,
+  MastheadContent,
+  MastheadBrand,
   MastheadToggle,
   Nav,
   NavItem,
@@ -243,14 +244,16 @@ export const NavHorizontalWithSubnav: 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/examples/Nav/NavManual.tsx CHANGED Viewed

@@ -15,9 +15,10 @@ import {
   Gallery,
   GalleryItem,
   Masthead,
-  MastheadBrand,
-  MastheadContent,
   MastheadMain,
+  MastheadLogo,
+  MastheadContent,
+  MastheadBrand,
   MastheadToggle,
   MenuToggle,
   Nav,
@@ -210,18 +211,20 @@ export const NavManual: React.FunctionComponent = () => {
   );
   const masthead = (
     <Masthead>
-      <MastheadToggle>
-        <PageToggleButton
-          onSidebarToggle={isMobileView ? onSidebarToggleMobile : onSidebarToggleDesktop}
-          variant="plain"
-          aria-label="Global navigation"
-        >
-          <BarsIcon />
-        </PageToggleButton>
-      </MastheadToggle>
       <MastheadMain>
+        <MastheadToggle>
+          <PageToggleButton
+            onSidebarToggle={isMobileView ? onSidebarToggleMobile : onSidebarToggleDesktop}
+            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/examples/Page/PageContextSelector.tsx CHANGED Viewed

@@ -16,9 +16,10 @@ import {
   Gallery,
   GalleryItem,
   Masthead,
-  MastheadBrand,
-  MastheadContent,
   MastheadMain,
+  MastheadLogo,
+  MastheadContent,
+  MastheadBrand,
   MastheadToggle,
   MenuToggle,
   MenuToggleElement,
@@ -224,14 +225,16 @@ export const PageStickySectionBreadcrumb: 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/examples/Page/PageStickySectionBreadcrumb.tsx CHANGED Viewed

@@ -17,9 +17,10 @@ import {
   Gallery,
   GalleryItem,
   Masthead,
-  MastheadBrand,
-  MastheadContent,
   MastheadMain,
+  MastheadLogo,
+  MastheadContent,
+  MastheadBrand,
   MastheadToggle,
   MenuToggle,
   MenuToggleElement,
@@ -207,14 +208,16 @@ export const PageStickySectionBreadcrumb: 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/examples/Page/PageStickySectionGroup.tsx CHANGED Viewed

@@ -17,9 +17,10 @@ import {
   Gallery,
   GalleryItem,
   Masthead,
-  MastheadBrand,
-  MastheadContent,
   MastheadMain,
+  MastheadLogo,
+  MastheadContent,
+  MastheadBrand,
   MastheadToggle,
   MenuToggle,
   MenuToggleElement,
@@ -207,14 +208,16 @@ export const PageStickySectionGroup: 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/examples/Page/PageStickySectionGroupAlternate.tsx CHANGED Viewed

@@ -17,9 +17,10 @@ import {
   Gallery,
   GalleryItem,
   Masthead,
-  MastheadBrand,
-  MastheadContent,
   MastheadMain,
+  MastheadLogo,
+  MastheadContent,
+  MastheadBrand,
   MastheadToggle,
   MenuToggle,
   MenuToggleElement,
@@ -199,14 +200,16 @@ export const PageStickySectionGroupAlternate: 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/examples/Wizard/InPageWithDrawer.tsx CHANGED Viewed

@@ -23,10 +23,11 @@ import {
   PageSidebarBody,
   SkipToContent,
   Masthead,
-  PageToggleButton,
-  MastheadToggle,
   MastheadMain,
+  MastheadToggle,
   MastheadBrand,
+  MastheadLogo,
+  PageToggleButton,
   Wizard,
   WizardStep
 } from '@patternfly/react-core';
@@ -81,14 +82,16 @@ export const WizardFullPageWithDrawerDemo: React.FunctionComponent = () => {
   const masthead = (
     <Masthead id="basic">
-      <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>
     </Masthead>

package/src/demos/examples/Wizard/InPageWithDrawerInformationalStep.tsx CHANGED Viewed

@@ -23,10 +23,11 @@ import {
   PageSidebarBody,
   SkipToContent,
   Masthead,
-  PageToggleButton,
-  MastheadToggle,
   MastheadMain,
+  MastheadToggle,
   MastheadBrand,
+  MastheadLogo,
+  PageToggleButton,
   Wizard,
   WizardStep
 } from '@patternfly/react-core';
@@ -81,14 +82,16 @@ export const WizardFullPageWithDrawerInfoStepDemo: React.FunctionComponent = ()
   const masthead = (
     <Masthead id="basic">
-      <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>
     </Masthead>