@patternfly/documentation-framework 6.0.0-alpha.9 → 6.0.0-alpha.90

package/README.md

@@ -16,53 +16,15 @@ We publish this theme [on npm.](https://www.npmjs.com/package/@patternfly/docume
 
 2. Provide or install the following either as dependencies if you want to use them in your own project, or as devDependencies:
     ```
-    "@patternfly/patternfly": "^4.185.1",
-    "@patternfly/react-core": "^4.202.16",
-    "@patternfly/react-table": "^4.71.16",
-    "@patternfly/react-code-editor": "^4.43.16",
+    "@patternfly/patternfly": "6.0.0-alpha.205",
+    "@patternfly/react-core": "6.0.0-alpha.94",
+    "@patternfly/react-table": "6.0.0-alpha.95",
+    "@patternfly/react-code-editor": "6.0.0-alpha.94",
     ```
     `yarn add -D @patternfly/patternfly @patternfly/react-core @patternfly/react-table @patternfly/react-code-editor`
 
-### Resolutions
-
-This should not be needed, but if you encounter errors installing the above devDependencies, try adding one or more of these resolutions to your package.json file:
-```
-"resolutions": {
-  "@types/react": "^16.8.0",
-  "@types/react-dom": "^16.8.0",
-  "react": "16.8.0",
-  "react-dom": "16.8.0",
-  "chromedriver": "102.0.0",
-  "node-sass": "7.0.1",
-  "puppeteer": "14.3.0",
-  "sharp": "0.30.6"
-}
-```
-
 ## First time setup
 
-### Puppeteer
-
-Puppeteer is used to create screenshots, it requires chromium to be installed on your machine
-
-- install chromium using brew:
-
-  `brew install chromium`
-- check the chromium path, should point to /opt/homebrew/bin/chromium:
-
-  `which chromium`
-- export out the path:
-
-  export PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true
-
-  export PUPPETEER_EXECUTABLE_PATH=\`which chromium\`
-
-- So you don't have to retype this in the future, save to your shell rc file like .bashrc or .zshrc:
-
-  echo 'export PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true' >> ~/.zshrc
-
-  echo 'export PUPPETEER_EXECUTABLE_PATH=\`which chromium\`' >> ~/.zshrc 
-
 ### Init documentation project
 
 To get started, you can scaffold out a sample extension docs setup:
@@ -81,48 +43,15 @@ For individual CLI commands, you can also display more information by running `n
 
 ### Develop docs
 
-`yarn docs:develop`
-
-or
-
 `npx pf-docs-framework start`
 
 ### Build docs
 
-`yarn docs:build`
-
-or
-
 `npx pf-docs-framework build all --output public`
 
 > NOTE: If you have `sideEffects: false` in your package.json, that will prevent the CSS from loading in the documentation production build. Set it to true or remove it to enable the CSS from being loaded.
 
-### Generate screenshots
-
-You can generate screenshots against development or production builds.
-
-- Development:
-
-  Terminal 1:
-
-  `yarn docs:develop` or `npx pf-docs-framework start` (Take note of the port it started on, you can modify it in patternfly-docs.config)
-
-  Terminal 2:
-
-  `yarn docs:screenshots` or `npx pf-docs-framework screenshots --urlPrefix http://localhost:<PORT>`
-
-- Production:
-
-  Terminal 1:
-  
-  - `yarn docs:build` or `npx pf-docs-framework build all --output public`
-  - `yarn docs:serve` or `npx pf-docs-framework serve public --port 5000`
-
-  Terminal 2:
-
-  `yarn docs:screenshots` or `npx pf-docs-framework screenshots --urlPrefix http://localhost:5000`
-
-  ### Publish docs to patternfly.org
+### Publish docs to patternfly.org
 
   1. Include the `patternfly-docs/content` and `patternfly-docs/generated` folders as part of your npm published module
 

package/app.js

@@ -3,7 +3,6 @@ import { createRoot, hydrateRoot } from 'react-dom/client';
 import { Router, useLocation } from '@reach/router';
 import 'client-styles'; // Webpack replaces this import: patternfly-docs.css.js
 import { SideNavLayout } from '@patternfly/documentation-framework/layouts';
-import { Footer } from '@patternfly/documentation-framework/components';
 import { MDXTemplate } from '@patternfly/documentation-framework/templates/mdx';
 import { routes, groupedRoutes, fullscreenRoutes, getAsyncComponent } from './routes';
 import { trackEvent } from './helpers';
@@ -12,7 +11,6 @@ import './components/cssVariables/cssVariables.css';
 import './components/tableOfContents/tableOfContents.css';
 import './components/example/example.css';
 import './components/footer/footer.css';
-import './components/sideNav/sideNav.css';
 import './layouts/sideNavLayout/sideNavLayout.css';
 
 const AppRoute = ({ child, title, path }) => {
@@ -37,16 +35,15 @@ const AppRoute = ({ child, title, path }) => {
   return (
     <React.Fragment>
       {child}
-      {process.env.hasFooter && <Footer />}
     </React.Fragment>
   );
 }
 
 const SideNavRouter = () => {
-  const componentsData = process?.env?.componentsData;
+  const componentsData = process.env.componentsData;
   return (
     <SideNavLayout groupedRoutes={groupedRoutes} navOpen={true} >
-      <Router id="ws-page-content-router">
+      <Router id="ws-page-content-router" component="main">
         {Object.entries(routes)
           .map(([path, { Component, title, sources, id }]) => Component
             ? <AppRoute

package/components/autoLinkHeader/autoLinkHeader.css

@@ -3,8 +3,8 @@
 }
 
 .ws-heading-anchor {
-  color: var(--pf-v5-global--Color--100);
-  transform: translate(calc(-100% - var(--pf-v5-global--spacer--xs)), -50%);
+  color: var(--pf-t--global--icon--color--regular);
+  transform: translate(calc(-100% - var(--pf-t--global--spacer--xs)), -50%);
   opacity: 0;
   position: absolute;
   left: 0;

package/components/autoLinkHeader/autoLinkHeader.js

@@ -1,22 +1,12 @@
 import React from 'react';
-import { Title, Flex, FlexItem } from '@patternfly/react-core';
+import { Flex, FlexItem, Content } from '@patternfly/react-core';
 import LinkIcon from '@patternfly/react-icons/dist/esm/icons/link-icon';
 import { Link } from '../link/link';
 import { slugger } from '../../helpers/slugger';
-
-// "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl"
-const sizes = {
-  h1: '3xl',
-  h2: '2xl',
-  h3: 'xl',
-  h4: 'lg',
-  h5: 'md',
-  h6: 'sm'
-}
+import { css } from '@patternfly/react-styles';
 
 export const AutoLinkHeader = ({
   id,
-  size,
   headingLevel,
   children,
   metaText,
@@ -25,22 +15,21 @@ export const AutoLinkHeader = ({
   const slug = id || slugger(children);
 
   return (
-    <Flex alignItems={{ default: 'alignItemsCenter'}} spaceItems={{ default: 'spaceItemsNone' }}>
+    <Flex alignItems={{ default: 'alignItemsCenter'}} spaceItems={{ default: "spaceItemsSm" }}>
       <FlexItem>
-        <Title
+        <Content
           id={slug}
-          size={sizes[size]}
-          headingLevel={headingLevel || size}
-          className={`ws-heading ${className}`}
+          component={headingLevel}
+          className={css('ws-heading', className)}
           tabIndex={-1}
         >
           <Link href={`#${slug}`} className="ws-heading-anchor" tabIndex="-1" aria-hidden>
             <LinkIcon className="ws-heading-anchor-icon" style={{ verticalAlign: 'middle' }} />
           </Link>
           {children}
-        </Title>
+        </Content>
       </FlexItem>
-      <FlexItem>  {metaText}</FlexItem>
+      {metaText && <FlexItem>{metaText}</FlexItem>}
     </Flex>
   )
 };

package/components/cssVariables/cssVariables.css

@@ -1,15 +1,13 @@
-.ws-color-box {
-  display: inline-block;
-  height: 18px;
-  width: 18px;
-  border: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--BorderColor--200);
-  border-radius: var(--pf-v5-global--BorderRadius--lg);
-}
 
-.ws-td-text {
-  font-size: var(--pf-v5-global--FontSize--sm) !important;
+.circle {
+    height: 1em;
+    display: inline-block;
+    aspect-ratio: 1 / 1;
+    border-radius: 50%;
+    border: var(--pf-t--global--border--width--regular) solid var(--pf-t--global--background--color--inverse--default);
+    box-shadow: var(--pf-t--global--box-shadow--sm);
 }
 
-.ws-css-property {
-  padding: var(--pf-v5-global--spacer--xs) var(--pf-v5-global--spacer--md);
+.rotate-90-deg {
+    transform: rotate(90deg);
 }

package/components/cssVariables/cssVariables.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { debounce } from "@patternfly/react-core";
+import { List, ListItem, debounce } from "@patternfly/react-core";
 import {
   Table,
   Thead,
@@ -10,33 +10,22 @@ import {
 } from "@patternfly/react-table";
 import { AutoLinkHeader } from "../autoLinkHeader/autoLinkHeader";
 import * as tokensModule from "@patternfly/react-tokens/dist/esm/componentIndex";
-import global_spacer_md from "@patternfly/react-tokens/dist/esm/global_spacer_md";
 import LevelUpAltIcon from "@patternfly/react-icons/dist/esm/icons/level-up-alt-icon";
 import { CSSSearch } from './cssSearch';
 
 const isColorRegex = /^(#|rgb)/;
 
 const mappingAsList = (property, values) => (
-  <div>
-    <div className="ws-css-property">
-      <span>
-        {property}
-      </span>
-    </div>
-    {values.map((entry, index) => (
-      <div
-        key={index}
-        style={{
-          padding: `4px 0 4px calc(${global_spacer_md.value} * ${index + 3})`
-        }}
+  <List isPlain>
+    <ListItem>{property}</ListItem>
+    {values.map((entry) => (
+      <ListItem
+        icon={<LevelUpAltIcon className="rotate-90-deg" />}
       >
-        <LevelUpAltIcon style={{ transform: 'rotate(90deg)' }} />
-        <span style={{ paddingLeft: '16px' }}>
-          {entry}
-        </span>
-      </div>
+        {entry}
+      </ListItem>
     ))}
-  </div>
+  </List>
 );
 
 const flattenList = files => {
@@ -62,7 +51,7 @@ const flattenList = files => {
 export class CSSVariables extends React.Component {
   constructor(props) {
     super(props);
-    const prefixToken = props.prefix.replace("pf-v5-", "").replace(/-+/g, "_");
+    const prefixToken = props.prefix.replace("pf-v6-", "").replace(/-+/g, "_");
     const applicableFiles = Object.entries(tokensModule)
       .filter(([key, val]) => prefixToken === key)
       .sort(([key1], [key2]) => key1.localeCompare(key2))
@@ -97,30 +86,28 @@ export class CSSVariables extends React.Component {
         (values && searchRE.test(JSON.stringify(values)));
       if (passes) {
         const rowKey = `${selector}_${property}`;
+        const isColor = isColorRegex.test(value);
         const cells = [
           ...this.props.hideSelectorColumn ? [] : [selector],
           property,
           <div key={rowKey}>
             <div
               key={`${rowKey}_1`}
-              className="pf-v5-l-flex pf-m-space-items-sm"
+              className="pf-v6-l-flex pf-m-space-items-sm"
             >
-              {isColorRegex.test(value) && (
+              {isColor && (
                 <div
                   key={`${rowKey}_2`}
-                  className="pf-v5-l-flex pf-m-column pf-m-align-self-center"
+                  className="pf-v6-l-flex pf-m-column pf-m-align-self-center"
                 >
-                  <span
-                    className="ws-color-box"
-                    style={{ backgroundColor: value }}
-                  />
+                  <span className="circle" style={{ backgroundColor: `var(${property})`}}/>
                 </div>
               )}
               <div
                 key={`${rowKey}_3`}
-                className="pf-v5-l-flex pf-m-column pf-m-align-self-center ws-td-text"
+                className="pf-v6-l-flex pf-m-column pf-m-align-self-center ws-td-text"
               >
-                {value}
+                {isColor && '(In light theme)'} {value}
               </div>
             </div>
           </div>
@@ -170,7 +157,7 @@ export class CSSVariables extends React.Component {
   render() {
     return (
       <React.Fragment>
-        {this.props.autoLinkHeader && <AutoLinkHeader size="h3" className="pf-v5-u-mt-lg pf-v5-u-mb-md">{`Prefixed with '${this.props.prefix}'`}</AutoLinkHeader>}
+        {this.props.autoLinkHeader && <AutoLinkHeader headingLevel="h3" className="pf-v6-u-mt-lg pf-v6-u-mb-md">{`Prefixed with '${this.props.prefix}'`}</AutoLinkHeader>}
         <CSSSearch getDebouncedFilteredRows={this.getDebouncedFilteredRows} />
         <Table
           variant="compact"
@@ -180,7 +167,7 @@ export class CSSVariables extends React.Component {
             <Tr>
               {!this.props.hideSelectorColumn && (
                 <React.Fragment>
-                  <Th />
+                  <Th screenReaderText="Expand or collapse column" />
                   <Th>Selector</Th>
                 </React.Fragment>
               )}

package/components/example/example.css

@@ -2,53 +2,19 @@
   --ws-code-editor--tooltip--MaxWidth: 16ch;
 }
 
-.ws-example {
-  margin-top: var(--pf-v5-global--spacer--lg);
-  margin-bottom: var(--pf-v5-global--spacer--lg);
-}
-
-.ws-example > .ws-example-header {
-  padding: var(--pf-v5-global--spacer--md);
-}
-
-.ws-example-header > .ws-example-heading:not(:last-child) {
-  margin-bottom: var(--pf-v5-global--spacer--md);
-}
-
-.ws-code-editor:not(.ws-example-code-expanded) > .pf-v5-c-code-editor__header::before {
-  --pf-v5-c-code-editor__header--before--BorderBottomWidth: 0;
+.ws-code-editor:not(.ws-example-code-expanded) > .pf-v6-c-code-editor__header::before {
+  --pf-v6-c-code-editor__header--before--BorderBottomWidth: 0;
 }
 
 .ws-code-editor-control {
-  --pf-v5-c-button--m-control--BackgroundColor: transparent;
-  --pf-v5-c-button--m-control--active--BackgroundColor: transparent;
-  --pf-v5-c-button--m-control--focus--BackgroundColor: transparent;
-  --pf-v5-c-button--m-control--hover--BackgroundColor: transparent;
-}
-
-.ws-code-editor-control.pf-v5-c-button {
-  --pf-v5-c-button--after--BorderWidth: 0;
+  --pf-v6-c-button--m-control--BackgroundColor: transparent;
+  --pf-v6-c-button--m-control--active--BackgroundColor: transparent;
+  --pf-v6-c-button--m-control--focus--BackgroundColor: transparent;
+  --pf-v6-c-button--m-control--hover--BackgroundColor: transparent;
 }
 
-.ws-preview {
-  padding: var(--pf-v5-global--spacer--md);
-  background-color: var(--pf-v5-global--BackgroundColor--100);
-  border-bottom: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--BorderColor--300);
-  transition: width .2s ease-in-out;
-}
-
-.ws-core-c-page.ws-preview > .ws-preview-html,
-.ws-react-c-page.ws-preview > .pf-v5-c-page {
-  overflow: hidden;
-}
-
-.ws-editor {
-  font-size: var(--pf-v5-global--FontSize--md);
-}
-
-.ws-editor .token.punctuation,
-.ws-editor .token.operator {
-  color: var(--pf-v5-global--danger-color--100);
+.ws-code-editor-control.pf-v6-c-button {
+  --pf-v6-c-button--after--BorderWidth: 0;
 }
 
 .ws-preview__thumbnail-link {
@@ -61,7 +27,7 @@
 .ws-preview__thumbnail-link::before,
 .ws-preview__thumbnail-link::after {
   position: absolute;
-  z-index: 500;
+  z-index: var(--pf-t--global--z-index--sm);
   transition: .2s;
   opacity: 0;
 }
@@ -100,33 +66,23 @@
   color: rgba(255,255,255,.4);
 }
 
-.pf-v5-c-badge.ws-beta-badge {
-  --pf-v5-c-badge--m-unread--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
-  --pf-v5-c-badge--m-unread--Color: var(--pf-v5-global--primary-color--100);
-  border: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--primary-color--100);
-}
-
 .ws-prop-required {
-  color: var(--pf-v5-global--danger-color--100);
+  color: var(--pf-t--global--text--color--status--danger--default);
 }
 
 .ws-full-page-utils {
   position: fixed;
   right: 0;
   bottom: 0;
-  padding: var(--pf-v5-global--spacer--lg);
-  z-index: var(--pf-v5-global--ZIndex--2xl);
+  padding: var(--pf-t--global--spacer--lg);
+  z-index: var(--pf-t--global--z-index--2xl);
 }
 
 .ws-full-page-utils::before {
   position: absolute;
   inset: 0;
   content: "";
-  background-color: var(--pf-v5-global--BackgroundColor--100);
+  background-color: var(--pf-t--global--background--color--floating--default);
   opacity: 0.8;
-  box-shadow: var(--pf-v5-global--BoxShadow--sm);
-}
-
-.pf-v5-theme-dark .ws-theme-switch-full-page::before {
-  background-color: var(--pf-v5-global--BackgroundColor--300);
+  box-shadow: var(--pf-t--global--box-shadow--sm);
 }