LG-3301 | LG-3357: side nav style issues (#2265)

* SideNavItem list-style

* Fix initialCollapsed={false} for SideNavGroupCollapsed

* SideNav changeset

* Use callback ref

.changeset/long-sheep-hang.md

@@ -0,0 +1,9 @@
+---
+'@leafygreen-ui/side-nav': patch
+---
+
+`SideNavItem` previously relied on parent context for `list-style`. Now, it is reset on each individual `SideNavItem`
+[LG-3301](https://jira.mongodb.org/browse/LG-3301)
+
+`SideNavGroupCollapsed` had a bug on initial render due to shallow dependency check. Now, when `initialCollapsed=false`, content will properly display on initial render
+[LG-3357](https://jira.mongodb.org/browse/LG-3357)

packages/side-nav/src/SideNavGroup/SideNavGroup.spec.tsx

@@ -1,5 +1,11 @@
 import React from 'react';
-import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from '@testing-library/react';
 
 import Icon from '@leafygreen-ui/icon';
 
@@ -151,6 +157,9 @@ describe('packages/side-nav', () => {
       test('the content appears on the page by default', () => {
         const childContent = screen.getByTestId(sideNavLink);
         expect(childContent).toBeInTheDocument();
+        waitFor(() => {
+          expect(childContent).toBeVisible();
+        });
       });
     });
   });

packages/side-nav/src/SideNavGroupCollapsed/SideNavGroupCollapsed.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { Transition, TransitionStatus } from 'react-transition-group';
 
 import { css, cx } from '@leafygreen-ui/emotion';
@@ -46,21 +46,27 @@ export function SideNavGroupCollapsed({
   const { width, theme, darkMode } = useSideNavContext();
   const { usingKeyboard } = useUsingKeyboardContext();
 
+  const [ulHeight, setUlHeight] = useState(0);
+
   const menuId = useIdAllocator({ prefix: 'menu' });
 
   const nodeRef = React.useRef(null);
-  const ulRef = React.useRef<HTMLUListElement>(null);
+
+  const ulRef = useCallback((node: HTMLUListElement) => {
+    if (node !== null) {
+      setUlHeight(node.getBoundingClientRect().height);
+    }
+  }, []);
 
   // compute the entered ul wrapper styles based on the ul height
   useEffect(() => {
-    const ulHeight = ulRef?.current?.getBoundingClientRect().height ?? 0;
     transitionStyles['entered'] = css`
       opacity: 1;
       max-height: ${ulHeight + 1}px; // +1 for border
       border-bottom: 1px solid
         ${darkMode ? palette.gray.dark1 : palette.gray.light2};
     `;
-  }, [open, ulRef, darkMode]);
+  }, [open, ulHeight, darkMode]);
 
   return (
     <>

packages/side-nav/src/SideNavItem/SideNavItem.styles.ts

@@ -14,6 +14,7 @@ export const sideNavItemClassName = createUniqueClassName('side-nav-item');
 
 export const liStyle = css`
   width: 100%;
+  list-style: none;
 `;
 
 // container styles