Merge pull request #6960 from Sage/resize-observer-fix

fix(navigation-bar): move context provider to not wrap parent

src/components/navigation-bar/components.test-pw.tsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react";
 import NavigationBar, { NavigationBarProps } from ".";
 import { Menu, MenuDivider, MenuItem } from "../menu";
 import Box from "../box";
+import useMediaQuery from "../../hooks/useMediaQuery";
 
 export const NavigationBarComponent = ({
  children,
@@ -214,6 +215,8 @@ Fixed.parameters = {
 export const NavigationBarWithErrorHandler = ({
  ...props
 }: NavigationBarProps) => {
+ const isLargeScreen = useMediaQuery("(min-width: 600px)");
+ const rightPadding = isLargeScreen ? 2 : 1;
  const [error, setError] = useState("");
  useEffect(() => {
  const handleError = (e: ErrorEvent) => {
@@ -225,7 +228,7 @@ export const NavigationBarWithErrorHandler = ({
  });
  return (
  <>
- <NavigationBar {...props} />
+ <NavigationBar pr={rightPadding} {...props} />
  <div id="error-div">{error}</div>
  </>
  );

src/components/navigation-bar/navigation-bar-test.stories.tsx

@@ -1,12 +1,14 @@
-import React, { useRef } from "react";
+import React, { useRef, useState, useEffect } from "react";
 import NavigationBar, { NavigationBarProps } from ".";
 import { Menu, MenuItem } from "../menu";
+import useMediaQuery from "../../hooks/useMediaQuery";
 
 export default {
  title: "Navigation Bar/Test",
  includeStories: [
  "DefaultStory",
  "NavigationBarWithSubmenuAndChangingHeight",
+ "WithMediaQuery",
  "ResponsivePadding",
  ],
  parameters: {
@@ -74,6 +76,26 @@ export const NavigationBarWithSubmenuAndChangingHeight = () => {
  );
 };
 
+export const WithMediaQuery = () => {
+ const isLargeScreen = useMediaQuery("(min-width: 600px)");
+ const rightPadding = isLargeScreen ? 2 : 1;
+ const [error, setError] = useState("");
+ useEffect(() => {
+ const handleError = (e: ErrorEvent) => {
+ setError(e.message);
+ };
+ window.addEventListener("error", handleError);
+
+ return () => window.removeEventListener("error", handleError);
+ }, []);
+ return (
+ <>
+ <NavigationBar pr={rightPadding} />
+ <div id="error-div">{error}</div>
+ </>
+ );
+};
+
 export const ResponsivePadding = () => {
  return <NavigationBar>Example content</NavigationBar>;
 };

src/components/navigation-bar/navigation-bar.component.tsx

@@ -40,27 +40,27 @@ export const NavigationBar = ({
  const navbarRef = useRef(null);
 
  return (
- <FixedNavigationBarContextProvider
+ <StyledNavigationBar
+ role="navigation"
+ data-component={isGlobal ? "global-header" : "navigation-bar"}
+ aria-label={isGlobal ? "Global Header" : ariaLabel}
+ navigationType={isGlobal ? "black" : navigationType}
  orientation={isGlobal ? "top" : orientation}
  offset={isGlobal ? "0px" : offset}
  position={isGlobal ? "fixed" : position}
- navbarRef={navbarRef}
+ {...props}
+ isGlobal={isGlobal}
+ ref={navbarRef}
  >
- <StyledNavigationBar
- role="navigation"
- data-component={isGlobal ? "global-header" : "navigation-bar"}
- aria-label={isGlobal ? "Global Header" : ariaLabel}
- navigationType={isGlobal ? "black" : navigationType}
+ <FixedNavigationBarContextProvider
  orientation={isGlobal ? "top" : orientation}
  offset={isGlobal ? "0px" : offset}
  position={isGlobal ? "fixed" : position}
- {...props}
- isGlobal={isGlobal}
- ref={navbarRef}
+ navbarRef={navbarRef}
  >
  {!isLoading && children}
- </StyledNavigationBar>
- </FixedNavigationBarContextProvider>
+ </FixedNavigationBarContextProvider>
+ </StyledNavigationBar>
  );
 };
 

src/components/navigation-bar/navigation-bar.pw.tsx

@@ -39,7 +39,7 @@ test.describe("Test props for NavigationBar component", () => {
  }) => {
  await mount(<NavigationBarWithErrorHandler />);
 
- await expect(page.locator("#error-div")).toContainText("");
+ await expect(page.locator("#error-div")).toHaveText("");
  });
 
  specialCharacters.forEach((childrenValue) => {