feat(Page,Compass,Nav,MenuToggle,Button): simplify docked nav expand props (#12661)

* feat(Page,Compass,Nav,MenuToggle,Button): simplify docked nav expand props

* wording

* update tests for props

* coderabbit feedback: update toggle to clear dockoverlay, update select to only void inline desktop, remove unused prop

* fix inline dock nav closing on outside click, fix overlay being toggled on secondary nav group toggle

* fix mobile docked nav click outside behavior, update nav docs wording

* update prop desc for isExpanded

* remove dupe test

* remove dupe bullet point

* update snap for ouia

Author: kmcfaul

packages/react-core/package.json

@@ -54,7 +54,7 @@
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.6.0-prerelease.49",
+    "@patternfly/patternfly": "6.6.0-prerelease.50",
     "case-anything": "^3.1.2",
     "css": "^3.0.0",
     "fs-extra": "^11.3.3"

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

@@ -99,7 +99,7 @@ export interface ButtonProps extends Omit<React.HTMLProps<HTMLButtonElement>, 'r
   tabIndex?: number;
   /** Adds danger styling to secondary or link button variants */
   isDanger?: boolean;
-  /** Flag indicating whether content the button controls is expanded or not. Required when isHamburger is true. */
+  /** Flag indicating whether content the button controls is expanded or not. Required when isHamburger is true. Applies additional expanded styling when isDocked is true. */
   isExpanded?: boolean;
   /** Flag indicating the button is a settings button. This will override the icon property. */
   isSettings?: boolean;
@@ -111,8 +111,6 @@ export interface ButtonProps extends Omit<React.HTMLProps<HTMLButtonElement>, 'r
   isCircle?: boolean;
   /** @beta Flag indicating the button is a docked variant button. For use in docked navigation. */
   isDocked?: boolean;
-  /** @beta Flag indicating the docked button should display text. Only applies when isDocked is true. */
-  isTextExpanded?: boolean;
   /** @hide Forwarded ref */
   innerRef?: React.Ref<any>;
   /** Adds count number to button */
@@ -139,7 +137,6 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
   hamburgerVariant,
   isCircle,
   isDocked = false,
-  isTextExpanded = false,
   spinnerAriaValueText,
   spinnerAriaLabelledBy,
   spinnerAriaLabel,
@@ -272,7 +269,7 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
         size === ButtonSize.lg && styles.modifiers.displayLg,
         isCircle && styles.modifiers.circle,
         isDocked && styles.modifiers.docked,
-        isDocked && isTextExpanded && styles.modifiers.textExpanded,
+        isDocked && isExpanded && styles.modifiers.expanded,
         className
       )}
       disabled={isButtonElement ? isDisabled : null}

packages/react-core/src/components/Button/__tests__/Button.test.tsx

@@ -566,34 +566,23 @@ describe('Dock variant', () => {
     expect(screen.getByRole('button')).not.toHaveClass(styles.modifiers.docked);
   });
 
