chore: upgrade v4 components to v5 in demo-app

patternfly · Aug 16, 2023 · 2299061 · 2299061
1 parent eea240b
commit 2299061
Show file tree

Hide file tree

Showing 3 changed files with 213 additions and 139 deletions.
diff --git a/packages/demo-app-ts/src/App.tsx b/packages/demo-app-ts/src/App.tsx
@@ -10,25 +10,24 @@ import {
   Avatar,
   Brand,
   Radio,
-  Masthead,
-  MastheadMain,
-  MastheadToggle,
-  MastheadBrand,
   NavExpandable,
   PageSidebarBody,
-  MastheadContent,
-  PageToggleButton,
   Toolbar,
-  ToolbarContent,
   ToolbarGroup,
-  ToolbarItem
+  ToolbarItem,
+  Masthead,
+  MastheadToggle,
+  PageToggleButton,
+  MastheadContent,
+  MastheadBrand,
+  MastheadMain,
+  ToolbarContent
 } from '@patternfly/react-core';
+import { BarsIcon } from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import imgBrand from './assets/images/imgBrand.svg';
 import imgAvatar from './assets/images/imgAvatar.svg';
 import Demos from './Demos';
 import './App.css';
-import { BarsIcon } from '@patternfly/react-icons';
-
 interface AppState {
   activeItem: number | string;
   isNavOpen: boolean;
@@ -153,13 +152,18 @@ class App extends React.Component<{}, AppState> {
     const AppHeader = (
       <Masthead>
         <MastheadToggle>
-          <PageToggleButton variant="plain" aria-label="Global navigation">
+          <PageToggleButton
+            variant="plain"
+            aria-label="Global navigation"
+            isSidebarOpen={isNavOpen}
+            onSidebarToggle={() => this.setState({ isNavOpen: !isNavOpen })}
+          >
             <BarsIcon />
           </PageToggleButton>
         </MastheadToggle>
         <MastheadMain>
-          <MastheadBrand>
-            <Brand src={imgBrand} alt="PatternFly" heights={{ default: '36px' }} />
+          <MastheadBrand component="a">
+            <Brand src={imgBrand} alt="Patternfly Logo" heights={{ default: '36px' }} />
           </MastheadBrand>
         </MastheadMain>
         <MastheadContent>{AppToolbar}</MastheadContent>

diff --git a/packages/demo-app-ts/src/components/stylesComponentFactory.tsx b/packages/demo-app-ts/src/components/stylesComponentFactory.tsx
@@ -53,7 +53,7 @@ const contextMenuItem = (label: string, i: number): React.ReactElement => {
 
 const createContextMenuItems = (...labels: string[]): React.ReactElement[] => labels.map(contextMenuItem);
 
-const defaultMenu = createContextMenuItems('First', 'Second', 'Third', '-', 'Fourth');
+const defaultMenu = createContextMenuItems('First', 'Second', 'Third', '-', 'Sub Menu-> Child1, Child2, Child3, -, Child4');
 
 const stylesComponentFactory: ComponentFactory = (
   kind: ModelKind,