chore(deps): Update to latest PF prereleases

patternfly · Jun 21, 2023 · 51546cb · 51546cb
1 parent e608338
commit 51546cb
Show file tree

Hide file tree

Showing 55 changed files with 354 additions and 420 deletions.
diff --git a/.cache_1expqrc b/.cache_1expqrc
diff --git a/package.json b/package.json
@@ -13,11 +13,14 @@
     "build": "yarn workspace @patternfly/quickstarts build && yarn build:adoc",
     "build:quick": "yarn workspace @patternfly/quickstarts quick",
     "build:adoc": "yarn workspace @patternfly/transform-adoc build",
-    "start": "NODE_OPTIONS=--openssl-legacy-provider yarn workspace @patternfly/quickstarts-dev start",
+    "build:docs": "yarn build && yarn workspace @patternfly/quickstarts docs:build",
+    "start": "yarn workspace @patternfly/quickstarts-dev start",
+    "start:docs": "yarn build && yarn workspace @patternfly/quickstarts docs:develop",
     "watch": "yarn build && concurrently --kill-others \"yarn workspace @patternfly/quickstarts watch\" \"yarn start\"",
     "watch:quick": "yarn build:quick && concurrently --kill-others \"yarn workspace @patternfly/quickstarts watch\" \"yarn start\"",
     "dev:build": "yarn workspace @patternfly/quickstarts-dev build",
     "dev:serve": "yarn workspace @patternfly/quickstarts-dev serve",
+    "docs:serve": "yarn workspace @patternfly/quickstarts docs:serve",
     "test": "LANG=en_US.UTF-8 jest",
     "eslint": "eslint --ext .js,.jsx,.ts,.tsx --color",
     "lint": "yarn lint:module && yarn lint:dev",

