From 2088cf5d8cf9d845e2dc7ebaea5bb74f790434f9 Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Mon, 6 Jun 2022 17:00:53 -0400
Subject: [PATCH 1/8] align dashboardwrapper with core

---
 .../src/components/Page/PageSidebar.tsx          |  2 +-
 .../src/demos/examples/DashboardHeader.js        | 16 ++++++++++------
 .../src/demos/examples/DashboardWrapper.js       |  6 +++---
 3 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/packages/react-core/src/components/Page/PageSidebar.tsx b/packages/react-core/src/components/Page/PageSidebar.tsx
index 91091481cf4..b5691630cbc 100644
--- a/packages/react-core/src/components/Page/PageSidebar.tsx
+++ b/packages/react-core/src/components/Page/PageSidebar.tsx
@@ -51,7 +51,7 @@ export const PageSidebar: React.FunctionComponent<PageSidebarProps> = ({
           aria-hidden={!navOpen}
           {...props}
         >
-          <div className="pf-topology-side-bar__body">
+          <div className={styles.pageSidebarBody}>
             <PageSidebarContext.Provider value={{ isNavOpen: navOpen }}>{nav}</PageSidebarContext.Provider>
           </div>
         </div>
diff --git a/packages/react-core/src/demos/examples/DashboardHeader.js b/packages/react-core/src/demos/examples/DashboardHeader.js
index c835825700d..80efbf11cb2 100644
--- a/packages/react-core/src/demos/examples/DashboardHeader.js
+++ b/packages/react-core/src/demos/examples/DashboardHeader.js
@@ -27,7 +27,6 @@ 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 BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
-import imgBrand from './pfColorLogo.svg';
 import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
 
 export default class DashboardHeader extends React.Component {
@@ -121,7 +120,7 @@ export default class DashboardHeader extends React.Component {
     ];
 
     const headerToolbar = (
-      <Toolbar id="toolbar" isFullHeight isStatic>
+      <Toolbar id="toolbar" inset={{ default: 'insetMd' }} isFullHeight isStatic>
         <ToolbarContent>
           <ToolbarGroup
             variant="icon-button-group"
@@ -158,10 +157,8 @@ export default class DashboardHeader extends React.Component {
               />
             </ToolbarItem>
           </ToolbarGroup>
-
           <ToolbarItem visibility={{ default: 'hidden', sm: 'visible' }}>
             <Dropdown
-              position="right"
               isFullHeight
               onSelect={this.onDropdownSelect}
               isOpen={isDropdownOpen}
@@ -178,7 +175,7 @@ export default class DashboardHeader extends React.Component {
     );
 
     const masthead = (
-      <Masthead>
+      <Masthead inset={{ default: 'insetLg' }}>
         <MastheadToggle>
           <PageToggleButton variant="plain" aria-label="Global navigation">
             <BarsIcon />
@@ -186,7 +183,14 @@ export default class DashboardHeader extends React.Component {
         </MastheadToggle>
         <MastheadMain>
           <MastheadBrand>
-            <Brand src={imgBrand} alt="Patternfly logo" />
+            <Brand
+              widths={{ default: '180px', md: '180px', '2xl': '220px' }}
+              src="/assets/images/logo__pf--reverse--base.png"
+              alt="Fallback patternFly default logo"
+            >
+              <source media="(min-width: 768px)" srcSet="/assets/images/logo__pf--reverse-on-md.svg" />
+              <source srcSet="/assets/images/logo__pf--reverse--base.svg" />
+            </Brand>
           </MastheadBrand>
         </MastheadMain>
         <MastheadContent>{headerToolbar}</MastheadContent>
diff --git a/packages/react-core/src/demos/examples/DashboardWrapper.js b/packages/react-core/src/demos/examples/DashboardWrapper.js
index 280e0407eb0..dc6b4e6ddcc 100644
--- a/packages/react-core/src/demos/examples/DashboardWrapper.js
+++ b/packages/react-core/src/demos/examples/DashboardWrapper.js
@@ -37,7 +37,7 @@ export default class DashboardWrapper extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      activeItem: 0
+      activeItem: 1
     };
 
     this.onNavSelect = result => {
@@ -70,7 +70,7 @@ export default class DashboardWrapper extends React.Component {
       <Nav onSelect={this.onNavSelect} aria-label="Nav">
         <NavList>
           <NavItem itemId={0} isActive={activeItem === 0} to="#system-panel">
-            System Panel
+            System panel
           </NavItem>
           <NavItem itemId={1} isActive={activeItem === 1} to="#policy">
             Policy
@@ -79,7 +79,7 @@ export default class DashboardWrapper extends React.Component {
             Authentication
           </NavItem>
           <NavItem itemId={3} isActive={activeItem === 3} to="#network">
-            Network Services
+            Network services
           </NavItem>
           <NavItem itemId={4} isActive={activeItem === 4} to="#server">
             Server

From 835c62e330c9838157fbac8ea91d58485d953026 Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Mon, 6 Jun 2022 17:02:41 -0400
Subject: [PATCH 2/8] remove inset from toolbar

---
 packages/react-core/src/demos/examples/DashboardHeader.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-core/src/demos/examples/DashboardHeader.js b/packages/react-core/src/demos/examples/DashboardHeader.js
index 80efbf11cb2..bfd13bbcc14 100644
--- a/packages/react-core/src/demos/examples/DashboardHeader.js
+++ b/packages/react-core/src/demos/examples/DashboardHeader.js
@@ -120,7 +120,7 @@ export default class DashboardHeader extends React.Component {
     ];
 
     const headerToolbar = (
-      <Toolbar id="toolbar" inset={{ default: 'insetMd' }} isFullHeight isStatic>
+      <Toolbar id="toolbar" isFullHeight isStatic>
         <ToolbarContent>
           <ToolbarGroup
             variant="icon-button-group"

From eb0b41576eac8b45794853acbf6fc053afb4e978 Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Tue, 7 Jun 2022 10:53:39 -0400
Subject: [PATCH 3/8] tests

---
 .../__snapshots__/PageSidebar.test.tsx.snap    |  2 +-
 .../__tests__/__snapshots__/Page.test.tsx.snap | 18 +++++++++---------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/react-core/src/components/Page/__tests__/Generated/__snapshots__/PageSidebar.test.tsx.snap b/packages/react-core/src/components/Page/__tests__/Generated/__snapshots__/PageSidebar.test.tsx.snap
index 6b566f007ee..a2017c6bb8a 100644
--- a/packages/react-core/src/components/Page/__tests__/Generated/__snapshots__/PageSidebar.test.tsx.snap
+++ b/packages/react-core/src/components/Page/__tests__/Generated/__snapshots__/PageSidebar.test.tsx.snap
@@ -8,7 +8,7 @@ exports[`PageSidebar should match snapshot (auto-generated) 1`] = `
     id="page-sidebar"
   >
     <div
-      class="pf-topology-side-bar__body"
+      class="pf-c-page__sidebar-body"
     >
       <div>
         ReactNode
diff --git a/packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap b/packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap
index dfa2c9fb4a3..17e3a227a21 100644
--- a/packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap
+++ b/packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap
@@ -27,7 +27,7 @@ exports[`Page Check dark page against snapshot 1`] = `
       id="page-sidebar"
     >
       <div
-        class="pf-topology-side-bar__body"
+        class="pf-c-page__sidebar-body"
       >
         Navigation
       </div>
@@ -93,7 +93,7 @@ exports[`Page Check page horizontal layout example against snapshot 1`] = `
       id="page-sidebar"
     >
       <div
-        class="pf-topology-side-bar__body"
+        class="pf-c-page__sidebar-body"
       />
     </div>
     <main
@@ -157,7 +157,7 @@ exports[`Page Check page to verify breadcrumb is created - PageBreadcrumb syntax
       id="page-sidebar"
     >
       <div
-        class="pf-topology-side-bar__body"
+        class="pf-c-page__sidebar-body"
       />
     </div>
     <main
@@ -324,7 +324,7 @@ exports[`Page Check page to verify breadcrumb is created 1`] = `
       id="page-sidebar"
     >
       <div
-        class="pf-topology-side-bar__body"
+        class="pf-c-page__sidebar-body"
       />
     </div>
     <main
@@ -491,7 +491,7 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
       id="page-sidebar"
     >
       <div
-        class="pf-topology-side-bar__body"
+        class="pf-c-page__sidebar-body"
       />
     </div>
     <main
@@ -777,7 +777,7 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
       id="page-sidebar"
     >
       <div
-        class="pf-topology-side-bar__body"
+        class="pf-c-page__sidebar-body"
       />
     </div>
     <main
@@ -1067,7 +1067,7 @@ exports[`Page Check page to verify nav is created - PageNavigation syntax 1`] =
       id="page-sidebar"
     >
       <div
-        class="pf-topology-side-bar__body"
+        class="pf-c-page__sidebar-body"
       />
     </div>
     <main
@@ -1253,7 +1253,7 @@ exports[`Page Check page to verify skip to content points to main content region
       id="page-sidebar"
     >
       <div
-        class="pf-topology-side-bar__body"
+        class="pf-c-page__sidebar-body"
       />
     </div>
     <main
@@ -1416,7 +1416,7 @@ exports[`Page Check page vertical layout example against snapshot 1`] = `
       id="page-sidebar"
     >
       <div
-        class="pf-topology-side-bar__body"
+        class="pf-c-page__sidebar-body"
       >
         Navigation
       </div>

From 1eb77852d1f5ee5525e003f4e80b746ebea1a0eb Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Tue, 7 Jun 2022 15:03:40 -0400
Subject: [PATCH 4/8] update mastheadToggle.tsx

---
 .../react-core/src/components/Masthead/MastheadToggle.tsx     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-core/src/components/Masthead/MastheadToggle.tsx b/packages/react-core/src/components/Masthead/MastheadToggle.tsx
index 71211b44964..2f2c36b10d0 100644
--- a/packages/react-core/src/components/Masthead/MastheadToggle.tsx
+++ b/packages/react-core/src/components/Masthead/MastheadToggle.tsx
@@ -14,8 +14,8 @@ export const MastheadToggle: React.FunctionComponent<MastheadToggleProps> = ({
   className,
   ...props
 }: MastheadToggleProps) => (
-  <div className={css(styles.mastheadToggle, className)} {...props}>
+  <span className={css(styles.mastheadToggle, className)} {...props}>
     {children}
-  </div>
+  </span>
 );
 MastheadToggle.displayName = 'MastheadToggle';

From e626ad2d31e931071fb3267d4b81dc04ceb6d42f Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Wed, 8 Jun 2022 09:56:07 -0400
Subject: [PATCH 5/8] fix kebab visibility

---
 .../__tests__/__snapshots__/Masthead.test.tsx.snap   | 12 ++++++------
 .../react-core/src/demos/examples/DashboardHeader.js |  8 +++++---
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/packages/react-core/src/components/Masthead/__tests__/__snapshots__/Masthead.test.tsx.snap b/packages/react-core/src/components/Masthead/__tests__/__snapshots__/Masthead.test.tsx.snap
index 9749b5f0c90..44b2ca096ea 100644
--- a/packages/react-core/src/components/Masthead/__tests__/__snapshots__/Masthead.test.tsx.snap
+++ b/packages/react-core/src/components/Masthead/__tests__/__snapshots__/Masthead.test.tsx.snap
@@ -25,11 +25,11 @@ exports[`Masthead verify full structure 1`] = `
   <header
     class="pf-c-masthead pf-m-display-inline-on-md"
   >
-    <div
+    <span
       class="pf-c-masthead__toggle"
     >
       Toggle
-    </div>
+    </span>
     <div
       class="pf-c-masthead__main"
     >
@@ -226,20 +226,20 @@ exports[`MastheadMain verify custom class 1`] = `
 
 exports[`MastheadToggle verify basic 1`] = `
 <DocumentFragment>
-  <div
+  <span
     class="pf-c-masthead__toggle"
   >
     test
-  </div>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`MastheadToggle verify custom class 1`] = `
 <DocumentFragment>
-  <div
+  <span
     class="pf-c-masthead__toggle custom-css"
   >
     test
-  </div>
+  </span>
 </DocumentFragment>
 `;
diff --git a/packages/react-core/src/demos/examples/DashboardHeader.js b/packages/react-core/src/demos/examples/DashboardHeader.js
index bfd13bbcc14..5b3b2c8e4b5 100644
--- a/packages/react-core/src/demos/examples/DashboardHeader.js
+++ b/packages/react-core/src/demos/examples/DashboardHeader.js
@@ -27,7 +27,6 @@ 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 BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
-import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
 
 export default class DashboardHeader extends React.Component {
   constructor(props) {
@@ -146,7 +145,7 @@ export default class DashboardHeader extends React.Component {
                 <Button aria-label="Help" variant={ButtonVariant.plain} icon={<QuestionCircleIcon />} />
               </ToolbarItem>
             </ToolbarGroup>
-            <ToolbarItem visibility={{ default: 'hidden', sm: 'visible', md: 'visible', lg: 'hidden' }}>
+            <ToolbarItem visibility={{ default: 'visible', sm: 'visible', md: 'visible', lg: 'hidden', xl: 'hidden' }}>
               <Dropdown
                 isPlain
                 position="right"
@@ -163,7 +162,10 @@ export default class DashboardHeader extends React.Component {
               onSelect={this.onDropdownSelect}
               isOpen={isDropdownOpen}
               toggle={
-                <DropdownToggle icon={<Avatar src={imgAvatar} alt="Avatar" />} onToggle={this.onDropdownToggle}>
+                <DropdownToggle
+                  icon={<Avatar src="/assets/images/img_avatar.svg" alt="Avatar" />}
+                  onToggle={this.onDropdownToggle}
+                >
                   Ned Username
                 </DropdownToggle>
               }

From 3af6c8ce9be19bec2b50812326ce65b74f0f1032 Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Thu, 9 Jun 2022 16:09:09 -0400
Subject: [PATCH 6/8] fix circular dependency

---
 packages/react-core/src/demos/examples/DashboardHeader.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/react-core/src/demos/examples/DashboardHeader.js b/packages/react-core/src/demos/examples/DashboardHeader.js
index 5b3b2c8e4b5..3caee714a80 100644
--- a/packages/react-core/src/demos/examples/DashboardHeader.js
+++ b/packages/react-core/src/demos/examples/DashboardHeader.js
@@ -27,6 +27,7 @@ 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 BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
 
 export default class DashboardHeader extends React.Component {
   constructor(props) {
@@ -162,10 +163,7 @@ export default class DashboardHeader extends React.Component {
               onSelect={this.onDropdownSelect}
               isOpen={isDropdownOpen}
               toggle={
-                <DropdownToggle
-                  icon={<Avatar src="/assets/images/img_avatar.svg" alt="Avatar" />}
-                  onToggle={this.onDropdownToggle}
-                >
+                <DropdownToggle icon={<Avatar src={imgAvatar} alt="Avatar" />} onToggle={this.onDropdownToggle}>
                   Ned Username
                 </DropdownToggle>
               }

From d9a7ee688977ec48f9baf05cb17f77e0c44c4fc5 Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Tue, 21 Jun 2022 15:32:59 -0400
Subject: [PATCH 7/8] PR feedback from mcoker, mattnolting

---
 packages/react-core/src/demos/examples/DashboardHeader.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-core/src/demos/examples/DashboardHeader.js b/packages/react-core/src/demos/examples/DashboardHeader.js
index 3caee714a80..ca9863a1a74 100644
--- a/packages/react-core/src/demos/examples/DashboardHeader.js
+++ b/packages/react-core/src/demos/examples/DashboardHeader.js
@@ -175,7 +175,7 @@ export default class DashboardHeader extends React.Component {
     );
 
     const masthead = (
-      <Masthead inset={{ default: 'insetLg' }}>
+      <Masthead>
         <MastheadToggle>
           <PageToggleButton variant="plain" aria-label="Global navigation">
             <BarsIcon />

From aa8812cf8f09acbad861917ced69a8a20cc6c441 Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Tue, 21 Jun 2022 15:34:23 -0400
Subject: [PATCH 8/8] visibility comment from mcoker

---
 packages/react-core/src/demos/examples/DashboardHeader.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-core/src/demos/examples/DashboardHeader.js b/packages/react-core/src/demos/examples/DashboardHeader.js
index ca9863a1a74..8e7b6921607 100644
--- a/packages/react-core/src/demos/examples/DashboardHeader.js
+++ b/packages/react-core/src/demos/examples/DashboardHeader.js
@@ -146,7 +146,7 @@ export default class DashboardHeader extends React.Component {
                 <Button aria-label="Help" variant={ButtonVariant.plain} icon={<QuestionCircleIcon />} />
               </ToolbarItem>
             </ToolbarGroup>
-            <ToolbarItem visibility={{ default: 'visible', sm: 'visible', md: 'visible', lg: 'hidden', xl: 'hidden' }}>
+            <ToolbarItem visibility={{ lg: 'hidden' }}>
               <Dropdown
                 isPlain
                 position="right"