feat(v5): Pull in new features from v5

Author: fhlavac

package-lock.json

@@ -39,22 +39,20 @@
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
     "@octokit/rest": "^20.1.1",
+    "@patternfly/documentation-framework": "6.0.0-alpha.117",
+    "@swc/core": "1.6.1",
     "@testing-library/dom": "^10.1.0",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "14.5.2",
+    "@types/jest": "^29.5.13",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
-    "@patternfly/documentation-framework": "6.0.0-alpha.69",
     "babel-jest": "^29.7.0",
     "babel-polyfill": "6.26.0",
     "chokidar": "^3.6.0",
     "concurrently": "^8.2.2",
     "cypress": "^13.11.0",
-    "@swc/core": "1.6.1",
-    "swc-loader": "0.2.6",
-    "sass": "^1.77.6",
-    "sass-loader": "^14.2.1",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-config-standard-with-typescript": "^23.0.0",
@@ -75,9 +73,12 @@
     "react": "^18",
     "react-dom": "^18",
     "rimraf": "^5.0.7",
+    "sass": "^1.77.6",
+    "sass-loader": "^14.2.1",
     "serve": "^14.2.3",
     "start-server-and-test": "^2.0.4",
     "surge": "^0.23.1",
+    "swc-loader": "0.2.6",
     "ts-jest": "29.1.5",
     "wait-on": "^7.2.0",
     "whatwg-fetch": "^3.6.20"

package.json

