@patternfly/react-core 6.5.0-prerelease.9 → 6.5.0

package/src/components/ToggleGroup/examples/ToggleGroupFill.tsx

@@ -0,0 +1,92 @@
+import { useState } from 'react';
+import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
+
+export const ToggleGroupFill: React.FunctionComponent = () => {
+  const [isSelectedBasic, setIsSelectedBasic] = useState('toggle-group-fill-1');
+  const [isSelectedMulti, setIsSelectedMulti] = useState({
+    'toggle-group-fill-multi-1': false,
+    'toggle-group-fill-multi-2': false,
+    'toggle-group-fill-multi-3': false
+  });
+  const [isSelectedDisabled, setIsSelectedDisabled] = useState('toggle-group-fill-disabled-1');
+
+  const handleItemClickBasic = (event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent) => {
+    const id = event.currentTarget.id;
+    setIsSelectedBasic(id);
+  };
+
+  const handleItemClickMulti = (
+    event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,
+    isSelected: boolean
+  ) => {
+    const id = event.currentTarget.id;
+    setIsSelectedMulti((prevIsSelected) => ({ ...prevIsSelected, [id]: isSelected }));
+  };
+
+  const handleItemClickDisabled = (event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent) => {
+    const id = event.currentTarget.id;
+    setIsSelectedDisabled(id);
+  };
+
+  return (
+    <>
+      <ToggleGroup isFill aria-label="Full width toggle group">
+        <ToggleGroupItem
+          text="Option 1"
+          buttonId="toggle-group-fill-1"
+          isSelected={isSelectedBasic === 'toggle-group-fill-1'}
+          onChange={handleItemClickBasic}
+        />
+        <ToggleGroupItem
+          text="Option 2"
+          buttonId="toggle-group-fill-2"
+          isSelected={isSelectedBasic === 'toggle-group-fill-2'}
+          onChange={handleItemClickBasic}
+        />
+        <ToggleGroupItem
+          text="Option 3"
+          buttonId="toggle-group-fill-3"
+          isSelected={isSelectedBasic === 'toggle-group-fill-3'}
+          onChange={handleItemClickBasic}
+        />
+      </ToggleGroup>
+      <br />
+      <ToggleGroup isFill aria-label="Full width multi-select toggle group">
+        <ToggleGroupItem
+          text="Option 1"
+          buttonId="toggle-group-fill-multi-1"
+          isSelected={isSelectedMulti['toggle-group-fill-multi-1']}
+          onChange={handleItemClickMulti}
+        />
+        <ToggleGroupItem
+          text="Option 2"
+          buttonId="toggle-group-fill-multi-2"
+          isSelected={isSelectedMulti['toggle-group-fill-multi-2']}
+          onChange={handleItemClickMulti}
+        />
+        <ToggleGroupItem
+          text="Option 3"
+          buttonId="toggle-group-fill-multi-3"
+          isSelected={isSelectedMulti['toggle-group-fill-multi-3']}
+          onChange={handleItemClickMulti}
+        />
+      </ToggleGroup>
+      <br />
+      <ToggleGroup isFill aria-label="Full width toggle group with disabled item">
+        <ToggleGroupItem
+          text="Option 1"
+          buttonId="toggle-group-fill-disabled-1"
+          isSelected={isSelectedDisabled === 'toggle-group-fill-disabled-1'}
+          onChange={handleItemClickDisabled}
+        />
+        <ToggleGroupItem
+          text="Option 2"
+          buttonId="toggle-group-fill-disabled-2"
+          isSelected={isSelectedDisabled === 'toggle-group-fill-disabled-2'}
+          onChange={handleItemClickDisabled}
+        />
+        <ToggleGroupItem text="Option 3" isDisabled />
+      </ToggleGroup>
+    </>
+  );
+};

package/src/components/Toolbar/Toolbar.tsx

@@ -1,11 +1,11 @@
 import { Component, createRef } from 'react';
 import styles from '@patternfly/react-styles/css/components/Toolbar/toolbar';
