Merge pull request #84 from jenny-s51/updateDeprecatedComponents

Update deprecated components
patternfly · Aug 14, 2023 · a382158 · a382158
2 parents 3d02f36 + 3ab72a6
commit a382158
Show file tree

Hide file tree

Showing 5 changed files with 188 additions and 165 deletions.
diff --git a/packages/demo-app-ts/src/App.tsx b/packages/demo-app-ts/src/App.tsx
@@ -1,28 +1,33 @@
 import React from 'react';
 import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';
 import {
-	Page,
-	Nav,
-	NavList,
-	NavItem,
-	PageSection,
-	PageSidebar,
-	Avatar,
-	Brand,
-	Radio,
-	NavExpandable,
-  PageSidebarBody
+  Page,
+  Nav,
+  NavList,
+  NavItem,
+  PageSection,
+  PageSidebar,
+  Avatar,
+  Brand,
+  Radio,
+  Masthead,
+  MastheadMain,
+  MastheadToggle,
+  MastheadBrand,
+  NavExpandable,
+  PageSidebarBody,
+  MastheadContent,
+  PageToggleButton,
+  Toolbar,
+  ToolbarContent,
+  ToolbarGroup,
+  ToolbarItem
 } from '@patternfly/react-core';
-import {
-	PageHeader,
-	PageHeaderTools,
-	PageHeaderToolsItem,
-	PageHeaderToolsGroup
-} from '@patternfly/react-core/deprecated';
 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;
