@patternfly/documentation-framework 6.0.0-alpha.12 → 6.0.0-alpha.121

package/components/sectionGallery/sectionDataListLayout.js

@@ -1,51 +1,97 @@
 import React from "react";
-import { DataList, DataListItem, DataListItemRow, DataListItemCells, DataListCell, Split, SplitItem, TextContent, Text, TextVariants, Label } from "@patternfly/react-core";
-import { Link } from '../link/link';
-import { TextSummary } from './TextSummary';
+import {
+  DataList,
+  DataListItem,
+  DataListItemRow,
+  DataListItemCells,
+  DataListCell,
+  Split,
+  SplitItem,
+  Content,
+  ContentVariants,
+  Label,
+} from "@patternfly/react-core";
+import { Link } from "../link/link";
+import { TextSummary } from "./TextSummary";
 
-export const SectionDataListLayout = ({ galleryItems, layoutView, hasListText, hasListImages }) => {
-  if (layoutView !== 'list') {
+export const SectionDataListLayout = ({
+  galleryItems,
+  layoutView,
+  hasListText,
+  hasListImages,
+}) => {
+  if (layoutView !== "list") {
     return null;
   }
-  
+
   return (
     <DataList onSelectDataListItem={() => {}}>
-      {galleryItems.map(({ idx, slug, illustration, itemName, title, isBeta, isDeprecated, isDemo, id, galleryItemsData }) => (
-        <Link to={slug} key={idx} className="ws-section-gallery-item">
-          <DataListItem>
-            <DataListItemRow>
-              <DataListItemCells dataListCells={[
-                hasListImages && illustration && (
-                  <DataListCell width={1} key="illustration">
-                    <div>
-                      <img src={illustration} alt={`${itemName} illustration`} />
-                    </div>
-                  </DataListCell>
-                ),
-                <DataListCell width={5} key="text-description">
-                  <Split className={ hasListText ? "pf-v5-u-mb-md" : null }>
-                    <SplitItem isFilled>
-                      <TextContent>
-                        <Text component={TextVariants.h2}>
-                          <span>
-                            {title}
-                          </span>
-                        </Text>
-                      </TextContent>
-                    </SplitItem>  
-                    <SplitItem>
-                      {isBeta && (<Label color="blue" isCompact>Beta</Label>)}
-                      {!isBeta && isDeprecated && (<Label color="grey" isCompact>Deprecated</Label>)}
-                      {!isBeta && !isDeprecated && isDemo && (<Label color="purple" isCompact>Demo</Label>)}
-                    </SplitItem>
-                  </Split>
-                  { hasListText && <TextSummary id={id} itemsData={galleryItemsData} /> }
-                </DataListCell>
-              ]} />
-            </DataListItemRow>
-          </DataListItem>
-        </Link>
-      ))}
+      {galleryItems.map(
+        ({
+          idx,
+          slug,
+          illustration,
+          itemName,
+          title,
+          isBeta,
+          isDeprecated,
+          isDemo,
+          id,
+          galleryItemsData,
+        }) => (
+          <Link to={slug} key={idx} className="ws-section-gallery-item">
+            <DataListItem>
+              <DataListItemRow>
+                <DataListItemCells
+                  dataListCells={[
+                    hasListImages && illustration && (
+                      <DataListCell width={1} key="illustration">
+                        <div>
+                          <img
+                            src={illustration}
+                            alt={`${itemName} illustration`}
+                          />
+                        </div>
+                      </DataListCell>
+                    ),
+                    <DataListCell width={5} key="text-description">
+                      <Split className={hasListText ? "pf-v6-u-mb-md" : null}>
+                        <SplitItem isFilled>
+                          <Content isEditorial>
+                            <Content component={ContentVariants.h2}>
+                              <span>{title}</span>
+                            </Content>
+                          </Content>
+                        </SplitItem>
+                        <SplitItem>
+                          {isBeta && (
+                            <Label color="blue" isCompact>
+                              Beta
+                            </Label>
+                          )}
+                          {!isBeta && isDeprecated && (
+                            <Label color="grey" isCompact>
+                              Deprecated
+                            </Label>
+                          )}
+                          {!isBeta && !isDeprecated && isDemo && (
+                            <Label color="purple" isCompact>
+                              Demo
+                            </Label>
+                          )}
+                        </SplitItem>
+                      </Split>
+                      {hasListText && (
+                        <TextSummary id={id} itemsData={galleryItemsData} />
+                      )}
+                    </DataListCell>,
+                  ]}
+                />
+              </DataListItemRow>
+            </DataListItem>
+          </Link>
+        )
+      )}
     </DataList>
-  )
+  );
 };

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-v6-c-page__main-section--PaddingTop) * -1);
-}
-
-* + .ws-section-gallery {
-  /* top placement */
-  margin-top: unset;
-}
-
 /* Toolbar styles */
 .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-v6-global--ZIndex--xs) + 2);
