fix(build): update to PF6 betas

update PF icon, update styling to fix demo-app examples update snapshots
patternfly · Aug 2, 2024 · b2a39b0 · b2a39b0
1 parent 0520a49
commit b2a39b0
Show file tree

Hide file tree

Showing 9 changed files with 242 additions and 177 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.70",
-    "@patternfly/react-icons": "6.0.0-alpha.24",
-    "@patternfly/react-styles": "6.0.0-alpha.24",
+    "@patternfly/react-core": "6.0.0-alpha.94",
+    "@patternfly/react-icons": "6.0.0-alpha.34",
+    "@patternfly/react-styles": "6.0.0-alpha.33",
     "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
@@ -151,18 +151,18 @@ class App extends React.Component<{}, AppState> {
 
     const AppHeader = (
       <Masthead>
-        <MastheadToggle>
-          <PageToggleButton
-            variant="plain"
-            aria-label="Global navigation"
-            isSidebarOpen={isNavOpen}
-            onSidebarToggle={() => this.setState({ isNavOpen: !isNavOpen })}
-          >
-            <BarsIcon />
-          </PageToggleButton>
-        </MastheadToggle>
         <MastheadMain>
-          <MastheadBrand component="a">
+          <MastheadToggle>
+            <PageToggleButton
+              variant="plain"
+              aria-label="Global navigation"
+              isSidebarOpen={isNavOpen}
+              onSidebarToggle={() => this.setState({ isNavOpen: !isNavOpen })}
+            >
+              <BarsIcon />
+            </PageToggleButton>
+          </MastheadToggle>
+          <MastheadBrand>
             <Brand src={imgBrand} alt="Patternfly Logo" heights={{ default: '36px' }} />
           </MastheadBrand>
         </MastheadMain>

diff --git a/packages/demo-app-ts/src/Demo.css b/packages/demo-app-ts/src/Demo.css
@@ -7,7 +7,6 @@
 
 .pf-ri__topology-demo .pf-topology-visualization-surface {
   border: 1px solid var(--pf-t--global--border--color--100);
-  border-top: none;
 }
 
 .pf-ri__topology-demo .pf-v6-c-tab-content {
@@ -23,6 +22,7 @@
 .pf-ri__topology-demo .pf-v6-c-toolbar {
   --pf-v6-c-toolbar__expandable-content--lg--PaddingBottom: 0;
   --pf-v6-c-toolbar--PaddingBottom: 0;
+  --pf-v6-c-toolbar--PaddingBlockStart: var(--pf-t--global--spacer--300);
 }
 .pf-ri__topology-demo .pf-v6-c-toolbar__item .pf-v6-l-flex {
   --pf-v6-l-flex--FlexWrap: no-wrap;
@@ -77,4 +77,10 @@
 
 .pf-v6-c-toolbar__content.pf-m-hidden {
   display: none;
+}
+
+.pf-v6-c-page__main-container,
+.pf-v6-c-page__main-section,
+.pf-v6-c-page__main-body {
+  height: 100%;
 }
diff --git a/packages/demo-app-ts/src/assets/images/imgBrand.svg b/packages/demo-app-ts/src/assets/images/imgBrand.svg
diff --git a/packages/demo-app-ts/src/demos/pipelineGroupsDemo/OptionsBar.tsx b/packages/demo-app-ts/src/demos/pipelineGroupsDemo/OptionsBar.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Radio, Text, ToolbarItem } from '@patternfly/react-core';
+import { Radio, Content, ToolbarItem } from '@patternfly/react-core';
 import { observer } from '@patternfly/react-topology';
 import { PipelineGroupsDemoContext } from './PipelineGroupsDemoContext';
 
@@ -9,7 +9,7 @@ const OptionsBar: React.FC = observer(() => {
   return (
     <>
       <ToolbarItem>
-        <Text className="pf-u-mr-sm">Layout:</Text>
+        <Content className="pf-u-mr-sm">Layout:</Content>
       </ToolbarItem>
       <ToolbarItem>
         <Radio

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.70",
-    "@patternfly/react-icons": "6.0.0-alpha.24",
-    "@patternfly/react-styles": "6.0.0-alpha.24",
+    "@patternfly/react-core": "6.0.0-alpha.94",
+    "@patternfly/react-icons": "6.0.0-alpha.34",
+    "@patternfly/react-styles": "6.0.0-alpha.33",
     "@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": "6.0.0-alpha.50",
-    "@patternfly/patternfly": "6.0.0-alpha.167",
+    "@patternfly/documentation-framework": "6.0.0-alpha.69",
+    "@patternfly/patternfly": "6.0.0-alpha.205",
     "@patternfly/patternfly-a11y": "^4.3.1",
-    "@patternfly/react-code-editor": "6.0.0-alpha.70",
-    "@patternfly/react-table": "6.0.0-alpha.71",
+    "@patternfly/react-code-editor": "6.0.0-alpha.94",
+    "@patternfly/react-table": "6.0.0-alpha.95",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "camel-case": "^3.0.0",

diff --git a/packages/module/src/components/TopologyControlBar/TopologyControlBar.tsx b/packages/module/src/components/TopologyControlBar/TopologyControlBar.tsx
@@ -364,7 +364,7 @@ export const TopologyControlBar: React.FunctionComponent<TopologyControlBarProps
   return (
     <GenerateId prefix="pf-topology-control-bar-">
       {(randomId) => (
-        <Toolbar className={className} style={{ backgroundColor: 'transparent', padding: 0 }} id={randomId}>
+        <Toolbar className={className} style={{ backgroundColor: 'transparent' }} id={randomId}>
           <ToolbarContent>
             <ToolbarGroup gap={{ default: 'gapNone' }}>
               {controlButtons.map((button: TopologyControlButton) =>