Merge pull request #68 from patternfly/bump-pf-deps

chore(deps): Bump PF deps to latest prerelease
patternfly · Jun 20, 2023 · 2336b11 · 2336b11
2 parents 0a1c7f6 + a7343d1
commit 2336b11
Show file tree

Hide file tree

Showing 28 changed files with 613 additions and 537 deletions.
diff --git a/.gitignore b/.gitignore
@@ -9,6 +9,7 @@ coverage
 .cache
 .tmp
 .eslintcache
+.cache_*
 
 # package managers
 yarn-error.log

diff --git a/packages/demo-app-ts/package.json b/packages/demo-app-ts/package.json
@@ -9,9 +9,9 @@
     "serve:demo-app": "node scripts/serve"
   },
   "dependencies": {
-    "@patternfly/react-core": "5.0.0-alpha.51",
-    "@patternfly/react-icons": "5.0.0-alpha.7",
-    "@patternfly/react-styles": "5.0.0-alpha.5",
+    "@patternfly/react-core": "5.0.0-prerelease.7",
+    "@patternfly/react-icons": "5.0.0-prerelease.3",
+    "@patternfly/react-styles": "5.0.0-prerelease.2",
     "react": "^18",
     "react-dom": "^18",
     "react-router": "^5.3.3",

diff --git a/packages/demo-app-ts/src/App.tsx b/packages/demo-app-ts/src/App.tsx
@@ -1,20 +1,24 @@
 import React from 'react';
 import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';
 import {
-  Page,
-  Nav,
-  NavList,
-  NavItem,
-  PageSection,
-  PageSidebar,
-  Avatar,
-  Brand,
-  PageHeader,
-  PageHeaderTools,
-  PageHeaderToolsItem,
-  PageHeaderToolsGroup,
-  Radio, NavExpandable
+	Page,
+	Nav,
+	NavList,
+	NavItem,
+	PageSection,
+	PageSidebar,
+	Avatar,
+	Brand,
+	Radio,
+	NavExpandable,
+  PageSidebarBody
 } 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';
@@ -39,7 +43,7 @@ class App extends React.Component<{}, AppState> {
     isDarkTheme: false
   };
 
-  private onNavSelect = (selectedItem: { itemId: number | string; groupId: number | string }) => {
+  private onNavSelect = (_event:any, selectedItem: { itemId: number | string; groupId: number | string }) => {
     this.setState({ activeItem: selectedItem.itemId });
   };
 
@@ -125,7 +129,7 @@ class App extends React.Component<{}, AppState> {
               label={`Light theme`}
               name="light-theme"
               isChecked={!isDarkTheme}
-              onChange={checked => checked && this.onThemeSelect(false)}
+              onChange={(_event: any, checked: boolean) => checked && this.onThemeSelect(false)}
             />
           </PageHeaderToolsItem>
           <PageHeaderToolsItem>
@@ -135,7 +139,7 @@ class App extends React.Component<{}, AppState> {
               aria-label="Dark theme"
               name="dark-theme"
               isChecked={isDarkTheme}
-              onChange={checked => checked && this.onThemeSelect(true)}
+              onChange={(_event: any, checked: boolean) => checked && this.onThemeSelect(true)}
             />
           </PageHeaderToolsItem>
         </PageHeaderToolsGroup>
@@ -182,7 +186,11 @@ class App extends React.Component<{}, AppState> {
       </Nav>
     );
 
-    const AppSidebar = <PageSidebar isNavOpen={isNavOpen} nav={nav} />;
+    const AppSidebar = (
+      <PageSidebar isSidebarOpen={isNavOpen}>
+        <PageSidebarBody>{nav}</PageSidebarBody>
+      </PageSidebar>
+    );
 
     return (
       <Router>

diff --git a/packages/demo-app-ts/src/Demo.css b/packages/demo-app-ts/src/Demo.css
@@ -6,69 +6,69 @@
 }
 
 .pf-ri__topology-demo .pf-topology-visualization-surface {
-  border: 1px solid var(--pf-global--BorderColor--100);
+  border: 1px solid var(--pf-v5-global--BorderColor--100);
   border-top: none;
 }
 
-.pf-ri__topology-demo .pf-c-tab-content {
+.pf-ri__topology-demo .pf-v5-c-tab-content {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
 }
 
-.pf-ri__topology-demo .pf-c-tab-content:focus {
+.pf-ri__topology-demo .pf-v5-c-tab-content:focus {
   outline: none;
 }
 
-.pf-ri__topology-demo .pf-c-toolbar {
-  --pf-c-toolbar__expandable-content--lg--PaddingBottom: 0;
-  --pf-c-toolbar--PaddingBottom: 0;
+.pf-ri__topology-demo .pf-v5-c-toolbar {
+  --pf-v5-c-toolbar__expandable-content--lg--PaddingBottom: 0;
+  --pf-v5-c-toolbar--PaddingBottom: 0;
 }
-.pf-ri__topology-demo .pf-c-toolbar__item .pf-l-flex {
-  --pf-l-flex--FlexWrap: no-wrap;
+.pf-ri__topology-demo .pf-v5-c-toolbar__item .pf-v5-l-flex {
+  --pf-v5-l-flex--FlexWrap: no-wrap;
 }
-.pf-ri__topology-demo .pf-c-toolbar__item .pf-c-form-control {
+.pf-ri__topology-demo .pf-v5-c-toolbar__item .pf-v5-c-form-control {
   width: 85px;
 }
 .pf-ri-topology-context-menu {
   z-index: 1050;
 }
 
-.pf-ri-topology-context-menu__kebab-wrapper.pf-c-dropdown__menu-item {
+.pf-ri-topology-context-menu__kebab-wrapper.pf-v5-c-dropdown__menu-item {
    padding: 0;
 }
 .pf-ri__topology-demo__package-input {
   width: 75px;
 }
 
 .pf-ri-topology__node__background {
-  fill: var(--pf-global--palette--black-400);
+  fill: var(--pf-v5-global--palette--black-400);
   stroke-width: 1px;
-  stroke: var(--pf-global--palette--black-1000);
+  stroke: var(--pf-v5-global--palette--black-1000);
 }
 
 .pf-ri-topology__node__background.pf-m-selected  {
-  fill: var(--pf-global--active-color--100);
+  fill: var(--pf-v5-global--active-color--100);
 }
 
 .pf-ri-topology__node__background.pf-m-hover  {
-  fill: var(--pf-global--palette--green-300);
+  fill: var(--pf-v5-global--palette--green-300);
 }
 
 .pf-ri-topology__node__background.pf-m-drop-target {
-  fill: var(--pf-global--palette--light-blue-200);
+  fill: var(--pf-v5-global--palette--light-blue-200);
 }
 
-.pf-c-page__main-section#\/topology-demo-page-section, .pf-c-page__main-section#\/topology-pipelines-demo-page-section {
-  --pf-c-page__main-section--PaddingTop: 0;
-  --pf-c-page__main-section--PaddingRight: 0;
-  --pf-c-page__main-section--PaddingLeft: 0;
-  --pf-c-page__main-section--PaddingBottom: 0;
+.pf-v5-c-page__main-section#\/topology-demo-page-section, .pf-v5-c-page__main-section#\/topology-pipelines-demo-page-section {
+  --pf-v5-c-page__main-section--PaddingTop: 0;
+  --pf-v5-c-page__main-section--PaddingRight: 0;
+  --pf-v5-c-page__main-section--PaddingLeft: 0;
+  --pf-v5-c-page__main-section--PaddingBottom: 0;
 }
 
 .topology-demo-badge > rect {
-  fill: var(--pf-global--palette--red-100);
+  fill: var(--pf-v5-global--palette--red-100);
 }
 .topology-demo-badge > text {
-  fill: var(--pf-global--palette--gold-100);
+  fill: var(--pf-v5-global--palette--gold-100);
 }
diff --git a/packages/demo-app-ts/src/utils/useTopologyOptions.tsx b/packages/demo-app-ts/src/utils/useTopologyOptions.tsx
@@ -3,9 +3,6 @@ import * as _ from 'lodash';
 import {
 	Button,
 	Flex,
-	Select,
-	SelectOption,
-	SelectVariant,
 	Split,
 	SplitItem,
 	TextInput,
@@ -16,7 +13,10 @@ import {
 	Dropdown as DropdownDeprecated,
 	DropdownItem as DropdownItemDeprecated,
 	DropdownPosition as DropdownPositionDeprecated,
-	DropdownToggle as DropdownToggleDeprecated
+	DropdownToggle as DropdownToggleDeprecated,
+	Select,
+	SelectOption,
+	SelectVariant
 } from '@patternfly/react-core/deprecated';
 import { DefaultEdgeOptions, DefaultNodeOptions, GeneratorEdgeOptions, GeneratorNodeOptions } from '../data/generator';
 import {
@@ -71,7 +71,7 @@ export const useTopologyOptions = (
   const layoutDropdown = (
     <Split>
       <SplitItem>
-        <label className="pf-u-display-inline-block pf-u-mr-md pf-u-mt-sm">Layout</label>
+        <label className="pf-v5-u-display-inline-block pf-v5-u-mr-md pf-v5-u-mt-sm">Layout</label>
       </SplitItem>
       <SplitItem>
         <DropdownDeprecated
@@ -341,28 +341,28 @@ export const useTopologyOptions = (
             aria-label="nodes"
             type="number"
             value={numNodes || ''}
-            onChange={(val: string) => (val ? updateValue(parseInt(val), 0, 9999, setNumNodes) : setNumNodes(null))}
+            onChange={(_event, val: string) => (val ? updateValue(parseInt(val), 0, 9999, setNumNodes) : setNumNodes(null))}
           />
           <span>Edges:</span>
           <TextInput
             aria-label="edges"
             type="number"
             value={numEdges === null ? '' : numEdges}
-            onChange={(val: string) => (val ? updateValue(parseInt(val), 0, 200, setNumEdges) : setNumEdges(null))}
+            onChange={(_event, val: string) => (val ? updateValue(parseInt(val), 0, 200, setNumEdges) : setNumEdges(null))}
           />
           <span>Groups:</span>
           <TextInput
             aria-label="groups"
             type="number"
             value={numGroups === null ? '' : numGroups}
-            onChange={(val: string) => (val ? updateValue(parseInt(val), 0, 100, setNumGroups) : setNumGroups(null))}
+            onChange={(_event, val: string) => (val ? updateValue(parseInt(val), 0, 100, setNumGroups) : setNumGroups(null))}
           />
           <span>Nesting Depth:</span>
           <TextInput
             aria-label="nesting depth"
             type="number"
             value={nestedLevel === null ? '' : nestedLevel}
-            onChange={(val: string) => (val ? updateValue(parseInt(val), 0, 5, setNestedLevel) : setNestedLevel(null))}
+            onChange={(_event, val: string) => (val ? updateValue(parseInt(val), 0, 5, setNestedLevel) : setNestedLevel(null))}
           />
           <Button
             variant="link"
@@ -409,7 +409,7 @@ export const useTopologyOptions = (
             step={0.01}
             value={medScale}
             type="number"
-            onChange={val => {
+            onChange={(_event, val) => {
               const newValue = parseFloat(val);
               if (!Number.isNaN(newValue) && newValue > lowScale && newValue >= 0.01 && newValue <= 1.0) {
                 setMedScale(parseFloat(val));
@@ -424,7 +424,7 @@ export const useTopologyOptions = (
             step={0.01}
             value={lowScale}
             type="number"
-            onChange={val => {
+            onChange={(_event, val) => {
               const newValue = parseFloat(val);
               if (!Number.isNaN(newValue) && newValue < medScale && newValue >= 0.01 && newValue <= 1.0) {
                 setLowScale(parseFloat(val));

diff --git a/packages/module/package.json b/packages/module/package.json
@@ -33,9 +33,9 @@
     "tag": "alpha"
   },
   "dependencies": {
-    "@patternfly/react-core": "5.0.0-alpha.51",
-    "@patternfly/react-icons": "5.0.0-alpha.7",
-    "@patternfly/react-styles": "5.0.0-alpha.5",
+    "@patternfly/react-core": "5.0.0-prerelease.7",
+    "@patternfly/react-icons": "5.0.0-prerelease.3",
+    "@patternfly/react-styles": "5.0.0-prerelease.2",
     "@types/d3": "^7.4.0",
     "@types/d3-force": "^1.2.1",
     "@types/dagre": "0.7.42",
@@ -56,11 +56,11 @@
     "react-dom": "^16.8 || ^17 || ^18"
   },
   "devDependencies": {
-    "@patternfly/documentation-framework": "2.0.0-alpha.22",
-    "@patternfly/patternfly": "5.0.0-alpha.33",
+    "@patternfly/documentation-framework": "2.0.0-alpha.57",
+    "@patternfly/patternfly": "5.0.0-prerelease.6",
     "@patternfly/patternfly-a11y": "^4.3.1",
-    "@patternfly/react-code-editor": "5.0.0-alpha.51",
-    "@patternfly/react-table": "5.0.0-alpha.51",
+    "@patternfly/react-code-editor": "5.0.0-prerelease.7",
+    "@patternfly/react-table": "5.0.0-prerelease.7",
     "@types/lodash": "^4.14.191",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
@@ -72,6 +72,8 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "rimraf": "^2.6.2",
-    "typescript": "^4.7.4"
+    "typescript": "^4.7.4",
+    "react-monaco-editor": "^0.51.0",
+    "monaco-editor": "^0.34.1"
   }
 }
diff --git a/packages/module/patternfly-docs/content/examples/TopologyLayouts.md b/packages/module/patternfly-docs/content/examples/TopologyLayouts.md
@@ -34,12 +34,15 @@ import {
   withDragNode,
   withPanZoom
 } from '@patternfly/react-topology';
-import { Select, SelectOption, SelectVariant, ToolbarItem } from '@patternfly/react-core';
+import { ToolbarItem } from '@patternfly/react-core';
 import {
 	Dropdown as DropdownDeprecated,
 	DropdownItem as DropdownItemDeprecated,
 	DropdownPosition as DropdownPositionDeprecated,
-	DropdownToggle as DropdownToggleDeprecated
+	DropdownToggle as DropdownToggleDeprecated,
+  Select,
+	SelectOption,
+	SelectVariant
 } from '@patternfly/react-core/deprecated';
 import Icon1 from '@patternfly/react-icons/dist/esm/icons/regions-icon';
 import Icon2 from '@patternfly/react-icons/dist/esm/icons/folder-open-icon';

diff --git a/packages/module/patternfly-docs/content/examples/TopologyLayoutsDemo.tsx b/packages/module/patternfly-docs/content/examples/TopologyLayoutsDemo.tsx
@@ -260,7 +260,7 @@ export const LayoutsDemo: React.FC = () => {
   const layoutDropdown = (
     <Split>
       <SplitItem>
-        <label className="pf-u-display-inline-block pf-u-mr-md pf-u-mt-sm">Layout</label>
+        <label className="pf-v5-u-display-inline-block pf-v5-u-mr-md pf-v5-u-mt-sm">Layout</label>
       </SplitItem>
       <SplitItem>
         <DropdownDeprecated

diff --git a/...ages/module/patternfly-docs/content/examples/TopologyPipelinesGettingStarted.md b/...ages/module/patternfly-docs/content/examples/TopologyPipelinesGettingStarted.md
@@ -4,6 +4,7 @@ section: topology
 sortValue: 71
 sourceLink: https://github.com/patternfly/react-topology/blob/main/packages/module/patternfly-docs/content/examples/TopologyPipelinesGettingStartedDemo.tsx
 propComponents: ['TaskNode', 'TaskEdge', 'WhenDecorator']
+functions: { 'packages/module/src/pipelines/utils/utils.ts': ['getSpacerNodes', 'getEdgesFromNodes'] }
 ---
 
 Note: Topology lives in its own package at [`@patternfly/react-topology`](https://www.npmjs.com/package/@patternfly/react-topology)

diff --git a/packages/module/patternfly-docs/content/examples/TopologyToolbar.md b/packages/module/patternfly-docs/content/examples/TopologyToolbar.md
@@ -27,7 +27,12 @@ import {
   VisualizationProvider,
   VisualizationSurface
 } from '@patternfly/react-topology';
-import { Select, SelectOption, SelectVariant, ToolbarItem } from '@patternfly/react-core';
+import { ToolbarItem } from '@patternfly/react-core';
+import {
+	Select as SelectDeprecated,
+	SelectOption as SelectOptionDeprecated,
+	SelectVariant as SelectVariantDeprecated
+} from '@patternfly/react-core/deprecated';
 import Icon1 from '@patternfly/react-icons/dist/esm/icons/regions-icon';
 import Icon2 from '@patternfly/react-icons/dist/esm/icons/folder-open-icon';