@patternfly/documentation-framework 6.0.0-alpha.2 → 6.0.0-alpha.21

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 size="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

@@ -3,52 +3,52 @@
 }
 
 .ws-example {
-  margin-top: var(--pf-v5-global--spacer--lg);
-  margin-bottom: var(--pf-v5-global--spacer--lg);
+  margin-top: var(--pf-v6-global--spacer--lg);
+  margin-bottom: var(--pf-v6-global--spacer--lg);
 }
 
 .ws-example > .ws-example-header {
-  padding: var(--pf-v5-global--spacer--md);
+  padding: var(--pf-v6-global--spacer--md);
 }
 
 .ws-example-header > .ws-example-heading:not(:last-child) {
-  margin-bottom: var(--pf-v5-global--spacer--md);
+  margin-bottom: var(--pf-v6-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;
+  --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-code-editor-control.pf-v5-c-button {
-  --pf-v5-c-button--after--BorderWidth: 0;
+.ws-code-editor-control.pf-v6-c-button {
+  --pf-v6-c-button--after--BorderWidth: 0;
 }
 
 .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);
+  padding: var(--pf-v6-global--spacer--md);
+  background-color: var(--pf-v6-global--BackgroundColor--100);
+  border-bottom: var(--pf-v6-global--BorderWidth--sm) solid var(--pf-v6-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 {
+.ws-react-c-page.ws-preview > .pf-v6-c-page {
   overflow: hidden;
 }
 
 .ws-editor {
-  font-size: var(--pf-v5-global--FontSize--md);
+  font-size: var(--pf-v6-global--FontSize--md);
 }
 
 .ws-editor .token.punctuation,
 .ws-editor .token.operator {
-  color: var(--pf-v5-global--danger-color--100);
+  color: var(--pf-v6-global--danger-color--100);
 }
 
 .ws-preview__thumbnail-link {
@@ -100,33 +100,33 @@
   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);
+.pf-v6-c-badge.ws-beta-badge {
+  --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-v6-global--BackgroundColor--100);
+  --pf-v6-c-badge--m-unread--Color: var(--pf-v6-global--primary-color--100);
+  border: var(--pf-v6-global--BorderWidth--sm) solid var(--pf-v6-global--primary-color--100);
 }
 
 .ws-prop-required {
-  color: var(--pf-v5-global--danger-color--100);
+  color: var(--pf-v6-global--danger-color--100);
 }
 
 .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-v6-global--spacer--lg);
+  z-index: var(--pf-v6-global--ZIndex--2xl);
 }
 
 .ws-full-page-utils::before {
   position: absolute;
   inset: 0;
   content: "";
-  background-color: var(--pf-v5-global--BackgroundColor--100);
+  background-color: var(--pf-v6-global--BackgroundColor--100);
   opacity: 0.8;
-  box-shadow: var(--pf-v5-global--BoxShadow--sm);
+  box-shadow: var(--pf-v6-global--BoxShadow--sm);
 }
 
-.pf-v5-theme-dark .ws-theme-switch-full-page::before {
-  background-color: var(--pf-v5-global--BackgroundColor--300);
+.pf-v6-theme-dark .ws-theme-switch-full-page::before {
+  background-color: var(--pf-v6-global--BackgroundColor--300);
 }

package/components/example/example.js

@@ -131,7 +131,7 @@ export const Example = ({
   if (lang === 'html') {
     livePreview = (
       <div
-        className={css('ws-preview-html', isFullscreenPreview && 'pf-v5-u-h-100')}
+        className={css('ws-preview-html', isFullscreenPreview && 'pf-v6-u-h-100')}
         dangerouslySetInnerHTML={{ __html: editorCode }}
       />
     );
@@ -164,13 +164,13 @@ 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')} />
+              document.querySelector('html').classList.toggle('pf-v6-theme-dark')} />
             )}
             {hasRTLSwitcher && (
               <Switch id="ws-example-rtl-switch" label="RTL" defaultChecked={false} onChange={() => {
@@ -248,7 +248,7 @@ export const Example = ({
             className={css(
               className,
               isFullscreen ? 'ws-preview-fullscreen' : 'ws-preview',
-              isRTL && 'pf-v5-m-dir-rtl')
+              isRTL && 'pf-v6-m-dir-rtl')
             }
           >
             {livePreview}

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
     />
   );
 }

package/components/footer/footer.css

@@ -1,11 +1,11 @@
-.ws-org-pfsite-l-footer.pf-v5-c-page__main-section {
-  font-family: var(--pf-v5-global--FontFamily--text);
+.ws-org-pfsite-l-footer.pf-v6-c-page__main-section {
+  font-family: var(--pf-v6-global--FontFamily--text);
   font-weight: 300;
   background-color: #1a1a1a !important;
-  --pf-v5-c-page__main-section--PaddingTop: var(--pf-v5-global--spacer--xl);
-  --pf-v5-c-page__main-section--PaddingRight: var(--pf-v5-global--spacer--2xl);
-  --pf-v5-c-page__main-section--PaddingBottom: var(--pf-v5-global--spacer--2xl);
-  --pf-v5-c-page__main-section--PaddingLeft: var(--pf-v5-global--spacer--2xl);
+  --pf-v6-c-page__main-section--PaddingTop: var(--pf-v6-global--spacer--xl);
+  --pf-v6-c-page__main-section--PaddingRight: var(--pf-v6-global--spacer--2xl);
+  --pf-v6-c-page__main-section--PaddingBottom: var(--pf-v6-global--spacer--2xl);
+  --pf-v6-c-page__main-section--PaddingLeft: var(--pf-v6-global--spacer--2xl);
   /* Hide long overflowing tocs */
   z-index: 1;
 }
@@ -34,8 +34,8 @@
   }
 }
 .ws-org-pfsite-l-footer-column .ws-org-pfsite-footer-menu-social-links a {
-  margin-right: var(--pf-v5-global--spacer--md);
-  color: var(--pf-v5-global--Color--light-100) !important;
+  margin-right: var(--pf-v6-global--spacer--md);
+  color: var(--pf-v6-global--Color--light-100) !important;
 }
 .ws-org-pfsite-l-footer-column
   .ws-org-pfsite-footer-menu-social-links
@@ -43,8 +43,8 @@
   margin-right: 0;
 }
 .ws-org-pfsite-l-footer-column .ws-org-pfsite-footer-menu-social-links {
-  margin-top: var(--pf-v5-global--spacer--md);
-  margin-bottom: var(--pf-v5-global--spacer--md);
+  margin-top: var(--pf-v6-global--spacer--md);
+  margin-bottom: var(--pf-v6-global--spacer--md);
 }
 @media (max-width: 768px) {
   .ws-org-pfsite-l-footer-column .ws-org-pfsite-footer-menu-social-links {
@@ -71,7 +71,7 @@
   padding-right: 10px;
 }
 .ws-org-pfsite-l-footer .ws-org-pfsite-footer-menu-link {
-  color: var(--pf-v5-global--Color--light-100);
+  color: var(--pf-v6-global--Color--light-100);
   font-size: 14px !important;
 }
 .ws-org-pfsite-l-footer .ws-org-pfsite-footer-menu-link:hover {
@@ -86,19 +86,19 @@
 .ws-org-pfsite-l-footer-dark {
   background: #151515 !important;
 }
-.pf-v5-c-page .pf-v5-c-page__main-section.ws-org-pfsite-l-footer-dark {
+.pf-v6-c-page .pf-v6-c-page__main-section.ws-org-pfsite-l-footer-dark {
   /* Hide long overflowing tocs */
   z-index: 1;
 }
-.pf-v5-c-page__main-section.ws-org-pfsite-l-footer-dark > * {
+.pf-v6-c-page__main-section.ws-org-pfsite-l-footer-dark > * {
   font-weight: 300;
   font-size: 12px;
   color: #d2d2d2;
 }
 .ws-org-pfsite-l-footer-dark a {
-  padding-right: var(--pf-v5-global--spacer--sm);
-  padding-left: var(--pf-v5-global--spacer--sm);
-  border-right: var(--pf-v5-global--BorderWidth--sm) solid #d2d2d2;
+  padding-right: var(--pf-v6-global--spacer--sm);
+  padding-left: var(--pf-v6-global--spacer--sm);
+  border-right: var(--pf-v6-global--BorderWidth--sm) solid #d2d2d2;
   font-weight: 300;
   color: #d2d2d2;
   text-decoration: underline;

package/components/footer/footer.js

@@ -13,15 +13,15 @@ export const Footer = () => (
           sm={12}
           md={6}
           mdOffset={1}
-          className="pf-v5-u-mb-lg pf-v5-u-mb-0-on-sm"
+          className="pf-v6-u-mb-lg pf-v6-u-mb-0-on-sm"
         >
-          <Grid className="pf-v5-u-py-xl">
+          <Grid className="pf-v6-u-py-xl">
             <GridItem
               sm={6}
               md={4}
-              className="pf-v5-u-ml-md pf-v5-u-ml-0-on-md pf-v5-u-mb-xl pf-v5-u-mb-0-on-md"
+              className="pf-v6-u-ml-md pf-v6-u-ml-0-on-md pf-v6-u-mb-xl pf-v6-u-mb-0-on-md"
             >
-              <p className="pf-v5-c-title ws-org-pfsite-footer-menu-list-title">
+              <p className="pf-v6-c-title ws-org-pfsite-footer-menu-list-title">
                 QUICKLINKS
               </p>
               <nav aria-label="Quick Links">
@@ -68,9 +68,9 @@ export const Footer = () => (
             <GridItem
               sm={6}
               md={4}
-              className="pf-v5-u-mt-lg pf-v5-u-mt-0-on-sm pf-v5-u-ml-md pf-v5-u-ml-0-on-md pf-v5-u-mb-xl pf-v5-u-mb-0-on-md"
+              className="pf-v6-u-mt-lg pf-v6-u-mt-0-on-sm pf-v6-u-ml-md pf-v6-u-ml-0-on-md pf-v6-u-mb-xl pf-v6-u-mb-0-on-md"
             >
-              <p className="pf-v5-c-title ws-org-pfsite-footer-menu-list-title">
+              <p className="pf-v6-c-title ws-org-pfsite-footer-menu-list-title">
                 CONTRIBUTE
               </p>
               <nav aria-label="Contribute">
@@ -109,7 +109,7 @@ export const Footer = () => (
             <GridItem
               sm={6}
               md={4}
-              className="pf-v5-u-mt-lg pf-v5-u-mt-0-on-md pf-v5-u-ml-md pf-v5-u-ml-0-on-md"
+              className="pf-v6-u-mt-lg pf-v6-u-mt-0-on-md pf-v6-u-ml-md pf-v6-u-ml-0-on-md"
             >
               <p className="ws-org-pfsite-footer-menu-list-title">
                 STAY IN TOUCH
@@ -162,10 +162,10 @@ export const Footer = () => (
           </Grid>
         </GridItem>
         <GridItem sm={12} md={4}>
-          <Grid className="pf-v5-u-pt-xl ws-org-pfsite-l-footer-column">
-            <GridItem className="pf-v5-u-px-xl">
+          <Grid className="pf-v6-u-pt-xl ws-org-pfsite-l-footer-column">
+            <GridItem className="pf-v6-u-px-xl">
               <Link
-                className="pf-v5-c-page__header-brand-link pf-v5-c-brand ws-org-pfsite-footer-menu-about-logo pf-v5-u-pb-md"
+                className="pf-v6-c-page__header-brand-link pf-v6-c-brand ws-org-pfsite-footer-menu-about-logo pf-v6-u-pb-md"
                 to="/"
               >
                 <Brand
@@ -185,7 +185,7 @@ export const Footer = () => (
                 product experiences—the open source way.
               </Text>
             </GridItem>
-            <GridItem className="ws-org-pfsite-footer-menu-social-links pf-v5-u-px-xl">
+            <GridItem className="ws-org-pfsite-footer-menu-social-links pf-v6-u-px-xl">
               <Link
                 to="//github.com/patternfly"
                 target="top"
@@ -209,7 +209,7 @@ export const Footer = () => (
       key="footer-2"
       className="ws-org-pfsite-l-footer-dark pf-m-no-fill"
     >
-      <Grid className="pf-v5-u-py-xl-on-sm pf-v5-u-py-0-on-md pf-v5-u-align-items-center">
+      <Grid className="pf-v6-u-py-xl-on-sm pf-v6-u-py-0-on-md pf-v6-u-align-items-center">
         <GridItem md={2} mdOffset={1}>
           <Link
             to="//www.redhat.com"
@@ -228,7 +228,7 @@ export const Footer = () => (
             Copyright &copy; 2014-{new Date().getFullYear()} Red Hat, Inc.
           </span>
         </GridItem>
-        <GridItem md={4} lg={5} className="pf-v5-u-ml-xl-on-xl">
+        <GridItem md={4} lg={5} className="pf-v6-u-ml-xl-on-xl">
           <Link
             to="//www.redhat.com/en/about/privacy-policy"
             target="top"

package/components/gdprBanner/gdprBanner.css

@@ -9,6 +9,6 @@
 #ws-gdpr-banner {
   max-width: 95vw;
   flex-wrap: nowrap;
-  background: var(--pf-v5-global--BackgroundColor--100);
-  border: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--Color--100);
+  background: var(--pf-v6-global--BackgroundColor--100);
+  border: var(--pf-v6-global--BorderWidth--sm) solid var(--pf-v6-global--Color--100);
 }

package/components/gdprBanner/gdprBanner.js

@@ -6,16 +6,16 @@ import './gdprBanner.css';
 export const GdprBanner = () => {
   const initialBannerOpen = typeof window !== 'undefined' && window.localStorage && !localStorage.getItem('gdpr-banner-closed');
   const [ isBannerOpen, setBannerOpen ] = React.useState(initialBannerOpen);
-  
+
   const closeBanner = () => {
     localStorage.setItem('gdpr-banner-closed', 'true');
     setBannerOpen(false);
   }
 
   return !isBannerOpen ? null : (
-    <section aria-label="Cookies on PatternFly" className="ws-gdpr-banner-container pf-v5-l-flex">
-      <div id="ws-gdpr-banner" className="pf-v5-l-flex pf-v5-u-py-md pf-m-align-items-center">
-        <p id="ws-gdpr-banner-text" className="pf-v5-u-ml-xl">
+    <section aria-label="Cookies on PatternFly" className="ws-gdpr-banner-container pf-v6-l-flex">
+      <div id="ws-gdpr-banner" className="pf-v6-l-flex pf-v6-u-py-md pf-m-align-items-center">
+        <p id="ws-gdpr-banner-text" className="pf-v6-u-ml-xl">
           We use cookies on our websites to deliver our online services.
           Details about how we use cookies and how you may disable them are set out in our <a href="//www.redhat.com/en/about/privacy-policy">Privacy Statement</a>.
           By using this website you agree to our use of cookies.

package/components/inlineAlert/inlineAlert.js

@@ -9,7 +9,7 @@ export const InlineAlert = ({
   <Alert
     variant={variant}
     title={title}
-    className="pf-v5-u-my-md"
+    className="pf-v6-u-my-md"
     style={{ marginBottom: '1rem' }}
     isInline
     component="h2"

package/components/propsTable/propsTable.js

@@ -18,9 +18,9 @@ import accessibleStyles from "@patternfly/react-styles/css/utilities/Accessibili
 export const PropsTable = ({ title, description, rows, allPropComponents }) => (
   <React.Fragment>
     <AutoLinkHeader size="h3">{title}</AutoLinkHeader>
-    <Table className="pf-v5-u-mt-md pf-v5-u-mb-lg" variant="compact" aria-label={title} gridBreakPoint="grid-lg">
+    <Table className="pf-v6-u-mt-md pf-v6-u-mb-lg" variant="compact" aria-label={title} gridBreakPoint="grid-lg">
       <Caption>
-        {description && <div className="pf-v5-u-mb-md">{description}</div>}
+        {description && <div className="pf-v6-u-mb-md">{description}</div>}
         <div>
           <span className="ws-prop-required">*</span>required
         </div>
@@ -64,7 +64,7 @@ export const PropsTable = ({ title, description, rows, allPropComponents }) => (
                   {row.beta && (
                     <Badge
                       key={`${row.name}-${idx}`}
-                      className="ws-beta-badge pf-v5-u-ml-sm"
+                      className="ws-beta-badge pf-v6-u-ml-sm"
                     >
                       Beta
                     </Badge>

package/components/sectionGallery/sectionDataListLayout.js

@@ -7,7 +7,7 @@ export const SectionDataListLayout = ({ galleryItems, layoutView, hasListText, h
   if (layoutView !== 'list') {
     return null;
   }
-  
+
   return (
     <DataList onSelectDataListItem={() => {}}>
       {galleryItems.map(({ idx, slug, illustration, itemName, title, isBeta, isDeprecated, isDemo, id, galleryItemsData }) => (
@@ -23,7 +23,7 @@ export const SectionDataListLayout = ({ galleryItems, layoutView, hasListText, h
                   </DataListCell>
                 ),
                 <DataListCell width={5} key="text-description">
-                  <Split className={ hasListText ? "pf-v5-u-mb-md" : null }>
+                  <Split className={ hasListText ? "pf-v6-u-mb-md" : null }>
                     <SplitItem isFilled>
                       <TextContent>
                         <Text component={TextVariants.h2}>
@@ -32,7 +32,7 @@ export const SectionDataListLayout = ({ galleryItems, layoutView, hasListText, h
                           </span>
                         </Text>
                       </TextContent>
-                    </SplitItem>  
+                    </SplitItem>
                     <SplitItem>
                       {isBeta && (<Label color="blue" isCompact>Beta</Label>)}
                       {!isBeta && isDeprecated && (<Label color="grey" isCompact>Deprecated</Label>)}

package/components/sectionGallery/sectionGallery.css

@@ -8,7 +8,7 @@
 
 .ws-section-gallery {
   /* top placement */
-  margin-top: calc(var(--pf-v5-c-page__main-section--PaddingTop) * -1);
+  margin-top: calc(var(--pf-v6-c-page__main-section--PaddingTop) * -1);
 }
 
 * + .ws-section-gallery {
@@ -17,22 +17,22 @@
 }
 
 /* Toolbar styles */
-.ws-section-gallery .pf-v5-c-toolbar {
-  margin-left: calc(var(--pf-v5-c-page__main-section--PaddingLeft) * -1);
-  border-bottom: var(--pf-v5-c-page__sidebar--m-light--BorderRightWidth) solid var(--pf-v5-c-page__sidebar--m-light--BorderRightColor);
-  margin-bottom: var(--pf-v5-global--spacer--md);
-  width: calc(100% + var(--pf-v5-c-page__main-section--PaddingLeft) + var(--pf-v5-c-page__main-section--PaddingRight));
+.ws-section-gallery .pf-v6-c-toolbar {
+  margin-left: calc(var(--pf-v6-c-page__main-section--PaddingLeft) * -1);
+  border-bottom: var(--pf-v6-c-page__sidebar--m-light--BorderRightWidth) solid var(--pf-v6-c-page__sidebar--m-light--BorderRightColor);
+  margin-bottom: var(--pf-v6-global--spacer--md);
+  width: calc(100% + var(--pf-v6-c-page__main-section--PaddingLeft) + var(--pf-v6-c-page__main-section--PaddingRight));
   /* avoid hoverable data list items overlapping toolbar */
-  z-index: calc(var(--pf-v5-global--ZIndex--xs) + 2);
+  z-index: calc(var(--pf-v6-global--ZIndex--xs) + 2);
 }
 
 /* Match toolbar left-padding to gallery left-padding */
-.ws-section-gallery .pf-v5-c-toolbar .pf-v5-c-toolbar__content {
-  --pf-v5-c-toolbar__content--PaddingLeft: var(--pf-v5-c-page__main-section--PaddingLeft);
+.ws-section-gallery .pf-v6-c-toolbar .pf-v6-c-toolbar__content {
+  --pf-v6-c-toolbar__content--PaddingLeft: var(--pf-v6-c-page__main-section--PaddingLeft);
 }
 
 /* Avoid toolbar wrap on smaller screens */
-.ws-section-gallery .pf-v5-c-toolbar__content-section {
+.ws-section-gallery .pf-v6-c-toolbar__content-section {
   flex-wrap: nowrap;
 }
 
@@ -43,11 +43,11 @@
 }
 
 /* Ensure same height for all cards in a gallery row */
-.ws-section-gallery .pf-v5-c-card {
+.ws-section-gallery .pf-v6-c-card {
   height: 100%;
 }
 
 /* Limit width for data list view only */
-.ws-section-gallery .pf-v5-c-data-list {
+.ws-section-gallery .pf-v6-c-data-list {
   max-width: 956px;
 }

package/components/sectionGallery/sectionGalleryToolbar.js

@@ -30,7 +30,7 @@ export const SectionGalleryToolbar = ({
           </ToggleGroup>
         </ToolbarItem>
       </ToolbarGroup>
-      <ToolbarItem variant="pagination" spacer={{default: 'spacerMd', md: 'spacerNone'}} style={{'--pf-v5-c-toolbar__item--MinWidth': "max-content"}}>
+      <ToolbarItem variant="pagination" spacer={{default: 'spacerMd', md: 'spacerNone'}} style={{'--pf-v6-c-toolbar__item--MinWidth': "max-content"}}>
         <Text component={TextVariants.small}>{ galleryItems.length }{ countText }</Text>
       </ToolbarItem>
     </ToolbarContent>

package/components/sideNav/sideNav.css

@@ -1,21 +1,17 @@
-.ws-page-sidebar .pf-v5-c-nav {
-  --pf-v5-c-nav__link--before--BorderBottomWidth: 0;
-  --pf-v5-c-nav--m-light__link--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-200);
-  --pf-v5-c-nav--m-light__link--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-200);
-  --pf-v5-c-nav--m-light__link--m-current--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-200);
-  --pf-v5-c-nav--m-light__link--active--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-200);
-  --pf-v5-c-nav__link--m-current--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
+.ws-page-sidebar .pf-v6-c-nav {
+  --pf-v6-c-nav__link--before--BorderBottomWidth: 0;
+  --pf-v6-c-nav--m-light__link--hover--BackgroundColor: var(--pf-v6-global--BackgroundColor--light-200);
+  --pf-v6-c-nav--m-light__link--focus--BackgroundColor: var(--pf-v6-global--BackgroundColor--light-200);
+  --pf-v6-c-nav--m-light__link--m-current--BackgroundColor: var(--pf-v6-global--BackgroundColor--light-200);
+  --pf-v6-c-nav--m-light__link--active--BackgroundColor: var(--pf-v6-global--BackgroundColor--light-200);
+  --pf-v6-c-nav__link--m-current--BackgroundColor: var(--pf-t--global--background--color--action--plain--alt--clicked);
 }
 
-.ws-side-nav-list .pf-v5-c-nav__item.pf-m-expandable::before {
+.ws-side-nav-list .pf-v6-c-nav__item.pf-m-expandable::before {
   border-bottom: 0;
 }
 
-.pf-v5-c-nav__subsection-title {
-  color: var(--ws-toc-link--Color, var(--pf-v5-global--Color--300));
-  font-size: var(--pf-v5-global--FontSize--sm);
-}
-
-#ws-sticky-nav-tabs {
-  z-index: var(--pf-v5-global--ZIndex--2xl);
+.pf-v6-c-nav__subsection-title {
+  color: var(--ws-toc-link--Color, var(--pf-v6-global--Color--300));
+  font-size: var(--pf-v6-global--FontSize--sm);
 }

package/components/sideNav/sideNav.js

@@ -19,14 +19,14 @@ const NavItem = ({ text, href, isDeprecated, isBeta, isDemo }) => {
   return (
     <PageContextConsumer key={href + text}>
       {({onSidebarToggle, isSidebarOpen }) => (
-          <li key={href + text} className="pf-v5-c-nav__item" onClick={() => isMobileView && onSidebarToggle && onSidebarToggle()}>
+          <li key={href + text} className="pf-v6-c-nav__item" onClick={() => isMobileView && onSidebarToggle && onSidebarToggle()}>
             <Link
               to={href}
               getProps={({ isCurrent, href, location }) => {
                 const { pathname } = location;
                 return {
                   className: css(
-                    'pf-v5-c-nav__link',
+                    'pf-v6-c-nav__link',
                     (isCurrent || pathname.startsWith(href + '/')) && 'pf-m-current'
                   )
                 }}
@@ -67,7 +67,6 @@ const ExpandableNav = ({groupedRoutes, location, section, subsection = null}) =>
       key={capitalize(currentSection.replace(/-/g, ' '))}
       isActive={isActive}
       isExpanded={isActive}
-      className="ws-side-nav-group"
       onClick={(event) => {
         // Don't bubble click event up, avoids subsection triggering duplicate analtics
         event.stopPropagation();
@@ -96,7 +95,7 @@ const ExpandableNav = ({groupedRoutes, location, section, subsection = null}) =>
                   source.source === "react-deprecated" || source.source === "html-deprecated")
                 && !navObj.sources.some(source => source.source === "react" || source.source === "html")
               ),
-              isBeta: navObj.sources.some(source => source.beta),
+              isBeta: navObj.sources.some(source => source.beta && source.source !== 'react-next' && source.source !== 'react-templates'),
               isDemo: navObj.sources.some(source => (
                   source.source === "react-demos" || source.source === "html-demos")
                 && !navObj.sources.some(source => source.source === "react" || source.source === "html")