@patternfly/documentation-framework 6.0.0-alpha.9 → 6.0.0-alpha.90

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 React from 'react';
+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 }) => {
+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>
+                            <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-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,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-v5-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 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;
 }