@patternfly/react-core 6.0.0-alpha.80 → 6.0.0-alpha.82

package/src/components/Nav/examples/NavIcons.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { Nav, NavItem, NavList } from '@patternfly/react-core';
+import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
+import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon';
+import CloudIcon from '@patternfly/react-icons/dist/esm/icons/cloud-icon';
+import LinkIcon from '@patternfly/react-icons/dist/esm/icons/link-icon';
+
+export const NavIcons: React.FunctionComponent = () => {
+  const [activeItem, setActiveItem] = React.useState(0);
+
+  const onSelect = (_event: React.FormEvent<HTMLInputElement>, result: { itemId: number | string }) => {
+    setActiveItem(result.itemId as number);
+  };
+
+  return (
+    <Nav onSelect={onSelect} aria-label="Icon global" ouiaId="IconNav">
+      <NavList>
+        <NavItem
+          preventDefault
+          id="nav-icon-link1"
+          to="#nav-icon-link1"
+          itemId={0}
+          isActive={activeItem === 0}
+          icon={<CubeIcon />}
+        >
+          Link 1
+        </NavItem>
+        <NavItem
+          preventDefault
+          id="nav-icon-link2"
+          to="#nav-icon-link2"
+          itemId={1}
+          isActive={activeItem === 1}
+          icon={<FolderIcon />}
+        >
+          Link 2
+        </NavItem>
+        <NavItem
+          preventDefault
+          id="nav-icon-link3"
+          to="#nav-icon-link3"
+          itemId={2}
+          isActive={activeItem === 2}
+          icon={<CloudIcon />}
+        >
+          Link 3
+        </NavItem>
+        <NavItem
+          preventDefault
+          id="nav-icon-link4"
+          to="#nav-icon-link4"
+          itemId={3}
+          isActive={activeItem === 3}
+          icon={<LinkIcon />}
+        >
+          Link 4
+        </NavItem>
+      </NavList>
+    </Nav>
+  );
+};

package/src/components/Page/Page.tsx