@@ -32,18 +37,15 @@ interface AppState {
 
 class App extends React.Component<{}, AppState> {
   state: AppState = {
-    activeItem: Demos.reduce((active, demo) =>
-      active ||
-        (demo.isDefault ?
-          demo.id :
-          demo.demos?.find(subDemo => subDemo.isDefault)?.id
-        ),
-      ''),
+    activeItem: Demos.reduce(
+      (active, demo) => active || (demo.isDefault ? demo.id : demo.demos?.find((subDemo) => subDemo.isDefault)?.id),
+      ''
+    ),
     isNavOpen: true,
     isDarkTheme: false
   };
 
-  private onNavSelect = (_event:any, selectedItem: { itemId: number | string; groupId: number | string }) => {
+  private onNavSelect = (_event: any, selectedItem: { itemId: number | string; groupId: number | string }) => {
     this.setState({ activeItem: selectedItem.itemId });
   };
 
@@ -60,13 +62,10 @@ class App extends React.Component<{}, AppState> {
   };
 
   private getPages = () => {
-    const defaultDemo = Demos.reduce((active, demo) =>
-        active ||
-        (demo.isDefault ?
-            demo :
-            demo.demos?.find(subDemo => subDemo.isDefault)
-        ),
-      undefined)
+    const defaultDemo = Demos.reduce(
+      (active, demo) => active || (demo.isDefault ? demo : demo.demos?.find((subDemo) => subDemo.isDefault)),
+      undefined
+    );
     return (
       <Switch>
         {Demos.reduce((acc, demo) => {
@@ -82,14 +81,14 @@ class App extends React.Component<{}, AppState> {
                   )}
                   key={demo.id}
                 />
-              )
-            })
+              );
+            });
           } else {
             acc.push(
               <Route
                 path={`/${demo.id}-nav-link`}
                 render={() => (
-                  <PageSection style={{zIndex: 2}} id={`/${demo.id}-page-section`}>
+                  <PageSection style={{ zIndex: 2 }} id={`/${demo.id}-page-section`}>
                     {React.createElement(demo.componentType)}
                   </PageSection>
                 )}
@@ -120,41 +119,51 @@ class App extends React.Component<{}, AppState> {
     const { isNavOpen, activeItem, isDarkTheme } = this.state;
 
     const AppToolbar = (
-      <PageHeaderTools>
-        <PageHeaderToolsGroup>
-          <PageHeaderToolsItem style={{ marginRight: '10px' }}>
-            <Radio
-              id="light-theme"
-              aria-label="Light theme"
-              label={`Light theme`}
-              name="light-theme"
-              isChecked={!isDarkTheme}
-              onChange={(_event: any, checked: boolean) => checked && this.onThemeSelect(false)}
-            />
-          </PageHeaderToolsItem>
-          <PageHeaderToolsItem>
-            <Radio
-              id="dark-theme"
-              label="Dark theme"
-              aria-label="Dark theme"
-              name="dark-theme"
-              isChecked={isDarkTheme}
-              onChange={(_event: any, checked: boolean) => checked && this.onThemeSelect(true)}
-            />
-          </PageHeaderToolsItem>
-        </PageHeaderToolsGroup>
-        <Avatar src={imgAvatar} alt="Avatar image" />
-      </PageHeaderTools>
+      <Toolbar id="toolbar" isFullHeight isStatic>
+        <ToolbarContent>
+          <ToolbarGroup align={{ default: 'alignRight' }}>
+            <ToolbarItem style={{ marginRight: '10px' }}>
+              <Radio
+                id="light-theme"
+                aria-label="Light theme"
+                label={`Light theme`}
+                name="light-theme"
+                isChecked={!isDarkTheme}
+                onChange={(_event: any, checked: boolean) => checked && this.onThemeSelect(false)}
+              />
+            </ToolbarItem>
+            <ToolbarItem>
+              <Radio
+                id="dark-theme"
+                label="Dark theme"
+                aria-label="Dark theme"
+                name="dark-theme"
+                isChecked={isDarkTheme}
+                onChange={(_event: any, checked: boolean) => checked && this.onThemeSelect(true)}
+              />
+            </ToolbarItem>
+          </ToolbarGroup>
+          <ToolbarItem>
+            <Avatar src={imgAvatar} alt="Avatar image" />
+          </ToolbarItem>
+        </ToolbarContent>
+      </Toolbar>
     );
 
     const AppHeader = (
-      <PageHeader logoComponent="a"
-        logo={<Brand src={imgBrand} alt="Patternfly Logo" />}
-        headerTools={AppToolbar}
-        showNavToggle
-        isNavOpen={isNavOpen}
-        onNavToggle={() => this.setState({ isNavOpen: !isNavOpen })}
-      />
+      <Masthead>
+        <MastheadToggle>
+          <PageToggleButton variant="plain" aria-label="Global navigation">
+            <BarsIcon />
+          </PageToggleButton>
+        </MastheadToggle>
+        <MastheadMain>
+          <MastheadBrand>
+            <Brand src={imgBrand} alt="PatternFly" heights={{ default: '36px' }} />
+          </MastheadBrand>
+        </MastheadMain>
+        <MastheadContent>{AppToolbar}</MastheadContent>
+      </Masthead>
     );
 
     const nav = (
@@ -172,7 +181,7 @@ class App extends React.Component<{}, AppState> {
                     </NavItem>
                   ))}
                 </NavExpandable>
-              )
+              );
             }
             return (
               <NavItem itemId={demo.id} isActive={activeItem === demo.id} key={demo.id}>
@@ -194,12 +203,7 @@ class App extends React.Component<{}, AppState> {
 
     return (
       <Router>
-        <Page
-          header={AppHeader}
-          sidebar={AppSidebar}
-          isManagedSidebar
-          mainContainerId={this.pageId}
-        >
+        <Page header={AppHeader} sidebar={AppSidebar} isManagedSidebar mainContainerId={this.pageId}>
           {this.getPages()}
         </Page>
       </Router>

diff --git a/packages/module/patternfly-docs/content/examples/TopologyLayouts.md b/packages/module/patternfly-docs/content/examples/TopologyLayouts.md
@@ -36,51 +36,56 @@ import {
 } from '@patternfly/react-topology';
 import { ToolbarItem } from '@patternfly/react-core';
 import {
-	Dropdown as DropdownDeprecated,
-	DropdownItem as DropdownItemDeprecated,
-	DropdownPosition as DropdownPositionDeprecated,
-	DropdownToggle as DropdownToggleDeprecated,
-  Select,
-	SelectOption,
-	SelectVariant
-} from '@patternfly/react-core/deprecated';
+ Dropdown,
+ DropdownItem,
+ DropdownList,
+} from '@patternfly/react-core';
 import Icon1 from '@patternfly/react-icons/dist/esm/icons/regions-icon';
 import Icon2 from '@patternfly/react-icons/dist/esm/icons/folder-open-icon';
 
 import './topology-example.css';
 
 ### Layouts
+
 Layouts will help to position the nodes on the graph in some manner as defined by the chosen layout. There are many algorithms
 for positioning nodes based on many factors (side of nodes, distance between nodes, edges, etc). Patternfy react-topology provides
 some layouts that you can choose to customize your topology graph with:
 
-##### Force:
+##### Force
+
 This layout is built on top of the d3-force layout provided by [d3/d3-force](https://github.com/d3/d3-force).
 
-##### Dagre:
+##### Dagre
+
 This layout is built on top of the dagrejs dagre layout provided by [dagrejs/dagre](https://github.com/dagrejs/dagre).
 
-##### Cola:
+##### Cola
+
 This layout is built on top of the WebCola layout provided by [tgdwyer/WebCola](://github.com/tgdwyer/WebCola). This layout uses `force simulation`
 by default, but can be turned off by setting the options `layoutOnDrag` flag to false.
 
-##### ColaGroups:
+##### ColaGroups
+
 This layout uses the Cola layout recursively on each group such that the group's children locations are set before setting the group's location
 relative to other groups/nodes at its level.
 
-##### Grid:
+##### Grid
+
 This is a basic grid layout. It orders the nodes in a grid making the grid as `square` as possible.
 Grid layout works well to distribute nodes without taking into consideration edges
 
-##### Concentric:
+##### Concentric
+
 Concentric layouts have better results focused on high connectivity. It places the nodes in a circular pattern.
 
-##### BreadthFirst:
+##### BreadthFirst
+
 This layout uses a breadth first algorithm to place the nodes. A BreadthFirst layout may help in these cases, providing
 a natural "levels" approach that can be combined with other algorithms to help users to identify the dependencies between elements.
 
 Note: this first version currently doesn't manage the overflow of a row
 
 ### Examples
+
 ```ts file='./TopologyLayoutsDemo.tsx'
 ```
diff --git a/packages/module/patternfly-docs/content/examples/TopologyLayoutsDemo.tsx b/packages/module/patternfly-docs/content/examples/TopologyLayoutsDemo.tsx
@@ -1,15 +1,14 @@
 import * as React from 'react';
 import {
-	Split,
-	SplitItem,
-	ToolbarItem
+  Dropdown,
+  DropdownItem,
+  DropdownList,
+  MenuToggle,
+  MenuToggleElement,
+  Split,
+  SplitItem,
+  ToolbarItem
 } from '@patternfly/react-core';
-import {
-	Dropdown as DropdownDeprecated,
-	DropdownItem as DropdownItemDeprecated,
-	DropdownPosition as DropdownPositionDeprecated,
-	DropdownToggle as DropdownToggleDeprecated
-} from '@patternfly/react-core/deprecated';
 // eslint-disable-next-line patternfly-react/import-tokens-icons
 import { RegionsIcon as Icon1, FolderOpenIcon as Icon2 } from '@patternfly/react-icons';
 import {
@@ -263,57 +262,61 @@ export const LayoutsDemo: React.FC = () => {
         <label className="pf-v5-u-display-inline-block pf-v5-u-mr-md pf-v5-u-mt-sm">Layout</label>
       </SplitItem>
       <SplitItem>
-        <DropdownDeprecated
-          position={DropdownPositionDeprecated.right}
-          toggle={<DropdownToggleDeprecated onToggle={() => setLayoutDropdownOpen(!layoutDropdownOpen)}>{layout}</DropdownToggleDeprecated>}
+        <Dropdown
+          toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+            <MenuToggle ref={toggleRef} onClick={() => setLayoutDropdownOpen(!layoutDropdownOpen)}>
+              {layout}
+            </MenuToggle>
+          )}
           isOpen={layoutDropdownOpen}
-          dropdownItems={[
-            <DropdownItemDeprecated
+        >
+          <DropdownList>
+            <DropdownItem
               key={1}
               onClick={() => {
                 updateLayout('Force');
               }}
             >
               Force
-            </DropdownItemDeprecated>,
-            <DropdownItemDeprecated
+            </DropdownItem>
+            <DropdownItem
               key={2}
               onClick={() => {
                 updateLayout('Dagre');
               }}
             >
               Dagre
-            </DropdownItemDeprecated>,
-            <DropdownItemDeprecated
+            </DropdownItem>
+            <DropdownItem
               key={3}
               onClick={() => {
                 updateLayout('Cola');
               }}
             >
               Cola
-            </DropdownItemDeprecated>,
-            <DropdownItemDeprecated
+            </DropdownItem>
+            <DropdownItem
               key={8}
               onClick={() => {
                 updateLayout('ColaGroups');
               }}
             >
               ColaGroups
-            </DropdownItemDeprecated>,
-            <DropdownItemDeprecated key={4} onClick={() => updateLayout('ColaNoForce')}>
+            </DropdownItem>
+            <DropdownItem key={4} onClick={() => updateLayout('ColaNoForce')}>
               ColaNoForce
-            </DropdownItemDeprecated>,
-            <DropdownItemDeprecated key={5} onClick={() => updateLayout('Grid')}>
+            </DropdownItem>
+            <DropdownItem key={5} onClick={() => updateLayout('Grid')}>
               Grid
-            </DropdownItemDeprecated>,
-            <DropdownItemDeprecated key={6} onClick={() => updateLayout('Concentric')}>
+            </DropdownItem>
+            <DropdownItem key={6} onClick={() => updateLayout('Concentric')}>
               Concentric
-            </DropdownItemDeprecated>,
-            <DropdownItemDeprecated key={7} onClick={() => updateLayout('BreadthFirst')}>
+            </DropdownItem>
+            <DropdownItem key={7} onClick={() => updateLayout('BreadthFirst')}>
               BreadthFirst
-            </DropdownItemDeprecated>
-          ]}
-        />
+            </DropdownItem>
+          </DropdownList>
+        </Dropdown>
       </SplitItem>
     </Split>
   );