@patternfly/documentation-framework 6.0.0-alpha.5 → 6.0.0-alpha.51

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, Text } 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
+        <Text
           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>
+        </Text>
       </FlexItem>
-      <FlexItem>  {metaText}</FlexItem>
+      {metaText && <FlexItem>{metaText}</FlexItem>}
     </Flex>
   )
 };

package/components/cssVariables/cssVariables.css

@@ -2,14 +2,14 @@
   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);
+/*   border: var(--pf-v6-global--BorderWidth--sm) solid var(--pf-v6-global--BorderColor--200); */
+/*   border-radius: var(--pf-v6-global--BorderRadius--lg); */
 }
 
 .ws-td-text {
-  font-size: var(--pf-v5-global--FontSize--sm) !important;
+/*   font-size: var(--pf-v6-global--FontSize--sm) !important; */
 }
 
 .ws-css-property {
-  padding: var(--pf-v5-global--spacer--xs) var(--pf-v5-global--spacer--md);
+  padding: var(--pf-t--global--spacer--xs) var(--pf-t--global--spacer--md);
 }

package/components/cssVariables/cssVariables.js

@@ -62,7 +62,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))
@@ -103,12 +103,12 @@ export class CSSVariables extends React.Component {
           <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) && (
                 <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"
@@ -118,7 +118,7 @@ export class CSSVariables extends React.Component {
               )}
               <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}
               </div>
@@ -170,7 +170,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 +180,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 {
@@ -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);
 }

package/components/example/example.js

@@ -1,6 +1,17 @@
-import React, { useContext } from 'react';
+import React, { useContext, useEffect } from 'react';
 import { useLocation } from '@reach/router';
-import { Button, CodeBlock, Flex, CodeBlockCode, debounce, Label, Switch, Tooltip } from '@patternfly/react-core';
+import {
+  Button,
+  CodeBlock,
+  Flex,
+  CodeBlockCode,
+  debounce,
+  Label,
+  Switch,
+  Tooltip,
+  Stack,
+  StackItem
+} from '@patternfly/react-core';
 import * as reactCoreModule from '@patternfly/react-core';
 import * as reactCoreNextModule from '@patternfly/react-core/next';
 import * as reactCoreDeprecatedModule from '@patternfly/react-core/deprecated';
@@ -16,13 +27,13 @@ import {
   getReactParams,
   getExampleClassName,
   getExampleId,
-  liveCodeTypes
+  liveCodeTypes,
 } from '../../helpers';
 import { convertToReactComponent } from '@patternfly/ast-helpers';
 import missingThumbnail from './missing-thumbnail.jpg';
 import { RtlContext } from '../../layouts';
 
