fix(build): update to PF6 betas (#228)

patternfly · Aug 6, 2024 · 40649ff · 40649ff
1 parent 0520a49
commit 40649ff
Show file tree

Hide file tree

Showing 11 changed files with 268 additions and 209 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
@@ -74,7 +74,12 @@ class App extends React.Component<{}, AppState> {
                 <Route
                   path={`/${demo.id}-nav-link/${subDemo.id}-nav-link`}
                   render={() => (
-                    <PageSection style={{ zIndex: 2 }} id={`/${demo.id}-nav-link/${subDemo.id}-nav-link`}>
+                    <PageSection
+                      isFilled
+                      hasBodyWrapper={false}
+                      style={{ zIndex: 2 }}
+                      id={`/${demo.id}-nav-link/${subDemo.id}-nav-link`}
+                    >
                       {React.createElement(subDemo.componentType)}
                     </PageSection>
                   )}
@@ -87,7 +92,7 @@ class App extends React.Component<{}, AppState> {
               <Route
                 path={`/${demo.id}-nav-link`}
                 render={() => (
-                  <PageSection style={{ zIndex: 2 }} id={`/${demo.id}-page-section`}>
+                  <PageSection isFilled hasBodyWrapper={false} style={{ zIndex: 2 }} id={`/${demo.id}-page-section`}>
                     {React.createElement(demo.componentType)}
                   </PageSection>
                 )}
@@ -101,7 +106,7 @@ class App extends React.Component<{}, AppState> {
           <Route
             path="/"
             render={() => (
-              <PageSection style={{ zIndex: 2 }} id={`/${defaultDemo.id}-page-section`}>
+              <PageSection isFilled hasBodyWrapper={false} style={{ zIndex: 2 }} id={`/${defaultDemo.id}-page-section`}>
                 {React.createElement(defaultDemo.componentType)}
               </PageSection>
             )}
@@ -151,19 +156,19 @@ 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">
-            <Brand src={imgBrand} alt="Patternfly Logo" heights={{ default: '36px' }} />
+          <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: '40px' }} />
           </MastheadBrand>
         </MastheadMain>
         <MastheadContent>{AppToolbar}</MastheadContent>
@@ -207,7 +212,7 @@ class App extends React.Component<{}, AppState> {
 
     return (
       <Router>
-        <Page masthead={AppHeader} sidebar={AppSidebar} isManagedSidebar mainContainerId={this.pageId}>
+        <Page isContentFilled 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,8 +6,7 @@
 }
 
 .pf-ri__topology-demo .pf-topology-visualization-surface {
-  border: 1px solid var(--pf-t--global--border--color--100);
-  border-top: none;
+  border: 1px solid var(--pf-t--global--border--color--default);
 }
 
 .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;
@@ -42,21 +42,21 @@
 }
 
 .pf-ri-topology__node__background {
-  fill: var(--pf-t--color--gray--40);
-  stroke-width: 1px;
-  stroke: var(--pf-t--color--black);
+  fill: var(--pf-t--global--background--color--floating--default);
+  stroke-width: var(--pf-t--global--border--width--regular);
+  stroke: var(--pf-t--global--border--color--default);
 }
 
 .pf-ri-topology__node__background.pf-m-selected  {
-  fill: var(--pf-t--color--blue--50);
+  fill: var(--pf-t--global--color--brand--default);
 }
 
 .pf-ri-topology__node__background.pf-m-hover  {
-  fill: var(--pf-t--color--green--40);
+  fill: var(--pf-t--global--border--color--nonstatus--green--hover);
 }
 
 .pf-ri-topology__node__background.pf-m-drop-target {
-  fill: var(--pf-t--color--blue--20);
+  fill: var(--pf-t--global--color--nonstatus--blue--default);
 }
 
 .pf-v6-c-page__main-section#\/topology-demo-page-section,
@@ -72,9 +72,9 @@
   fill: var(--pf-t--color--red--50);
 }
 .topology-demo-badge > text {
-  fill: var(--pf-t--global--color--nonstatus--gold--200);
+  fill: var(--pf-t--global--text--color--inverse);
 }
 
 .pf-v6-c-toolbar__content.pf-m-hidden {
   display: none;
-}
+}
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/demo-app-ts/src/demos/topologyPackageDemo/OptionsViewBar.tsx b/packages/demo-app-ts/src/demos/topologyPackageDemo/OptionsViewBar.tsx
@@ -5,10 +5,9 @@ import {
   DropdownItem,
   DropdownList,
   Flex,
+  FlexItem,
   MenuToggle,
   MenuToggleElement,
-  Split,
-  SplitItem,
   TextInput,
   ToolbarItem,
   Tooltip
@@ -29,11 +28,11 @@ const OptionsContextBar: React.FC<{ controller: Controller }> = observer(({ cont
   };
 
   const layoutDropdown = (
-    <Split>
-      <SplitItem>
+    <Flex flexWrap={{ default: 'nowrap' }} gap={{ default: 'gapSm' }} alignItems={{ default: 'alignItemsCenter' }}>
+      <FlexItem>
         <label className="pf-v6-u-display-inline-block pf-v6-u-mr-md pf-v6-u-mt-sm">Layout:</label>
-      </SplitItem>
-      <SplitItem>
+      </FlexItem>
+      <FlexItem>
         <Dropdown
           toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
             <MenuToggle ref={toggleRef} onClick={() => setLayoutDropdownOpen(!layoutDropdownOpen)}>
@@ -70,8 +69,8 @@ const OptionsContextBar: React.FC<{ controller: Controller }> = observer(({ cont
             </DropdownItem>
           </DropdownList>
         </Dropdown>
-      </SplitItem>
-    </Split>
+      </FlexItem>
+    </Flex>
   );
 
   const saveModel = () => {
@@ -135,7 +134,7 @@ const OptionsContextBar: React.FC<{ controller: Controller }> = observer(({ cont
   };
 
   return (
-    <Flex flexWrap={{ default: 'wrap' }} gap={{ default: 'gapMd' }}>
+    <Flex flexWrap={{ default: 'wrap' }} gap={{ default: 'gapMd' }} alignItems={{ default: 'alignItemsCenter' }}>
       <Flex>
         <ToolbarItem>{layoutDropdown}</ToolbarItem>
         <ToolbarItem>

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/patternfly-docs/content/examples/TopologyLayoutsDemo.tsx b/packages/module/patternfly-docs/content/examples/TopologyLayoutsDemo.tsx
@@ -5,8 +5,6 @@ import {
   DropdownList,
   MenuToggle,
   MenuToggleElement,
-  Split,
-  SplitItem,
   ToolbarItem
 } from '@patternfly/react-core';
 // eslint-disable-next-line patternfly-react/import-tokens-icons
@@ -257,11 +255,9 @@ export const LayoutsDemo: React.FC = () => {
   }, [controller, layout]);
 
   const layoutDropdown = (
-    <Split>
-      <SplitItem>
-        <label className="pf-v6-u-display-inline-block pf-v6-u-mr-md pf-v6-u-mt-sm">Layout</label>
-      </SplitItem>
-      <SplitItem>
+    <>
+      <ToolbarItem variant="label">Layout</ToolbarItem>
+      <ToolbarItem>
         <Dropdown
           toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
             <MenuToggle ref={toggleRef} onClick={() => setLayoutDropdownOpen(!layoutDropdownOpen)}>
@@ -317,8 +313,8 @@ export const LayoutsDemo: React.FC = () => {
             </DropdownItem>
           </DropdownList>
         </Dropdown>
-      </SplitItem>
-    </Split>
+      </ToolbarItem>
+    </>
   );
 
   return (

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