-}
-
-/* Match toolbar left-padding to gallery left-padding */
-.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-v6-c-toolbar__content-section {
-  flex-wrap: nowrap;
+  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 */
+/* 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-v6-c-data-list {
-  max-width: 956px;
+  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 ListIcon from '@patternfly/react-icons/dist/esm/icons/list-icon';
-import ThIcon from'@patternfly/react-icons/dist/esm/icons/th-icon';
+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";
 
 export const SectionGalleryToolbar = ({
   galleryItems,
@@ -9,29 +20,54 @@ 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-v6-c-toolbar__item--MinWidth': "max-content"}}>
-        <Text component={TextVariants.small}>{ galleryItems.length }{ countText }</Text>
+      <ToolbarItem
+        variant="pagination"
+        gap={{ default: "gapMd", md: "gapNone" }}
+        style={{ "--pf-v6-c-toolbar__item--MinWidth": "max-content" }}
+        className="pf-m-align-self-center"
+      >
+        <Content isEditorial component={ContentVariants.small}>
+          {galleryItems.length}
+          {countText}
+        </Content>
       </ToolbarItem>
     </ToolbarContent>
   </Toolbar>

package/components/sectionGallery/sectionGalleryWrapper.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react';
 import { groupedRoutes } from '../../routes';
 
 export const SectionGalleryWrapper = ({
@@ -10,9 +10,11 @@ export const SectionGalleryWrapper = ({
   parseSubsections,
   initialLayout,
   isFullWidth,
-  children
+  children,
 }) => {
-  let sectionRoutes = subsection ? groupedRoutes[section][subsection] : groupedRoutes[section];
+  let sectionRoutes = subsection
+    ? groupedRoutes[section][subsection]
+    : groupedRoutes[section];
   if (!includeSubsections || parseSubsections) {
     const sectionRoutesArr = Object.entries(sectionRoutes);
     // loop through galleryItems object and build new object to handle subsections
@@ -32,22 +34,21 @@ export const SectionGalleryWrapper = ({
           if (subitemName !== 'isSubsection') {
             acc[subitemName] = subitemData;
           }
-        })
+        });
       }
       return acc;
-    }, {})
+    }, {});
   }
 
   const [searchTerm, setSearchTerm] = React.useState('');
   const [layoutView, setLayoutView] = React.useState(initialLayout);
-  const filteredItems = Object.entries(sectionRoutes)
-    .filter(([itemName, { slug }]) => (
-      // exclude current gallery page from results
+  const filteredItems = Object.entries(sectionRoutes).filter(
+    ([itemName, { slug }]) =>
+      // exclude current gallery page from results - check for trailing /
       !location.pathname.endsWith(slug) &&
-      itemName
-        .toLowerCase()
-        .includes(searchTerm.toLowerCase())
-    ));
+      !location.pathname.endsWith(`${slug}/`) &&
+      itemName.toLowerCase().includes(searchTerm.toLowerCase())
+  );
   const sectionGalleryItems = filteredItems
     .sort(([itemName1], [itemName2]) => itemName1.localeCompare(itemName2))
     .map(([itemName, itemData], idx) => {
@@ -56,36 +57,63 @@ export const SectionGalleryWrapper = ({
         // Convert to lowercase-camelcase ex: File upload - multiple ==> file_upload_multiple
         const illustrationName = itemName
           .replace('-', '')
-          .replace('  ',' ')
+          .replace('  ', ' ')
           .split(' ')
           .join('_')
           .toLowerCase();
-        illustration = illustrations[illustrationName] || illustrations.default_placeholder;
+        illustration =
+          illustrations[illustrationName] || illustrations.default_placeholder;
       }
       const { sources, isSubsection = false } = itemData;
       // Subsections don't have title or id, default to itemName aka sidenav text
       const title = itemData.title || itemName;
       const id = itemData.id || title;
       // Display beta label if tab other than a '-next' tab is marked Beta
-      const isDeprecated = !isSubsection && sources && sources.some(source => source.source === "react-deprecated" || source.source === "html-deprecated") && !sources.some(source => source.source === "react"  || source.source === "html");
-      const isBeta = !isSubsection && sources && sources.some(src => src.beta && !src.source.includes('-next'));
-      const isDemo = !isSubsection && sources && sources.some(source => source.source === "react-demos" || source.source === "html-demos") && !sources.some(source => source.source === "react" || source.source === "html");
+      const isDeprecated =
+        !isSubsection &&
+        sources &&
+        sources.some(
+          (source) =>
+            source.source === 'react-deprecated' ||
+            source.source === 'html-deprecated'
+        ) &&
+        !sources.some(
+          (source) => source.source === 'react' || source.source === 'html'
+        );
+      const isBeta =
+        !isSubsection &&
+        sources &&
+        sources.some((src) => src.beta && !src.source.includes('-next'));
+      const isDemo =
+        !isSubsection &&
+        sources &&
+        sources.some(
+          (source) =>
+            source.source === 'react-demos' || source.source === 'html-demos'
+        ) &&
+        !sources.some(
+          (source) => source.source === 'react' || source.source === 'html'
+        );
 
       let slug = itemData.slug;
       if (!slug && isSubsection) {
         // Update slug to link to first page in subsection
-        const subsectionItems = Object.entries(itemData).filter(([name, _data]) => name !== 'isSubsection');
-        const sortedSubsectionItems = subsectionItems.sort((
-          [name1, {sortValue: sortValue1 = 50}],
-          [name2, {sortValue: sortValue2 = 50}]
-        ) => {
-          if (sortValue1 === sortValue2) {
-            return name1.localeCompare(name2);
+        const subsectionItems = Object.entries(itemData).filter(
+          ([name, _data]) => name !== 'isSubsection'
+        );
+        const sortedSubsectionItems = subsectionItems.sort(
+          (
+            [name1, { sortValue: sortValue1 = 50 }],
+            [name2, { sortValue: sortValue2 = 50 }]
+          ) => {
+            if (sortValue1 === sortValue2) {
+              return name1.localeCompare(name2);
+            }
+            return sortValue1 > sortValue2 ? 1 : -1;
           }
-          return sortValue1 > sortValue2 ? 1 : -1;
-        });
+        );
         const firstSubsectionItem = sortedSubsectionItems[0];
-        slug = firstSubsectionItem[1].slug;   
+        slug = firstSubsectionItem[1].slug;
       }
 
       return {
@@ -98,13 +126,23 @@ export const SectionGalleryWrapper = ({
         isDemo,
         title,
         id,
-        galleryItemsData
+        galleryItemsData,
       };
     });
 
   return (
-    <div className={`ws-section-gallery${ isFullWidth ? ' ws-section-gallery-full-width' : '' }`}>
-      { children(sectionGalleryItems, searchTerm, setSearchTerm, layoutView, setLayoutView) }
+    <div
+      className={`ws-section-gallery${
+        isFullWidth ? ' ws-section-gallery-full-width' : ''
+      }`}
+    >
+      {children(
+        sectionGalleryItems,
+        searchTerm,
+        setSearchTerm,
+        layoutView,
+        setLayoutView
+      )}
     </div>
-  )
+  );
 };

package/components/sideNav/sideNav.js

@@ -4,7 +4,7 @@ import { Label, Nav, NavList, NavExpandable, PageContextConsumer, capitalize, Fl
 import { css } from '@patternfly/react-styles';
 import { Location } from '@reach/router';
 import { makeSlug } from '../../helpers';
-import globalBreakpointXl from "@patternfly/react-tokens/dist/esm/global_breakpoint_xl";
+import globalBreakpointXl from "@patternfly/react-tokens/dist/esm/t_global_breakpoint_xl";
 import { trackEvent } from '../../helpers';
 
 const getIsActive = (location, section, subsection = null) => {
@@ -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")