@@ -31,21 +31,21 @@
     "tag": "prerelease"
   },
   "dependencies": {
-    "@patternfly/react-core": "6.0.0-alpha.94",
-    "@patternfly/react-icons": "6.0.0-alpha.34",
-    "@patternfly/react-table": "6.0.0-alpha.95",
-    "@patternfly/react-component-groups": "6.0.0-alpha.6",
-    "react-jss": "^10.10.0",
-    "clsx": "^2.1.1"
+    "@patternfly/react-component-groups": "6.0.0-prerelease.7",
+    "@patternfly/react-core": "6.0.0-prerelease.21",
+    "@patternfly/react-icons": "6.0.0-prerelease.7",
+    "@patternfly/react-table": "6.0.0-prerelease.22",
+    "clsx": "^2.1.1",
+    "react-jss": "^10.10.0"
   },
   "peerDependencies": {
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
   "devDependencies": {
+    "@patternfly/documentation-framework": "6.0.0-alpha.117",
+    "@patternfly/patternfly": "6.0.0-prerelease.15",
     "@patternfly/patternfly-a11y": "^4.3.1",
-    "@patternfly/patternfly": "6.0.0-alpha.205",
-    "@patternfly/documentation-framework": "6.0.0-alpha.69",
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.0",
     "@types/react-router-dom": "^5.3.3",

packages/module/package.json

@@ -14,7 +14,7 @@ sortValue: 4
 propComponents: ['DataViewToolbar', 'DataViewTableBasic', 'DataViewTableTree']
 sourceLink: https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/Components/Components.md
 ---
-import { Button, EmptyState, EmptyStateActions, EmptyStateBody, EmptyStateFooter, EmptyStateHeader, EmptyStateIcon } from '@patternfly/react-core';
+import { Button, EmptyState, EmptyStateActions, EmptyStateBody, EmptyStateFooter } from '@patternfly/react-core';
 import { CubesIcon, FolderIcon, FolderOpenIcon, LeafIcon, ExclamationCircleIcon } from '@patternfly/react-icons';
 import { BulkSelect, ErrorState, ResponsiveAction, ResponsiveActions, SkeletonTableHead, SkeletonTableBody } from '@patternfly/react-component-groups';
 import { DataViewToolbar } from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';

packages/module/patternfly-docs/content/extensions/data-view/examples/Components/Components.md

@@ -2,7 +2,7 @@ import React from 'react';
 import { DataView, DataViewState } from '@patternfly/react-data-view/dist/dynamic/DataView';
 import { DataViewTable, DataViewTr, DataViewTh } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
 import { CubesIcon } from '@patternfly/react-icons';
-import { Button, EmptyState, EmptyStateActions, EmptyStateBody, EmptyStateFooter, EmptyStateHeader, EmptyStateIcon } from '@patternfly/react-core';
+import { Button, EmptyState, EmptyStateActions, EmptyStateBody, EmptyStateFooter,  } from '@patternfly/react-core';
 import { Tbody, Td, Tr } from '@patternfly/react-table';
 
 interface Repository {
@@ -27,8 +27,7 @@ const empty = (
   <Tbody>
     <Tr key="loading" ouiaId={`${ouiaId}-tr-loading`}>
       <Td colSpan={columns.length}>
-        <EmptyState>
-          <EmptyStateHeader titleText="No data found" headingLevel="h4" icon={<EmptyStateIcon icon={CubesIcon} />} />
+        <EmptyState  headingLevel="h4" icon={CubesIcon} titleText="No data found">
           <EmptyStateBody>There are no matching data to be displayed.</EmptyStateBody>
           <EmptyStateFooter>
             <EmptyStateActions>

packages/module/patternfly-docs/content/extensions/data-view/examples/Components/DataViewTableEmptyExample.tsx

@@ -26,7 +26,7 @@ const error = (
   <Tbody>
     <Tr key="loading" ouiaId={`${ouiaId}-tr-loading`}>
       <Td colSpan={columns.length}>
-        <ErrorState errorTitle='Unable to load data' errorDescription='There was an error retrieving data. Check your connection and reload the page.' />
+        <ErrorState titleText='Unable to load data' bodyText='There was an error retrieving data. Check your connection and reload the page.' />
       </Td>
     </Tr>
   </Tbody>

packages/module/patternfly-docs/content/extensions/data-view/examples/Components/DataViewTableErrorExample.tsx

@@ -54,7 +54,7 @@ const rows: DataViewTr[] = repositories.map(({ id, name, branches, prs, workspac
 const columns: DataViewTh[] = [
   null,
   'Repositories', 
-  { cell: <>Branches<ExclamationCircleIcon className='pf-v5-u-ml-sm' color='var(--pf-v5-global--danger-color--100)'/></> }, 
+  { cell: <>Branches<ExclamationCircleIcon className='pf-v5-u-ml-sm' color="var(--pf-t--temp--dev--tbd)"/* CODEMODS: original v5 color was --pf-v5-global--danger-color--100 *//></> }, 
   'Pull requests', 
   { cell: 'Workspaces', props: { info: { tooltip: 'More information' } } }, 
   { cell: 'Last commit', props: { sort: { sortBy: {}, columnIndex: 4 } } },

packages/module/patternfly-docs/content/extensions/data-view/examples/Components/DataViewTableExample.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useRef, useMemo } from 'react';
-import { Drawer, DrawerActions, DrawerCloseButton, DrawerContent, DrawerContentBody, DrawerHead, DrawerPanelContent, Title, Text } from '@patternfly/react-core';
+import { Drawer, DrawerActions, DrawerCloseButton, DrawerContent, DrawerContentBody, DrawerHead, DrawerPanelContent, Title, Content } from '@patternfly/react-core';
 import { DataView } from '@patternfly/react-data-view/dist/dynamic/DataView';
 import { DataViewTable } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
 import { DataViewEventsProvider, EventTypes, useDataViewEventsContext } from '@patternfly/react-data-view/dist/dynamic/DataViewEventsContext';
@@ -48,10 +48,10 @@ const RepositoryDetail: React.FunctionComponent<RepositoryDetailProps> = ({ sele
         <Title className="pf-v5-u-mb-md" headingLevel="h2" ouiaId="detail-drawer-title">
           Detail of {selectedRepo?.name}
         </Title>
-        <Text>Branches: {selectedRepo?.branches}</Text>
-        <Text>Pull requests: {selectedRepo?.prs}</Text>
-        <Text>Workspaces: {selectedRepo?.workspaces}</Text>
-        <Text>Last commit: {selectedRepo?.lastCommit}</Text>
+        <Content component="p">Branches: {selectedRepo?.branches}</Content>
+        <Content component="p">Pull requests: {selectedRepo?.prs}</Content>
+        <Content component="p">Workspaces: {selectedRepo?.workspaces}</Content>
+        <Content component="p">Last commit: {selectedRepo?.lastCommit}</Content>
         <DrawerActions>
           <DrawerCloseButton onClick={() => setSelectedRepo(undefined)} data-ouia-component-id="detail-drawer-close-btn"/>
         </DrawerActions>

packages/module/patternfly-docs/content/extensions/data-view/examples/EventsContext/EventsExample.tsx

@@ -14,6 +14,7 @@ sortValue: 3
 sourceLink: https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/Functionality/Functionality.md
 ---
 import { useMemo } from 'react';
+import { BrowserRouter, useSearchParams } from 'react-router-dom';
 import { useDataViewPagination, useDataViewSelection } from '@patternfly/react-data-view/dist/dynamic/Hooks';
 import { DataView } from '@patternfly/react-data-view/dist/dynamic/DataView';
 import { BulkSelect, BulkSelectValue } from '@patternfly/react-component-groups/dist/dynamic/BulkSelect';

packages/module/patternfly-docs/content/extensions/data-view/examples/Functionality/Functionality.md

@@ -9,15 +9,15 @@ import { DataViewTable } from '@patternfly/react-data-view/dist/dynamic/DataView
 const perPageOptions = [
   { title: '5', value: 5 },
   { title: '10', value: 10 }
-]
+];
 
 interface Repository {
   name: string;
   branches: string | null;
   prs: string | null;
   workspaces: string;
   lastCommit: string;
-}
+};
 
 const repositories: Repository[] = [
   { name: 'Repository one', branches: 'Branch one', prs: 'Pull request one', workspaces: 'Workspace one', lastCommit: 'Timestamp one' },
@@ -46,11 +46,11 @@ const MyTable: React.FunctionComponent = () => {
       <DataViewTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={pageRows} />
       <DataViewToolbar ouiaId='DataViewFooter' pagination={<Pagination isCompact perPageOptions={perPageOptions} itemCount={repositories.length} {...pagination} />} />
     </DataView>
-  )
-}
+  );
+};
 
 export const BasicExample: React.FunctionComponent = () => (
   <BrowserRouter>
     <MyTable/>
   </BrowserRouter>
-)
+);