Update to latest Patternfly V6 alphas (#201)

patternfly · Jun 27, 2024 · 70c815f · 70c815f
1 parent 53c86a7
commit 70c815f
Show file tree

Hide file tree

Showing 40 changed files with 1,184 additions and 1,315 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/pipelineGroupsDemo/DemoTaskGroup.tsx b/packages/demo-app-ts/src/demos/pipelineGroupsDemo/DemoTaskGroup.tsx
@@ -12,7 +12,8 @@ import {
   EdgeCreationTypes,
   useHover,
   ScaleDetailsLevel,
-  RunStatus
+  RunStatus,
+  TaskGroupPillLabel
 } from '@patternfly/react-topology';
 import { DEFAULT_TASK_HEIGHT, GROUP_TASK_WIDTH } from './createDemoPipelineGroupsNodes';
 
@@ -42,6 +43,7 @@ const DemoTaskGroup: React.FunctionComponent<DemoTaskGroupProps> = ({ element, .
         collapsible
         collapsedWidth={GROUP_TASK_WIDTH}
         collapsedHeight={DEFAULT_TASK_HEIGHT}
+        GroupLabelComponent={TaskGroupPillLabel}
         element={element as Node}
         centerLabelOnEdge
         recreateLayoutOnCollapseChange

diff --git a/packages/demo-app-ts/src/demos/pipelinesDemo/DemoPipelinesGroup.tsx b/packages/demo-app-ts/src/demos/pipelinesDemo/DemoPipelinesGroup.tsx
@@ -4,7 +4,6 @@ import {
   GraphElement,
   LabelPosition,
   observer,
-  ScaleDetailsLevel,
   WithContextMenuProps,
   WithDragNodeProps,
   WithSelectionProps
@@ -18,14 +17,14 @@ type DemoPipelinesGroupProps = {
 
 const DemoPipelinesGroup: React.FunctionComponent<DemoPipelinesGroupProps> = ({ element }) => {
   const data = element.getData();
-  const detailsLevel = element.getGraph().getDetailsLevel();
 
   return (
     <DefaultTaskGroup
       element={element}
       collapsible={false}
-      showLabel={detailsLevel === ScaleDetailsLevel.high}
       labelPosition={LabelPosition.top}
+      showLabelOnHover
+      hideDetailsAtMedium
       badge={data?.badge}
     />
   );

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/demo-app-ts/src/index.tsx b/packages/demo-app-ts/src/index.tsx
@@ -3,7 +3,5 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
-import '@patternfly/patternfly/patternfly-theme-dark.css';
-import '@patternfly/patternfly/patternfly-addons.css';
 
 ReactDOM.render(<App />, document.getElementById('root'));
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);
   height: 600px;
-  border: 1px solid var(--pf-v5-global--palette--black-900);
-  padding: 0;
-  margin: var(--pf-v5-global--spacer--md);
+}
+.pf-topology-visualization-surface {
+  border: 1px solid var(--pf-t--color--black);
 }
 
 @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);
 }