Merge pull request #54 from jessiehuff/v6

feat(v6): Update to PatternFly V6 Versions
patternfly · May 3, 2024 · 5b2d6e0 · 5b2d6e0
2 parents 4cc3bfa + 7d9783d
commit 5b2d6e0
Show file tree

Hide file tree

Showing 38 changed files with 607 additions and 440 deletions.
diff --git a/.github/workflows/build-lint-test.yml b/.github/workflows/build-lint-test.yml
@@ -16,7 +16,7 @@ jobs:
           fi
       - uses: actions/setup-node@v1
         with:
-          node-version: '14'
+          node-version: '18'
       - uses: actions/cache@v2
         id: yarn-cache
         name: Cache npm deps
@@ -52,7 +52,7 @@ jobs:
           fi
       - uses: actions/setup-node@v1
         with:
-          node-version: '14'
+          node-version: '18'
       - uses: actions/cache@v2
         id: yarn-cache
         name: Cache npm deps
@@ -89,7 +89,7 @@ jobs:
           fi
       - uses: actions/setup-node@v1
         with:
-          node-version: '14'
+          node-version: '18'
       - uses: actions/cache@v2
         id: yarn-cache
         name: Cache npm deps
@@ -130,7 +130,7 @@ jobs:
           fi
       - uses: actions/setup-node@v1
         with:
-          node-version: '14'
+          node-version: '18'
       - uses: actions/cache@v2
         id: yarn-cache
         name: Cache npm deps

diff --git a/.github/workflows/extensions.yml b/.github/workflows/extensions.yml
@@ -13,5 +13,5 @@ jobs:
     steps:
       - uses: actions/[email protected]
         with:
-          project-url: https://github.com/orgs/patternfly/projects/12
+          project-url: https://github.com/orgs/patternfly/projects/7
           github-token: ${{ secrets.GH_PROJECTS }}
diff --git a/.github/workflows/promote.yml b/.github/workflows/promote.yml
@@ -17,7 +17,7 @@ jobs:
         run: yarn install --frozen-lockfile && yarn build
       - uses: actions/setup-node@v3
         with:
-          node-version: '16.x'
+          node-version: '18.x'
           registry-url: 'https://registry.npmjs.org'
       - name: GitHub Tag Name example
         run: |

diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -17,7 +17,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
         with:
-          node-version: '14'
+          node-version: '18'
       - uses: actions/cache@v2
         id: yarn-cache
         name: Cache npm deps

diff --git a/packages/module/package.json b/packages/module/package.json
@@ -40,18 +40,18 @@
     "patternfly"
   ],
   "dependencies": {
-    "@patternfly/react-core": "^6.0.0-alpha.2",
-    "@patternfly/react-styles": "6.0.0-alpha.2"
+    "@patternfly/react-core": "6.0.0-alpha.50",
+    "@patternfly/react-styles": "6.0.0-alpha.19"
   },
   "peerDependencies": {
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "^6.0.0-alpha.21",
-    "@patternfly/documentation-framework": "^5.3.8",
-    "@patternfly/react-table": "^6.0.0-alpha.2",
-    "@patternfly/react-code-editor": "^6.0.0-alpha.2",
+    "@patternfly/patternfly": "6.0.0-alpha.117",
+    "@patternfly/documentation-framework": "6.0.0-alpha.20",
+    "@patternfly/react-table": "6.0.0-alpha.50",
+    "@patternfly/react-code-editor": "6.0.0-alpha.50",
     "react-monaco-editor": "0.51.0",
     "monaco-editor": "0.34.1",
     "rimraf": "^2.6.2",

diff --git a/packages/module/patternfly-a11y.config.js b/packages/module/patternfly-a11y.config.js
@@ -22,7 +22,8 @@ module.exports = {
     'color-contrast',
     'landmark-no-duplicate-main',
     'landmark-main-is-top-level',
-    'scrollable-region-focusable'
+    'scrollable-region-focusable',
+    'link-in-text-block',
   ].join(','),
   ignoreIncomplete: true
 };
