feat(toolbar): implement container query option

Author: srambach

.claude/settings.local.json

@@ -0,0 +1,8 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(npm run lint)",
+      "Bash(npm run lint:*)"
+    ]
+  }
+}

packages/react-core/src/components/Toolbar/Toolbar.tsx

@@ -2,11 +2,12 @@ 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 { ToolbarContext, globalBreakpoints, containerBreakpoints } from './ToolbarUtils';
 import { ToolbarLabelGroupContent } from './ToolbarLabelGroupContent';
 import { formatBreakpointMods, canUseDOM } from '../../helpers/util';
 import { getDefaultOUIAId, getOUIAProps, OUIAProps } from '../../helpers';
 import { PageContext } from '../Page/PageContext';
+import { getResizeObserver } from '../../helpers/resizeObserver';
 
 export enum ToolbarColorVariant {
   default = 'default',
@@ -59,6 +60,10 @@ export interface ToolbarProps extends React.HTMLProps<HTMLDivElement>, OUIAProps
   colorVariant?: ToolbarColorVariant | 'default' | 'no-background' | 'primary' | 'secondary';
   /** Flag indicating the toolbar padding is removed */
   hasNoPadding?: boolean;
+  /** Use container queries instead of viewport media queries for responsive behavior */
+  useContainerQuery?: boolean;
+  /** Breakpoint for container queries. Only applies when useContainerQuery is true. */
+  containerQueryBreakpoint?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 }
 
 export interface ToolbarState {
@@ -69,6 +74,8 @@ export interface ToolbarState {
   filterInfo: FilterInfo;
   /** Used to keep track of window width so we can collapse expanded content when window is resizing */
   windowWidth: number;
+  /** Used to keep track of container width so we can collapse expanded content when container is resizing */
+  containerWidth: number;
   ouiaStateId: string;
 }
 
@@ -79,12 +86,15 @@ interface FilterInfo {
 class Toolbar extends Component<ToolbarProps, ToolbarState> {
   static displayName = 'Toolbar';
   labelGroupContentRef = createRef<HTMLDivElement>();
+  toolbarRef = createRef<HTMLDivElement>();
+  observer: any = () => {};
   staticFilterInfo = {};
   hasNoPadding = false;
   state = {
     isManagedToggleExpanded: false,
     filterInfo: {},
     windowWidth: canUseDOM ? window.innerWidth : 1200,
+    containerWidth: 0,
     ouiaStateId: getDefaultOUIAId(Toolbar.displayName)
   };
 
@@ -105,15 +115,58 @@ class Toolbar extends Component<ToolbarProps, ToolbarState> {
     }
   };
 
+  closeExpandableContentOnContainerResize = () => {
+    if (this.toolbarRef.current && this.toolbarRef.current.clientWidth) {
+      const newWidth = this.toolbarRef.current.clientWidth;
+
+      if (newWidth !== this.state.containerWidth) {
+        // If expanded and container is wide enough for inline display at the specific breakpoint, close it
+        const specificBreakpoint = this.props.containerQueryBreakpoint || 'lg';
+
+        // Use container breakpoints when using container queries, otherwise use global breakpoints
+        let isWideEnoughForInline: boolean;
+        if (this.props.useContainerQuery) {
+          // Handle 'sm' case for container breakpoints
+          const breakpointKey = specificBreakpoint === 'sm' ? 'sm' : specificBreakpoint;
+          isWideEnoughForInline = newWidth >= containerBreakpoints[breakpointKey];
+        } else {
+          // Handle 'sm' case - map to 'md' since globalBreakpoints doesn't have 'sm'
+          const breakpointKey = specificBreakpoint === 'sm' ? 'md' : specificBreakpoint;
+          isWideEnoughForInline = newWidth >= globalBreakpoints[breakpointKey];
+        }
+
+        if (this.state.isManagedToggleExpanded && isWideEnoughForInline) {
+          this.setState(() => ({
+            isManagedToggleExpanded: false,
+            containerWidth: newWidth
+          }));
+        } else {
+          // Just update width without closing
+          this.setState(() => ({
+            containerWidth: newWidth
+          }));
+        }
+      }
+    }
+  };
+
   componentDidMount() {
     if (this.isToggleManaged() && canUseDOM) {
-      window.addEventListener('resize', this.closeExpandableContent);
+      if (this.props.useContainerQuery && this.toolbarRef.current) {
+        this.observer = getResizeObserver(this.toolbarRef.current, this.closeExpandableContentOnContainerResize, true);
+      } else {
+        window.addEventListener('resize', this.closeExpandableContent);
+      }
     }
   }
 
   componentWillUnmount() {
     if (this.isToggleManaged() && canUseDOM) {
-      window.removeEventListener('resize', this.closeExpandableContent);
+      if (this.props.useContainerQuery) {
+        this.observer();
+      } else {
+        window.removeEventListener('resize', this.closeExpandableContent);
+      }
     }
   }
 
@@ -147,6 +200,8 @@ class Toolbar extends Component<ToolbarProps, ToolbarState> {
       numberOfFiltersText,
       customLabelGroupContent,
       colorVariant = ToolbarColorVariant.default,
+      useContainerQuery,
+      containerQueryBreakpoint,
       ...props
     } = this.props;
 
@@ -167,13 +222,27 @@ class Toolbar extends Component<ToolbarProps, ToolbarState> {
               isFullHeight && styles.modifiers.fullHeight,
               isStatic && styles.modifiers.static,
               isSticky && styles.modifiers.sticky,
+              useContainerQuery && !containerQueryBreakpoint && styles.modifiers.container,
+              useContainerQuery &&
+                containerQueryBreakpoint &&
+                ((): string => {
+                  const breakpointClassMap: Record<string, string> = {
+                    '2xl': styles.modifiers.container_2xl,
+                    sm: styles.modifiers.containerSm,
+                    md: styles.modifiers.containerMd,
+                    lg: styles.modifiers.containerLg,
+                    xl: styles.modifiers.containerXl
+                  };
+                  return breakpointClassMap[containerQueryBreakpoint] || '';
+                })(),
               formatBreakpointMods(inset, styles, '', getBreakpoint(width)),
               colorVariant === 'primary' && styles.modifiers.primary,
               colorVariant === 'secondary' && styles.modifiers.secondary,
               colorVariant === 'no-background' && styles.modifiers.noBackground,
               className
             )}
             id={randomId}
+            ref={this.toolbarRef}
             {...getOUIAProps(Toolbar.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId)}
             {...props}
           >
@@ -188,7 +257,8 @@ class Toolbar extends Component<ToolbarProps, ToolbarState> {
                 clearFiltersButtonText,
                 showClearFiltersButton,
                 toolbarId: randomId,
-                customLabelGroupContent
+                customLabelGroupContent,
+                useContainerQuery
               }}
             >
               {children}

