Apply V6 Code Mods and fix up apps

patternfly · Jun 21, 2024 · 0d7f99c · 0d7f99c
1 parent 53c86a7
commit 0d7f99c
Show file tree

Hide file tree

Showing 26 changed files with 527 additions and 871 deletions.
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": "^6.0.0-alpha.26",
-    "@patternfly/react-icons": "^6.0.0-alpha.11",
-    "@patternfly/react-styles": "^6.0.0-alpha.11",
+    "@patternfly/react-core": "^6.0.0-alpha.70",
+    "@patternfly/react-icons": "^6.0.0-alpha.24",
+    "@patternfly/react-styles": "^6.0.0-alpha.24",
     "react": "^18",
     "react-dom": "^18",
     "react-router": "^5.3.3",

diff --git a/packages/demo-app-ts/src/App.css b/packages/demo-app-ts/src/App.css
@@ -43,3 +43,10 @@
     transform: rotate(360deg);
   }
 }
+
+#ts-demo-app-page-id {
+  flex: 1
+}
+.pf-v6-c-tab-content {
+  flex: 1;
+}
diff --git a/packages/demo-app-ts/src/App.tsx b/packages/demo-app-ts/src/App.tsx
@@ -53,9 +53,9 @@ class App extends React.Component<{}, AppState> {
     const htmlElement = document.getElementsByTagName('html')[0];
     if (htmlElement) {
       if (isDarkTheme) {
-        htmlElement.classList.add('pf-v5-theme-dark');
+        htmlElement.classList.add('pf-v6-theme-dark');
       } else {
-        htmlElement.classList.remove('pf-v5-theme-dark');
+        htmlElement.classList.remove('pf-v6-theme-dark');
       }
     }
   };
