feat(v6): consume v6 alphas

.github/workflows/build-lint-test.yml

@@ -16,7 +16,7 @@ jobs:
           fi
       - uses: actions/setup-node@v3
         with:
-          node-version: '16'
+          node-version: '18'
       - uses: actions/cache@v2
         id: yarn-cache
         name: Cache npm deps

.github/workflows/build.yml

@@ -32,7 +32,7 @@ jobs:
         if: steps.setup-cache.outputs.cache-hit != 'true'
       - uses: actions/setup-node@v3
         with:
-          node-version: '16'
+          node-version: '18'
       - uses: actions/cache@v2
         id: yarn-cache
         name: Cache npm deps

.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: |

.github/workflows/release.yml

@@ -17,7 +17,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v3
         with:
-          node-version: '16'
+          node-version: '18'
       - uses: actions/cache@v2
         id: yarn-cache
         name: Cache npm deps

packages/module/package.json

@@ -28,21 +28,21 @@
   },
   "homepage": "https://github.com/patternfly/react-log-viewer#readme",
   "dependencies": {
-    "@patternfly/react-core": "^6.0.0-alpha.1",
-    "@patternfly/react-icons": "^6.0.0-alpha.1",
-    "@patternfly/react-styles": "^6.0.0-alpha.1",
+    "@patternfly/react-core": "6.0.0-alpha.48",
+    "@patternfly/react-icons": "6.0.0-alpha.18",
+    "@patternfly/react-styles": "6.0.0-alpha.18",
     "memoize-one": "^5.1.0"
   },
   "peerDependencies": {
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
   "devDependencies": {
-    "@patternfly/documentation-framework": "^5.2.20",
-    "@patternfly/patternfly": "^6.0.0-alpha.9",
-    "@patternfly/react-table": "^6.0.0-alpha.1",
+    "@patternfly/documentation-framework": "6.0.0-alpha.18",
+    "@patternfly/patternfly": "6.0.0-alpha.109",
+    "@patternfly/react-table": "6.0.0-alpha.48",
     "@patternfly/patternfly-a11y": "^4.3.1",
-    "@patternfly/react-code-editor": "^6.0.0-alpha.1",
+    "@patternfly/react-code-editor": "6.0.0-alpha.48",
     "resize-observer-polyfill": "^1.5.1",
     "tslib": "^2.0.0",
     "react-monaco-editor": "^0.51.0",

packages/module/patternfly-docs/content/extensions/react-log-viewer/demos/ComplexToolbarLogViewer.jsx

@@ -6,6 +6,7 @@ import {
   Button,
   MenuToggle,
   Select,
+  SelectList,
   SelectOption,
   Tooltip,
   Toolbar,
@@ -164,7 +165,7 @@ const ComplexToolbarLogViewer = () => {
   const leftAlignedToolbarGroup = (
     <React.Fragment>
       <ToolbarToggleGroup toggleIcon={<EllipsisVIcon />} breakpoint="md">
-        <ToolbarItem variant="search-filter">
+        <ToolbarItem>
           <Select
             toggle={toggle}
             onOpenChange={(isOpen) => setSelectDataSourceOpen(isOpen)}
@@ -181,10 +182,10 @@ const ComplexToolbarLogViewer = () => {
             isOpen={selectDataSourceOpen}
             placeholderText={selectDataSourcePlaceholder}
           >
-            {selectDataSourceMenu}
+            <SelectList>{selectDataSourceMenu}</SelectList>
           </Select>
         </ToolbarItem>
-        <ToolbarItem variant="search-filter">
+        <ToolbarItem>
           <LogViewerSearch onFocus={(_e) => setIsPaused(true)} placeholder="Search" />
         </ToolbarItem>
       </ToolbarToggleGroup>

packages/module/patternfly-docs/content/extensions/react-log-viewer/demos/LogViewer.md

@@ -7,17 +7,18 @@ source: react-demos
 import { data } from '../examples/realTestData';
 import { LogViewer, LogViewerSearch } from '@patternfly/react-log-viewer';
 import {
-  Badge,
-  Button,
-  MenuToggle,
-  Select,
-  SelectOption,
-  Tooltip,
-  Toolbar,
-  ToolbarContent,
-  ToolbarGroup,
-  ToolbarItem,
-  ToolbarToggleGroup
+Badge,
+Button,
+MenuToggle,
+Select,
+SelectList,
+SelectOption,
+Tooltip,
+Toolbar,
+ToolbarContent,
+ToolbarGroup,
+ToolbarItem,
+ToolbarToggleGroup
 } from '@patternfly/react-core';
 import OutlinedPlayCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-play-circle-icon';
 import ExpandIcon from '@patternfly/react-icons/dist/esm/icons/expand-icon';

packages/module/patternfly-docs/generated/extensions/log-viewer/design-guidelines.js

@@ -10,6 +10,7 @@ const pageData = {
   "section": "extensions",
   "subsection": "",
   "deprecated": false,
+  "template": false,
   "beta": false,
   "demo": false,
   "newImplementationLink": false,
@@ -18,9 +19,6 @@ const pageData = {
   "slug": "/extensions/log-viewer/design-guidelines",
   "sourceLink": "https://github.com/patternfly/patternfly-org/blob/main/packages/module/patternfly-docs/content/extensions/react-log-viewer/design-guidelines/design-guidelines.md",
   "relPath": "packages/module/patternfly-docs/content/extensions/react-log-viewer/design-guidelines/design-guidelines.md"
-};
-pageData.relativeImports = {
-
 };
 pageData.examples = {
 

packages/module/patternfly-docs/generated/extensions/log-viewer/react.js

@@ -8,6 +8,7 @@ const pageData = {
   "section": "extensions",
   "subsection": "",
   "deprecated": false,
+  "template": false,
   "beta": false,
   "demo": false,
   "newImplementationLink": false,
@@ -145,9 +146,7 @@ pageData.liveContext = {
   ToolbarItem,
   data
 };
-pageData.relativeImports = {
-
-};
+pageData.relativeImports = "import { data } from 'content/extensions/react-log-viewer/examples/./realTestData';"
 pageData.examples = {
   'Basic': props => 
     <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { data } from './realTestData';\nimport { LogViewer } from '@patternfly/react-log-viewer';\nimport { Checkbox } from '@patternfly/react-core';\n\nconst BasicLogViewer = () => {\n  const [isDarkTheme, setIsDarkTheme] = React.useState(false);\n\n  return (\n    <React.Fragment>\n      <Checkbox\n        label=\"Dark theme\"\n        isChecked={isDarkTheme}\n        onChange={(_event, value) => setIsDarkTheme(value)}\n        aria-label=\"toggle dark theme checkbox\"\n        id=\"toggle-dark-theme\"\n        name=\"toggle-dark-theme\"\n      />\n      <LogViewer hasLineNumbers={false} height={300} data={data.data} theme={isDarkTheme ? 'dark' : 'light'} />\n    </React.Fragment>\n  );\n};\n\nexport default BasicLogViewer;","title":"Basic","lang":"js"}}>

packages/module/patternfly-docs/generated/index.js

@@ -1,14 +1,14 @@
 module.exports = {
-  '/extensions/log-viewer/react-demos': {
+  '/extensions/log-viewer/react': {
     id: "Log viewer",
     title: "Log viewer",
-    toc: [[{"text":"With complex toolbar"}]],
-    examples: ["With complex toolbar"],
+    toc: [{"text":"Examples"},[{"text":"Basic"},{"text":"With search"},{"text":"With complex toolbar"},{"text":"With header component"},{"text":"With footer component"},{"text":"With ANSI color logs"}]],
+    examples: ["Basic","With search","With complex toolbar","With header component","With footer component","With ANSI color logs"],
     section: "extensions",
     subsection: "",
-    source: "react-demos",
+    source: "react",
     tabName: null,
-    Component: () => import(/* webpackChunkName: "extensions/log-viewer/react-demos/index" */ './extensions/log-viewer/react-demos')
+    Component: () => import(/* webpackChunkName: "extensions/log-viewer/react/index" */ './extensions/log-viewer/react')
   },
   '/extensions/log-viewer/design-guidelines': {
     id: "Log viewer",
@@ -20,15 +20,15 @@ module.exports = {
     tabName: null,
     Component: () => import(/* webpackChunkName: "extensions/log-viewer/design-guidelines/index" */ './extensions/log-viewer/design-guidelines')
   },
-  '/extensions/log-viewer/react': {
+  '/extensions/log-viewer/react-demos': {
     id: "Log viewer",
     title: "Log viewer",
-    toc: [{"text":"Examples"},[{"text":"Basic"},{"text":"With search"},{"text":"With complex toolbar"},{"text":"With header component"},{"text":"With footer component"},{"text":"With ANSI color logs"}]],
-    examples: ["Basic","With search","With complex toolbar","With header component","With footer component","With ANSI color logs"],
+    toc: [[{"text":"With complex toolbar"}]],
+    examples: ["With complex toolbar"],
     section: "extensions",
     subsection: "",
-    source: "react",
+    source: "react-demos",
     tabName: null,
-    Component: () => import(/* webpackChunkName: "extensions/log-viewer/react/index" */ './extensions/log-viewer/react')
+    Component: () => import(/* webpackChunkName: "extensions/log-viewer/react-demos/index" */ './extensions/log-viewer/react-demos')
   }
 };

packages/module/patternfly-docs/pages/index.js

@@ -10,7 +10,7 @@ const centerStyle = {
 
 const IndexPage = () => {
   return (
-    <PageSection variant="light" style={centerStyle}>
+    <PageSection style={centerStyle}>
       <div style={{ flex: 'none', textAlign: 'center' }}>
         <Title size="4xl" headingLevel="h1">
           My extension docs

packages/module/src/LogViewer/LogViewer.tsx

@@ -201,7 +201,7 @@ const LogViewerBase: React.FunctionComponent<LogViewerProps> = memo(
       setIndexWidth(parseFloat(dummyIndexStyles.width));
       // remove dummy elements from the DOM tree
       containerRef.current.removeChild(dummyList);
-      setListKey(listKey => listKey + 1);
+      setListKey((listKey) => listKey + 1);
     };
 
     const scrollToRowInFocus = (searchedRowIndex: searchedKeyWordType) => {
@@ -211,14 +211,14 @@ const LogViewerBase: React.FunctionComponent<LogViewerProps> = memo(
       // if the keyword is out of the window when wrapping text
       if (!isTextWrapped) {
         setTimeout(() => {
-          const element = containerRef.current.querySelector('.pf-v5-c-log-viewer__string.pf-m-current');
+          const element = containerRef.current.querySelector('.pf-v6-c-log-viewer__string.pf-m-current');
           element && element.scrollIntoView({ block: 'nearest', inline: 'center' });
         }, 1);
       }
     };
 
     useEffect(() => {
-      setListKey(listKey => listKey + 1);
+      setListKey((listKey) => listKey + 1);
     }, [isTextWrapped]);
 
     const guessRowHeight = (rowIndex: number) => {
@@ -272,7 +272,7 @@ const LogViewerBase: React.FunctionComponent<LogViewerProps> = memo(
           )}
           {...(initialIndexWidth && {
             style: {
-              '--pf-v5-c-log-viewer--line-number-chars': initialIndexWidth + 1
+              '--pf-v6-c-log-viewer--line-number-chars': initialIndexWidth + 1
             } as React.CSSProperties
           })}
           {...props}