@patternfly/documentation-framework 6.0.0-alpha.8 → 6.0.0-alpha.81

package/components/sectionGallery/sectionGallery.css

@@ -1,39 +1,6 @@
-.ws-landing-page > * {
-  max-width: 832px;
-}
-
-.ws-landing-page > .ws-section-gallery-full-width {
-  max-width: initial;
-}
-
-.ws-section-gallery {
-  /* top placement */
-  margin-top: calc(var(--pf-v5-c-page__main-section--PaddingTop) * -1);
-}
-
-* + .ws-section-gallery {
-  /* top placement */
-  margin-top: unset;
-}
-
 /* 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));
-  /* avoid hoverable data list items overlapping toolbar */
-  z-index: calc(var(--pf-v5-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);
-}
-
-/* Avoid toolbar wrap on smaller screens */
-.ws-section-gallery .pf-v5-c-toolbar__content-section {
-  flex-wrap: nowrap;
+.ws-section-gallery .pf-v6-c-toolbar {
+  margin-block-end: var(--pf-t--global--spacer--md);
 }
 
 /* Avoid link styling on gallery/data list item names */
@@ -42,12 +9,12 @@
   color: inherit;
 }
 
-/* Ensure same height for all cards in a gallery row */
-.ws-section-gallery .pf-v5-c-card {
+/* Ensure cards within a row stretch vertically to fill row height */
+.ws-section-gallery .pf-v6-c-card {
   height: 100%;
 }
 
 /* Limit width for data list view only */
-.ws-section-gallery .pf-v5-c-data-list {
-  max-width: 956px;
+.ws-section-gallery .pf-v6-c-data-list {
+  max-width: var(--pf-t--global--breakpoint--lg);
 }

package/components/sectionGallery/sectionGalleryLayout.js

@@ -1,41 +1,91 @@
-import React from "react";
-import { Gallery, GalleryItem, Card, CardTitle, CardBody, CardFooter, Label } from "@patternfly/react-core";
-import { Link } from '../link/link';
-import { TextSummary } from "./TextSummary";
+import React from 'react';
+import {
+  Gallery,
+  GalleryItem,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardBody,
+  CardFooter,
+  Label,
+} from '@patternfly/react-core';
+import { navigate } from '@reach/router';
+import { TextSummary } from './TextSummary';
 
-export const SectionGalleryLayout = ({ galleryItems, layoutView, hasGridText, hasGridImages }) => {
+export const SectionGalleryLayout = ({
+  galleryItems,
+  layoutView,
+  hasGridText,
+  hasGridImages,
+}) => {
   if (layoutView !== 'grid') {
     return null;
   }
 
   return (
     <Gallery hasGutter>
-      {galleryItems.map(({idx, slug, id, itemName, illustration, isBeta, isDeprecated, isDemo, title, galleryItemsData}) => (
-        <GalleryItem span={4} key={idx}>
-          <Link to={slug} className="ws-section-gallery-item">
-            <Card
-              id={id}
-              key={idx}
-              isSelectableRaised
-            >
-              <CardTitle>{title}</CardTitle>
+      {galleryItems.map(
+        ({
+          idx,
+          slug,
+          id,
+          itemName,
+          illustration,
+          isBeta,
+          isDeprecated,
+          isDemo,
+          title,
+          galleryItemsData,
+        }) => (
+          <GalleryItem span={4} key={idx}>
+            <Card id={id} key={idx} isClickable>
+              <CardHeader
+                selectableActions={{
+                  onClickAction: (e) => {
+                    e.preventDefault();
+                    document.getElementById('ws-page-main').scrollIntoView();
+                    navigate(slug);
+                  },
+                  selectableActionId: `${id}-input`,
+                  selectableActionAriaLabelledby: id,
+                  name: `clickable-card-${idx}`,
+                }}
+              >
+                <CardTitle>{title}</CardTitle>
+              </CardHeader>
               {(hasGridImages || hasGridText) && (
                 <CardBody>
-                  { hasGridImages && illustration && <img src={illustration} alt={`${itemName} illustration`} /> }
-                  { hasGridText && <TextSummary id={id} itemsData={galleryItemsData} /> }
+                  {hasGridImages && illustration && (
+                    <img src={illustration} alt={`${itemName} illustration`} />
+                  )}
+                  {hasGridText && (
+                    <TextSummary id={id} itemsData={galleryItemsData} />
+                  )}
                 </CardBody>
               )}
               {(isBeta || isDeprecated || isDemo) && (
                 <CardFooter>
-                  {isBeta && (<Label color="blue" isCompact>Beta</Label>)}
-                  {!isBeta && isDeprecated && (<Label color="grey" isCompact>Deprecated</Label>)}
-                  {!isBeta && !isDeprecated && isDemo && (<Label color="purple" isCompact>Demo</Label>)}
+                  {isBeta && (
+                    <Label color="blue" isCompact>
+                      Beta
+                    </Label>
+                  )}
+                  {!isBeta && isDeprecated && (
+                    <Label color="grey" isCompact>
+                      Deprecated
+                    </Label>
+                  )}
+                  {!isBeta && !isDeprecated && isDemo && (
+                    <Label color="purple" isCompact>
+                      Demo
+                    </Label>
+                  )}
                 </CardFooter>
               )}
             </Card>
-          </Link>
-        </GalleryItem>
-      ))}
+          </GalleryItem>
+        )
+      )}
     </Gallery>
-  )
+  );
 };

package/components/sectionGallery/sectionGalleryToolbar.js

@@ -1,7 +1,18 @@
-import React from "react";
-import { Button, SearchInput, Toolbar, ToolbarContent, ToolbarGroup, ToolbarItem, Text, TextVariants, ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
+import React from 'react';
+import {
+  Button,
+  SearchInput,
+  Toolbar,
+  ToolbarContent,
+  ToolbarGroup,
+  ToolbarItem,
+  Content,
+  ContentVariants,
+  ToggleGroup,
+  ToggleGroupItem,
+} from '@patternfly/react-core';
 import ListIcon from '@patternfly/react-icons/dist/esm/icons/list-icon';
-import ThIcon from'@patternfly/react-icons/dist/esm/icons/th-icon';
+import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon';
 
 export const SectionGalleryToolbar = ({
   galleryItems,
@@ -9,29 +20,53 @@ export const SectionGalleryToolbar = ({
   setSearchTerm,
   layoutView,
   setLayoutView,
-  placeholderText ="Search by name",
-  countText=" items"
+  placeholderText = 'Search by name',
+  countText = ' items',
 }) => (
   <Toolbar isSticky>
     <ToolbarContent>
-      <ToolbarItem variant="search-filter" widths={{default: '100%', md: '320px'}}>
-        <SearchInput onClear={false} value={searchTerm} placeholder={placeholderText} onChange={(_evt, val) => setSearchTerm(val)} />
+      <ToolbarItem>
+        <SearchInput
+          onClear={false}
+          value={searchTerm}
+          placeholder={placeholderText}
+          onChange={(_evt, val) => setSearchTerm(val)}
+        />
       </ToolbarItem>
       {searchTerm && (
         <ToolbarItem>
-          <Button variant="link" onClick={() => setSearchTerm('')}>Reset</Button>
+          <Button variant="link" onClick={() => setSearchTerm('')}>
+            Reset
+          </Button>
         </ToolbarItem>
       )}
       <ToolbarGroup variant="icon-button-group">
         <ToolbarItem>
           <ToggleGroup>
-            <ToggleGroupItem icon={<ThIcon />} aria-label="grid icon button" isSelected={layoutView === 'grid'} onChange={() => setLayoutView('grid')}></ToggleGroupItem>
-            <ToggleGroupItem icon={<ListIcon />} aria-label="list icon button" isSelected={layoutView === 'list'} onChange={() => setLayoutView('list')}></ToggleGroupItem>
+            <ToggleGroupItem
+              icon={<ThIcon />}
+              aria-label="grid icon button"
+              isSelected={layoutView === 'grid'}
+              onChange={() => setLayoutView('grid')}
+            ></ToggleGroupItem>
+            <ToggleGroupItem
+              icon={<ListIcon />}
+              aria-label="list icon button"
+              isSelected={layoutView === 'list'}
+              onChange={() => setLayoutView('list')}
+            ></ToggleGroupItem>
           </ToggleGroup>
         </ToolbarItem>
       </ToolbarGroup>
-      <ToolbarItem variant="pagination" spacer={{default: 'spacerMd', md: 'spacerNone'}} style={{'--pf-v5-c-toolbar__item--MinWidth': "max-content"}}>
-        <Text component={TextVariants.small}>{ galleryItems.length }{ countText }</Text>
+      <ToolbarItem
+        variant="pagination"
+        style={{ '--pf-v6-c-toolbar__item--MinWidth': 'max-content' }}
+        className="pf-m-align-self-center"
+      >
+        <Content component={ContentVariants.small}>
+          {galleryItems.length}
+          {countText}
+        </Content>
       </ToolbarItem>
     </ToolbarContent>
   </Toolbar>

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,48 @@
 .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);
-  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);
+  width: calc(100% + var(--pf-v6-c-page__main-section--PaddingInlineStart) + var(--pf-v6-c-page__main-section--PaddingInlineEnd));
+  background-color: var(--pf-t--global--background--color--secondary--default);
+  z-index: 201;
+  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--PaddingInlineStart) * -1);
+  margin-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) * -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-t--global--box-shadow--lg--bottom);
 }
 
 .ws-toc.pf-m-expanded {
-  box-shadow: var(--pf-v5-global--BoxShadow--sm-bottom)
+  box-shadow: var(--pf-t--global--box-shadow--sm--bottom)
+}
+
+.ws-toc .pf-v6-c-jump-links__toggle {
+  background-color: var(--pf-t--global--background--color--secondary--default);
 }
 
 /* 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;
+    overflow-y: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);
     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 +55,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;
@@ -64,19 +67,7 @@
   }
 }
 
-/* .ws-toc-link { */
-.ws-toc-item .pf-v5-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);
-  margin: -4px 0;
-}
-
-.ws-toc-sublist > .ws-toc-item:first-child .pf-v5-c-jump-links__link {
-  margin-top: 0;
-}
-
-.ws-toc-item.pf-m-current .pf-v5-c-jump-links__link::before {
-  z-index: 1;
+.ws-toc-item .pf-m-link {
+  text-wrap: wrap;
+  text-align: left;
 }

package/components/tableOfContents/tableOfContents.js

@@ -1,5 +1,9 @@
 import React from 'react';
-import { JumpLinks, JumpLinksItem, JumpLinksList } from '@patternfly/react-core';
+import {
+  JumpLinks,
+  JumpLinksItem,
+  JumpLinksList,
+} from '@patternfly/react-core';
 import { trackEvent } from '../../helpers';
 
 export const TableOfContents = ({ items }) => {
@@ -9,15 +13,17 @@ export const TableOfContents = ({ items }) => {
   const [stickyNavHeight, setStickyNavHeight] = React.useState(0);
 
   React.useEffect(() => {
-    if (document.getElementById("ws-sticky-nav-tabs")) {
-      setStickyNavHeight(document.getElementById("ws-sticky-nav-tabs").offsetHeight);
+    if (document.getElementById('ws-sticky-nav-tabs')) {
+      setStickyNavHeight(
+        document.getElementById('ws-sticky-nav-tabs').offsetHeight
+      );
     }
-  }, [])
+  }, []);
 
   const updateWidth = () => {
     const { innerWidth } = window;
     innerWidth !== width && setWidth(innerWidth);
-  }
+  };
   let jumpLinksItems = [];
   let wasSublistRendered = false;
 
@@ -27,14 +33,20 @@ export const TableOfContents = ({ items }) => {
       <>
         {item.text}
         <JumpLinksList>
-          {nextItemArr.map(curItem => (
+          {nextItemArr.map((curItem) => (
             <JumpLinksItem
               key={curItem.id}
               href={`#${curItem.id}`}
               className="ws-toc-item"
               onKeyDown={updateWidth}
               onMouseDown={updateWidth}
-              onClick={() => trackEvent('jump_link_click', 'click_event', curItem.id.toUpperCase())}
+              onClick={() =>
+                trackEvent(
+                  'jump_link_click',
+                  'click_event',
+                  curItem.id.toUpperCase()
+                )
+              }
             >
               {curItem.text}
             </JumpLinksItem>
@@ -42,7 +54,7 @@ export const TableOfContents = ({ items }) => {
         </JumpLinksList>
       </>
     );
-  }
+  };
 
   const renderJumpLinksItems = () => {
     items.forEach((item, index) => {
@@ -53,18 +65,28 @@ export const TableOfContents = ({ items }) => {
         return;
       }
       if (!Array.isArray(nextItem) && Array.isArray(item)) {
-        {item.map(curItem => jumpLinksItems.push(
-          <JumpLinksItem
-            key={curItem.id}
-            href={`#${curItem.id}`}
-            className="ws-toc-item"
-            onKeyDown={updateWidth}
-            onMouseDown={updateWidth}
-            onClick={() => trackEvent('jump_link_click', 'click_event', curItem.id.toUpperCase())}
-          >
-            {curItem.text}
-          </JumpLinksItem>
-        ))}
+        {
+          item.map((curItem) =>
+            jumpLinksItems.push(
+              <JumpLinksItem
+                key={curItem.id}
+                href={`#${curItem.id}`}
+                className="ws-toc-item"
+                onKeyDown={updateWidth}
+                onMouseDown={updateWidth}
+                onClick={() =>
+                  trackEvent(
+                    'jump_link_click',
+                    'click_event',
+                    curItem.id.toUpperCase()
+                  )
+                }
+              >
+                {curItem.text}
+              </JumpLinksItem>
+            )
+          );
+        }
       } else {
         jumpLinksItems.push(
           <JumpLinksItem
@@ -73,27 +95,35 @@ export const TableOfContents = ({ items }) => {
             className="ws-toc-item"
             onKeyDown={updateWidth}
             onMouseDown={updateWidth}
-            onClick={() => trackEvent('jump_link_click', 'click_event', item.id.toUpperCase())}
+            onClick={() =>
+              trackEvent(
+                'jump_link_click',
+                'click_event',
+                item.id.toUpperCase()
+              )
+            }
           >
-            { Array.isArray(nextItem) ? renderSublist(item, nextItem) : item.text }
+            {Array.isArray(nextItem)
+              ? renderSublist(item, nextItem)
+              : item.text}
           </JumpLinksItem>
         );
       }
-    })
+    });
     return jumpLinksItems;
-  }
+  };
 
   return (
     <JumpLinks
       label="Table of contents"
       isVertical
-      scrollableSelector="#ws-page-main"
+      scrollableSelector=".pf-v6-c-page__main-container"
       className="ws-toc"
-      style={{ 'top': stickyNavHeight }}
+      style={{ top: stickyNavHeight }}
       offset={width > 1450 ? 108 + stickyNavHeight : 148 + stickyNavHeight}
       expandable={{ default: 'expandable', '2xl': 'nonExpandable' }}
     >
-      { renderJumpLinksItems() }
+      {renderJumpLinksItems()}
     </JumpLinks>
   );
-}
+};

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;
@@ -8,43 +8,8 @@
   flex: 1;
 }
 
-.ws-switcher-divider {
-  padding: 0 var(--pf-v5-global--spacer--md);
-}
-
-@media (min-width: 1200px) {
-  .ws-page-sidebar {
-    box-shadow: none !important;
-  }
-}
-
-.ws-page-sidebar > .pf-v5-c-page__sidebar-body {
-  padding-top: var(--pf-v5-global--spacer--md);
-}
-
 /* Search */
 #algolia-autocomplete-listbox-0 {
   /* Fix search results overflowing page */
   min-width: 480px !important;
 }
-.ws-global-search.pf-v5-c-input-group {
-  /* remove white background on dark Masthead */
-  --pf-v5-c-input-group--BackgroundColor: none;
-}
-
-/* For tiny (200px) viewports */
-.ws-masthead .pf-v5-c-toolbar__item  {
-  min-width: 0;
-}
-
-.ws-masthead .pf-v5-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);
-}
-
-.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;
-}