@@ -207,7 +207,7 @@ class App extends React.Component<{}, AppState> {
 
     return (
       <Router>
-        <Page header={AppHeader} sidebar={AppSidebar} isManagedSidebar mainContainerId={this.pageId}>
+        <Page masthead={AppHeader} sidebar={AppSidebar} isManagedSidebar mainContainerId={this.pageId}>
           {this.getPages()}
         </Page>
       </Router>

diff --git a/packages/demo-app-ts/src/Demo.css b/packages/demo-app-ts/src/Demo.css
@@ -6,71 +6,75 @@
 }
 
 .pf-ri__topology-demo .pf-topology-visualization-surface {
-  border: 1px solid var(--pf-v5-global--BorderColor--100);
+  border: 1px solid var(--pf-t--global--border--color--100);
   border-top: none;
 }
 
-.pf-ri__topology-demo .pf-v5-c-tab-content {
+.pf-ri__topology-demo .pf-v6-c-tab-content {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
 }
 
-.pf-ri__topology-demo .pf-v5-c-tab-content:focus {
+.pf-ri__topology-demo .pf-v6-c-tab-content:focus {
   outline: none;
 }
 
-.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-v6-c-toolbar {
+  --pf-v6-c-toolbar__expandable-content--lg--PaddingBottom: 0;
+  --pf-v6-c-toolbar--PaddingBottom: 0;
 }
-.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-v6-c-toolbar__item .pf-v6-l-flex {
+  --pf-v6-l-flex--FlexWrap: no-wrap;
 }
-.pf-ri__topology-demo .pf-v5-c-toolbar__item .pf-v5-c-form-control {
+.pf-ri__topology-demo .pf-v6-c-toolbar__item .pf-v6-c-form-control {
   width: 70px;
 }
 .pf-ri-topology-context-menu {
   z-index: 1050;
 }
 
-.pf-ri-topology-context-menu__kebab-wrapper.pf-v5-c-dropdown__menu-item {
+.pf-ri-topology-context-menu__kebab-wrapper.pf-v6-c-dropdown__menu-item {
    padding: 0;
 }
 .pf-ri__topology-demo__package-input {
   width: 75px;
 }
 
 .pf-ri-topology__node__background {
-  fill: var(--pf-v5-global--palette--black-400);
+  fill: var(--pf-t--color--gray--40);
   stroke-width: 1px;
-  stroke: var(--pf-v5-global--palette--black-1000);
+  stroke: var(--pf-t--color--black);
 }
 
 .pf-ri-topology__node__background.pf-m-selected  {
-  fill: var(--pf-v5-global--active-color--100);
+  fill: var(--pf-t--color--blue--50);
 }
 
 .pf-ri-topology__node__background.pf-m-hover  {
-  fill: var(--pf-v5-global--palette--green-300);
+  fill: var(--pf-t--color--green--40);
 }
 
 .pf-ri-topology__node__background.pf-m-drop-target {
-  fill: var(--pf-v5-global--palette--light-blue-200);
+  fill: var(--pf-t--color--blue--20);
 }
 
-.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#\/topology-pipelines-groups-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;
+.pf-v6-c-page__main-section#\/topology-demo-page-section,
+.pf-v6-c-page__main-section#\/topology-pipelines-demo-page-section,
+.pf-v6-c-page__main-section#\/topology-pipelines-groups-demo-page-section {
+  --pf-v6-c-page__main-section--PaddingTop: 0;
+  --pf-v6-c-page__main-section--PaddingRight: 0;
+  --pf-v6-c-page__main-section--PaddingLeft: 0;
+  --pf-v6-c-page__main-section--PaddingBottom: 0;
 }
 
 .topology-demo-badge > rect {
-  fill: var(--pf-v5-global--palette--red-100);
+  fill: var(--pf-t--color--red--50);
 }
 .topology-demo-badge > text {
-  fill: var(--pf-v5-global--palette--gold-100);
+  fill: var(--pf-t--global--color--nonstatus--gold--200);
 }
+
+.pf-v6-c-toolbar__content.pf-m-hidden {
+  display: none;
+}
diff --git a/packages/demo-app-ts/src/demos/topologyPackageDemo/OptionsContextBar.tsx b/packages/demo-app-ts/src/demos/topologyPackageDemo/OptionsContextBar.tsx
@@ -6,8 +6,8 @@ import {
   MenuToggle,
   MenuToggleElement,
   Select,
-  SelectList,
   SelectOption,
+  SelectList,
   TextInput,
   ToolbarItem
 } from '@patternfly/react-core';

diff --git a/packages/demo-app-ts/src/demos/topologyPackageDemo/OptionsViewBar.tsx b/packages/demo-app-ts/src/demos/topologyPackageDemo/OptionsViewBar.tsx
@@ -31,7 +31,7 @@ const OptionsContextBar: React.FC<{ controller: Controller }> = observer(({ cont
   const layoutDropdown = (
     <Split>
       <SplitItem>
-        <label className="pf-v5-u-display-inline-block pf-v5-u-mr-md pf-v5-u-mt-sm">Layout:</label>
+        <label className="pf-v6-u-display-inline-block pf-v6-u-mr-md pf-v6-u-mt-sm">Layout:</label>
       </SplitItem>
       <SplitItem>
         <Dropdown

diff --git a/packages/module/package.json b/packages/module/package.json
@@ -33,9 +33,9 @@
     "tag": "alpha"
   },
   "dependencies": {
-    "@patternfly/react-core": "^6.0.0-alpha.26",
-    "@patternfly/react-icons": "^6.0.0-alpha.11",
-    "@patternfly/react-styles": "^6.0.0-alpha.11",
+    "@patternfly/react-core": "6.0.0-alpha.70",
+    "@patternfly/react-icons": "6.0.0-alpha.24",
+    "@patternfly/react-styles": "6.0.0-alpha.24",
     "@types/d3": "^7.4.0",
     "@types/d3-force": "^1.2.1",
     "@types/react-measure": "^2.0.6",
@@ -54,11 +54,11 @@
     "react-dom": "^17 || ^18"
   },
   "devDependencies": {
-    "@patternfly/documentation-framework": "^5.2.15",
-    "@patternfly/patternfly": "^6.0.0-alpha.74",
+    "@patternfly/documentation-framework": "6.0.0-alpha.50",
+    "@patternfly/patternfly": "6.0.0-alpha.167",
     "@patternfly/patternfly-a11y": "^4.3.1",
-    "@patternfly/react-code-editor": "^6.0.0-alpha.26",
-    "@patternfly/react-table": "^6.0.0-alpha.26",
+    "@patternfly/react-code-editor": "6.0.0-alpha.70",
+    "@patternfly/react-table": "6.0.0-alpha.71",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "camel-case": "^3.0.0",

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

diff --git a/packages/module/patternfly-docs/content/examples/topology-example.css b/packages/module/patternfly-docs/content/examples/topology-example.css
@@ -1,19 +1,9 @@
-.ws-extensions-t-anchors,
-.ws-extensions-t-control-bar,
-.ws-extensions-t-context-menu,
-.ws-extensions-t-custom-edges,
-.ws-extensions-t-custom-nodes,
-.ws-extensions-t-drag-and-drop,
-.ws-extensions-t-getting-started,
-.ws-extensions-t-layouts,
-.ws-extensions-t-panzoom,
-.ws-extensions-t-selection,
-.ws-extensions-t-sidebar,
-.ws-extensions-t-toolbar {
+[id^=ws-extensions-t-] {
+  margin: var(--pf-t--global--spacer--300);
+}
+.pf-topology-visualization-surface {
+  border: 1px solid var(--pf-t--color--black);
   height: 600px;
-  border: 1px solid var(--pf-v5-global--palette--black-900);
-  padding: 0;
-  margin: var(--pf-v5-global--spacer--md);
 }
 
 @media (min-width: 768px) {
@@ -33,15 +23,15 @@
 .pf-theme-dark .ws-extensions-t-selection,
 .pf-theme-dark .ws-extensions-t-sidebar,
 .pf-theme-dark .ws-extensions-t-toolbar {
-  border: 1px solid var(--pf-v5-global--palette--black-100);
+  border: 1px solid var(--pf-t--color--gray--20);
 }
 
-.ws-extensions-t-topology .pf-v5-l-stack {
+.ws-extensions-t-topology .pf-v6-l-stack {
   margin: -9px;
   width: calc(100% + 18px);
 }
 
-.ws-extensions-t-topology .pf-topology-view__project-toolbar .pf-v5-c-dropdown>button {
+.ws-extensions-t-topology .pf-topology-view__project-toolbar .pf-v6-c-dropdown>button {
   justify-content: space-between;
   width: 150px;
 }

diff --git a/packages/module/patternfly-docs/content/examples/topology-pipelines-example.css b/packages/module/patternfly-docs/content/examples/topology-pipelines-example.css
@@ -1,6 +1,6 @@
 .ws-react-t-pipelines {
   height: 300px;
-  border: 1px solid var(--pf-v5-global--palette--black-900);
+  border: 1px solid var(--pf-t--color--black);
   padding: 0;
-  margin: var(--pf-v5-global--spacer--md);
+  margin: var(--pf-t--global--spacer--300);
 }