diff --git a/packages/dev/package.json b/packages/dev/package.json
@@ -9,10 +9,10 @@
     "serve": "serve public"
   },
   "dependencies": {
-    "@patternfly/patternfly": "^4.222.4",
-    "@patternfly/quickstarts": "2.3.3",
+    "@patternfly/patternfly": "5.0.0-prerelease.6",
+    "@patternfly/quickstarts": "5.0.0-prerelease.0",
     "@patternfly/transform-adoc": "*",
-    "@patternfly/react-core": "^4.267.6",
+    "@patternfly/react-core": "5.0.0-prerelease.7",
     "asciidoctor": "^2.2.1",
     "i18next": "^19.8.3",
     "i18next-browser-languagedetector": "^6.0.1",

diff --git a/packages/dev/src/MockConsole.tsx b/packages/dev/src/MockConsole.tsx
@@ -140,7 +140,7 @@ export const MockConsole: React.FC = () => {
   return (
     <>
       <PageSection>
-        <Banner variant="info">
+        <Banner variant="blue">
           <Title headingLevel="h1">Console Page {consolePageState}</Title>
         </Banner>
       </PageSection>

diff --git a/packages/dev/src/common/Page.tsx b/packages/dev/src/common/Page.tsx
@@ -1,17 +1,19 @@
 import React from 'react';
 import {
-  PageHeaderTools,
-  PageHeaderToolsItem,
-  Button,
-  PageHeader,
-  Brand,
-  Nav as PfNav,
-  NavList,
-  NavItem,
-  PageSidebar,
-  ButtonVariant,
-  Switch,
+	Button,
+	Brand,
+	Nav as PfNav,
+	NavList,
+	NavItem,
+	PageSidebar,
+	ButtonVariant,
+	Switch, PageSidebarBody
 } from '@patternfly/react-core';
+import {
+	PageHeaderTools,
+	PageHeaderToolsItem,
+	PageHeader
+} from '@patternfly/react-core/deprecated';
 import LightbulbIcon from '@patternfly/react-icons/dist/js/icons/lightbulb-icon';
 import { QuickStartContext } from '@patternfly/quickstarts';
 import { Link } from 'react-router-dom';
@@ -30,9 +32,9 @@ const AppToolbar = () => {
   const handleDarkThemeChange = (isChecked: boolean) => {
     setDarkTheme(isChecked);
     if (isChecked) {
-      document.documentElement.classList.add('pf-theme-dark');
+      document.documentElement.classList.add('pf-v5-theme-dark');
     } else {
-      document.documentElement.classList.remove('pf-theme-dark');
+      document.documentElement.classList.remove('pf-v5-theme-dark');
     }
   };
 
@@ -44,7 +46,7 @@ const AppToolbar = () => {
           aria-label="Toggle dark theme"
           label="Dark theme"
           isChecked={isDarkTheme}
-          onChange={handleDarkThemeChange}
+          onChange={(_event, isChecked: boolean) => handleDarkThemeChange(isChecked)}
         />
       </PageHeaderToolsItem>
       <PageHeaderToolsItem>
@@ -95,4 +97,8 @@ const AppNav = (
   </PfNav>
 );
 
-export const AppSidebar = <PageSidebar isNavOpen nav={AppNav} />;
+export const AppSidebar = <PageSidebar isSidebarOpen >
+<PageSidebarBody>
+{AppNav}
+</PageSidebarBody>
+</PageSidebar>;
diff --git a/packages/dev/src/quickstarts-data/asciidoc/.build/parsers/procedure-adoc-parser.ts b/packages/dev/src/quickstarts-data/asciidoc/.build/parsers/procedure-adoc-parser.ts
@@ -46,7 +46,7 @@ const elementWithoutTitle = (html: string) => {
 const addClasses = (html: string) => {
   const span = document.createElement('span');
   span.innerHTML = html;
-  span.querySelectorAll('div.title').forEach((el) => el.classList.add('pf-c-title', 'pf-m-md'));
+  span.querySelectorAll('div.title').forEach((el) => el.classList.add('pf-v5-c-title', 'pf-m-md'));
   return span;
 };
 

diff --git a/packages/module/.cache_uu8u6t b/packages/module/.cache_uu8u6t
diff --git a/packages/module/package.json b/packages/module/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/quickstarts",
-  "version": "5.0.0",
+  "version": "5.0.0-prerelease.0",
   "description": "PatternFly quick starts",
   "files": [
     "src",
@@ -51,18 +51,22 @@
     "showdown": ">=1.8.6"
   },
   "dependencies": {
-    "@patternfly/react-catalog-view-extension": "^5.0.0-alpha.1",
+    "@patternfly/react-catalog-view-extension": "^5.0.0-alpha.2",
     "dompurify": "^2.2.6",
     "history": "^5.0.0",
     "showdown": "1.8.6"
   },
   "devDependencies": {
-    "@patternfly/documentation-framework": "^2.0.0-alpha.52",
-    "@patternfly/patternfly": "5.0.0-prerelease.3",
-    "@patternfly/react-core": "5.0.0-prerelease.3",
-    "@patternfly/react-icons": "5.0.0-prerelease.2",
-    "@patternfly/react-styles": "5.0.0-prerelease.2",
-    "@patternfly/react-tokens": "5.0.0-prerelease.2",
+    "@patternfly/documentation-framework": "^2.0.0-alpha.57",
+    "@patternfly/patternfly": "5.0.0-prerelease.6",
+    "@patternfly/react-core": "5.0.0-prerelease.7",
+    "@patternfly/react-icons": "5.0.0-prerelease.3",
+    "@patternfly/react-styles": "5.0.0-prerelease.3",
+    "@patternfly/react-tokens": "5.0.0-prerelease.3",
+    "@patternfly/react-table": "5.0.0-prerelease.7",
+    "@patternfly/react-code-editor": "5.0.0-prerelease.7",
+    "react-monaco-editor": "0.51.0",
+    "monaco-editor": "0.34.1",
     "@rollup/plugin-commonjs": "^17.0.0",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^11.1.0",

diff --git a/...ocs/generated/extensions/quick-starts/Basic-Quick-Starts/fullscreen-example.png b/...ocs/generated/extensions/quick-starts/Basic-Quick-Starts/fullscreen-example.png
diff --git a/...nfly-docs/generated/extensions/quick-starts/In-App-Documentation/fullscreen.png b/...nfly-docs/generated/extensions/quick-starts/In-App-Documentation/fullscreen.png
diff --git a/packages/module/src/ConsoleInternal/components/_icon-and-text.scss b/packages/module/src/ConsoleInternal/components/_icon-and-text.scss
@@ -2,8 +2,8 @@
   align-items: baseline;
   display: flex;
 
-  // fix bug where concurrent .pf-c-label are misaligned vertically
-  .pf-c-label__icon & {
+  // fix bug where concurrent .pf-v5-c-label are misaligned vertically
+  .pf-v5-c-label__icon & {
     display: block;
   }
 }

diff --git a/packages/module/src/ConsoleInternal/components/catalog/_catalog.scss b/packages/module/src/ConsoleInternal/components/catalog/_catalog.scss
@@ -7,7 +7,7 @@ $pfext-m-catalog-tile-width: 260px;
 
 $catalog-capability-level-icon-left: -20px;
 $catalog-capability-level-icon-top: 4px;
-$catalog-capability-level-inactive-color: var(--pf-global--Color--400);
+$catalog-capability-level-inactive-color: var(--pf-v5-global--Color--400);
 $catalog-item-icon-size-lg: 40px;
 $catalog-item-icon-size-sm: 24px;
 $pfext-modal-ignore-warning-icon-width: 30px;
@@ -32,7 +32,7 @@ $catalog-tile-width: $pfext-m-catalog-tile-width;
 .pfext-catalog-tile-view {
   display: flex;
   flex-wrap: wrap;
-  --pf-l-gallery--GridTemplateColumns: repeat(auto-fill, 260px) !important;
+  --pf-v5-l-gallery--GridTemplateColumns: repeat(auto-fill, 260px) !important;
 }
 
 .pfext-catalog__body {
@@ -51,7 +51,7 @@ $catalog-tile-width: $pfext-m-catalog-tile-width;
   }
 
   &__kind-label {
-    font-weight: var(--pf-global--FontWeight--bold);
+    font-weight: var(--pf-v5-global--FontWeight--bold);
   }
 
   &__name {
@@ -103,7 +103,7 @@ $catalog-tile-width: $pfext-m-catalog-tile-width;
 
 .pfext-catalog-page {
   background: $color-pf-white;
-  border: 1px solid var(--pf-global--BorderColor--300);
+  border: 1px solid var(--pf-v5-global--BorderColor--300);
   display: flex;
   flex: 1;
   padding-top: math.div($grid-gutter-width, 2);
@@ -115,7 +115,7 @@ $catalog-tile-width: $pfext-m-catalog-tile-width;
 
   &__btn-group__group-by {
     display: inline;
-    margin-left: var(--pf-global--spacer--md);
+    margin-left: var(--pf-v5-global--spacer--md);
   }
 
   &__content {
@@ -146,11 +146,11 @@ $catalog-tile-width: $pfext-m-catalog-tile-width;
   }
 
   &__grouped-items {
-    margin-bottom: var(--pf-global--spacer--md);
+    margin-bottom: var(--pf-v5-global--spacer--md);
   }
 
   &__group-title {
-    margin-bottom: var(--pf-global--spacer--sm);
+    margin-bottom: var(--pf-v5-global--spacer--sm);
   }
 
   &__header {
@@ -163,7 +163,7 @@ $catalog-tile-width: $pfext-m-catalog-tile-width;
   }
 
   &__hint {
-    margin: 0 0 var(--pf-global--spacer--md) 0;
+    margin: 0 0 var(--pf-v5-global--spacer--md) 0;
   }
 
   &__input {
@@ -174,11 +174,11 @@ $catalog-tile-width: $pfext-m-catalog-tile-width;
 
   &__sort {
     display: inline;
-    margin-left: var(--pf-global--spacer--md);
+    margin-left: var(--pf-v5-global--spacer--md);
   }
 
   &__num-items {
-    font-weight: var(--pf-global--FontWeight--bold);
+    font-weight: var(--pf-v5-global--FontWeight--bold);
     padding: 0 0 20px;
   }
 
@@ -207,9 +207,9 @@ $catalog-tile-width: $pfext-m-catalog-tile-width;
     bottom: 0;
     padding: 0 !important;
     right: 0;
-    top: 4.75rem; // --pf-c-page__header--MinHeight
+    top: 4.75rem; // --pf-v5-c-page__header--MinHeight
 
-    .pf-c-modal-box__body {
+    .pf-v5-c-modal-box__body {
       // Required to position scroll shadows correctly on Chrome
       display: flex;
       flex-direction: column;
@@ -230,7 +230,7 @@ $catalog-tile-width: $pfext-m-catalog-tile-width;
   &__overlay-action {
     align-items: baseline;
     display: inline-flex !important;
-    margin: var(--pf-global--spacer--sm) var(--pf-global--spacer--sm) 0 0;
+    margin: var(--pf-v5-global--spacer--sm) var(--pf-v5-global--spacer--sm) 0 0;
     overflow-x: hidden;
   }
 
@@ -248,19 +248,19 @@ $catalog-tile-width: $pfext-m-catalog-tile-width;
   &__overlay-actions {
     display: flex;
     flex-wrap: wrap;
-    margin-bottom: var(--pf-global--spacer--md);
+    margin-bottom: var(--pf-v5-global--spacer--md);
     white-space: normal;
   }
 
   &__overlay-header {
-    margin-bottom: var(--pf-global--spacer--md);
+    margin-bottom: var(--pf-v5-global--spacer--md);
   }
 
   &__overlay-body {
     margin: 0;
-    padding-left: var(--pf-global--spacer--lg);
-    padding-right: var(--pf-global--spacer--lg);
-    padding-top: var(--pf-global--spacer--md);
+    padding-left: var(--pf-v5-global--spacer--lg);
+    padding-right: var(--pf-v5-global--spacer--lg);
+    padding-top: var(--pf-v5-global--spacer--md);
     @media (min-width: $screen-sm-min) {
       display: flex;
     }
@@ -303,13 +303,13 @@ $catalog-tile-width: $pfext-m-catalog-tile-width;
 }
 
 @media screen and (min-width: $screen-sm) {
-  .pf-c-modal-box.pfext-catalog-page__overlay {
+  .pf-v5-c-modal-box.pfext-catalog-page__overlay {
     width: 600px;
   }
 }
 
 @media screen and (min-width: $screen-md) {
-  .pf-c-modal-box.pfext-catalog-page__overlay {
+  .pf-v5-c-modal-box.pfext-catalog-page__overlay {
     width: 900px;
   }
 }

diff --git a/packages/module/src/ConsoleInternal/components/markdown-view.tsx b/packages/module/src/ConsoleInternal/components/markdown-view.tsx
@@ -42,7 +42,7 @@ export const markdownConvert = (markdown, extensions?: ShowdownExtension[]) => {
       node.nodeType === 1 &&
       (node.nodeName.toLowerCase() === 'ul' || node.nodeName.toLowerCase() === 'ol')
     ) {
-      node.setAttribute('class', 'pf-c-list');
+      node.setAttribute('class', 'pf-v5-c-list');
       return node;
     }
   });
@@ -234,7 +234,7 @@ const IFrameMarkdownView: React.FC<InnerSyncMarkdownProps> = ({
   body {
     background-color: transparent !important;
     color: ${isEmpty ? '#999' : '#333'};
-    font-family: var(--pf-global--FontFamily--sans-serif);
+    font-family: var(--pf-v5-global--FontFamily--sans-serif);
     min-width: auto !important;
   }
   table {

diff --git a/packages/module/src/ConsoleInternal/components/utils/_status-box.scss b/packages/module/src/ConsoleInternal/components/utils/_status-box.scss
@@ -2,7 +2,7 @@
   padding: 40px 20px;
 
   &__loading-message {
-    margin-top: var(--pf-global--spacer--sm);
+    margin-top: var(--pf-v5-global--spacer--sm);
   }
 }
 

diff --git a/packages/module/src/ConsoleShared/src/components/layout/PageLayout.scss b/packages/module/src/ConsoleShared/src/components/layout/PageLayout.scss
@@ -1,29 +1,29 @@
 .pfext-page-layout {
   &__content {
-    padding: var(--pf-global--spacer--lg);
+    padding: var(--pf-v5-global--spacer--lg);
     flex: 1;
   }
 
   &__header {
     padding-top: 1px;
-    background-color: var(--pf-global--BackgroundColor--light-100);
+    background-color: var(--pf-v5-global--BackgroundColor--light-100);
   }
 
   &__hint {
-    padding-left: var(--pf-global--spacer--lg);
-    padding-right: var(--pf-global--spacer--lg);
-    padding-bottom: var(--pf-global--spacer--md);
+    padding-left: var(--pf-v5-global--spacer--lg);
+    padding-right: var(--pf-v5-global--spacer--lg);
+    padding-bottom: var(--pf-v5-global--spacer--md);
     font-size: 14px;
   }
 
   &__title {
-    padding-left: var(--pf-global--spacer--lg);
-    padding-right: var(--pf-global--spacer--lg);
-    font-size: var(--pf-global--FontSize--2xl);
+    padding-left: var(--pf-v5-global--spacer--lg);
+    padding-right: var(--pf-v5-global--spacer--lg);
+    font-size: var(--pf-v5-global--FontSize--2xl);
     margin-top: 23px;
     margin-bottom: 11.5px;
-    font-family: var(--pf-global--FontFamily--heading--sans-serif);
-    font-weight: var(--pf-global--FontWeight--normal);
+    font-family: var(--pf-v5-global--FontFamily--heading--sans-serif);
+    font-weight: var(--pf-v5-global--FontWeight--normal);
     line-height: 1.1;
   }
 }
diff --git a/...odule/src/ConsoleShared/src/components/markdown-extensions/accordion-render-extension.tsx b/...odule/src/ConsoleShared/src/components/markdown-extensions/accordion-render-extension.tsx
@@ -16,9 +16,9 @@ const AccordionShowdownHandler: React.FC<AccordionShowdownComponentProps> = ({
   const handleClick = () => {
     const expandedModifier = 'pf-m-expanded';
 
-    buttonElement.className = `pf-c-accordion__toggle ${!expanded ? expandedModifier : ''}`;
+    buttonElement.className = `pf-v5-c-accordion__toggle ${!expanded ? expandedModifier : ''}`;
     contentElement.hidden = expanded;
-    contentElement.className = `pf-c-accordion__expanded-content ${
+    contentElement.className = `pf-v5-c-accordion__expanded-content ${
       !expanded ? expandedModifier : ''
     }`;
     setExpanded(!expanded);

diff --git a/...odule/src/ConsoleShared/src/components/markdown-extensions/inline-clipboard-extension.tsx b/...odule/src/ConsoleShared/src/components/markdown-extensions/inline-clipboard-extension.tsx
@@ -17,11 +17,11 @@ const useInlineCopyClipboardShowdownExtension = () => {
           return text;
         }
         return removeTemplateWhitespace(
-          `<span class="pf-c-clipboard-copy pf-m-inline">
-              <span class="pf-c-clipboard-copy__text" ${MARKDOWN_SNIPPET_ID}="${groupId}">${group}</span>
-              <span class="pf-c-clipboard-copy__actions">
-                <span class="pf-c-clipboard-copy__actions-item">
-                  <button class="pf-c-button pf-m-plain" aria-label="${getResource(
+          `<span class="pf-v5-c-clipboard-copy pf-m-inline">
+              <span class="pf-v5-c-clipboard-copy__text" ${MARKDOWN_SNIPPET_ID}="${groupId}">${group}</span>
+              <span class="pf-v5-c-clipboard-copy__actions">
+                <span class="pf-v5-c-clipboard-copy__actions-item">
+                  <button class="pf-v5-c-button pf-m-plain" aria-label="${getResource(
                     'Copy to clipboard',
                   )}" ${MARKDOWN_COPY_BUTTON_ID}="${groupId}">
                     ${renderToStaticMarkup(<CopyIcon />)}