fix: Implement TopNavigation breakpoints in CSS

This commit switches from JavaScript-based breakpoints to CSS container
queries for TopNavigation, making its appearance consistent when
rendered with SSR.

To support container queries, we need `container-type: inline-size;` on
the TopNavigation root element. This causes overflowing content to get
clipped (at least in Safari), so I've enabled `expandToViewport` to
render utility dropdowns in a portal. Note that OverflowMenu doesn't
need this treatment because it expands the height of TopNavigation
rather than overflowing.

Fixes #3337

Author: TrevorBurnham

src/button-dropdown/__tests__/button-dropdown-item-click.test.tsx

@@ -213,7 +213,7 @@ describe('default href navigation', () => {
   test(`allows event propagation ${props.expandToViewport ? 'with portal' : 'without portal'}`, () => {
     const { onClickSpy, wrapper } = renderWrappedButtonDropdown({ ...props, items });
     act(() => wrapper.openDropdown());
-    act(() => wrapper.findItemById('i1')!.click());
+    act(() => wrapper.findItemById('i1', { expandToViewport: props.expandToViewport })!.click());
     expect(onClickSpy).toHaveBeenCalled();
   });
 

src/internal/components/menu-dropdown/index.tsx

@@ -20,6 +20,7 @@ export const ButtonTrigger = React.forwardRef(
   (
     {
       testUtilsClass,
+      internalClass,
       iconName,
       iconUrl,
       iconAlt,
@@ -40,7 +41,7 @@ export const ButtonTrigger = React.forwardRef(
       <button
         ref={ref}
         type="button"
-        className={clsx(styles.button, styles[`offset-right-${offsetRight}`], testUtilsClass, {
+        className={clsx(styles.button, styles[`offset-right-${offsetRight}`], testUtilsClass, internalClass, {
           [styles.expanded]: expanded,
         })}
         aria-label={ariaLabel}
@@ -49,7 +50,7 @@ export const ButtonTrigger = React.forwardRef(
         disabled={disabled}
         onClick={event => {
           event.preventDefault();
-          onClick && onClick();
+          onClick?.();
         }}
       >
         {hasIcon && (
@@ -79,6 +80,7 @@ const MenuDropdown = ({
   badge,
   offsetRight,
   children,
+  internalClass,
   ...props
 }: MenuDropdownProps) => {
   const baseProps = getBaseProps(props);
@@ -94,6 +96,7 @@ const MenuDropdown = ({
     return (
       <ButtonTrigger
         testUtilsClass={testUtilsClass}
+        internalClass={internalClass}
         ref={triggerRef}
         disabled={disabled}
         expanded={isOpen}

src/internal/components/menu-dropdown/interfaces.ts

@@ -5,6 +5,7 @@ import { IconProps } from '../../../icon/interfaces';
 
 export interface ButtonTriggerProps {
   testUtilsClass?: string;
+  internalClass?: string;
   iconName?: IconProps.Name;
   iconUrl?: string;
   iconAlt?: string;
@@ -19,12 +20,14 @@ export interface ButtonTriggerProps {
   expanded?: boolean;
 }
 
-export interface MenuDropdownProps extends InternalButtonDropdownProps {
+export interface MenuDropdownProps extends Omit<InternalButtonDropdownProps, 'items'> {
+  items: InternalButtonDropdownProps['items'];
   iconName?: IconProps.Name;
   iconUrl?: string;
   iconAlt?: string;
   iconSvg?: React.ReactNode;
   badge?: boolean;
   description?: string;
   offsetRight?: 'l' | 'xxl';
+  internalClass?: string;
 }

src/internal/styles/foundation/breakpoints.scss

@@ -3,7 +3,7 @@
  SPDX-License-Identifier: Apache-2.0
 */
 
-// Breakpoints
+// Media query breakpoints
 $breakpoint-xxx-small: 0;
 $breakpoint-xx-small: 576px;
 $breakpoint-x-small: 688px;
@@ -16,6 +16,18 @@ $breakpoint-xx-large: 2540px;
 $_smallest_breakpoint: $breakpoint-xxx-small;
 $_largest_breakpoint: $breakpoint-x-large;
 
+// Container breakpoints, matching the Grid component
+$container-breakpoint-default: -1;
+$container-breakpoint-xxs: 465px;
+$container-breakpoint-xs: 688px;
+$container-breakpoint-s: 912px;
+$container-breakpoint-m: 1120px;
+$container-breakpoint-l: 1320px;
+$container-breakpoint-xl: 1840px;
+
+$_container_smallest_breakpoint: $container-breakpoint-default;
+$_container_largest_breakpoint: $container-breakpoint-xl;
+
 // Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
 // Makes the @content apply to the wider than given breakpoint.
 @mixin media-breakpoint-up($breakpoint) {
@@ -39,3 +51,27 @@ $_largest_breakpoint: $breakpoint-x-large;
     @content;
   }
 }
+
+// Container query for widths greater than the given breakpoint.
+// Matches the behavior of getMatchingBreakpoint in breakpoints.ts
+@mixin container-breakpoint-up($breakpoint) {
+  @if $breakpoint != $_container_smallest_breakpoint {
+    @container (min-width: #{$breakpoint + 1px}) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+// Container query for widths less than or equal to the given breakpoint.
+// Matches the behavior of matchBreakpointMapping in breakpoints.ts
+@mixin container-breakpoint-down($breakpoint) {
+  @if $breakpoint != $_container_largest_breakpoint {
+    @container (max-width: #{$breakpoint}) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}

src/test-utils/dom/button-dropdown/index.ts

@@ -40,20 +40,30 @@ export default class ButtonDropdownWrapper extends ComponentWrapper {
    * Finds an item in the open dropdown by item id. Returns null if there is no open dropdown.
    *
    * This utility does not open the dropdown. To find dropdown items, call `openDropdown()` first.
+   *
+   * @param options
+   * * expandToViewport (boolean) - Use this when the component under test is rendered with an `expandToViewport` flag.
    */
-  findItemById(id: string): ElementWrapper | null {
+  findItemById(id: string, options = { expandToViewport: false }): ElementWrapper | null {
     const itemSelector = `.${itemStyles['item-element']}[data-testid="${id}"]`;
-    return this.findOpenDropdown()?.find(itemSelector) || this.find(itemSelector);
+    return options.expandToViewport
+      ? createWrapper().find(itemSelector)
+      : this.findOpenDropdown()?.find(itemSelector) || this.find(itemSelector);
   }
 
   /**
    * Finds `checked` value of item in the open dropdown by item id. Returns null if there is no open dropdown or the item is not a checkbox item.
    *
    * This utility does not open the dropdown. To find dropdown items, call `openDropdown()` first.
+   *
+   * @param options
+   * * expandToViewport (boolean) - Use this when the component under test is rendered with an `expandToViewport` flag.
    */
-  @usesDom findItemCheckedById(id: string): string | null {
+  @usesDom findItemCheckedById(id: string, options = { expandToViewport: false }): string | null {
     const itemSelector = `.${itemStyles['item-element']}[data-testid="${id}"]`;
-    const item = this.findOpenDropdown()?.find(itemSelector) || this.find(itemSelector);
+    const item = options.expandToViewport
+      ? createWrapper().find(itemSelector)
+      : this.findOpenDropdown()?.find(itemSelector) || this.find(itemSelector);
     if (!item) {
       return null;
     }
@@ -68,36 +78,56 @@ export default class ButtonDropdownWrapper extends ComponentWrapper {
    * Finds an expandable category in the open dropdown by category id. Returns null if there is no open dropdown.
    *
    * This utility does not open the dropdown. To find dropdown items, call `openDropdown()` first.
+   *
+   * @param options
+   * * expandToViewport (boolean) - Use this when the component under test is rendered with an `expandToViewport` flag.
    */
-  findExpandableCategoryById(id: string): ElementWrapper | null {
+  findExpandableCategoryById(id: string, options = { expandToViewport: false }): ElementWrapper | null {
     const expandableCategorySelector = `.${categoryStyles.expandable}[data-testid="${id}"]`;
-    return this.findOpenDropdown()?.find(expandableCategorySelector) || this.find(expandableCategorySelector);
+    return options.expandToViewport
+      ? createWrapper().find(expandableCategorySelector)
+      : this.findOpenDropdown()?.find(expandableCategorySelector) || this.find(expandableCategorySelector);
   }
 
   /**
    * Finds the highlighted item in the open dropdown. Returns null if there is no open dropdown.
    *
    * This utility does not open the dropdown. To find dropdown items, call `openDropdown()` first.
+   *
+   * @param options
+   * * expandToViewport (boolean) - Use this when the component under test is rendered with an `expandToViewport` flag.
    */
-  findHighlightedItem(): ElementWrapper | null {
+  findHighlightedItem(options = { expandToViewport: false }): ElementWrapper | null {
     const highlightedItemSelector = `.${itemStyles['item-element']}.${itemStyles.highlighted}`;
-    return this.findOpenDropdown()?.find(highlightedItemSelector) || this.find(highlightedItemSelector);
+    return options.expandToViewport
+      ? createWrapper().find(highlightedItemSelector)
+      : this.findOpenDropdown()?.find(highlightedItemSelector) || this.find(highlightedItemSelector);
   }
 
   /**
    * Finds all the items in the open dropdown. Returns empty array if there is no open dropdown.
    *
    * This utility does not open the dropdown. To find dropdown items, call `openDropdown()` first.
+   *
+   * @param options
+   * * expandToViewport (boolean) - Use this when the component under test is rendered with an `expandToViewport` flag.
    */
-  findItems(): Array<ElementWrapper> {
-    return this.findOpenDropdown()?.findAll(`.${itemStyles['item-element']}`) || [];
+  findItems(options = { expandToViewport: false }): Array<ElementWrapper> {
+    return options.expandToViewport
+      ? createWrapper().findAll(`.${itemStyles['item-element']}`)
+      : this.findOpenDropdown()?.findAll(`.${itemStyles['item-element']}`) || [];
   }
 
   /**
    * Finds the disabled reason tooltip for a dropdown item. Returns null if no disabled item with `disabledReason` is highlighted.
+   *
+   * @param options
+   * * expandToViewport (boolean) - Use this when the component under test is rendered with an `expandToViewport` flag.
    */
-  findDisabledReason(): ElementWrapper | null {
-    return createWrapper().find(`[data-testid="button-dropdown-disabled-reason"]`);
+  findDisabledReason(options = { expandToViewport: false }): ElementWrapper | null {
+    return options.expandToViewport
+      ? createWrapper().find(`[data-testid="button-dropdown-disabled-reason"]`)
+      : createWrapper().find(`[data-testid="button-dropdown-disabled-reason"]`);
   }
 
   @usesDom

src/test-utils/dom/top-navigation/index.ts

@@ -101,10 +101,10 @@ export class TopNavigationMenuDropdownWrapper extends ButtonDropdownWrapper {
   }
 
   findTitle(): ElementWrapper | null {
-    return this.findByClassName(buttonDropdownStyles.title);
+    return createWrapper().findComponent(`.${buttonDropdownStyles.title}`, ElementWrapper);
   }
 
   findDescription(): ElementWrapper | null {
-    return this.findByClassName(buttonDropdownStyles.description);
+    return createWrapper().findComponent(`.${buttonDropdownStyles.description}`, ElementWrapper);
   }
 }

src/top-navigation/__tests__/top-navigation-utility.test.tsx

@@ -196,7 +196,9 @@ describe('TopNavigation Utility part', () => {
       }).findMenuDropdownType()!;
       menuWrapper.openDropdown();
 
-      items.forEach((item, i) => expect(menuWrapper.findItems()[i].getElement()).toHaveTextContent(item.text));
+      items.forEach((item, i) =>
+        expect(menuWrapper.findItems({ expandToViewport: true })[i].getElement()).toHaveTextContent(item.text)
+      );
     });
 
     it('does not show title in the dropdown if there is visible text', () => {