Merge pull request #10 from fhlavac/v5

[Do not merge] Introduce PF v5 data view
patternfly · Jul 16, 2024 · 01de186 · 01de186
2 parents bfc592e + 6adef22
commit 01de186
Show file tree

Hide file tree

Showing 8 changed files with 6,634 additions and 6,460 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/module/package.json b/packages/module/package.json
@@ -30,10 +30,10 @@
     "access": "public"
   },
   "dependencies": {
-    "@patternfly/react-core": "^6.0.0-alpha.69",
-    "@patternfly/react-icons": "^6.0.0-alpha.24",
-    "@patternfly/react-table": "^6.0.0-alpha.69",
-    "@patternfly/react-component-groups": "^6.0.0-alpha.2",
+    "@patternfly/react-core": "^5.3.3",
+    "@patternfly/react-icons": "^5.3.2",
+    "@patternfly/react-table": "^5.3.3",
+    "@patternfly/react-component-groups": "^5.3.0-prerelease.2",
     "react-jss": "^10.10.0",
     "clsx": "^2.1.1"
   },
@@ -43,8 +43,8 @@
   },
   "devDependencies": {
     "@patternfly/patternfly-a11y": "^4.3.1",
-    "@patternfly/documentation-framework": "^6.0.0-alpha.49",
-    "@patternfly/patternfly": "6.0.0-alpha.139",
+    "@patternfly/documentation-framework": "^5.16.9",
+    "@patternfly/patternfly": "^5.3.1",
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.0",
     "@types/react-router-dom": "^5.3.3",

diff --git a/...le/patternfly-docs/content/extensions/data-view/examples/Layout/AbstractLayoutExample.tsx b/...le/patternfly-docs/content/extensions/data-view/examples/Layout/AbstractLayoutExample.tsx
@@ -4,14 +4,15 @@ import DataView from '@patternfly/react-data-view/dist/dynamic/DataView';
 const layoutItemStyling = {
   width: '100%',
   height: '5rem',
-  padding: 'var(--pf-t--global--spacer--md)',
-  border: 'var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default)'
+  padding: 'var(--pf-v5-global--spacer--md)',
+  borderStyle: 'dashed',
+  borderWidth: '2px',
 };
 
 export const BasicExample: React.FunctionComponent = () => (
   <DataView>
     <div style={layoutItemStyling}>Header</div>
-    <div style={layoutItemStyling}>Data representation</div>
+    <div style={{ ...layoutItemStyling, borderTopWidth: 0, borderBottomWidth: 0 }}>Data representation</div>
     <div style={layoutItemStyling}>Footer</div>
   </DataView>
 )
diff --git a/packages/module/patternfly-docs/generated/extensions/data-view/about-data-view/extensions.js b/packages/module/patternfly-docs/generated/extensions/data-view/about-data-view/extensions.js
@@ -23,23 +23,23 @@ pageData.examples = {
 
 const Component = () => (
   <React.Fragment>
-    <p {...{"className":"pf-v6-c-content--p ws-p "}}>
+    <p {...{"className":"ws-p"}}>
       {`Data view lives in its own package `}
-      <PatternflyThemeLink {...{"to":"https://www.npmjs.com/package/@patternfly/react-data-view","className":""}}>
-        <code {...{"className":"ws-code "}}>
+      <PatternflyThemeLink {...{"to":"https://www.npmjs.com/package/@patternfly/react-data-view"}}>
+        <code {...{"className":"ws-code"}}>
           {`@patternfly/react-data-view`}
         </code>
       </PatternflyThemeLink>
     </p>
-    <AutoLinkHeader {...{"id":"data-view","headingLevel":"h1","className":"ws-title ws-h1"}}>
+    <AutoLinkHeader {...{"id":"data-view","size":"h1","className":"ws-title ws-h1"}}>
       {`Data view`}
     </AutoLinkHeader>
-    <p {...{"className":"pf-v6-c-content--p ws-p "}}>
+    <p {...{"className":"ws-p"}}>
       {`The data view extension contains implementation of the data view component allowing to display record data in a configured layout.`}
     </p>
-    <p {...{"className":"pf-v6-c-content--p ws-p "}}>
+    <p {...{"className":"ws-p"}}>
       {`If you notice a bug or have a suggestion for the data view, feel free to file an issue in our `}
-      <PatternflyThemeLink {...{"to":"https://github.com/patternfly/react-data-view/issues","className":""}}>
+      <PatternflyThemeLink {...{"to":"https://github.com/patternfly/react-data-view/issues"}}>
         {`GitHub repository`}
       </PatternflyThemeLink>
       {`! Please make sure to check if there is already a pre-existing issue before creating a new issue.`}

diff --git a/packages/module/patternfly-docs/pages/index.js b/packages/module/patternfly-docs/pages/index.js
@@ -10,7 +10,7 @@ const centerStyle = {
 
 const IndexPage = () => {
   return (
-    <PageSection style={centerStyle}>
+    <PageSection variant="light" style={centerStyle}>
       <div style={{ flex: 'none', textAlign: 'center' }}>
         <Title size="4xl" headingLevel="h1">
           My extension docs

diff --git a/packages/module/src/DataView/DataView.test.tsx b/packages/module/src/DataView/DataView.test.tsx
@@ -5,16 +5,17 @@ import DataView from './DataView';
 const layoutItemStyling = {
   width: '100%',
   height: '5rem',
-  padding: 'var(--pf-t--global--spacer--md)',
-  border: 'var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default)'
+  padding: 'var(--pf-v5-global--spacer--md)',
+  borderStyle: 'dashed',
+  borderWidth: '2px',
 };
 
 describe('DataView component', () => {
   test('should render correctly', () => {
     expect(render(
       <DataView>
         <div style={layoutItemStyling}>Header</div>
-        <div style={layoutItemStyling}>Data representation</div>
+        <div style={{ ...layoutItemStyling, borderTopWidth: 0, borderBottomWidth: 0 }}>Data representation</div>
         <div style={layoutItemStyling}>Footer</div>
       </DataView>)).toMatchSnapshot();
   });

diff --git a/packages/module/src/DataView/__snapshots__/DataView.test.tsx.snap b/packages/module/src/DataView/__snapshots__/DataView.test.tsx.snap
@@ -6,35 +6,35 @@ exports[`DataView component should render correctly 1`] = `
   "baseElement": <body>
     <div>
       <div
-        class="pf-v6-l-stack"
+        class="pf-v5-l-stack"
         data-ouia-component-id="DataView-stack}"
       >
         <div
-          class="pf-v6-l-stack__item"
+          class="pf-v5-l-stack__item"
           data-ouia-component-id="DataView-stack-item-0"
         >
           <div
-            style="width: 100%; height: 5rem;"
+            style="width: 100%; height: 5rem; border-style: dashed; border-width: 2px;"
           >
             Header
           </div>
         </div>
         <div
-          class="pf-v6-l-stack__item"
+          class="pf-v5-l-stack__item"
           data-ouia-component-id="DataView-stack-item-1"
         >
           <div
-            style="width: 100%; height: 5rem;"
+            style="width: 100%; height: 5rem; border-style: dashed; border-width: 2px; border-top-width: 0; border-bottom-width: 0;"
           >
             Data representation
           </div>
         </div>
         <div
-          class="pf-v6-l-stack__item"
+          class="pf-v5-l-stack__item"
           data-ouia-component-id="DataView-stack-item-2"
         >
           <div
-            style="width: 100%; height: 5rem;"
+            style="width: 100%; height: 5rem; border-style: dashed; border-width: 2px;"
           >
             Footer
           </div>
@@ -44,35 +44,35 @@ exports[`DataView component should render correctly 1`] = `
   </body>,
   "container": <div>
     <div
-      class="pf-v6-l-stack"
+      class="pf-v5-l-stack"
       data-ouia-component-id="DataView-stack}"
     >
       <div
-        class="pf-v6-l-stack__item"
+        class="pf-v5-l-stack__item"
         data-ouia-component-id="DataView-stack-item-0"
       >
         <div
-          style="width: 100%; height: 5rem;"
+          style="width: 100%; height: 5rem; border-style: dashed; border-width: 2px;"
         >
           Header
         </div>
       </div>
       <div
-        class="pf-v6-l-stack__item"
+        class="pf-v5-l-stack__item"
         data-ouia-component-id="DataView-stack-item-1"
       >
         <div
-          style="width: 100%; height: 5rem;"
+          style="width: 100%; height: 5rem; border-style: dashed; border-width: 2px; border-top-width: 0; border-bottom-width: 0;"
         >
           Data representation
         </div>
       </div>
       <div
-        class="pf-v6-l-stack__item"
+        class="pf-v5-l-stack__item"
         data-ouia-component-id="DataView-stack-item-2"
       >
         <div
-          style="width: 100%; height: 5rem;"
+          style="width: 100%; height: 5rem; border-style: dashed; border-width: 2px;"
         >
           Footer
         </div>