[LG-5712] feat(chat-layout): handle overflow in ChatSideNavItem and add compact tooltip (#3329)

* chore(chat-layout): add LG tooltip dep

* feat(chat-layout): handle overflow in ChatSideNav and add compact tooltip

* test(chat-layout): update stories

* chore(chat-layout): changeset

* feat(chat-layout): conditionally render tooltip if sidenav item text is truncated

* chore(chat-layout): add LG hooks dep

* fix(chat-layout): expand sidenav when descendant element is focused

* chore(chat-layout): changesets

* fix(chat-layout): increase chromatic snapshot delay

Author: stephl3

.changeset/four-horses-dress.md

@@ -0,0 +1,5 @@
+---
+'@lg-chat/chat-layout': patch
+---
+
+Expand `ChatSideNav` when descendant element is focused

.changeset/tender-moments-make.md

@@ -0,0 +1,5 @@
+---
+'@lg-chat/chat-layout': minor
+---
+
+[LG-5712](https://jira.mongodb.org/browse/LG-5712): handle overflow in `ChatSideNav.SideNavItem` and add compact tooltip for truncated text

chat/chat-layout/package.json

@@ -31,11 +31,13 @@
     "@leafygreen-ui/button": "workspace:^",
     "@leafygreen-ui/compound-component": "workspace:^",
     "@leafygreen-ui/emotion": "workspace:^",
+    "@leafygreen-ui/hooks": "workspace:^",
     "@leafygreen-ui/icon": "workspace:^",
     "@leafygreen-ui/lib": "workspace:^",
     "@leafygreen-ui/palette": "workspace:^",
     "@leafygreen-ui/polymorphic": "workspace:^",
     "@leafygreen-ui/tokens": "workspace:^",
+    "@leafygreen-ui/tooltip": "workspace:^",
     "@leafygreen-ui/typography": "workspace:^",
     "@lg-tools/test-harnesses": "workspace:^"
   },

chat/chat-layout/src/ChatLayout.stories.tsx

@@ -57,12 +57,34 @@ export default meta;
 
 const chatItems = [
   { id: '1', name: 'MongoDB Atlas Setup', href: '/chat/1' },
-  { id: '2', name: 'Writing a Database Query', href: '/chat/2' },
+  {
+    id: '2',
+    name: 'Writing a very very very long Database Query',
+    href: '/chat/2',
+  },
   { id: '3', name: 'Schema Design Discussion', href: '/chat/3' },
   { id: '4', name: 'Performance Optimization', href: '/chat/4' },
   { id: '5', name: 'Migration Planning', href: '/chat/5' },
 ];
 
+const hoverSideNav = async (canvasElement: HTMLElement) => {
+  const canvas = within(canvasElement);
+  const sideNav = canvas.getByLabelText('Side navigation');
+  await userEvent.hover(sideNav);
+};
+
+const hoverSideNavItem = async ({
+  canvasElement,
+  itemText,
+}: {
+  canvasElement: HTMLElement;
+  itemText: string;
+}) => {
+  const canvas = within(canvasElement);
+  const item = canvas.getByText(itemText);
+  await userEvent.hover(item);
+};
+
 const Template: StoryFn<ChatLayoutProps> = props => {
   const [activeId, setActiveId] = useState<string | null>('1');
 
@@ -172,13 +194,7 @@ export const UnpinnedAndHoveredLight: StoryObj<ChatLayoutProps> = {
     initialIsPinned: false,
   },
   play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    // Find the side nav
-    const sideNav = canvas.getByLabelText('Side navigation');
-
-    // Hover over the side nav
-    await userEvent.hover(sideNav);
+    await hoverSideNav(canvasElement);
   },
   parameters: {
     chromatic: {
@@ -194,17 +210,81 @@ export const UnpinnedAndHoveredDark: StoryObj<ChatLayoutProps> = {
     initialIsPinned: false,
   },
   play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
+    await hoverSideNav(canvasElement);
+  },
+  parameters: {
+    chromatic: {
+      delay: 350,
+    },
+  },
+};
 
-    // Find the side nav
-    const sideNav = canvas.getByLabelText('Side navigation');
+export const UnpinnedAndFocusedLight: StoryObj<ChatLayoutProps> = {
+  render: Template,
+  args: {
+    darkMode: false,
+    initialIsPinned: false,
+  },
+  play: async ({ canvasElement: _canvasElement }) => {
+    userEvent.tab();
+  },
+  parameters: {
+    chromatic: {
+      delay: 350,
+    },
+  },
+};
 
-    // Hover over the side nav
-    await userEvent.hover(sideNav);
+export const UnpinnedAndFocusedDark: StoryObj<ChatLayoutProps> = {
+  render: Template,
+  args: {
+    darkMode: true,
+    initialIsPinned: false,
+  },
+  play: async ({ canvasElement: _canvasElement }) => {
+    userEvent.tab();
   },
   parameters: {
     chromatic: {
       delay: 350,
     },
   },
 };
+
+export const SideNavItemHoveredLight: StoryObj<ChatLayoutProps> = {
+  render: Template,
+  args: {
+    darkMode: false,
+    initialIsPinned: true,
+  },
+  play: async ({ canvasElement }) => {
+    await hoverSideNavItem({
+      canvasElement,
+      itemText: 'Writing a very very very long Database Query',
+    });
+  },
+  parameters: {
+    chromatic: {
+      delay: 550,
+    },
+  },
+};
+
+export const SideNavItemHoveredDark: StoryObj<ChatLayoutProps> = {
+  render: Template,
+  args: {
+    darkMode: true,
+    initialIsPinned: true,
+  },
+  play: async ({ canvasElement }) => {
+    await hoverSideNavItem({
+      canvasElement,
+      itemText: 'Writing a very very very long Database Query',
+    });
+  },
+  parameters: {
+    chromatic: {
+      delay: 550,
+    },
+  },
+};

chat/chat-layout/src/ChatSideNav/ChatSideNav.spec.tsx

@@ -10,6 +10,14 @@ const Providers = ({ children }: { children: React.ReactNode }) => (
 );
 
 describe('ChatSideNav', () => {
+  beforeAll(() => {
+    window.ResizeObserver = jest.fn().mockImplementation(() => ({
+      observe: jest.fn(),
+      unobserve: jest.fn(),
+      disconnect: jest.fn(),
+    }));
+  });
+
   test('Header shows "New Chat" button when onClickNewChat provided', async () => {
     const onClickNewChat = jest.fn();
 

chat/chat-layout/src/ChatSideNav/ChatSideNav.tsx

@@ -1,9 +1,10 @@
-import React, { forwardRef } from 'react';
+import React, { FocusEventHandler, forwardRef, useRef } from 'react';
 
 import {
   CompoundComponent,
   findChild,
 } from '@leafygreen-ui/compound-component';
+import { useMergeRefs } from '@leafygreen-ui/hooks';
 import LeafyGreenProvider, {
   useDarkMode,
 } from '@leafygreen-ui/leafygreen-provider';
@@ -23,10 +24,12 @@ import { ChatSideNavItem } from './ChatSideNavItem';
 export const ChatSideNav = CompoundComponent(
   // eslint-disable-next-line react/display-name
   forwardRef<HTMLElement, ChatSideNavProps>(
-    ({ children, className, darkMode: darkModeProp, ...rest }, ref) => {
+    ({ children, className, darkMode: darkModeProp, ...rest }, fwdRef) => {
       const { darkMode, theme } = useDarkMode(darkModeProp);
       const { isPinned, setIsSideNavHovered, shouldRenderExpanded } =
         useChatLayoutContext();
+      const navRef = useRef<HTMLElement>(null);
+      const ref = useMergeRefs([navRef, fwdRef]);
 
       const handleMouseEnter = () => {
         setIsSideNavHovered(true);
@@ -36,7 +39,24 @@ export const ChatSideNav = CompoundComponent(
         setIsSideNavHovered(false);
       };
 
-      // Find subcomponents
+      const handleFocus: FocusEventHandler<HTMLElement> = ({ target }) => {
+        const navElement = navRef.current;
+
+        if (navElement?.contains(target as Node)) {
+          setIsSideNavHovered(true);
+        }
+      };
+
+      const handleBlur: FocusEventHandler<HTMLElement> = ({
+        relatedTarget,
+      }) => {
+        const navElement = navRef.current;
+
+        if (relatedTarget && !navElement?.contains(relatedTarget as Node)) {
+          setIsSideNavHovered(false);
+        }
+      };
+
       const header = findChild(
         children,
         ChatSideNavSubcomponentProperty.Header,
@@ -59,6 +79,8 @@ export const ChatSideNav = CompoundComponent(
             aria-label="Side navigation"
             onMouseEnter={handleMouseEnter}
             onMouseLeave={handleMouseLeave}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
             {...rest}
           >
             <div