@patternfly/documentation-framework 6.0.0-alpha.4 → 6.0.0-alpha.41

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">
@@ -29,7 +29,7 @@ export const Footer = () => (
                   <li className="ws-org-pfsite-footer-menu-list-item">
                     <Link
                       className="ws-org-pfsite-footer-menu-link"
-                      to={"/get-started/about"}
+                      to={"/get-started/about-patternfly"}
                       aria-label="Get started with PatternFly 4"
                     >
                       Get started
@@ -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
@@ -139,9 +139,9 @@ export const Footer = () => (
                   <li className="ws-org-pfsite-footer-menu-list-item">
                     <Link
                       className="ws-org-pfsite-footer-menu-link"
-                      to="//redhat.com/mailman/listinfo/patternfly"
+                      to="https://www.redhat.com/dynamic-form/instance/934b1674-bc8a-4a13-8c9d-d19abcceb263"
                       target="top"
-                      aria-label="Join the PatternFly 4 mailing list"
+                      aria-label="Join the PatternFly mailing list"
                     >
                       Mailing list
                     </Link>
@@ -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-t--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.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")

package/components/tableOfContents/tableOfContents.css

@@ -1,45 +1,44 @@
 .ws-toc {
   align-self: flex-start;
   position: sticky;
-  width: calc(100% + var(--pf-v5-c-page__main-section--PaddingLeft) + var(--pf-v5-c-page__main-section--PaddingRight));
-  background-color: var(--pf-v5-global--BackgroundColor--200);
+  width: calc(100% + var(--pf-v6-c-page__main-section--PaddingLeft) + var(--pf-v6-c-page__main-section--PaddingRight));
+  background-color: var(--pf-t--global--background--color--primary--default);
   z-index: 501;
-  margin-block-start: calc(var(--pf-v5-c-page__main-section--PaddingTop) * -1);
-  margin-block-end: var(--pf-v5-global--spacer--md);
-  margin-inline-start: calc(var(--pf-v5-c-page__main-section--PaddingLeft) * -1);
-  margin-inline-end: calc(var(--pf-v5-c-page__main-section--PaddingRight) * -2);
-  padding-block-start: var(--pf-v5-global--spacer--md);
-  padding-block-end: var(--pf-v5-global--spacer--md);
-  padding-inline-start: var(--pf-v5-global--spacer--md);
+  margin-block-start: calc(var(--pf-v6-c-page__main-section--PaddingTop) * -1);
+  margin-block-end: var(--pf-t--global--spacer--md);
+  margin-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingLeft) * -1);
+  margin-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingRight) * -2);
+  padding-block-start: var(--pf-t--global--spacer--md);
+  padding-block-end: var(--pf-t--global--spacer--md);
+  padding-inline-start: var(--pf-t--global--spacer--md);
   padding-inline-end: 0;
