@patternfly/react-core 6.7.0-prerelease.2 → 6.7.0-prerelease.4

package/src/components/Toolbar/Toolbar.tsx

@@ -3,7 +3,8 @@ import styles from '@patternfly/react-styles/css/components/Toolbar/toolbar';
 import { css } from '@patternfly/react-styles';
 import { ToolbarContext } from './ToolbarUtils';
 import { ToolbarLabelGroupContent } from './ToolbarLabelGroupContent';
-import { formatBreakpointMods, canUseDOM } from '../../helpers/util';
+import { formatBreakpointMods, canUseDOM, getBreakpoint } from '../../helpers/util';
+import { getResizeObserver } from '../../helpers/resizeObserver';
 import { getOUIAProps, OUIAProps } from '../../helpers';
 import { SSRSafeIds } from '../../helpers/SSRSafeIds/SSRSafeIds';
 import { PageContext } from '../Page/PageContext';
@@ -34,6 +35,8 @@ export interface ToolbarProps extends React.HTMLProps<HTMLDivElement>, OUIAProps
   children?: React.ReactNode;
   /** Id of the data toolbar */
   id?: string;
+  /** Flag indicating if the toolbar is a container for CSS container queries */
+  isContainer?: boolean;
   /** Flag indicating the toolbar height should expand to the full height of the container */
   isFullHeight?: boolean;
   /** Flag indicating the toolbar is static */
@@ -84,6 +87,9 @@ interface FilterInfo {
 class Toolbar extends Component<ToolbarProps, ToolbarState> {
   static displayName = 'Toolbar';
   labelGroupContentRef = createRef<HTMLDivElement>();
+  toolbarRef = createRef<HTMLDivElement>();
+  resizeObserver: () => void = () => {};
+  containerBreakpoint: ReturnType<typeof getBreakpoint>;
   staticFilterInfo = {};
   hasNoPadding = false;
   state = {
@@ -100,8 +106,8 @@ class Toolbar extends Component<ToolbarProps, ToolbarState> {
     }));
   };
 