-import { GenerateId } from '../../helpers/GenerateId/GenerateId';
 import { css } from '@patternfly/react-styles';
 import { ToolbarContext } from './ToolbarUtils';
 import { ToolbarLabelGroupContent } from './ToolbarLabelGroupContent';
 import { formatBreakpointMods, canUseDOM } from '../../helpers/util';
-import { getDefaultOUIAId, getOUIAProps, OUIAProps } from '../../helpers';
+import { getOUIAProps, OUIAProps } from '../../helpers';
+import { SSRSafeIds } from '../../helpers/SSRSafeIds/SSRSafeIds';
 import { PageContext } from '../Page/PageContext';
 
 export enum ToolbarColorVariant {
@@ -38,8 +38,14 @@ export interface ToolbarProps extends React.HTMLProps<HTMLDivElement>, OUIAProps
   isFullHeight?: boolean;
   /** Flag indicating the toolbar is static */
   isStatic?: boolean;
-  /** Flag indicating the toolbar should stick to the top of its container */
+  /** Flag indicating the toolbar should stick to the top of its container. This property applies both the sticky position and styling. */
   isSticky?: boolean;
+  /** @beta Flag indicating the toolbar should have sticky positioning to the top of its container */
+  isStickyBase?: boolean;
+  /** @beta Flag indicating the toolbar should have stuck styling, when the toolbar is not at the top of the scroll container */
+  isStickyStuck?: boolean;
+  /** @beta Flag indicating the toolbar has a vertical orientation */
+  isVertical?: boolean;
   /** Insets at various breakpoints. */
   inset?: {
     default?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl';
@@ -69,7 +75,6 @@ export interface ToolbarState {
   filterInfo: FilterInfo;
   /** Used to keep track of window width so we can collapse expanded content when window is resizing */
   windowWidth: number;
-  ouiaStateId: string;
 }
 
 interface FilterInfo {
@@ -84,8 +89,7 @@ class Toolbar extends Component<ToolbarProps, ToolbarState> {
   state = {
     isManagedToggleExpanded: false,
     filterInfo: {},
-    windowWidth: canUseDOM ? window.innerWidth : 1200,
-    ouiaStateId: getDefaultOUIAId(Toolbar.displayName)
+    windowWidth: 1200
   };
 
   isToggleManaged = () => !(this.props.isExpanded || !!this.props.toggleIsExpanded);
@@ -106,6 +110,9 @@ class Toolbar extends Component<ToolbarProps, ToolbarState> {
   };
 
   componentDidMount() {
+    if (canUseDOM) {
+      this.setState({ windowWidth: window.innerWidth });
+    }
     if (this.isToggleManaged() && canUseDOM) {
       window.addEventListener('resize', this.closeExpandableContent);
     }
@@ -129,7 +136,7 @@ class Toolbar extends Component<ToolbarProps, ToolbarState> {
   getNumberOfFilters = () =>
     Object.values(this.state.filterInfo).reduce((acc: any, cur: any) => acc + cur, 0) as number;
 
-  renderToolbar = (randomId: string) => {
+  renderToolbar = (randomId: string, generatedOuiaId?: string) => {
     const {
       hasNoPadding,
       clearAllFilters,
@@ -141,8 +148,11 @@ class Toolbar extends Component<ToolbarProps, ToolbarState> {
       children,
       isFullHeight,
       isStatic,
+      isStickyBase,
+      isStickyStuck,
       inset,
       isSticky,
+      isVertical,
       ouiaId,
       numberOfFiltersText,
       customLabelGroupContent,
@@ -167,6 +177,9 @@ class Toolbar extends Component<ToolbarProps, ToolbarState> {
               isFullHeight && styles.modifiers.fullHeight,
               isStatic && styles.modifiers.static,
               isSticky && styles.modifiers.sticky,
+              isStickyBase && styles.modifiers.stickyBase,
+              isStickyStuck && styles.modifiers.stickyStuck,
+              isVertical && styles.modifiers.vertical,
               formatBreakpointMods(inset, styles, '', getBreakpoint(width)),
               colorVariant === 'primary' && styles.modifiers.primary,
               colorVariant === 'secondary' && styles.modifiers.secondary,
@@ -174,7 +187,7 @@ class Toolbar extends Component<ToolbarProps, ToolbarState> {
               className
             )}
             id={randomId}
-            {...getOUIAProps(Toolbar.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId)}
+            {...getOUIAProps(Toolbar.displayName, ouiaId !== undefined ? ouiaId : generatedOuiaId)}
             {...props}
           >
             <ToolbarContext.Provider
@@ -211,10 +224,10 @@ class Toolbar extends Component<ToolbarProps, ToolbarState> {
   };
 
   render() {
-    return this.props.id ? (
-      this.renderToolbar(this.props.id)
-    ) : (
-      <GenerateId>{(randomId) => this.renderToolbar(randomId)}</GenerateId>
+    return (
+      <SSRSafeIds prefix="pf-random-id-" ouiaComponentType="Toolbar">
+        {(generatedId, generatedOuiaId) => this.renderToolbar(this.props.id || generatedId, generatedOuiaId)}
+      </SSRSafeIds>
     );
   }
 }

package/src/components/Toolbar/ToolbarContent.tsx

@@ -8,7 +8,7 @@ import { PageContext } from '../Page/PageContext';
 export interface ToolbarContentProps extends React.HTMLProps<HTMLDivElement> {
   /** Classes applied to root element of the data toolbar content row */
   className?: string;
-  /** Visibility at various breakpoints. */
+  /** Visibility at various width breakpoints. */
   visibility?: {
     default?: 'hidden' | 'visible';
     md?: 'hidden' | 'visible';
@@ -16,6 +16,14 @@ export interface ToolbarContentProps extends React.HTMLProps<HTMLDivElement> {
     xl?: 'hidden' | 'visible';
     '2xl'?: 'hidden' | 'visible';
   };
+  /** Visibility at various height breakpoints. */
+  visibilityAtHeight?: {
+    default?: 'hidden' | 'visible';
+    md?: 'hidden' | 'visible';
+    lg?: 'hidden' | 'visible';
+    xl?: 'hidden' | 'visible';
+    '2xl'?: 'hidden' | 'visible';
+  };
   /** Value to set for content wrapping at various breakpoints */
   rowWrap?: {
     default?: 'wrap' | 'nowrap';
@@ -59,6 +67,7 @@ class ToolbarContent extends Component<ToolbarContentProps> {
       isExpanded,
       toolbarId,
       visibility,
+      visibilityAtHeight,
       rowWrap,
       alignItems,
       clearAllFilters,
@@ -69,11 +78,12 @@ class ToolbarContent extends Component<ToolbarContentProps> {
 
     return (
       <PageContext.Consumer>
-        {({ width, getBreakpoint }) => (
+        {({ width, getBreakpoint, height, getVerticalBreakpoint }) => (
           <div
             className={css(
               styles.toolbarContent,
               formatBreakpointMods(visibility, styles, '', getBreakpoint(width)),
+              formatBreakpointMods(visibilityAtHeight, styles, '', getVerticalBreakpoint(height), true),
               className
             )}
             ref={this.expandableContentRef}

package/src/components/Toolbar/ToolbarFilter.tsx

@@ -130,26 +130,29 @@ class ToolbarFilter extends Component<ToolbarFilterProps, ToolbarFilterState> {
     ) : null;
 
     if (!_isExpanded && this.state.isMounted) {
+      const collapsedLabelPortalTarget = labelGroupContentRef?.current?.firstElementChild ?? null;
       return (
         <Fragment>
           {showToolbarItem && <ToolbarItem {...props}>{children}</ToolbarItem>}
-          {labelGroupContentRef?.current?.firstElementChild !== null &&
-            ReactDOM.createPortal(labelGroup, labelGroupContentRef.current.firstElementChild)}
+          {collapsedLabelPortalTarget !== null && ReactDOM.createPortal(labelGroup, collapsedLabelPortalTarget)}
         </Fragment>
       );
     }
 
     return (
       <ToolbarContentContext.Consumer>
-        {({ labelContainerRef }) => (
-          <Fragment>
-            {showToolbarItem && <ToolbarItem {...props}>{children}</ToolbarItem>}
-            {labelContainerRef.current && ReactDOM.createPortal(labelGroup, labelContainerRef.current)}
-            {expandableLabelContainerRef &&
-              expandableLabelContainerRef.current &&
-              ReactDOM.createPortal(labelGroup, expandableLabelContainerRef.current)}
-          </Fragment>
-        )}
+        {({ labelContainerRef }) => {
+          const labelContainer = labelContainerRef?.current ?? null;
+          return (
+            <Fragment>
+              {showToolbarItem && <ToolbarItem {...props}>{children}</ToolbarItem>}
+              {labelContainer !== null && ReactDOM.createPortal(labelGroup, labelContainer)}
+              {expandableLabelContainerRef &&
+                expandableLabelContainerRef.current &&
+                ReactDOM.createPortal(labelGroup, expandableLabelContainerRef.current)}
+            </Fragment>
+          );
+        }}
       </ToolbarContentContext.Consumer>
     );
   }

package/src/components/Toolbar/ToolbarGroup.tsx

@@ -23,7 +23,7 @@ export interface ToolbarGroupProps extends Omit<React.HTMLProps<HTMLDivElement>,
     | 'action-group-inline'
     | 'action-group-plain'
     | 'label-group';
-  /** Visibility at various breakpoints. */
+  /** Visibility at various width breakpoints. */
   visibility?: {
     default?: 'hidden' | 'visible';
     md?: 'hidden' | 'visible';
@@ -31,6 +31,14 @@ export interface ToolbarGroupProps extends Omit<React.HTMLProps<HTMLDivElement>,
     xl?: 'hidden' | 'visible';
     '2xl'?: 'hidden' | 'visible';
   };
+  /** Visibility at various height breakpoints. */
+  visibilityAtHeight?: {
+    default?: 'hidden' | 'visible';
+    md?: 'hidden' | 'visible';
+    lg?: 'hidden' | 'visible';
+    xl?: 'hidden' | 'visible';
+    '2xl'?: 'hidden' | 'visible';
+  };
   /** 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' | 'alignCenter';
@@ -178,6 +186,7 @@ class ToolbarGroupWithRef extends Component<ToolbarGroupProps> {
   render() {
     const {
       visibility,
+      visibilityAtHeight,
       align,
       alignItems,
       alignSelf,
@@ -195,7 +204,7 @@ class ToolbarGroupWithRef extends Component<ToolbarGroupProps> {
 
     return (
       <PageContext.Consumer>
-        {({ width, getBreakpoint }) => (
+        {({ width, getBreakpoint, height, getVerticalBreakpoint }) => (
           <div
             className={css(
               styles.toolbarGroup,
@@ -209,6 +218,7 @@ class ToolbarGroupWithRef extends Component<ToolbarGroupProps> {
                     | 'labelGroup'
                 ],
               formatBreakpointMods(visibility, styles, '', getBreakpoint(width)),
+              formatBreakpointMods(visibilityAtHeight, styles, '', getVerticalBreakpoint(height), true),
               formatBreakpointMods(align, styles, '', getBreakpoint(width)),
               formatBreakpointMods(gap, styles, '', getBreakpoint(width)),
               formatBreakpointMods(columnGap, styles, '', getBreakpoint(width)),

package/src/components/Toolbar/ToolbarItem.tsx

@@ -17,7 +17,7 @@ export interface ToolbarItemProps extends React.HTMLProps<HTMLDivElement> {
   className?: string;
   /** A type modifier which modifies spacing specifically depending on the type of item */
   variant?: ToolbarItemVariant | 'pagination' | 'label' | 'label-group' | 'separator' | 'expand-all';
-  /** Visibility at various breakpoints. */
+  /** Visibility at various width breakpoints. */
   visibility?: {
     default?: 'hidden' | 'visible';
     md?: 'hidden' | 'visible';
@@ -25,6 +25,14 @@ export interface ToolbarItemProps extends React.HTMLProps<HTMLDivElement> {
     xl?: 'hidden' | 'visible';
     '2xl'?: 'hidden' | 'visible';
   };
+  /** Visibility at various height breakpoints. */
+  visibilityAtHeight?: {
+    default?: 'hidden' | 'visible';
+    md?: 'hidden' | 'visible';
+    lg?: 'hidden' | 'visible';
+    xl?: 'hidden' | 'visible';
+    '2xl'?: 'hidden' | 'visible';
+  };
   /** 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' | 'alignCenter';
@@ -174,6 +182,7 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
   className,
   variant,
   visibility,
+  visibilityAtHeight,
   gap,
   columnGap,
   rowGap,
@@ -202,7 +211,7 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
 
   return (
     <PageContext.Consumer>
-      {({ width, getBreakpoint }) => (
+      {({ width, getBreakpoint, height, getVerticalBreakpoint }) => (
         <div
           className={css(
             styles.toolbarItem,
@@ -211,6 +220,7 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
             isAllExpanded && styles.modifiers.expanded,
             isOverflowContainer && styles.modifiers.overflowContainer,
             formatBreakpointMods(visibility, styles, '', getBreakpoint(width)),
+            formatBreakpointMods(visibilityAtHeight, styles, '', getVerticalBreakpoint(height), true),
             formatBreakpointMods(align, styles, '', getBreakpoint(width)),
             formatBreakpointMods(gap, styles, '', getBreakpoint(width)),
             formatBreakpointMods(columnGap, styles, '', getBreakpoint(width)),

package/src/components/Toolbar/ToolbarLabelGroupContent.tsx

@@ -1,7 +1,6 @@
 import { Component, RefObject } from 'react';
 import styles from '@patternfly/react-styles/css/components/Toolbar/toolbar';
 import { css } from '@patternfly/react-styles';
-import { canUseDOM } from '../../helpers/util';
 
 import { ToolbarItem } from './ToolbarItem';
 import { Button } from '../Button';
@@ -32,7 +31,7 @@ export interface ToolbarLabelGroupContentProps extends React.HTMLProps<HTMLDivEl
   customLabelGroupContent?: React.ReactNode;
 }
 
-class ToolbarLabelGroupContent extends Component<ToolbarLabelGroupContentProps> {
+class ToolbarLabelGroupContent extends Component<ToolbarLabelGroupContentProps, { viewportWidth: number }> {
   static displayName = 'ToolbarLabelGroupContent';
   static defaultProps: PickOptional<ToolbarLabelGroupContentProps> = {
     clearFiltersButtonText: 'Clear all filters',
@@ -40,6 +39,23 @@ class ToolbarLabelGroupContent extends Component<ToolbarLabelGroupContentProps>
     numberOfFiltersText: (numberOfFilters: number) => `${numberOfFilters} filters applied`
   };
 
+  state = {
+    viewportWidth: 1200
+  };
+
+  handleResize = () => {
+    this.setState({ viewportWidth: window.innerWidth });
+  };
+
+  componentDidMount() {
+    this.handleResize();
+    window.addEventListener('resize', this.handleResize);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.handleResize);
+  }
+
   render() {
     const {
       className,
@@ -62,9 +78,8 @@ class ToolbarLabelGroupContent extends Component<ToolbarLabelGroupContentProps>
     let collapseListedFilters = false;
     if (collapseListedFiltersBreakpoint === 'all') {
       collapseListedFilters = true;
-    } else if (canUseDOM) {
-      collapseListedFilters =
-        (canUseDOM ? window.innerWidth : 1200) < globalBreakpoints[collapseListedFiltersBreakpoint];
+    } else if (collapseListedFiltersBreakpoint) {
+      collapseListedFilters = this.state.viewportWidth < globalBreakpoints[collapseListedFiltersBreakpoint];
     }
 
     const isHidden = numberOfFilters === 0 || isExpanded;

package/src/components/Toolbar/ToolbarToggleGroup.tsx

@@ -6,7 +6,7 @@ import { ToolbarGroupProps } from './ToolbarGroup';
 import { ToolbarContext, ToolbarContentContext } from './ToolbarUtils';
 import { Button } from '../Button';
 import globalBreakpointLg from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_lg';
-import { formatBreakpointMods, toCamel, canUseDOM } from '../../helpers/util';
+import { formatBreakpointMods, toCamel } from '../../helpers/util';
 import { PageContext } from '../Page/PageContext';
 import { ToolbarExpandableContent } from './ToolbarExpandableContent';
 
@@ -157,7 +157,7 @@ class ToolbarToggleGroup extends Component<ToolbarToggleGroupProps> {
   expandableContentRef = createRef<HTMLDivElement>();
 
   isContentPopup = () => {
-    const viewportSize = canUseDOM ? window.innerWidth : 1200;
+    const viewportSize = typeof window !== 'undefined' ? window.innerWidth : 1200;
     const lgBreakpointValue = parseInt(globalBreakpointLg.value);
     return viewportSize < lgBreakpointValue;
   };

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

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { createElement, Fragment } from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 
@@ -54,7 +54,7 @@ describe('Toolbar', () => {
         </ToolbarContent>
       </Toolbar>
     );
-    expect(screen.getByTestId('toolbar')).not.toHaveClass('pf-m-no-padding');
+    expect(screen.getByTestId('toolbar')).not.toHaveClass(styles.modifiers.noPadding);
   });
 
   it(`should render toolbar with ${styles.modifiers.noPadding} class when hasNoPadding is true`, () => {
@@ -205,4 +205,98 @@ describe('Toolbar', () => {
       });
     });
   });
+
+  const bps = ['default', 'md', 'lg', 'xl', '2xl'] as const;
+  describe.each(bps)(`ToolbarContent visibilityAtHeight`, (bp) => {
+    it(`Applies correct visible class at ${bp}`, () => {
+      render(
+        <ToolbarContent data-testid="toolbarcontent" visibilityAtHeight={{ [bp]: 'visible' }}>
+          Test
+        </ToolbarContent>
+      );
+
+      if (bp !== 'default') {
+        expect(screen.getByTestId('toolbarcontent')).toHaveClass(`pf-m-visible-on-${bp}-height`);
+      }
+    });
+
+    it(`Applies correct hidden class at ${bp}`, () => {
+      render(
+        <ToolbarContent data-testid="toolbarcontent" visibilityAtHeight={{ [bp]: 'hidden' }}>
+          Test
+        </ToolbarContent>
+      );
+
+      const expectedClass = bp === 'default' ? 'pf-m-hidden' : `pf-m-hidden-on-${bp}-height`;
+      expect(screen.getByTestId('toolbarcontent')).toHaveClass(expectedClass);
+    });
+  });
+
+  it(`Renders toolbar without ${styles.modifiers.vertical} by default`, () => {
+    render(
+      <Toolbar data-testid="Toolbar-test-is-not-vertical">
+        <ToolbarContent>
+          <ToolbarItem>Test</ToolbarItem>
+          <ToolbarItem>Test 2</ToolbarItem>
+          <ToolbarItem variant="separator" />
+          <ToolbarItem>Test 3 </ToolbarItem>
+        </ToolbarContent>
+      </Toolbar>
+    );
+    expect(screen.getByTestId('Toolbar-test-is-not-vertical')).not.toHaveClass(styles.modifiers.vertical);
+  });
+
+  it(`Renders with class ${styles.modifiers.vertical} when isVertical is true`, () => {
+    const items = (
+      <Fragment>
+        <ToolbarItem>Test</ToolbarItem>
+        <ToolbarItem>Test 2</ToolbarItem>
+        <ToolbarItem variant="separator" />
+        <ToolbarItem>Test 3 </ToolbarItem>
+      </Fragment>
+    );
+
+    render(
+      <Toolbar id="toolbar" isVertical data-testid="Toolbar-test-is-vertical">
+        <ToolbarContent>{items}</ToolbarContent>
+      </Toolbar>
+    );
+
+    expect(screen.getByTestId('Toolbar-test-is-vertical')).toHaveClass(styles.modifiers.vertical);
+  });
+
+  it(`Does not add ${styles.modifiers.stickyBase} and ${styles.modifiers.stickyStuck} classes by default`, () => {
+    render(
+      <Toolbar data-testid="toolbar-sticky-default">
+        <ToolbarContent>
+          <ToolbarItem>Test</ToolbarItem>
+        </ToolbarContent>
+      </Toolbar>
+    );
+    const el = screen.getByTestId('toolbar-sticky-default');
+    expect(el).not.toHaveClass(styles.modifiers.stickyBase);
+    expect(el).not.toHaveClass(styles.modifiers.stickyStuck);
+  });
+
+  it(`Adds ${styles.modifiers.stickyBase} when isStickyBase is true`, () => {
+    render(
+      <Toolbar data-testid="toolbar-sticky-base" isStickyBase>
+        <ToolbarContent>
+          <ToolbarItem>Test</ToolbarItem>
+        </ToolbarContent>
+      </Toolbar>
+    );
+    expect(screen.getByTestId('toolbar-sticky-base')).toHaveClass(styles.modifiers.stickyBase);
+  });
+
+  it(`Adds ${styles.modifiers.stickyStuck} when isStickyStuck is true`, () => {
+    render(
+      <Toolbar data-testid="toolbar-sticky-stuck" isStickyStuck>
+        <ToolbarContent>
+          <ToolbarItem>Test</ToolbarItem>
+        </ToolbarContent>
+      </Toolbar>
+    );
+    expect(screen.getByTestId('toolbar-sticky-stuck')).toHaveClass(styles.modifiers.stickyStuck);
+  });
 });

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

@@ -0,0 +1,54 @@
+import { createRef } from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import { ToolbarContext } from '../ToolbarUtils';
+import { ToolbarFilter } from '../ToolbarFilter';
+
+describe('ToolbarFilter', () => {
+  it('renders when ToolbarFilter is not under Toolbar or ToolbarContent (default context)', () => {
+    const deleteLabel = jest.fn();
+    const deleteLabelGroup = jest.fn();
+
+    expect(() =>
+      render(
+        <ToolbarFilter
+          labels={['one']}
+          deleteLabel={deleteLabel}
+          deleteLabelGroup={deleteLabelGroup}
+          categoryName="Status"
+        >
+          filter content
+        </ToolbarFilter>
+      )
+    ).not.toThrow();
+
+    expect(screen.getByText('filter content')).toBeInTheDocument();
+  });
+
+  it('does not throw when labelGroupContentRef.current is still null while collapsed (listed filters)', () => {
+    const labelGroupContentRef = createRef<HTMLDivElement>();
+    expect(labelGroupContentRef.current).toBeNull();
+
+    expect(() =>
+      render(
+        <ToolbarContext.Provider
+          value={{
+            isExpanded: false,
+            toggleIsExpanded: () => {},
+            labelGroupContentRef,
+            updateNumberFilters: () => {},
+            numberOfFilters: 0,
+            clearAllFilters: () => {}
+          }}
+        >
+          <ToolbarFilter labels={['one']} deleteLabel={jest.fn()} deleteLabelGroup={jest.fn()} categoryName="Status">
+            filter content
+          </ToolbarFilter>
+        </ToolbarContext.Provider>
+      )
+    ).not.toThrow();
+
+    expect(screen.getByText('filter content')).toBeInTheDocument();
+  });
+});

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

@@ -37,4 +37,30 @@ describe('ToolbarGroup', () => {
       });
     });
   });
+
+  const bps = ['default', 'md', 'lg', 'xl', '2xl'] as const;
+  describe.each(bps)(`ToolbarGroup visibilityAtHeight`, (bp) => {
+    it(`Applies correct visible class at ${bp}`, () => {
+      render(
+        <ToolbarGroup data-testid="toolbargroup" visibilityAtHeight={{ [bp]: 'visible' }}>
+          Test
+        </ToolbarGroup>
+      );
+
+      if (bp !== 'default') {
+        expect(screen.getByTestId('toolbargroup')).toHaveClass(`pf-m-visible-on-${bp}-height`);
+      }
+    });
+
+    it(`Applies correct hidden class at ${bp}`, () => {
+      render(
+        <ToolbarGroup data-testid="toolbargroup" visibilityAtHeight={{ [bp]: 'hidden' }}>
+          Test
+        </ToolbarGroup>
+      );
+
+      const expectedClass = bp === 'default' ? 'pf-m-hidden' : `pf-m-hidden-on-${bp}-height`;
+      expect(screen.getByTestId('toolbargroup')).toHaveClass(expectedClass);
+    });
+  });
 });