-  box-shadow: var(--pf-v5-global--BoxShadow--lg-bottom);
+/*   box-shadow: var(--pf-v6-global--BoxShadow--lg-bottom); */
 }
 
 .ws-toc.pf-m-expanded {
-  box-shadow: var(--pf-v5-global--BoxShadow--sm-bottom)
+/*   box-shadow: var(--pf-v6-global--BoxShadow--sm-bottom) */
 }
 
 /* Mobile jumplinks */
 @media (max-width: 1450px) {
-  .ws-toc.pf-m-expanded .pf-v5-c-jump-links__main {
+  .ws-toc.pf-m-expanded .pf-v6-c-jump-links__main {
     max-height: 65vh;
-    overflow: auto;
   }
-  
-  .ws-toc .pf-v5-c-jump-links__header {
+
+  .ws-toc .pf-v6-c-jump-links__header {
     position: sticky;
     top: 0;
-    background-color: var(--pf-v5-global--BackgroundColor--200);
+    background-color: var(--pf-t--global--background--color--primary--default);
     z-index: 2;
   }
 }
 
-.ws-toc .pf-v5-c-jump-links__main {
+.ws-toc .pf-v6-c-jump-links__main {
   scrollbar-width: none;
 }
 
 /* Hide TOC scrollbar Chrome, Safari & Opera */
-.ws-toc .pf-v5-c-jump-links__main::-webkit-scrollbar {
+.ws-toc .pf-v6-c-jump-links__main::-webkit-scrollbar {
   display: none;
 }
 
@@ -52,7 +51,7 @@
     -ms-overflow-style: none;
     scrollbar-width: none;
     order: 1;
-    padding: 0 var(--pf-v5-global--spacer--lg) var(--pf-v5-global--spacer--lg) var(--pf-v5-global--spacer--2xl);
+    padding: 0 var(--pf-t--global--spacer--lg) var(--pf-t--global--spacer--lg) var(--pf-t--global--spacer--2xl);
     flex-grow: 1;
     background: none;
     margin: 0;
@@ -65,18 +64,18 @@
 }
 
 /* .ws-toc-link { */
-.ws-toc-item .pf-v5-c-jump-links__link {
+.ws-toc-item .pf-v6-c-jump-links__link {
   position: relative;
   display: block;
-  color: var(--ws-toc-link--Color, var(--pf-v5-global--Color--300));
-  font-size: var(--pf-v5-global--FontSize--sm);
+/*   color: var(--ws-toc-link--Color, var(--pf-v6-global--Color--300)); */
+/*   font-size: var(--pf-v6-global--FontSize--sm); */
   margin: -4px 0;
 }
 
-.ws-toc-sublist > .ws-toc-item:first-child .pf-v5-c-jump-links__link {
+.ws-toc-sublist > .ws-toc-item:first-child .pf-v6-c-jump-links__link {
   margin-top: 0;
 }
 
-.ws-toc-item.pf-m-current .pf-v5-c-jump-links__link::before {
+.ws-toc-item.pf-m-current .pf-v6-c-jump-links__link::before {
   z-index: 1;
 }

package/layouts/sideNavLayout/sideNavLayout.css

@@ -1,5 +1,5 @@
 /* Page layout */
-/* tells .pf-v5-c-page to consume the available space left over from the banners/footers */
+/* tells .pf-v6-c-page to consume the available space left over from the banners/footers */
 #ws-router {
   display: flex;
   flex-direction: column;
@@ -9,7 +9,7 @@
 }
 
 .ws-switcher-divider {
-  padding: 0 var(--pf-v5-global--spacer--md);
+  padding: 0 var(--pf-t--global--spacer--md);
 }
 
 @media (min-width: 1200px) {
@@ -18,8 +18,8 @@
   }
 }
 
-.ws-page-sidebar > .pf-v5-c-page__sidebar-body {
-  padding-top: var(--pf-v5-global--spacer--md);
+.ws-page-sidebar > .pf-v6-c-page__sidebar-body {
+  padding-top: var(--pf-t--global--spacer--md);
 }
 
 /* Search */
@@ -27,24 +27,24 @@
   /* Fix search results overflowing page */
   min-width: 480px !important;
 }
-.ws-global-search.pf-v5-c-input-group {
+.ws-global-search.pf-v6-c-input-group {
   /* remove white background on dark Masthead */
-  --pf-v5-c-input-group--BackgroundColor: none;
+  --pf-v6-c-input-group--BackgroundColor: none;
 }
 
 /* For tiny (200px) viewports */
-.ws-masthead .pf-v5-c-toolbar__item  {
+.ws-masthead .pf-v6-c-toolbar__item  {
   min-width: 0;
 }
 
-.ws-masthead .pf-v5-c-switch {
+.ws-masthead .pf-v6-c-switch {
   align-items: center;
-  --pf-v5-c-switch__input--not-checked__label--Color: var(--pf-v5-global--Color--100);
-  --pf-v5-c-switch__input--checked__label--Color: var(--pf-v5-global--Color--100);
+/*   --pf-v6-c-switch__input--not-checked__label--Color: var(--pf-v6-global--Color--100); */
+/*   --pf-v6-c-switch__input--checked__label--Color: var(--pf-v6-global--Color--100); */
 }
 
-.ws-masthead .pf-v5-c-toggle-group {
-  --pf-v5-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-v5-global--palette--blue-400);
-  --pf-v5-c-toggle-group__button--focus--BackgroundColor: transparent;
-  --pf-v5-c-toggle-group__button--hover--BackgroundColor: transparent;
+.ws-masthead .pf-v6-c-toggle-group {
+/*   --pf-v6-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-v6-global--palette--blue-400); */
+  --pf-v6-c-toggle-group__button--focus--BackgroundColor: transparent;
+  --pf-v6-c-toggle-group__button--hover--BackgroundColor: transparent;
 }