Merge branch 'v5' into upgradeDeprecatedComponents_demo-app

packages/demo-app-ts/src/App.tsx

@@ -27,6 +27,7 @@ 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;
@@ -118,45 +119,52 @@ class App extends React.Component<{}, AppState> {
     const { isNavOpen, activeItem, isDarkTheme } = this.state;
 
     const AppToolbar = (
-      <Toolbar>
-        <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>
+      <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>
-        </ToolbarGroup>
+        </ToolbarContent>
       </Toolbar>
     );
 
     const AppHeader = (
       <Masthead>
         <MastheadToggle>
-          <PageToggleButton isSidebarOpen={isNavOpen} onSidebarToggle={() => this.setState({ isNavOpen: !isNavOpen })}>
+          <PageToggleButton 
+            variant="plain"
+            aria-label="Global navigation"
+            isSidebarOpen={isNavOpen}
+            onSidebarToggle={() => this.setState({ isNavOpen: !isNavOpen })}
+            >
             <BarsIcon />
           </PageToggleButton>
         </MastheadToggle>
         <MastheadMain>
           <MastheadBrand component="a">
-            <Brand src={imgBrand} alt="Patternfly Logo" />
+            <Brand src={imgBrand} alt="Patternfly Logo" heights={{ default: '36px' }} />
           </MastheadBrand>
         </MastheadMain>
         <MastheadContent>{AppToolbar}</MastheadContent>

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'
 ```

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>
   );

packages/module/patternfly-docs/content/examples/TopologyToolbar.md

@@ -27,12 +27,13 @@ import {
   VisualizationProvider,
   VisualizationSurface
 } from '@patternfly/react-topology';
-import { ToolbarItem } from '@patternfly/react-core';
 import {
-	Select as SelectDeprecated,
-	SelectOption as SelectOptionDeprecated,
-	SelectVariant as SelectVariantDeprecated
-} from '@patternfly/react-core/deprecated';
+  MenuToggle,
+  Select,
+  SelectList,
+  SelectOption,
+  ToolbarItem
+} 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';
 

packages/module/patternfly-docs/content/examples/TopologyToolbarDemo.tsx

@@ -1,13 +1,12 @@
 import * as React from 'react';
 import {
-	ToolbarItem
+  MenuToggle,
+  MenuToggleElement,
+  Select,
+  SelectList,
+  SelectOption,
+  ToolbarItem
 } from '@patternfly/react-core';
-import {
-	Select as SelectDeprecated,
-	SelectOption as SelectOptionDeprecated,
-	SelectVariant as SelectVariantDeprecated
-} 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 {
   ColaLayout,
@@ -187,7 +186,7 @@ interface CustomNodeProps {
 const CustomNode: React.FC<CustomNodeProps> = observer(({ element }) => {
   const data = element.getData();
   const Icon = data.isAlternate ? Icon2 : Icon1;
-  const badgeColors = BadgeColors.find(badgeColor => badgeColor.name === data.badge);
+  const badgeColors = BadgeColors.find((badgeColor) => badgeColor.name === data.badge);
   const { viewOptions } = element.getController().getState<ControllerState>();
 
   return (
@@ -267,39 +266,50 @@ export const ToolbarDemo: React.FC = () => {
 
   const contextToolbar = (
     <ToolbarItem>
-      <SelectDeprecated
-        variant={SelectVariantDeprecated.checkbox}
-        customContent={
-          <div>
-            <SelectOptionDeprecated
-              value="Labels"
-              isChecked={viewOptions.showLabels}
-              onClick={() => setViewOptions(prev => ({ ...prev, showLabels: !prev.showLabels }))}
-            />
-            <SelectOptionDeprecated
-              value="Badges"
-              isDisabled={!viewOptions.showLabels}
-              isChecked={viewOptions.showBadges}
-              onClick={() => setViewOptions(prev => ({ ...prev, showBadges: !prev.showBadges }))}
-            />
-            <SelectOptionDeprecated
-              value="Status background"
-              isChecked={viewOptions.showStatusBackground}
-              onClick={() => setViewOptions(prev => ({ ...prev, showStatusBackground: !prev.showStatusBackground }))}
-            />
-            <SelectOptionDeprecated
-              value="Status decorators"
-              isChecked={viewOptions.showDecorators}
-              onClick={() => setViewOptions(prev => ({ ...prev, showDecorators: !prev.showDecorators }))}
-            />
-          </div>
-        }
-        onToggle={() => setViewOptionsOpen(prev => !prev)}
-        onSelect={() => {}}
-        isCheckboxSelectionBadgeHidden
+      <Select
         isOpen={viewOptionsOpen}
-        placeholderText="Node options"
-      />
+        toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+          <MenuToggle ref={toggleRef} onClick={() => setViewOptionsOpen((prev) => !prev)}>
+            Node Options
+          </MenuToggle>
+        )}
+      >
+        <SelectList>
+          <SelectOption
+            value="Labels"
+            hasCheckbox
+            isSelected={viewOptions.showLabels}
+            onClick={() => setViewOptions((prev) => ({ ...prev, showLabels: !prev.showLabels }))}
+          >
+            Labels
+          </SelectOption>
+          <SelectOption
+            value="Badges"
+            hasCheckbox
+            isDisabled={!viewOptions.showLabels}
+            isSelected={viewOptions.showBadges}
+            onClick={() => setViewOptions((prev) => ({ ...prev, showBadges: !prev.showBadges }))}
+          >
+            Badges
+          </SelectOption>
+          <SelectOption
+            value="Status background"
+            hasCheckbox
+            isSelected={viewOptions.showStatusBackground}
+            onClick={() => setViewOptions((prev) => ({ ...prev, showStatusBackground: !prev.showStatusBackground }))}
+          >
+            Status background
+          </SelectOption>
+          <SelectOption
+            value="Status decorators"
+            hasCheckbox
+            isSelected={viewOptions.showDecorators}
+            onClick={() => setViewOptions((prev) => ({ ...prev, showDecorators: !prev.showDecorators }))}
+          >
+            Status decorators
+          </SelectOption>
+        </SelectList>
+      </Select>
     </ToolbarItem>
   );