Merge pull request #93 from jenny-s51/upgradeDeprecatedComponents_dem…

…o-app chore: upgrade deprecated components in demo-app
patternfly · Sep 8, 2023 · 1b002e8 · 1b002e8
2 parents 94067ef + 35b5135
commit 1b002e8
Show file tree

Hide file tree

Showing 10 changed files with 265 additions and 200 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/actionsComponentFactory.tsx b/packages/demo-app-ts/src/components/actionsComponentFactory.tsx
@@ -22,7 +22,7 @@ import CustomPathNode from './CustomPathNode';
 
 const contextMenuItem = (label: string, i: number): React.ReactElement => {
   if (label === '-') {
-    return <ContextMenuSeparator key={`separator:${i.toString()}`} />;
+    return <ContextMenuSeparator component="li" key={`separator:${i.toString()}`} />;
   }
   if (label.includes('->')) {
     const parent = label.slice(0, label.indexOf('->'));

diff --git a/packages/demo-app-ts/src/components/pipelineComponentFactory.tsx b/packages/demo-app-ts/src/components/pipelineComponentFactory.tsx
@@ -25,7 +25,7 @@ export const GROUPED_EDGE_TYPE = 'GROUPED_EDGE';
 
 const contextMenuItem = (label: string, i: number): React.ReactElement => {
   if (label === '-') {
-    return <ContextMenuSeparator key={`separator:${i.toString()}`} />;
+    return <ContextMenuSeparator component="li" key={`separator:${i.toString()}`} />;
   }
   return (
     // eslint-disable-next-line no-alert

diff --git a/packages/demo-app-ts/src/components/stylesComponentFactory.tsx b/packages/demo-app-ts/src/components/stylesComponentFactory.tsx
@@ -41,7 +41,7 @@ interface EdgeProps {
 
 const contextMenuItem = (label: string, i: number): React.ReactElement => {
   if (label === '-') {
-    return <ContextMenuSeparator key={`separator:${i.toString()}`} />;
+    return <ContextMenuSeparator component="li" key={`separator:${i.toString()}`} />;
   }
   return (
     // eslint-disable-next-line no-alert

diff --git a/packages/demo-app-ts/src/demos/ContextMenus.tsx b/packages/demo-app-ts/src/demos/ContextMenus.tsx
@@ -20,7 +20,7 @@ import { Tab, Tabs, TabTitleText } from '@patternfly/react-core';
 
 const contextMenuItem = (label: string, i: number): React.ReactElement => {
   if (label === '-') {
-    return <ContextMenuSeparator key={`separator:${i.toString()}`} />;
+    return <ContextMenuSeparator component="li" key={`separator:${i.toString()}`} />;
   }
   return (
     // eslint-disable-next-line no-alert