packages/react-core/src/components/Toolbar/ToolbarToggleGroup.tsx

@@ -191,7 +191,7 @@ class ToolbarToggleGroup extends Component<ToolbarToggleGroupProps> {
       <PageContext.Consumer>
         {({ width, getBreakpoint }) => (
           <ToolbarContext.Consumer>
-            {({ toggleIsExpanded: managedOnToggle }) => {
+            {({ toggleIsExpanded: managedOnToggle, useContainerQuery }) => {
               const _onToggle = onToggle !== undefined ? onToggle : managedOnToggle;
 
               return (
@@ -260,7 +260,12 @@ class ToolbarToggleGroup extends Component<ToolbarToggleGroupProps> {
                                 | 'actionGroupPlain'
                                 | 'labelGroup'
                             ],
-                          formatBreakpointMods(breakpointMod, styles, '', getBreakpoint(width)),
+                          formatBreakpointMods(
+                            breakpointMod,
+                            styles,
+                            '',
+                            useContainerQuery ? undefined : getBreakpoint(width)
+                          ),
                           formatBreakpointMods(visibility, styles, '', getBreakpoint(width)),
                           formatBreakpointMods(gap, styles, '', getBreakpoint(width)),
                           formatBreakpointMods(columnGap, styles, '', getBreakpoint(width)),

packages/react-core/src/components/Toolbar/ToolbarUtils.tsx

@@ -15,6 +15,7 @@ export interface ToolbarContextProps {
   showClearFiltersButton?: boolean;
   toolbarId?: string;
   customLabelGroupContent?: React.ReactNode;
+  useContainerQuery?: boolean;
 }
 
 export const ToolbarContext = createContext<ToolbarContextProps>({
@@ -23,7 +24,8 @@ export const ToolbarContext = createContext<ToolbarContextProps>({
   labelGroupContentRef: null,
   updateNumberFilters: () => {},
   numberOfFilters: 0,
-  clearAllFilters: () => {}
+  clearAllFilters: () => {},
+  useContainerQuery: false
 });
 
 interface ToolbarContentContextProps {
@@ -49,3 +51,12 @@ export const globalBreakpoints = {
   xl: parseInt(globalBreakpointXl.value) * 16,
   '2xl': parseInt(globalBreakpoint2xl.value) * 16
 };
+
+// Container query breakpoints match CSS container query values
+export const containerBreakpoints = {
+  sm: 286,
+  md: 478,
+  lg: 702,
+  xl: 992, // You may need to verify this value
+  '2xl': 1200 // You may need to verify this value
+};

packages/react-core/src/components/Toolbar/examples/Toolbar.css

@@ -0,0 +1,11 @@
+.ws-react-c-toolbar-resize-container {
+  resize: horizontal;
+  overflow: auto;
+  border: var(--pf-t--global--border--width--extra-strong) dashed var(--pf-t--global--border--color--default);
+  /* padding: var(--pf-t--global--spacer--md); */
+  width: 800px;
+  min-width: 300px;
+  max-width: 100%;
+  height: 15em;
+}
+

packages/react-core/src/components/Toolbar/examples/Toolbar.md

@@ -5,6 +5,7 @@ propComponents: ['Toolbar', 'ToolbarContent', 'ToolbarGroup', 'ToolbarItem', 'To
 section: components
 ---
 
+import './Toolbar.css';
 import { Fragment, useState } from 'react';
 
 import EditIcon from '@patternfly/react-icons/dist/esm/icons/edit-icon';
@@ -113,6 +114,26 @@ When all of a toolbar's required elements cannot fit in a single line, you can s
 
 ```
 
+## Examples with container queries
+
+Container queries allow the toolbar to respond to its container size rather than the viewport size. This is useful when toolbars appear in sidebars, cards, modals, or other constrained spaces where you want the toolbar to adapt to its container's width independently from the viewport.
+
+### Basic container query usage
+
+The toolbar adapts based on its container width instead of the viewport width. Resize the container to see the responsive behavior.
+
+```ts file="./ToolbarContainerQueryBasic.tsx"
+
+```
+
+### Container query breakpoints
+
+Use `containerQueryBreakpoint` to collapse the toolbar at different container widths. 
+
+```ts file="./ToolbarContainerQueryBreakpoints.tsx"
+
+```
+
 ## Examples with spacers and wrapping
 You may adjust the space between toolbar items to arrange them into groups. Read our spacers documentation to learn more about using spacers.