diff --git a/packages/module/patternfly-docs/content/examples/CatalogItemHeader.md b/packages/module/patternfly-docs/content/examples/CatalogItemHeader.md
@@ -8,7 +8,7 @@ sourceLink: https://github.com/patternfly/react-catalog-view/tree/main/packages/
 ---
 
 import { CatalogItemHeader } from '@patternfly/react-catalog-view-extension';
-import pfLogo2 from './pfLogo2.svg';
+import pfLogo6 from './pfLogo6.svg';
 import './catalogItemHeader.css';
 
 ## Introduction
@@ -19,10 +19,10 @@ Note: Catalog item header lives in its own package at [`@patternfly/react-catalo
 ```js
 import React from 'react';
 import { CatalogItemHeader } from '@patternfly/react-catalog-view-extension';
-import pfLogo2 from './examples/pfLogo2.svg';
+import pfLogo6 from './examples/pfLogo6.svg';
 
 <CatalogItemHeader
-  iconImg={pfLogo2}
+  iconImg={pfLogo6}
   title="PatternFly"
   />
 ```
@@ -31,10 +31,10 @@ import pfLogo2 from './examples/pfLogo2.svg';
 ```js
 import React from 'react';
 import { CatalogItemHeader } from '@patternfly/react-catalog-view-extension';
-import pfLogo2 from './examples/pfLogo2.svg';
+import pfLogo6 from './examples/pfLogo6.svg';
 
 <CatalogItemHeader
-  iconImg={pfLogo2}
+  iconImg={pfLogo6}
   title="Patternfly-React"
   vendor={
     <span>

diff --git a/packages/module/patternfly-docs/content/examples/CatalogTile.md b/packages/module/patternfly-docs/content/examples/CatalogTile.md
@@ -10,7 +10,7 @@ sourceLink: https://github.com/patternfly/react-catalog-view/tree/main/packages/
 import { CatalogTile, CatalogTileBadge } from '@patternfly/react-catalog-view-extension';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import OutlinedCheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-check-circle-icon';
-import pfLogo2 from './pfLogo2.svg';
+import pfLogo6 from './pfLogo6.svg';
 import './catalogTile.css';
 
 ## Introduction
@@ -23,13 +23,13 @@ Note: Catalog tile lives in its own package at [`@patternfly/react-catalog-view-
 import React from 'react';
 import { CatalogTile, CatalogTileBadge } from '@patternfly/react-catalog-view-extension';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
-import pfLogo2 from './pfLogo2.svg';
+import pfLogo6 from './pfLogo6.svg';
 import '../../../../dist/css/react-catalog-view-extension.css';
 
 <CatalogTile
   id="simple-tile"
   featured
-  iconImg={pfLogo2}
+  iconImg={pfLogo6}
   iconAlt="PatternFly logo"
   badges={[
     <CatalogTileBadge title="Certified">
@@ -52,11 +52,11 @@ import React from 'react';
 import { CatalogTile, CatalogTileBadge } from '@patternfly/react-catalog-view-extension';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import OutlinedCheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-check-circle-icon';
-import pfLogo2 from './pfLogo2.svg';
+import pfLogo6 from './pfLogo6.svg';
 
 <CatalogTile
   id="simple-footer"
-  iconImg={pfLogo2}
+  iconImg={pfLogo6}
   iconAlt="PatternFly logo"
   badges={[
     <CatalogTileBadge title="Certified">
@@ -72,7 +72,7 @@ import pfLogo2 from './pfLogo2.svg';
   }
   footer={
     <span>
-      <OutlinedCheckCircleIcon style={{color: 'var(--pf-v5-global--success-color--100)'}} /> Enabled
+      <OutlinedCheckCircleIcon style={{color: 'var(--pf-v6-global--success-color--100)'}} /> Enabled
     </span>
   }
 />
@@ -83,11 +83,11 @@ import pfLogo2 from './pfLogo2.svg';
 import React from 'react';
 import { CatalogTile, CatalogTileBadge } from '@patternfly/react-catalog-view-extension';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
-import pfLogo2 from './pfLogo2.svg';
+import pfLogo6 from './pfLogo6.svg';
 
 <CatalogTile
   id="simple-link-variant"
-  iconImg={pfLogo2}
+  iconImg={pfLogo6}
   iconAlt="PatternFly logo"
   badges={[
     <CatalogTileBadge title="Certified">
@@ -111,18 +111,18 @@ import React from 'react';
 import { CatalogTile, CatalogTileBadge } from '@patternfly/react-catalog-view-extension';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import OutlinedCheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-check-circle-icon';
-import pfLogo2 from './pfLogo2.svg';
+import pfLogo6 from './pfLogo6.svg';
 
 <CatalogTile
   id="multiIcon"
-  iconImg={pfLogo2}
+  iconImg={pfLogo6}
   iconAlt="PatternFly logo"
   badges={[
     <CatalogTileBadge title="Certified">
       <CogIcon />
     </CatalogTileBadge>,
     <CatalogTileBadge title="USDA Approved">
-      <OutlinedCheckCircleIcon style={{color: 'var(--pf-v5-global--success-color--100)'}} />
+      <OutlinedCheckCircleIcon style={{color: 'var(--pf-v6-global--success-color--100)'}} />
     </CatalogTileBadge>
   ]}
   title="Patternfly-React"
@@ -139,11 +139,11 @@ import pfLogo2 from './pfLogo2.svg';
 ```js
 import React from 'react';
 import { CatalogTile } from '@patternfly/react-catalog-view-extension';
-import pfLogo2 from './pfLogo2.svg';
+import pfLogo6 from './pfLogo6.svg';
 
 <CatalogTile
   id="text-badge"
-  iconImg={pfLogo2}
+  iconImg={pfLogo6}
   iconAlt="PatternFly logo"
   badges={[
     'Community'
@@ -163,12 +163,12 @@ import pfLogo2 from './pfLogo2.svg';
 import React from 'react';
 import { CatalogTile, CatalogTileBadge } from '@patternfly/react-catalog-view-extension';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
-import pfLogo2 from './pfLogo2.svg';
+import pfLogo6 from './pfLogo6.svg';
 
 <CatalogTile
   id="simple-with-children"
   featured
-  iconImg={pfLogo2}
+  iconImg={pfLogo6}
   iconAlt="PatternFly logo"
   badges={[
     <CatalogTileBadge title="Certified">

diff --git a/packages/module/patternfly-docs/content/examples/FilterSidePanel.md b/packages/module/patternfly-docs/content/examples/FilterSidePanel.md
@@ -106,7 +106,7 @@ class MockFilterSidePanelExample extends React.Component {
 
       return (
         <span>
-          <span className="pf-v5-u-screen-reader">{`${count} stars`}</span>
+          <span className="pf-v6-screen-reader">{`${count} stars`}</span>
           {stars}
         </span>
       );
@@ -118,7 +118,7 @@ class MockFilterSidePanelExample extends React.Component {
     const maxShowCount = 5;
     const leeway = 2;
     return (
-     <div style={{ width: '205px', border: '1px solid grey', paddingTop: '20px' }}>   
+     <div style={{ width: '205px' }}>   
       <FilterSidePanel id="filter-panel">
         <FilterSidePanelCategory key="cat1"> 
           <TextInput type="text" id="filter-text-input" placeholder="Filter by name" aria-label="filter text input" />

diff --git a/packages/module/patternfly-docs/content/examples/PropertiesSidePanel.md b/packages/module/patternfly-docs/content/examples/PropertiesSidePanel.md
@@ -23,47 +23,49 @@ Note: PropertiesSidePanel lives in its own package at [`@patternfly/react-catalo
 import React from 'react';
 import { PropertiesSidePanel, PropertyItem } from '@patternfly/react-catalog-view-extension';
 import OkIcon from '@patternfly/react-icons/dist/esm/icons/ok-icon';
+import { Icon } from '@patternfly/react-core';
 import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
 import GlobeIcon from '@patternfly/react-icons/dist/esm/icons/globe-icon';
 
-<div style={{ display: 'inline-block', padding: '15px', border: '1px solid grey' }}>
-  <PropertiesSidePanel>
-    <PropertyItem label="Operator Version" value="0.9.8 (latest)" />
-    <PropertyItem
-      label="Certified Level"
-      value={
-        <span>
-          <OkIcon style={{color: 'var(--pf-v5-global--success-color--100)'}} /> Certified
-        </span>
-      }
-    />
-    <PropertyItem label="Provider" value="Red Hat, Inc" />
-    <PropertyItem label="Health Index" value="A" />
-    <PropertyItem
-      label="Repository"
-      value={
-        <a href="https://quay.io/repository/redhat/prometheus-operator">
-          https://quay.io/repository/redhat/prometheus-operator
-        </a>
-      }
-    />
-    <PropertyItem
-      label="Container Image"
-      value={
-        <a href="#">
-          0.22.2 <ExternalLinkAltIcon />
-        </a>
-      }
-    />
-    <PropertyItem
-      label="Created At"
-      value={
-        <span>
-          <GlobeIcon /> Aug 23, 1:58pm
-        </span>
-      }
-    />
-    <PropertyItem label="Support" value={<a href="#">Red Hat</a>} />
-  </PropertiesSidePanel>
-</div>
+<PropertiesSidePanel>
+  <PropertyItem label="Operator Version" value="0.9.8 (latest)" />
+  <PropertyItem
+    label="Certified Level"
+    value={
+      <>
+        <Icon status="success">
+          <OkIcon />
+        </Icon>
+        Certified
+      </>
+    }
+  />
+  <PropertyItem label="Provider" value="Red Hat, Inc" />
+  <PropertyItem label="Health Index" value="A" />
+  <PropertyItem
+    label="Repository"
+    value={
+      <a href="https://quay.io/repository/redhat/prometheus-operator">
+        https://quay.io/repository/redhat/prometheus-operator
+      </a>
+    }
+  />
+  <PropertyItem
+    label="Container Image"
+    value={
+      <a href="#">
+        0.22.2 <ExternalLinkAltIcon />
+      </a>
+    }
+  />
+  <PropertyItem
+    label="Created At"
+    value={
+      <span>
+        <GlobeIcon /> Aug 23, 1:58pm
+      </span>
+    }
+  />
+  <PropertyItem label="Support" value={<a href="#">Red Hat</a>} />
+</PropertiesSidePanel>
 ```
diff --git a/packages/module/patternfly-docs/content/examples/catalogItemHeader.css b/packages/module/patternfly-docs/content/examples/catalogItemHeader.css
@@ -9,20 +9,20 @@
   align-items: center;
 }
 .ws-react-e-catalog-item-header .catalog-item-header-pf-icon {
-  font-size: 60px;
-  max-height: 60px;
-  width: 60px;
+  font-size: var(--pf-t--global--icon--size--2xl);
+  max-height: var(--pf-t--global--icon--size--2xl);
+  width: var(--pf-t--global--icon--size--2xl);
 }
 .ws-react-e-catalog-item-header .catalog-item-header-pf-text {
-  margin-left: 20px;
+  margin-inline-start: var(--pf-t--global--spacer--md);
 }
 .ws-react-e-catalog-item-header .catalog-item-header-pf-title {
-  font-weight: 400;
-  margin-bottom: 0;
-  margin-top: 0;
+  font-weight: var(--pf-t--global--font--weight--body);
+  margin-block-end: 0;
+  margin-block-start: 0;
 }
 .ws-react-e-catalog-item-header .catalog-item-header-pf-subtitle {
-  color: #8b8d8f;
-  font-size: small;
-  margin-bottom: 0;
+  color: var(--pf-t--global--text--color--subtle);
+  font-size: var(--pf-t--global--font--size--body--sm);
+  margin-block-end: 0;
 }