-const errorComponent = err => <pre>{err.toString()}</pre>;
+const errorComponent = (err) => <pre>{err.toString()}</pre>;
 
 class ErrorBoundary extends React.Component {
   constructor(props) {
@@ -34,7 +45,7 @@ class ErrorBoundary extends React.Component {
     errorInfo._suppressLogging = true;
     this.setState({
       error: error,
-      errorInfo: errorInfo
+      errorInfo: errorInfo,
     });
   }
 
@@ -94,15 +105,24 @@ export const Example = ({
   // md file location in node_modules, used to resolve relative import paths in examples
   relPath = '',
   // absolute url to hosted file
-  sourceLink = ''
+  sourceLink = '',
 }) => {
   if (isFullscreenPreview) {
     isFullscreen = false;
-    window.addEventListener('load', () => {
-      //append a class to the document body to indicate to screenshot/automated visual regression tools that the page has loaded
-      document.body.classList.add('page-loaded');
-    });
   }
+
+  //append a class to the document body on fullscreen examples to indicate to screenshot/automated visual regression tools that the page has loaded
+  const addPageLoadedClass = () => document.body.classList.add('page-loaded');
+  useEffect(() => {
+    if (!isFullscreenPreview) return;
+
+    document.readyState === 'complete'
+      ? addPageLoadedClass()
+      : window.addEventListener('load', addPageLoadedClass);
+
+    return () => window.removeEventListener('load', addPageLoadedClass);
+  }, []);
+
   if (!lang) {
     // Inline code
     return <code className="ws-code">{code}</code>;
@@ -124,20 +144,26 @@ export const Example = ({
     ...reactCoreModule,
     ...reactTableModule,
     ...(source === 'react-next' ? reactCoreNextModule : {}),
-    ...(source === 'react-deprecated' ? {...reactCoreDeprecatedModule, ...reactTableDeprecatedModule} : {})
+    ...(source === 'react-deprecated'
+      ? { ...reactCoreDeprecatedModule, ...reactTableDeprecatedModule }
+      : {}),
   };
 
   let livePreview = null;
   if (lang === 'html') {
     livePreview = (
       <div
-        className={css('ws-preview-html', isFullscreenPreview && 'pf-v5-u-h-100')}
+        className={css(
+          'ws-preview-html', // core uses this class name to apply styles to specific examples
+          isFullscreenPreview && 'pf-v6-u-h-100'
+        )}
         dangerouslySetInnerHTML={{ __html: editorCode }}
       />
     );
   } else {
     try {
-      const { code: transformedCode, hasTS } = convertToReactComponent(editorCode);
+      const { code: transformedCode, hasTS } =
+        convertToReactComponent(editorCode);
       if (hasTS) {
         lang = 'ts';
       } else {
@@ -147,7 +173,11 @@ export const Example = ({
       const componentNames = Object.keys(scope);
       const componentValues = Object.values(scope);
 
-      const getPreviewComponent = new Function('React', ...componentNames, transformedCode);
+      const getPreviewComponent = new Function(
+        'React',
+        ...componentNames,
+        transformedCode
+      );
       const PreviewComponent = getPreviewComponent(React, ...componentValues);
 
       livePreview = (
@@ -164,20 +194,37 @@ export const Example = ({
 
   if (isFullscreenPreview) {
     return (
-      <div id={previewId} className={css(className, 'pf-v5-u-h-100')}>
+      <div id={previewId} className={css(className, 'pf-v6-u-h-100')}>
         {livePreview}
         {(hasDarkThemeSwitcher || hasRTLSwitcher) && (
-          <Flex direction={{ default: 'column' }} gap={{ default: 'gapLg' }} className="ws-full-page-utils pf-v5-m-dir-ltr ">
+          <Flex
+            direction={{ default: 'column' }}
+            gap={{ default: 'gapLg' }}
+            className="ws-full-page-utils pf-v6-m-dir-ltr "
+          >
             {hasDarkThemeSwitcher && (
-              <Switch id="ws-example-theme-switch" label="Dark theme" defaultChecked={false} onChange={() =>
-              document.querySelector('html').classList.toggle('pf-v5-theme-dark')} />
+              <Switch
+                id="ws-example-theme-switch"
+                label="Dark theme"
+                defaultChecked={false}
+                onChange={() =>
+                  document
+                    .querySelector('html')
+                    .classList.toggle('pf-v6-theme-dark')
+                }
+              />
             )}
             {hasRTLSwitcher && (
-              <Switch id="ws-example-rtl-switch" label="RTL" defaultChecked={false} onChange={() => {
-                const html = document.querySelector('html');
-                const curDir = html.dir;
-                html.dir = (curDir !== 'rtl') ? 'rtl' : 'ltr';
-            }} />
+              <Switch
+                id="ws-example-rtl-switch"
+                label="RTL"
+                defaultChecked={false}
+                onChange={() => {
+                  const html = document.querySelector('html');
+                  const curDir = html.dir;
+                  html.dir = curDir !== 'rtl' ? 'rtl' : 'ltr';
+                }}
+              />
             )}
           </Flex>
         )}
@@ -188,82 +235,106 @@ export const Example = ({
   const codeBoxParams = getParameters(
     lang === 'html'
       ? getStaticParams(title, editorCode)
-      : getReactParams(title, editorCode, scope, lang, relativeImports, relPath, sourceLink)
+      : getReactParams(
+          title,
+          editorCode,
+          scope,
+          lang,
+          relativeImports,
+          relPath,
+          sourceLink
+        )
   );
-  const fullscreenLink = loc.pathname.replace(/\/$/, '')
-    + (loc.pathname.endsWith(source) ? '' : `/${source}`)
-    + '/'
-    + slugger(title);
+  const fullscreenLink =
+    loc.pathname.replace(/\/$/, '') +
+    (loc.pathname.endsWith(source) ? '' : `/${source}`) +
+    '/' +
+    slugger(title);
+
+  const hasMetaText = isBeta || isDemo || isDeprecated || false;
+  const tooltips = (<React.Fragment>
+    {isBeta && (
+      <Tooltip content="This beta component is currently under review and is still open for further evolution.">
+        <Button variant="plain" hasNoPadding>
+          <Label isCompact color="blue">
+            Beta
+          </Label>
+        </Button>
+      </Tooltip>
+    )}
+    {isDemo && (
+      <Tooltip content="Demos show how multiple components can be used in a single design.">
+        <Button variant="plain" hasNoPadding>
+          <Label isCompact color="purple">
+            Demo
+          </Label>
+        </Button>
+      </Tooltip>
+    )}
+    {isDeprecated && (
+      <Tooltip content="Deprecated components are available for use but are no longer being maintained or enhanced.">
+        <Button variant="plain" hasNoPadding>
+          <Label isCompact color="grey">
+            Deprecated
+          </Label>
+        </Button>
+      </Tooltip>
+    )}
+  </React.Fragment>);
+  const metaText = hasMetaText && tooltips
 
   return (
-    <div className="ws-example">
-      <div className="ws-example-header">
+    <Stack hasGutter>
+      <StackItem>
         <AutoLinkHeader
-          metaText={
-            <React.Fragment>
-              {isBeta && (
-                <Tooltip content="This beta component is currently under review and is still open for further evolution.">
-                  <Button variant="plain">
-                    <Label isCompact color="blue">Beta</Label>
-                  </Button>
-                </Tooltip>
-              )}
-              {isDemo && (
-                <Tooltip content="Demos show how multiple components can be used in a single design.">
-                  <Button variant="plain">
-                    <Label isCompact color="purple">Demo</Label>
-                  </Button>
-                </Tooltip>
-              )}
-              {isDeprecated && (
-                <Tooltip content="Deprecated components are available for use but are no longer being maintained or enhanced.">
-                  <Button variant="plain">
-                    <Label isCompact color="grey">Deprecated</Label>
-                  </Button>
-                </Tooltip>
-              )}
-            </React.Fragment>
-          }
-          size="h4"
+          metaText={metaText}
           headingLevel="h3"
-          className="ws-example-heading"
         >
           {title}
         </AutoLinkHeader>
         {children}
-      </div>
-      {isFullscreen
-        ? <div className="ws-preview">
+      </StackItem>
+      <StackItem>
+        {isFullscreen ? (
+          <div>
             <a
               className="ws-preview__thumbnail-link"
               href={fullscreenLink}
               target="_blank"
               aria-label={`Open fullscreen ${title} example`}
             >
-              <img src={thumbnail.src} width={thumbnail.width} height={thumbnail.height} alt={`${title} screenshot`} />
+              <img
+                src={thumbnail.src}
+                width={thumbnail.width}
+                height={thumbnail.height}
+                alt={`${title} screenshot`}
+              />
             </a>
           </div>
-        : <div
+        ) : (
+          <div
             id={previewId}
             className={css(
               className,
-              isFullscreen ? 'ws-preview-fullscreen' : 'ws-preview',
-              isRTL && 'pf-v5-m-dir-rtl')
-            }
+              isRTL && 'pf-v6-m-dir-rtl'
+            )}
           >
             {livePreview}
           </div>
-      }
-      <ExampleToolbar
-        lang={lang}
-        isFullscreen={isFullscreen}
-        fullscreenLink={fullscreenLink}
-        originalCode={code}
-        code={editorCode}
-        setCode={debounce(setEditorCode, 300)}
-        codeBoxParams={codeBoxParams}
-        exampleTitle={title}
-      />
-    </div>
+        )}
+      </StackItem>
+      <StackItem>
+        <ExampleToolbar
+          lang={lang}
+          isFullscreen={isFullscreen}
+          fullscreenLink={fullscreenLink}
+          originalCode={code}
+          code={editorCode}
+          setCode={debounce(setEditorCode, 300)}
+          codeBoxParams={codeBoxParams}
+          exampleTitle={title}
+        />
+      </StackItem>
+    </Stack>
   );
-}
+};

package/components/example/exampleToolbar.js

@@ -103,7 +103,7 @@ export const ExampleToolbar = ({
             copyCode();
             trackEvent('code_editor_control_click', 'click_event', 'COPY_CODE');
           }}
-          variant="control"
+          variant="plain"
           aria-label={copyAriaLabel}
           className={editorControlProps.className}
         >
@@ -124,7 +124,7 @@ export const ExampleToolbar = ({
           >
             <Button
               aria-label={codesandboxAriaLabel}
-              variant="control"
+              variant="plain"
               type="submit"
               onClick={() => {
                 trackEvent('code_editor_control_click', 'click_event', 'CODESANDBOX_LINK');
@@ -218,6 +218,7 @@ export const ExampleToolbar = ({
       onEditorDidMount={onEditorDidMount}
       isReadOnly={isFullscreen}
       className={`${isEditorOpen ? 'ws-example-code-expanded ' : ''}ws-code-editor`}
+      isHeaderPlain
     />
   );
 }