@@ -170,7 +170,7 @@ class Page extends React.Component<PageProps, PageState> {
 
   isMobile = () =>
     // eslint-disable-next-line radix
-    this.getWindowWidth() < Number.parseInt(globalBreakpointXl.value, 10);
+    this.getWindowWidth() < Number.parseInt(globalBreakpointXl.value, 10) * 16;
 
   resize = (_event?: MouseEvent | TouchEvent | React.KeyboardEvent<Element>) => {
     const { onPageResize } = this.props;

package/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap

@@ -499,7 +499,11 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
                     aria-current="page"
                     class="pf-v6-c-nav__link pf-m-current"
                   >
-                    System Panel
+                    <span
+                      class="pf-v6-c-nav__link-text"
+                    >
+                      System Panel
+                    </span>
                   </a>
                 </li>
                 <li
@@ -511,7 +515,11 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
                   <a
                     class="pf-v6-c-nav__link"
                   >
-                    Policy
+                    <span
+                      class="pf-v6-c-nav__link-text"
+                    >
+                      Policy
+                    </span>
                   </a>
                 </li>
                 <li
@@ -523,7 +531,11 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
                   <a
                     class="pf-v6-c-nav__link"
                   >
-                    Authentication
+                    <span
+                      class="pf-v6-c-nav__link-text"
+                    >
+                      Authentication
+                    </span>
                   </a>
                 </li>
                 <li
@@ -535,7 +547,11 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
                   <a
                     class="pf-v6-c-nav__link"
                   >
-                    Network Services
+                    <span
+                      class="pf-v6-c-nav__link-text"
+                    >
+                      Network Services
+                    </span>
                   </a>
                 </li>
                 <li
@@ -547,7 +563,11 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
                   <a
                     class="pf-v6-c-nav__link"
                   >
-                    Server
+                    <span
+                      class="pf-v6-c-nav__link-text"
+                    >
+                      Server
+                    </span>
                   </a>
                 </li>
               </ul>
@@ -617,7 +637,11 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
                     aria-current="page"
                     class="pf-v6-c-nav__link pf-m-current"
                   >
-                    System Panel
+                    <span
+                      class="pf-v6-c-nav__link-text"
+                    >
+                      System Panel
+                    </span>
                   </a>
                 </li>
                 <li
@@ -629,7 +653,11 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
                   <a
                     class="pf-v6-c-nav__link"
                   >
-                    Policy
+                    <span
+                      class="pf-v6-c-nav__link-text"
+                    >
+                      Policy
+                    </span>
                   </a>
                 </li>
                 <li
@@ -641,7 +669,11 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
                   <a
                     class="pf-v6-c-nav__link"
                   >
-                    Authentication
+                    <span
+                      class="pf-v6-c-nav__link-text"
+                    >
+                      Authentication
+                    </span>
                   </a>
                 </li>
                 <li
@@ -653,7 +685,11 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
                   <a
                     class="pf-v6-c-nav__link"
                   >
-                    Network Services
+                    <span
+                      class="pf-v6-c-nav__link-text"
+                    >
+                      Network Services
+                    </span>
                   </a>
                 </li>
                 <li
@@ -665,7 +701,11 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
                   <a
                     class="pf-v6-c-nav__link"
                   >
-                    Server
+                    <span
+                      class="pf-v6-c-nav__link-text"
+                    >
+                      Server
+                    </span>
                   </a>
                 </li>
               </ul>
@@ -837,7 +877,11 @@ exports[`Page Check page to verify nav is created - PageNavigation syntax 1`] =
                   aria-current="page"
                   class="pf-v6-c-nav__link pf-m-current"
                 >
-                  System Panel
+                  <span
+                    class="pf-v6-c-nav__link-text"
+                  >
+                    System Panel
+                  </span>
                 </a>
               </li>
               <li
@@ -849,7 +893,11 @@ exports[`Page Check page to verify nav is created - PageNavigation syntax 1`] =
                 <a
                   class="pf-v6-c-nav__link"
                 >
-                  Policy
+                  <span
+                    class="pf-v6-c-nav__link-text"
+                  >
+                    Policy
+                  </span>
                 </a>
               </li>
               <li
@@ -861,7 +909,11 @@ exports[`Page Check page to verify nav is created - PageNavigation syntax 1`] =
                 <a
                   class="pf-v6-c-nav__link"
                 >
-                  Authentication
+                  <span
+                    class="pf-v6-c-nav__link-text"
+                  >
+                    Authentication
+                  </span>
                 </a>
               </li>
               <li
@@ -873,7 +925,11 @@ exports[`Page Check page to verify nav is created - PageNavigation syntax 1`] =
                 <a
                   class="pf-v6-c-nav__link"
                 >
-                  Network Services
+                  <span
+                    class="pf-v6-c-nav__link-text"
+                  >
+                    Network Services
+                  </span>
                 </a>
               </li>
               <li
@@ -885,7 +941,11 @@ exports[`Page Check page to verify nav is created - PageNavigation syntax 1`] =
                 <a
                   class="pf-v6-c-nav__link"
                 >
-                  Server
+                  <span
+                    class="pf-v6-c-nav__link-text"
+                  >
+                    Server
+                  </span>
                 </a>
               </li>
             </ul>

package/src/components/Toolbar/Toolbar.tsx

@@ -38,8 +38,6 @@ export interface ToolbarProps extends React.HTMLProps<HTMLDivElement>, OUIAProps
   isFullHeight?: boolean;
   /** Flag indicating the toolbar is static */
   isStatic?: boolean;
-  /** Flag indicating the toolbar should use the Page insets */
-  usePageInsets?: boolean;
   /** Flag indicating the toolbar should stick to the top of its container */
   isSticky?: boolean;
   /** Insets at various breakpoints. */
@@ -140,7 +138,6 @@ class Toolbar extends React.Component<ToolbarProps, ToolbarState> {
       isFullHeight,
       isStatic,
       inset,
-      usePageInsets,
       isSticky,
       ouiaId,
       numberOfFiltersText,
@@ -164,7 +161,6 @@ class Toolbar extends React.Component<ToolbarProps, ToolbarState> {
               styles.toolbar,
               isFullHeight && styles.modifiers.fullHeight,
               isStatic && styles.modifiers.static,
-              usePageInsets && styles.modifiers.pageInsets,
               isSticky && styles.modifiers.sticky,
               formatBreakpointMods(inset, styles, '', getBreakpoint(width)),
               colorVariant === 'primary' && styles.modifiers.primary,

package/src/components/Toolbar/ToolbarContent.tsx

@@ -16,8 +16,6 @@ export interface ToolbarContentProps extends React.HTMLProps<HTMLDivElement> {
     xl?: 'hidden' | 'visible';
     '2xl'?: 'hidden' | 'visible';
   };
-  /** Vertical alignment. */
-  alignSelf?: 'start' | 'center' | 'baseline' | 'default';
   /** Vertical alignment of children */
   alignItems?: 'start' | 'center' | 'baseline' | 'default';
   /** Content to be rendered as children of the content row */
@@ -56,7 +54,6 @@ class ToolbarContent extends React.Component<ToolbarContentProps> {
       clearAllFilters,
       showClearFiltersButton,
       clearFiltersButtonText,
-      alignSelf,
       ...props
     } = this.props;
 
@@ -100,10 +97,7 @@ class ToolbarContent extends React.Component<ToolbarContentProps> {
                         styles.toolbarContentSection,
                         alignItems === 'center' && styles.modifiers.alignItemsCenter,
                         alignItems === 'start' && styles.modifiers.alignItemsStart,
-                        alignItems === 'baseline' && styles.modifiers.alignItemsBaseline,
-                        alignSelf === 'center' && styles.modifiers.alignSelfCenter,
-                        alignSelf === 'start' && styles.modifiers.alignSelfStart,
-                        alignSelf === 'baseline' && styles.modifiers.alignSelfBaseline
+                        alignItems === 'baseline' && styles.modifiers.alignItemsBaseline
                       )}
                     >
                       {children}

package/src/components/Toolbar/ToolbarGroup.tsx

@@ -6,14 +6,23 @@ import { PageContext } from '../Page/PageContext';
 
 export enum ToolbarGroupVariant {
   'filter-group' = 'filter-group',
-  'icon-button-group' = 'icon-button-group'
+  'action-group' = 'action-group',
+  'action-group-inline' = 'action-group-inline',
+  'action-group-plain' = 'action-group-plain',
+  'label-group' = 'label-group'
 }
 
 export interface ToolbarGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'ref'> {
   /** Classes applied to root element of the data toolbar group */
   className?: string;
   /** A type modifier which modifies spacing specifically depending on the type of group */
-  variant?: ToolbarGroupVariant | 'filter-group' | 'icon-button-group';
+  variant?:
+    | ToolbarGroupVariant
+    | 'filter-group'
+    | 'action-group'
+    | 'action-group-inline'
+    | 'action-group-plain'
+    | 'label-group';
   /** Visibility at various breakpoints. */
   visibility?: {
     default?: 'hidden' | 'visible';
@@ -24,16 +33,16 @@ export interface ToolbarGroupProps extends Omit<React.HTMLProps<HTMLDivElement>,
   };
   /** Applies to a child of a flex layout, and aligns that child (and any adjacent children on the other side of it) to one side of the main axis */
   align?: {
-    default?: 'alignEnd' | 'alignStart';
-    md?: 'alignEnd' | 'alignStart';
-    lg?: 'alignEnd' | 'alignStart';
-    xl?: 'alignEnd' | 'alignStart';
-    '2xl'?: 'alignEnd' | 'alignStart';
+    default?: 'alignEnd' | 'alignStart' | 'alignCenter';
+    md?: 'alignEnd' | 'alignStart' | 'alignCenter';
+    lg?: 'alignEnd' | 'alignStart' | 'alignCenter';
+    xl?: 'alignEnd' | 'alignStart' | 'alignCenter';
+    '2xl'?: 'alignEnd' | 'alignStart' | 'alignCenter';
   };
   /** Vertical alignment of children */
-  alignItems?: 'start' | 'center' | 'baseline' | 'default';
+  alignItems?: 'start' | 'center' | 'baseline' | 'default' | 'end' | 'stretch';
   /** Vertical alignment */
-  alignSelf?: 'start' | 'center' | 'baseline' | 'default';
+  alignSelf?: 'start' | 'center' | 'baseline' | 'default' | 'end' | 'stretch';
   /** Sets both the column and row gap at various breakpoints. */
   gap?: {
     default?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl';
@@ -180,7 +189,15 @@ class ToolbarGroupWithRef extends React.Component<ToolbarGroupProps> {
           <div
             className={css(
               styles.toolbarGroup,
-              variant && styles.modifiers[toCamel(variant) as 'filterGroup' | 'iconButtonGroup'],
+              variant &&
+                styles.modifiers[
+                  toCamel(variant) as
+                    | 'filterGroup'
+                    | 'actionGroup'
+                    | 'actionGroupInline'
+                    | 'actionGroupPlain'
+                    | 'labelGroup'
+                ],
               formatBreakpointMods(visibility, styles, '', getBreakpoint(width)),
               formatBreakpointMods(align, styles, '', getBreakpoint(width)),
               formatBreakpointMods(gap, styles, '', getBreakpoint(width)),

package/src/components/Toolbar/ToolbarItem.tsx

@@ -28,16 +28,16 @@ export interface ToolbarItemProps extends React.HTMLProps<HTMLDivElement> {
   };
   /** Applies to a child of a flex layout, and aligns that child (and any adjacent children on the other side of it) to one side of the main axis */
   align?: {
-    default?: 'alignEnd' | 'alignStart';
-    md?: 'alignEnd' | 'alignStart';
-    lg?: 'alignEnd' | 'alignStart';
-    xl?: 'alignEnd' | 'alignStart';
-    '2xl'?: 'alignEnd' | 'alignStart';
+    default?: 'alignEnd' | 'alignStart' | 'alignCenter';
+    md?: 'alignEnd' | 'alignStart' | 'alignCenter';
+    lg?: 'alignEnd' | 'alignStart' | 'alignCenter';
+    xl?: 'alignEnd' | 'alignStart' | 'alignCenter';
+    '2xl'?: 'alignEnd' | 'alignStart' | 'alignCenter';
   };
   /** Vertical alignment of children */
-  alignItems?: 'start' | 'center' | 'baseline' | 'default';
+  alignItems?: 'start' | 'center' | 'baseline' | 'default' | 'end' | 'stretch';
   /** Vertical alignment */
-  alignSelf?: 'start' | 'center' | 'baseline' | 'default';
+  alignSelf?: 'start' | 'center' | 'baseline' | 'default' | 'end' | 'stretch';
   /** Sets both the column and row gap at various breakpoints. */
   gap?: {
     default?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl';

package/src/components/Toolbar/ToolbarLabelGroupContent.tsx

@@ -69,6 +69,8 @@ class ToolbarLabelGroupContent extends React.Component<ToolbarLabelGroupContentP
     }
 
     const isHidden = numberOfFilters === 0 || isExpanded;
+    const showNumberOfFilters = collapseListedFilters && numberOfFilters > 0 && !isExpanded;
+    const showDefaultClearFilter = showClearFiltersButton && !isExpanded && !customLabelGroupContent;
 
     return (
       <div
@@ -82,19 +84,19 @@ class ToolbarLabelGroupContent extends React.Component<ToolbarLabelGroupContentP
           {...(collapseListedFilters && { hidden: true })}
           {...(collapseListedFilters && { 'aria-hidden': true })}
         />
-        {collapseListedFilters && numberOfFilters > 0 && !isExpanded && (
-          <ToolbarGroup>
-            <ToolbarItem>{numberOfFiltersText(numberOfFilters)}</ToolbarItem>
+        {(showNumberOfFilters || showDefaultClearFilter || customLabelGroupContent) && (
+          <ToolbarGroup variant="action-group-inline">
+            {showNumberOfFilters && <ToolbarItem>{numberOfFiltersText(numberOfFilters)}</ToolbarItem>}
+            {showDefaultClearFilter && (
+              <ToolbarItem>
+                <Button variant="link" onClick={clearLabelGroups} isInline>
+                  {clearFiltersButtonText}
+                </Button>
+              </ToolbarItem>
+            )}
+            {customLabelGroupContent && customLabelGroupContent}
           </ToolbarGroup>
         )}
-        {showClearFiltersButton && !isExpanded && !customLabelGroupContent && (
-          <ToolbarItem>
-            <Button variant="link" onClick={clearLabelGroups} isInline>
-              {clearFiltersButtonText}
-            </Button>
-          </ToolbarItem>
-        )}
-        {customLabelGroupContent && customLabelGroupContent}
       </div>
     );
   }

package/src/components/Toolbar/ToolbarToggleGroup.tsx

@@ -27,14 +27,6 @@ export interface ToolbarToggleGroupProps extends ToolbarGroupProps {
     xl?: 'hidden' | 'visible';
     '2xl'?: 'hidden' | 'visible';
   };
-  /** Alignment at various breakpoints. */
-  alignment?: {
-    default?: 'alignEnd' | 'alignStart';
-    md?: 'alignEnd' | 'alignStart';
-    lg?: 'alignEnd' | 'alignStart';
-    xl?: 'alignEnd' | 'alignStart';
-    '2xl'?: 'alignEnd' | 'alignStart';
-  };
   /** Sets both the column and row gap at various breakpoints. */
   gap?: {
     default?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl';
@@ -176,7 +168,6 @@ class ToolbarToggleGroup extends React.Component<ToolbarToggleGroupProps> {
       variant,
       visibility,
       breakpoint,
-      alignment,
       gap,
       columnGap,
       rowGap,
@@ -260,10 +251,17 @@ class ToolbarToggleGroup extends React.Component<ToolbarToggleGroupProps> {
                         className={css(
                           styles.toolbarGroup,
                           styles.modifiers.toggleGroup,
-                          variant && styles.modifiers[toCamel(variant) as 'filterGroup' | 'iconButtonGroup'],
+                          variant &&
+                            styles.modifiers[
+                              toCamel(variant) as
+                                | 'filterGroup'
+                                | 'actionGroup'
+                                | 'actionGroupInline'
+                                | 'actionGroupPlain'
+                                | 'labelGroup'
+                            ],
                           formatBreakpointMods(breakpointMod, styles, '', getBreakpoint(width)),
                           formatBreakpointMods(visibility, styles, '', getBreakpoint(width)),
-                          formatBreakpointMods(alignment, styles, '', getBreakpoint(width)),
                           formatBreakpointMods(gap, styles, '', getBreakpoint(width)),
                           formatBreakpointMods(columnGap, styles, '', getBreakpoint(width)),
                           formatBreakpointMods(rowGap, styles, '', getBreakpoint(width)),

package/src/components/Toolbar/ToolbarUtils.tsx

@@ -45,8 +45,8 @@ export const ToolbarContentContext = React.createContext<ToolbarContentContextPr
 });
 
 export const globalBreakpoints = {
-  md: parseInt(globalBreakpointMd.value),
-  lg: parseInt(globalBreakpointLg.value),
-  xl: parseInt(globalBreakpointXl.value),
-  '2xl': parseInt(globalBreakpoint2xl.value)
+  md: parseInt(globalBreakpointMd.value) * 16,
+  lg: parseInt(globalBreakpointLg.value) * 16,
+  xl: parseInt(globalBreakpointXl.value) * 16,
+  '2xl': parseInt(globalBreakpoint2xl.value) * 16
 };

package/src/components/Toolbar/__tests__/Toolbar.test.tsx

@@ -43,25 +43,6 @@ describe('Toolbar', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  it('should render with page inset flag', () => {
-    const items = (
-      <React.Fragment>
-        <ToolbarItem>Test</ToolbarItem>
-        <ToolbarItem>Test 2</ToolbarItem>
-        <ToolbarItem variant="separator" />
-        <ToolbarItem>Test 3 </ToolbarItem>
-      </React.Fragment>
-    );
-
-    const { asFragment } = render(
-      <Toolbar id="toolbar" usePageInsets>
-        <ToolbarContent>{items}</ToolbarContent>
-      </Toolbar>
-    );
-
-    expect(asFragment()).toMatchSnapshot();
-  });
-
   it('should render with custom label content', () => {
     const items = (
       <React.Fragment>

package/src/components/Toolbar/__tests__/__snapshots__/Toolbar.test.tsx.snap

@@ -51,7 +51,7 @@ exports[`Toolbar should render with custom label content 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-toolbar pf-m-toggle-group-container"
-    data-ouia-component-id="OUIA-Generated-Toolbar-3"
+    data-ouia-component-id="OUIA-Generated-Toolbar-2"
     data-ouia-component-type="PF6/Toolbar"
     data-ouia-safe="true"
     id="toolbar-with-filter"
@@ -259,98 +259,51 @@ exports[`Toolbar should render with custom label content 1`] = `
         </div>
       </div>
       <div
-        class="pf-v6-c-toolbar__group"
+        class="pf-v6-c-toolbar__group pf-m-action-group-inline"
       >
         <div
           class="pf-v6-c-toolbar__item"
         >
           2 filters applied
         </div>
-      </div>
-      <div
-        class="pf-v6-c-toolbar__item"
-      >
-        <button
-          aria-disabled="false"
-          class="pf-v6-c-button pf-m-link pf-m-inline"
-          data-ouia-component-id="OUIA-Generated-Button-link-1"
-          data-ouia-component-type="PF6/Button"
-          data-ouia-safe="true"
-          type="button"
-        >
-          <span
-            class="pf-v6-c-button__text"
-          >
-            Save filters
-          </span>
-        </button>
-      </div>
-      <div
-        class="pf-v6-c-toolbar__item"
-      >
-        <button
-          aria-disabled="false"
-          class="pf-v6-c-button pf-m-link pf-m-inline"
-          data-ouia-component-id="OUIA-Generated-Button-link-2"
-          data-ouia-component-type="PF6/Button"
-          data-ouia-safe="true"
-          type="button"
-        >
-          <span
-            class="pf-v6-c-button__text"
-          >
-            Clear all filters
-          </span>
-        </button>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Toolbar should render with page inset flag 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v6-c-toolbar pf-m-page-insets"
-    data-ouia-component-id="OUIA-Generated-Toolbar-2"
-    data-ouia-component-type="PF6/Toolbar"
-    data-ouia-safe="true"
-    id="toolbar"
-  >
-    <div
-      class="pf-v6-c-toolbar__content"
-    >
-      <div
-        class="pf-v6-c-toolbar__content-section"
-      >
         <div
           class="pf-v6-c-toolbar__item"
         >
-          Test
-        </div>
-        <div
-          class="pf-v6-c-toolbar__item"
-        >
-          Test 2
+          <button
+            aria-disabled="false"
+            class="pf-v6-c-button pf-m-link pf-m-inline"
+            data-ouia-component-id="OUIA-Generated-Button-link-1"
+            data-ouia-component-type="PF6/Button"
+            data-ouia-safe="true"
+            type="button"
+          >
+            <span
+              class="pf-v6-c-button__text"
+            >
+              Save filters
+            </span>
+          </button>
         </div>
-        <hr
-          class="pf-v6-c-divider pf-m-vertical"
-        />
         <div
           class="pf-v6-c-toolbar__item"
         >
-          Test 3 
+          <button
+            aria-disabled="false"
+            class="pf-v6-c-button pf-m-link pf-m-inline"
+            data-ouia-component-id="OUIA-Generated-Button-link-2"
+            data-ouia-component-type="PF6/Button"
+            data-ouia-safe="true"
+            type="button"
+          >
+            <span
+              class="pf-v6-c-button__text"
+            >
+              Clear all filters
+            </span>
+          </button>
         </div>
       </div>
     </div>
-    <div
-      class="pf-v6-c-toolbar__content pf-m-hidden"
-      hidden=""
-    >
-      <div
-        class="pf-v6-c-toolbar__group"
-      />
-    </div>
   </div>
 </DocumentFragment>
 `;