-  test(`Renders with class ${styles.modifiers.textExpanded} when isTextExpanded = true and isDocked = true`, () => {
+  test(`Renders with class ${styles.modifiers.expanded} when isExpanded = true and isDocked = true`, () => {
     render(
-      <Button isTextExpanded isDocked>
+      <Button isExpanded isDocked>
         Text Expanded Button
       </Button>
     );
-    expect(screen.getByRole('button')).toHaveClass(styles.modifiers.textExpanded);
+    expect(screen.getByRole('button')).toHaveClass(styles.modifiers.expanded);
   });
 
-  test(`Does not render with class ${styles.modifiers.textExpanded} when isTextExpanded is not passed`, () => {
+  test(`Does not render with class ${styles.modifiers.expanded} when isExpanded is not passed`, () => {
     render(<Button>Button</Button>);
-    expect(screen.getByRole('button')).not.toHaveClass(styles.modifiers.textExpanded);
+    expect(screen.getByRole('button')).not.toHaveClass(styles.modifiers.expanded);
   });
 
-  test(`Does not render with class ${styles.modifiers.textExpanded} when isTextExpanded = true but isDocked is not passed`, () => {
-    render(<Button isTextExpanded>Text Expanded Button</Button>);
-    expect(screen.getByRole('button')).not.toHaveClass(styles.modifiers.textExpanded);
-  });
-
-  test(`Renders with both ${styles.modifiers.docked} and ${styles.modifiers.textExpanded} when both props are true`, () => {
-    render(
-      <Button isDocked isTextExpanded>
-        Dock Text Expanded Button
-      </Button>
-    );
-    const button = screen.getByRole('button');
-    expect(button).toHaveClass(styles.modifiers.docked);
-    expect(button).toHaveClass(styles.modifiers.textExpanded);
+  test(`Does not render with class ${styles.modifiers.expanded} when isExpanded = true but isDocked is not passed`, () => {
+    render(<Button isExpanded>Text Expanded Button</Button>);
+    expect(screen.getByRole('button')).not.toHaveClass(styles.modifiers.expanded);
   });
 });
 

packages/react-core/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`Renders basic button 1`] = `
   <button
     aria-label="basic button"
     class="pf-v6-c-button pf-m-primary"
-    data-ouia-component-id="OUIA-Generated-Button-primary-:r36:"
+    data-ouia-component-id="OUIA-Generated-Button-primary-:r35:"
     data-ouia-component-type="PF6/Button"
     data-ouia-safe="true"
     type="button"

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

@@ -10,14 +10,10 @@ export interface CompassProps extends React.HTMLProps<HTMLDivElement> {
   masthead?: React.ReactNode;
   /** Content of the docked navigation area of the layout */
   dock?: React.ReactNode;
-  /** @beta Flag indicating the docked nav is expanded on mobile. Only applies when dock content is passed. */
+  /** @beta Flag indicating the docked nav is expanded. Only applies when dock content is passed. */
   isDockExpanded?: boolean;
-  /** @beta Flag indicating a docked nav is expanded as an overlay, triggered by expandable nav children. Only applies when dock content is passed. */
-  isDockExpandableExpanded?: boolean;
-  /** @beta Flag indicating the docked nav should display text on desktop. Only applies when dock content is passed, and
-   * will handle toggling the visibility of the text in individual isDocked components.
-   */
-  isDockTextExpanded?: boolean;
+  /** @beta Flag indicating the docked nav should expand as an overlay instead of the default inline. */
+  isDockOverlay?: boolean;
   /** Content placed at the top of the compass layout */
   header?: React.ReactNode;
   /** Flag indicating if the header is expanded */
@@ -47,8 +43,7 @@ export const Compass: React.FunctionComponent<CompassProps> = ({
   masthead,
   dock,
   isDockExpanded,
-  isDockExpandableExpanded,
-  isDockTextExpanded,
+  isDockOverlay,
   header,
   isHeaderExpanded = true,
   sidebarStart,
@@ -72,8 +67,7 @@ export const Compass: React.FunctionComponent<CompassProps> = ({
           className={css(
             `${styles.compass}__dock`,
             isDockExpanded && styles.modifiers.expanded,
-            isDockExpandableExpanded && styles.modifiers.expandableExpanded,
-            isDockTextExpanded && styles.modifiers.textExpanded
+            isDockOverlay && styles.modifiers.overlay
           )}
         >
           {dock}

packages/react-core/src/components/Compass/__tests__/Compass.test.tsx

@@ -94,19 +94,9 @@ test('Renders footer without expanded class and with inert when isFooterExpanded
   expect(footerElement).toHaveAttribute('inert');
 });
 
-test(`Renders with ${styles.modifiers.expandableExpanded} class when isDockExpandableExpanded is true`, () => {
-  render(<Compass dock={<div>Dock content</div>} isDockExpandableExpanded />);
-  expect(screen.getByText('Dock content').parentElement).toHaveClass(styles.modifiers.expandableExpanded);
-});
-
-test(`Does not render with ${styles.modifiers.expandableExpanded} class when isDockExpandableExpanded is false`, () => {
-  render(<Compass dock={<div>Dock content</div>} isDockExpandableExpanded={false} />);
-  expect(screen.getByText('Dock content').parentElement).not.toHaveClass(styles.modifiers.expandableExpanded);
-});
-
-test(`Does not render with ${styles.modifiers.expandableExpanded} class by default`, () => {
-  render(<Compass dock={<div>Dock content</div>} />);
-  expect(screen.getByText('Dock content').parentElement).not.toHaveClass(styles.modifiers.expandableExpanded);
+test(`Renders with ${styles.modifiers.overlay} class when isDockOverlay is true`, () => {
+  render(<Compass dock={<div>Dock content</div>} isDockOverlay />);
+  expect(screen.getByText('Dock content').parentElement).toHaveClass(styles.modifiers.overlay);
 });
 
 test('Renders with drawer when drawerContent is provided', () => {
@@ -194,13 +184,3 @@ test(`Renders dock without ${styles.modifiers.expanded} class when isDockExpande
   render(<Compass dock="Dock content" isDockExpanded={false} />);
   expect(screen.getByText('Dock content')).not.toHaveClass(styles.modifiers.expanded);
 });
-
-test(`Renders dock with ${styles.modifiers.textExpanded} class when isDockTextExpanded is true`, () => {
-  render(<Compass dock="Dock content" isDockTextExpanded />);
-  expect(screen.getByText('Dock content')).toHaveClass(styles.modifiers.textExpanded);
-});
-
-test(`Renders dock without ${styles.modifiers.textExpanded} class when isDockTextExpanded is false`, () => {
-  render(<Compass dock="Dock content" isDockTextExpanded={false} />);
-  expect(screen.getByText('Dock content')).not.toHaveClass(styles.modifiers.textExpanded);
-});

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

@@ -55,8 +55,6 @@ export interface MenuToggleProps
   isSettings?: boolean;
   /** @beta Flag indicating the menu toggle is a docked variant. For use in docked navigation. */
   isDocked?: boolean;
-  /** @beta Flag indicating the docked toggle should display text. Only applies when isDocked is true. */
-  isTextExpanded?: boolean;
   /** Elements to display before the toggle button. When included, renders the menu toggle as a split button. */
   splitButtonItems?: React.ReactNode[];
   /** Variant styles of the menu toggle */
@@ -95,7 +93,6 @@ class MenuToggleBase extends Component<MenuToggleProps> {
     isPlaceholder: false,
     isCircle: false,
     isDocked: false,
-    isTextExpanded: false,
     size: 'default',
     ouiaSafe: true,
     'aria-haspopup': 'menu'
@@ -116,7 +113,6 @@ class MenuToggleBase extends Component<MenuToggleProps> {
       isCircle,
       isSettings,
       isDocked,
-      isTextExpanded,
       splitButtonItems,
       variant,
       status,
@@ -204,7 +200,6 @@ class MenuToggleBase extends Component<MenuToggleProps> {
             isPlaceholder && styles.modifiers.placeholder,
             isSettings && styles.modifiers.settings,
             isDocked && styles.modifiers.docked,
-            isDocked && isTextExpanded && styles.modifiers.textExpanded,
             size === MenuToggleSize.sm && styles.modifiers.small,
             className
           );

packages/react-core/src/components/MenuToggle/__tests__/MenuToggle.test.tsx

@@ -166,32 +166,21 @@ test(`Does not render with class ${styles.modifiers.docked} when isDocked is not
   expect(screen.getByRole('button')).not.toHaveClass(styles.modifiers.docked);
 });
 
-test(`Renders with class ${styles.modifiers.textExpanded} when isTextExpanded is passed and isDocked is passed`, () => {
+test(`Renders with class ${styles.modifiers.expanded} when isExpanded is passed and isDocked is passed`, () => {
   render(
-    <MenuToggle isTextExpanded isDocked>
+    <MenuToggle isExpanded isDocked>
       Text Expanded Toggle
     </MenuToggle>
   );
-  expect(screen.getByRole('button')).toHaveClass(styles.modifiers.textExpanded);
+  expect(screen.getByRole('button')).toHaveClass(styles.modifiers.expanded);
 });
 
-test(`Does not render with class ${styles.modifiers.textExpanded} when isTextExpanded is not passed`, () => {
+test(`Does not render with class ${styles.modifiers.expanded} when isExpanded is not passed`, () => {
   render(<MenuToggle>Toggle</MenuToggle>);
-  expect(screen.getByRole('button')).not.toHaveClass(styles.modifiers.textExpanded);
+  expect(screen.getByRole('button')).not.toHaveClass(styles.modifiers.expanded);
 });
 
-test(`Does not render with class ${styles.modifiers.textExpanded} when isTextExpanded is passed but isDocked is not passed`, () => {
-  render(<MenuToggle isTextExpanded>Text Expanded Toggle</MenuToggle>);
-  expect(screen.getByRole('button')).not.toHaveClass(styles.modifiers.textExpanded);
-});
-
-test(`Renders with both ${styles.modifiers.docked} and ${styles.modifiers.textExpanded} when both props are passed`, () => {
-  render(
-    <MenuToggle isDocked isTextExpanded>
-      Dock Text Expanded Toggle
-    </MenuToggle>
-  );
-  const button = screen.getByRole('button');
-  expect(button).toHaveClass(styles.modifiers.docked);
-  expect(button).toHaveClass(styles.modifiers.textExpanded);
+test(`Does not render with class ${styles.modifiers.expanded} when isExpanded is passed but isDocked is not passed`, () => {
+  render(<MenuToggle isExpanded>Text Expanded Toggle</MenuToggle>);
+  expect(screen.getByRole('button')).toHaveClass(styles.modifiers.expanded);
 });

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

@@ -40,7 +40,7 @@ export interface NavProps
   /** The nav variant to use. Docked is in beta. */
   variant?: 'default' | 'horizontal' | 'horizontal-subnav' | 'docked';
   /** @beta Flag indicating the docked nav should display text. Only applies when variant is docked. */
-  isTextExpanded?: boolean;
+  isExpanded?: boolean;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
   ouiaId?: number | string;
   /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
@@ -121,7 +121,7 @@ class Nav extends Component<NavProps, { isScrollable: boolean; flyoutRef: React.
       ouiaId,
       ouiaSafe,
       variant,
-      isTextExpanded = false,
+      isExpanded = false,
       ...props
     } = this.props;
     const isHorizontal = ['horizontal', 'horizontal-subnav'].includes(variant);
@@ -159,7 +159,7 @@ class Nav extends Component<NavProps, { isScrollable: boolean; flyoutRef: React.
                 isHorizontal && styles.modifiers.horizontal,
                 isDocked && styles.modifiers.docked,
                 variant === 'horizontal-subnav' && styles.modifiers.subnav,
-                isDocked && isTextExpanded && styles.modifiers.textExpanded,
+                isDocked && isExpanded && styles.modifiers.expanded,
                 this.state.isScrollable && styles.modifiers.scrollable,
                 className
               )}

packages/react-core/src/components/Nav/__tests__/Nav.test.tsx

@@ -275,9 +275,9 @@ describe('Nav', () => {
     expect(screen.getByTestId('docked-nav')).toHaveClass(styles.modifiers.docked);
   });
 
-  test(`Renders with ${styles.modifiers.textExpanded} class when isTextExpanded is true and variant is docked`, () => {
+  test(`Renders with ${styles.modifiers.expanded} class when isExpanded is true and variant is docked`, () => {
     renderNav(
-      <Nav isTextExpanded variant="docked" data-testid="text-expanded-nav">
+      <Nav isExpanded variant="docked" data-testid="expanded-nav">
         <NavList>
           {props.items.map((item) => (
             <NavItem to={item.to} key={item.to}>
@@ -287,10 +287,10 @@ describe('Nav', () => {
         </NavList>
       </Nav>
     );
-    expect(screen.getByTestId('text-expanded-nav')).toHaveClass(styles.modifiers.textExpanded);
+    expect(screen.getByTestId('expanded-nav')).toHaveClass(styles.modifiers.expanded);
   });
 
-  test(`Does not render with ${styles.modifiers.textExpanded} class when isTextExpanded is not passed`, () => {
+  test(`Does not render with ${styles.modifiers.expanded} class when isExpanded is not passed`, () => {
     renderNav(
       <Nav data-testid="nav">
         <NavList>
@@ -302,12 +302,12 @@ describe('Nav', () => {
         </NavList>
       </Nav>
     );
-    expect(screen.getByTestId('nav')).not.toHaveClass(styles.modifiers.textExpanded);
+    expect(screen.getByTestId('nav')).not.toHaveClass(styles.modifiers.expanded);
   });
 
-  test(`Does not render with ${styles.modifiers.textExpanded} class when isTextExpanded is true but variant is not docked`, () => {
+  test(`Does not render with ${styles.modifiers.expanded} class when isExpanded is true but variant is not docked`, () => {
     renderNav(
-      <Nav isTextExpanded data-testid="nav">
+      <Nav isExpanded data-testid="nav">
         <NavList>
           {props.items.map((item) => (
             <NavItem to={item.to} key={item.to}>
@@ -317,6 +317,6 @@ describe('Nav', () => {
         </NavList>
       </Nav>
     );
-    expect(screen.getByTestId('nav')).not.toHaveClass(styles.modifiers.textExpanded);
+    expect(screen.getByTestId('nav')).not.toHaveClass(styles.modifiers.expanded);
   });
 });