-  closeExpandableContent = (e: any) => {
-    if (e.target.innerWidth !== this.state.windowWidth) {
+  closeExpandableContent = (e?: any) => {
+    if (e && e.target.innerWidth !== this.state.windowWidth) {
       this.setState(() => ({
         isManagedToggleExpanded: false,
         windowWidth: e.target.innerWidth
@@ -109,19 +115,58 @@ class Toolbar extends Component<ToolbarProps, ToolbarState> {
     }
   };
 
+  closeExpandableContentOnContainerResize = () => {
+    const containerWidth = this.toolbarRef.current?.clientWidth;
+    if (!containerWidth) {
+      return;
+    }
+
+    const breakpoint = getBreakpoint(containerWidth);
+    const isInitialMeasurement = this.containerBreakpoint === undefined;
+    if (breakpoint !== this.containerBreakpoint) {
+      this.containerBreakpoint = breakpoint;
+      if (!isInitialMeasurement && this.state.isManagedToggleExpanded) {
+        this.setState({ isManagedToggleExpanded: false });
+      }
+    }
+  };
+
+  setupResizeHandling = () => {
+    if (!this.isToggleManaged() || !canUseDOM) {
+      return;
+    }
+
+    this.containerBreakpoint = undefined;
+    const reference = this.props.isContainer ? this.toolbarRef.current : undefined;
+    const handler = this.props.isContainer ? this.closeExpandableContentOnContainerResize : this.closeExpandableContent;
+
+    this.resizeObserver = getResizeObserver(reference, handler, true);
+  };
+
+  cleanupResizeHandling = () => {
+    this.resizeObserver();
+    this.resizeObserver = () => {};
+  };
+
   componentDidMount() {
     if (canUseDOM) {
       this.setState({ windowWidth: window.innerWidth });
     }
-    if (this.isToggleManaged() && canUseDOM) {
-      window.addEventListener('resize', this.closeExpandableContent);
+    this.setupResizeHandling();
+  }
+
+  componentDidUpdate(prevProps: ToolbarProps) {
+    const wasToggleManaged = !(prevProps.isExpanded || !!prevProps.toggleIsExpanded);
+    const isToggleManaged = this.isToggleManaged();
+
+    if (prevProps.isContainer !== this.props.isContainer || wasToggleManaged !== isToggleManaged) {
+      this.cleanupResizeHandling();
+      this.setupResizeHandling();
     }
   }
 
   componentWillUnmount() {
-    if (this.isToggleManaged() && canUseDOM) {
-      window.removeEventListener('resize', this.closeExpandableContent);
-    }
+    this.cleanupResizeHandling();
   }
 
   updateNumberFilters = (categoryName: string, numberOfFilters: number) => {
@@ -146,6 +191,7 @@ class Toolbar extends Component<ToolbarProps, ToolbarState> {
       toggleIsExpanded,
       className,
       children,
+      isContainer,
       isFullHeight,
       isStatic,
       isStickyBase,
@@ -169,56 +215,73 @@ class Toolbar extends Component<ToolbarProps, ToolbarState> {
 
     return (
       <PageContext.Consumer>
-        {({ width, getBreakpoint }) => (
-          <div
-            className={css(
-              styles.toolbar,
-              hasNoPadding && styles.modifiers.noPadding,
-              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,
-              colorVariant === 'no-background' && styles.modifiers.noBackground,
-              className
-            )}
-            id={randomId}
-            {...getOUIAProps(Toolbar.displayName, ouiaId !== undefined ? ouiaId : generatedOuiaId)}
-            {...props}
-          >
-            <ToolbarContext.Provider
-              value={{
-                isExpanded,
-                toggleIsExpanded: isToggleManaged ? this.toggleIsExpanded : toggleIsExpanded,
-                labelGroupContentRef: this.labelGroupContentRef,
-                updateNumberFilters: this.updateNumberFilters,
-                numberOfFilters,
-                clearAllFilters,
-                clearFiltersButtonText,
-                showClearFiltersButton,
-                toolbarId: randomId,
-                customLabelGroupContent
-              }}
+        {(pageContext) => {
+          const toolbarContent = (
+            <div
+              className={css(
+                styles.toolbar,
+                hasNoPadding && styles.modifiers.noPadding,
+                isContainer && styles.modifiers.container,
+                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,
+                  '',
+                  !isContainer ? pageContext.getBreakpoint(pageContext.width) : undefined
+                ),
+                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 : generatedOuiaId)}
+              {...props}
             >
-              {children}
-              <ToolbarLabelGroupContent
-                isExpanded={isExpanded}
-                labelGroupContentRef={this.labelGroupContentRef}
-                clearAllFilters={clearAllFilters}
-                showClearFiltersButton={showClearFiltersButton}
-                clearFiltersButtonText={clearFiltersButtonText}
-                numberOfFilters={numberOfFilters}
-                numberOfFiltersText={numberOfFiltersText}
-                collapseListedFiltersBreakpoint={collapseListedFiltersBreakpoint}
-                customLabelGroupContent={customLabelGroupContent}
-              />
-            </ToolbarContext.Provider>
-          </div>
-        )}
+              <ToolbarContext.Provider
+                value={{
+                  isExpanded,
+                  toggleIsExpanded: isToggleManaged ? this.toggleIsExpanded : toggleIsExpanded,
+                  labelGroupContentRef: this.labelGroupContentRef,
+                  updateNumberFilters: this.updateNumberFilters,
+                  numberOfFilters,
+                  clearAllFilters,
+                  clearFiltersButtonText,
+                  showClearFiltersButton,
+                  toolbarId: randomId,
+                  customLabelGroupContent,
+                  isContainer,
+                  toolbarRef: this.toolbarRef
+                }}
+              >
+                {children}
+                <ToolbarLabelGroupContent
+                  isExpanded={isExpanded}
+                  labelGroupContentRef={this.labelGroupContentRef}
+                  clearAllFilters={clearAllFilters}
+                  showClearFiltersButton={showClearFiltersButton}
+                  clearFiltersButtonText={clearFiltersButtonText}
+                  numberOfFilters={numberOfFilters}
+                  numberOfFiltersText={numberOfFiltersText}
+                  collapseListedFiltersBreakpoint={collapseListedFiltersBreakpoint}
+                  customLabelGroupContent={customLabelGroupContent}
+                />
+              </ToolbarContext.Provider>
+            </div>
+          );
+
+          return isContainer ? (
+            <PageContext.Provider value={{ ...pageContext, width: null }}>{toolbarContent}</PageContext.Provider>
+          ) : (
+            toolbarContent
+          );
+        }}
       </PageContext.Consumer>
     );
   };

package/src/components/Toolbar/ToolbarItem.tsx

@@ -21,6 +21,7 @@ export interface ToolbarItemProps extends React.HTMLProps<HTMLDivElement> {
   /** Visibility at various width breakpoints. */
   visibility?: {
     default?: 'hidden' | 'visible';
+    sm?: 'hidden' | 'visible';
     md?: 'hidden' | 'visible';
     lg?: 'hidden' | 'visible';
     xl?: 'hidden' | 'visible';

package/src/components/Toolbar/ToolbarToggleGroup.tsx

@@ -3,12 +3,11 @@ import * as ReactDOM from 'react-dom';
 import styles from '@patternfly/react-styles/css/components/Toolbar/toolbar';
 import { css } from '@patternfly/react-styles';
 import { ToolbarGroupProps } from './ToolbarGroup';
-import { ToolbarContext, ToolbarContentContext } from './ToolbarUtils';
+import { globalBreakpoints, ToolbarContext, ToolbarContentContext } from './ToolbarUtils';
 import { Button } from '../Button';
-import globalBreakpointLg from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_lg';
 import { formatBreakpointMods, toCamel } from '../../helpers/util';
-import { PageContext } from '../Page/PageContext';
 import { ToolbarExpandableContent } from './ToolbarExpandableContent';
+import { PageContext } from '../Page/PageContext';
 
 export interface ToolbarToggleGroupProps extends ToolbarGroupProps {
   /** Flag indicating when toggle group is expanded for non-managed toolbar toggle groups. */
@@ -156,10 +155,9 @@ class ToolbarToggleGroup extends Component<ToolbarToggleGroupProps> {
   toggleRef = createRef<HTMLButtonElement>();
   expandableContentRef = createRef<HTMLDivElement>();
 
-  isContentPopup = () => {
-    const viewportSize = typeof window !== 'undefined' ? window.innerWidth : 1200;
-    const lgBreakpointValue = parseInt(globalBreakpointLg.value);
-    return viewportSize < lgBreakpointValue;
+  isContentPopup = (width?: number) => {
+    const size = width ?? (typeof window !== 'undefined' ? window.innerWidth : 1200);
+    return size < globalBreakpoints.lg;
   };
 
   render() {
@@ -191,7 +189,7 @@ class ToolbarToggleGroup extends Component<ToolbarToggleGroupProps> {
       <PageContext.Consumer>
         {({ width, getBreakpoint }) => (
           <ToolbarContext.Consumer>
-            {({ toggleIsExpanded: managedOnToggle }) => {
+            {({ toggleIsExpanded: managedOnToggle, isContainer, toolbarRef }) => {
               const _onToggle = onToggle !== undefined ? onToggle : managedOnToggle;
 
               return (
@@ -238,7 +236,10 @@ class ToolbarToggleGroup extends Component<ToolbarToggleGroupProps> {
                           onClick={_onToggle}
                           aria-label="Show Filters"
                           {...(_isExpanded && { 'aria-expanded': true })}
-                          aria-haspopup={_isExpanded && this.isContentPopup()}
+                          aria-haspopup={
+                            _isExpanded &&
+                            this.isContentPopup(isContainer ? toolbarRef?.current?.clientWidth : undefined)
+                          }
                           aria-controls={_isExpanded ? expandableContentId : undefined}
                           ref={this.toggleRef}
                           icon={toggleIcon}

package/src/components/Toolbar/ToolbarUtils.tsx

@@ -15,6 +15,10 @@ export interface ToolbarContextProps {
   showClearFiltersButton?: boolean;
   toolbarId?: string;
   customLabelGroupContent?: React.ReactNode;
+  /** Flag indicating if the toolbar is a container */
+  isContainer?: boolean;
+  /** Ref to the toolbar root element */
+  toolbarRef?: RefObject<HTMLDivElement | null>;
 }
 
 export const ToolbarContext = createContext<ToolbarContextProps>({

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

@@ -299,4 +299,42 @@ describe('Toolbar', () => {
     );
     expect(screen.getByTestId('toolbar-sticky-stuck')).toHaveClass(styles.modifiers.stickyStuck);
   });
+
+  it('renders the container modifier when isContainer is true', () => {
+    render(<Toolbar isContainer data-testid="toolbar-container" />);
+
+    expect(screen.getByTestId('toolbar-container')).toHaveClass(styles.modifiers.container);
+  });
+
+  it('renders all responsive visibility modifiers', () => {
+    render(<ToolbarItem data-testid="toolbar-item" visibility={{ md: 'hidden', xl: 'visible' }} />);
+
+    const item = screen.getByTestId('toolbar-item');
+
+    expect(item).toHaveClass('pf-m-hidden-on-md');
+    expect(item).toHaveClass('pf-m-visible-on-xl');
+  });
+
+  it('renders all responsive row wrap modifiers', () => {
+    render(<ToolbarContent data-testid="toolbar-content" rowWrap={{ md: 'nowrap', xl: 'wrap' }} />);
+
+    const contentSection = screen.getByTestId('toolbar-content').querySelector('div');
+
+    expect(contentSection).toHaveClass('pf-m-nowrap-on-md');
+    expect(contentSection).toHaveClass('pf-m-wrap-on-xl');
+  });
+
+  it('renders the toggle group breakpoint modifier', () => {
+    render(
+      <Toolbar>
+        <ToolbarContent>
+          <ToolbarToggleGroup data-testid="toolbar-toggle-group" breakpoint="xl" toggleIcon={<span />}>
+            Content
+          </ToolbarToggleGroup>
+        </ToolbarContent>
+      </Toolbar>
+    );
+
+    expect(screen.getByTestId('toolbar-toggle-group')).toHaveClass('pf-m-show-on-xl');
+  });
 });

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

@@ -1,5 +1,6 @@
 import { Fragment } from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import { ToolbarToggleGroup } from '../ToolbarToggleGroup';
 import { Toolbar } from '../Toolbar';
 import { ToolbarContent } from '../ToolbarContent';
@@ -25,4 +26,24 @@ describe('ToolbarToggleGroup', () => {
 
     expect(myMock).toHaveBeenCalled();
   });
+
+  it('sets aria-haspopup when expandable content is a popup in a narrow toolbar container', () => {
+    const clientWidthMock = jest.spyOn(HTMLElement.prototype, 'clientWidth', 'get').mockReturnValue(600);
+
+    render(
+      <Toolbar isContainer>
+        <ToolbarContent>
+          <ToolbarToggleGroup breakpoint="lg" toggleIcon={<span />}>
+            Filter controls
+          </ToolbarToggleGroup>
+        </ToolbarContent>
+      </Toolbar>
+    );
+
+    const toggle = screen.getByRole('button', { name: 'Show Filters' });
+    fireEvent.click(toggle);
+
+    expect(toggle).toHaveAttribute('aria-haspopup', 'true');
+    clientWidthMock.mockRestore();
+  });
 });

package/src/components/Toolbar/examples/Toolbar.md

@@ -6,6 +6,7 @@ section: components
 ---
 
 import { Fragment, useState, useLayoutEffect, useRef } from 'react';
+import './ToolbarContainerQuery.css';
 
 import EditIcon from '@patternfly/react-icons/dist/esm/icons/edit-icon';
 import RhUiCopyFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-fill-icon';
@@ -78,6 +79,21 @@ To change the background color of a toolbar, use the `colorVariant` property on
 
 ```
 
+## Responsive toolbar behavior
+
+Toolbar width-based responsive modifiers use `@container` CSS queries with the global PatternFly breakpoints. Responsive inset modifiers (via the `inset` property) are an exception and use viewport media queries. Insets are an exception and rely on viewport media queries.
+
+By default, the PatternFly CSS establishes the `container-name` property with a value of `pf-v6-contain-toolbar` on `:root`, so the breakpoints behave like viewport breakpoints.
+
+Alternatively, if another wrapping element creates a container in the CSS with a `container-name` property value of `pf-v6-contain-toolbar` and `container-type` value of `inline-size` or `size` , the breakpoints will apply to that container's width instead.
+
+### Toolbar as container
+Add `isContainer` to the toolbar so width-based modifiers respond to the toolbar's width. Resize the dashed box in this example to see items and groups show and hide at the global breakpoints.
+
+```ts file="./ToolbarContainerQuery.tsx"
+
+```
+
 ## Examples with toggle groups and filters
 
 The following examples use toggle groups to allow for more responsive and complex toolbars with multiple items and groups of items. To visualize responsive toolbar behavior in the following examples, resize the browser to a smaller screen width.

package/src/components/Toolbar/examples/ToolbarContainerQuery.css

@@ -0,0 +1,8 @@
+.toolbar-container-query-resize {
+  width: 100%;
+  min-width: 300px;
+  padding: var(--pf-t--global--spacer--sm);
+  overflow: auto;
+  resize: horizontal;
+  border: var(--pf-t--global--border--width--extra-strong) dashed var(--pf-t--global--border--color--default);
+}

package/src/components/Toolbar/examples/ToolbarContainerQuery.tsx

@@ -0,0 +1,35 @@
+import { Button, Toolbar, ToolbarContent, ToolbarGroup, ToolbarItem } from '@patternfly/react-core';
+
+export const ToolbarContainerQuery: React.FunctionComponent = () => (
+  <div className="toolbar-container-query-resize">
+    <Toolbar id="toolbar-container-query-example" isContainer>
+      <ToolbarContent>
+        <ToolbarItem visibility={{ md: 'hidden' }}>
+          <Button variant="secondary">Hide on md</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Item</Button>
+        </ToolbarItem>
+        <ToolbarItem visibility={{ default: 'hidden', sm: 'visible' }}>
+          <Button variant="secondary">Show on sm</Button>
+        </ToolbarItem>
+        <ToolbarGroup visibility={{ xl: 'hidden' }}>
+          <ToolbarItem>
+            <Button variant="secondary">Hide group on xl</Button>
+          </ToolbarItem>
+          <ToolbarItem>
+            <Button variant="secondary">Hide group on xl</Button>
+          </ToolbarItem>
+        </ToolbarGroup>
+        <ToolbarGroup visibility={{ default: 'hidden', lg: 'visible' }}>
+          <ToolbarItem>
+            <Button variant="secondary">Show group on lg</Button>
+          </ToolbarItem>
+          <ToolbarItem>
+            <Button variant="secondary">Show group on lg</Button>
+          </ToolbarItem>
+        </ToolbarGroup>
+      </ToolbarContent>
+    </Toolbar>
+  </div>
+);

package/src/demos/Compass/examples/CompassDockDemo.tsx

@@ -51,8 +51,7 @@ export const CompassDockDemo: React.FunctionComponent = () => {
   const [activeItem, setActiveItem] = useState<number>(0);
   const [isNavGroupExpanded, setIsNavGroupExpanded] = useState(false);
   const [isDockExpanded, setIsDockExpanded] = useState(false);
-  const [isDockTextExpanded, setIsDockTextExpanded] = useState(false);
-  const [isDockExpandableExpanded, setIsDockExpandableExpanded] = useState(false);
+  const [isDockOverlay, setIsDockOverlay] = useState(false);
   const [isMobile, setIsMobile] = useState(false);
 
   useEffect(() => {
@@ -69,7 +68,7 @@ export const CompassDockDemo: React.FunctionComponent = () => {
   }, []);
 
   const handleDockClickOutside = (event: MouseEvent) => {
-    if ((!isMobile && !isDockExpandableExpanded) || (isMobile && !isDockExpanded)) {
+    if (!isDockExpanded) {
       return;
     }
 
@@ -80,21 +79,22 @@ export const CompassDockDemo: React.FunctionComponent = () => {
       dockedMastheadElement &&
       !dockedMastheadElement.contains(event.target as Node) &&
       !dockedMobileMastheadToggle?.contains(event.target as Node) &&
-      (isDockExpandableExpanded || isDockExpanded)
+      isDockExpanded &&
+      (isDockOverlay || isMobile)
     ) {
-      setIsDockExpandableExpanded(false);
       setIsDockExpanded(false);
+      setIsDockOverlay(false);
     }
   };
 
   const handleDockKeydown = (_event: KeyboardEvent) => {
-    if ((!isMobile && !isDockExpandableExpanded) || (isMobile && !isDockExpanded)) {
+    if (!isDockExpanded) {
       return;
     }
 
     if (_event.key === 'Escape') {
-      setIsDockExpandableExpanded(false);
       setIsDockExpanded(false);
+      setIsDockOverlay(false);
     }
   };
 
@@ -106,18 +106,17 @@ export const CompassDockDemo: React.FunctionComponent = () => {
       window.removeEventListener('click', handleDockClickOutside);
       window.removeEventListener('keydown', handleDockKeydown);
     };
-  }, [isDockExpandableExpanded, isDockTextExpanded, isDockExpanded, isMobile]);
+  }, [isDockOverlay, isDockExpanded, isMobile]);
 
   const onNavSelect = (_event: React.FormEvent<HTMLInputElement>, selectedItem: NavOnSelectProps) => {
     typeof selectedItem.itemId === 'number' && setActiveItem(selectedItem.itemId);
 
-    if (!isMobile && isDockTextExpanded) {
+    if (isDockExpanded && !isDockOverlay && !isMobile) {
       return;
     }
 
-    setIsDockExpandableExpanded(false);
-    setIsDockTextExpanded(false);
     setIsDockExpanded(false);
+    setIsDockOverlay(false);
   };
 
   const navItem1Ref = useRef<HTMLAnchorElement>(null);
@@ -141,45 +140,29 @@ export const CompassDockDemo: React.FunctionComponent = () => {
   };
 
   const onToggleDock = () => {
-    if (isMobile) {
-      setIsDockExpanded(!isDockExpanded);
+    const nextState = !isDockExpanded;
+    if (!nextState) {
+      setIsDockOverlay(false);
+    }
+    setIsDockExpanded(nextState);
 
+    if (isMobile) {
       if (isDockExpanded) {
         setTimeout(() => {
           mobileToggleRef.current?.focus();
         }, 200);
       }
-    } else {
-      const nextDockTextExpanded = !isDockTextExpanded;
-      setIsDockTextExpanded(nextDockTextExpanded);
-
-      if (!nextDockTextExpanded) {
-        setIsDockExpandableExpanded(false);
-      }
-
-      if (isDockExpandableExpanded) {
-        setIsDockExpandableExpanded(false);
-        setIsDockTextExpanded(false);
-      }
     }
   };
 
   const onToggleNavGroup = (_event: React.MouseEvent<HTMLButtonElement>, isExpanded: boolean) => {
-    if (!isDockExpandableExpanded && !isDockTextExpanded && !isDockExpanded) {
+    if (!isDockExpanded) {
       setIsNavGroupExpanded(true);
+      setIsDockOverlay(true);
+      setIsDockExpanded(true);
     } else {
       setIsNavGroupExpanded(isExpanded);
     }
-
-    if (!isMobile) {
-      if (!isDockExpandableExpanded && !isDockTextExpanded) {
-        setIsDockExpandableExpanded(true);
-      }
-
-      if (!isDockTextExpanded) {
-        setIsDockTextExpanded(false);
-      }
-    }
   };
 
   const mobileTextLogo = (
@@ -315,7 +298,7 @@ export const CompassDockDemo: React.FunctionComponent = () => {
               isHamburger
               onClick={onToggleDock}
               aria-label="Global navigation"
-              isExpanded={isDockTextExpanded}
+              isExpanded={isDockExpanded}
             />
           </MastheadToggle>
           <MastheadBrand>
@@ -409,7 +392,7 @@ export const CompassDockDemo: React.FunctionComponent = () => {
                     </NavItem>
                   </NavList>
                 </Nav>
-                {!isDockTextExpanded && !isDockExpanded && !isDockExpandableExpanded && (
+                {!isDockExpanded && (
                   <>
                     <Tooltip aria="none" aria-live="off" triggerRef={navItem1Ref} content="System panel"></Tooltip>
                     <Tooltip aria="none" aria-live="off" triggerRef={navItem2Ref} content="Policy"></Tooltip>
@@ -426,7 +409,7 @@ export const CompassDockDemo: React.FunctionComponent = () => {
                 gap={{ default: 'gapNone', md: 'gapMd' }}
               >
                 <ToolbarItem>
-                  {isDockTextExpanded || isDockExpanded ? (
+                  {isDockExpanded ? (
                     <MenuToggle
                       ref={appsRef}
                       variant="plain"
@@ -451,7 +434,7 @@ export const CompassDockDemo: React.FunctionComponent = () => {
                   )}
                 </ToolbarItem>
                 <ToolbarItem>
-                  {isDockTextExpanded || isDockExpanded ? (
+                  {isDockExpanded ? (
                     <Button ref={settingsRef} aria-label="Settings" isSettings variant="plain" isDocked>
                       Settings
                     </Button>
@@ -464,7 +447,7 @@ export const CompassDockDemo: React.FunctionComponent = () => {
                   )}
                 </ToolbarItem>
                 <ToolbarItem>
-                  {isDockTextExpanded || isDockExpanded ? (
+                  {isDockExpanded ? (
                     <MenuToggle
                       ref={helpRef}
                       variant="plain"
@@ -514,8 +497,7 @@ export const CompassDockDemo: React.FunctionComponent = () => {
       masthead={mobileMasthead}
       dock={dockContent}
       isDockExpanded={isDockExpanded}
-      isDockExpandableExpanded={isDockExpandableExpanded}
-      isDockTextExpanded={isDockTextExpanded}
+      isDockOverlay={isDockOverlay}
       main={mainContent}
       backgroundSrcDark="/assets/images/pf-background.svg"
       backgroundSrcLight="/assets/images/pf-background.svg"

package/src/demos/Nav.md

@@ -87,15 +87,15 @@ To save space in the UI, you can use docked navigation to replace text-labeled n
 
 This demo includes the following features:
 
-1. A [page](/components/page) component with a docked layout, enabled via `variant="docked"`. Control the mobile overlay with `isDockExpanded` and the desktop label visibility with `isDockTextExpanded`.
+1. A [page](/components/page) component with a docked layout, enabled via `variant="docked"`. Control the expanded state of the dock with `isDockExpanded` and the set whether the dock is an overlay with `isDockOverlay`. The expanded docked nav is automatically an overlay in mobile.
 
 2. Two separate [masthead](/components/masthead) components:
    - **Horizontal mobile masthead**: Shown on small viewports using `display={{ default: 'inline' }}`, with a hamburger menu toggle button, brand logo, and action buttons that should be immediately visible to users.
    - **Vertical docked masthead**: Uses `variant="docked"` to create a thinner navigation sidebar with a hamburger menu toggle button, nav items, and action buttons.
 
-3. A [navigation](/components/navigation) component with `variant="docked"` and multiple `<NavItem>` components that must include both icons and text labels. To control text visibility, `isTextExpanded={isDockTextExpanded}` is passed to the `<Nav>` component.
+3. A [navigation](/components/navigation) component with `variant="docked"` and multiple `<NavItem>` components that must include both icons and text labels. To control text visibility, `isExpanded={isDockExpanded}` is passed to the `<Nav>` component.
 
-4. [Button](/components/button) and [menu toggle](/components/menus/menu-toggle) components, which use `isDocked` and `isTextExpanded` to toggle between icon-only and text+icon styles. When the nav is docked, and only icons are shown, [tooltips](/components/tooltip) must provide full text labels for the navigation items, buttons, and menu toggles.
+4. [Button](/components/button) and [menu toggle](/components/menus/menu-toggle) components, which use `isDocked` and `isExpanded` to toggle between icon-only and text+icon styles. When the nav is docked, and only icons are shown, [tooltips](/components/tooltip) must provide full text labels for the navigation items, buttons, and menu toggles.
 
 5. A `<MastheadLogo>` component that uses `isCompact` to show an icon-only logo when the dock is collapsed, and a full logo with text when expanded.