From 14977ee90cdda9545b953e2986f77aa7086a8752 Mon Sep 17 00:00:00 2001 From: Stephen Lee Date: Mon, 18 Mar 2024 15:44:44 -0700 Subject: [PATCH 1/4] SideNavItem list-style --- packages/side-nav/src/SideNavItem/SideNavItem.styles.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/side-nav/src/SideNavItem/SideNavItem.styles.ts b/packages/side-nav/src/SideNavItem/SideNavItem.styles.ts index cb50662a26..c7d4ae3333 100644 --- a/packages/side-nav/src/SideNavItem/SideNavItem.styles.ts +++ b/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 From 0c3a382b394368985ea9e4dc3152baa048fd5026 Mon Sep 17 00:00:00 2001 From: Stephen Lee Date: Mon, 18 Mar 2024 15:45:09 -0700 Subject: [PATCH 2/4] Fix initialCollapsed={false} for SideNavGroupCollapsed --- .../side-nav/src/SideNavGroup/SideNavGroup.spec.tsx | 11 ++++++++++- .../SideNavGroupCollapsed/SideNavGroupCollapsed.tsx | 4 ++-- 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/packages/side-nav/src/SideNavGroup/SideNavGroup.spec.tsx b/packages/side-nav/src/SideNavGroup/SideNavGroup.spec.tsx index c67a1f8ef1..335f068ab3 100644 --- a/packages/side-nav/src/SideNavGroup/SideNavGroup.spec.tsx +++ b/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(); + }); }); }); }); diff --git a/packages/side-nav/src/SideNavGroupCollapsed/SideNavGroupCollapsed.tsx b/packages/side-nav/src/SideNavGroupCollapsed/SideNavGroupCollapsed.tsx index 0520a001d8..4d5f2b1383 100644 --- a/packages/side-nav/src/SideNavGroupCollapsed/SideNavGroupCollapsed.tsx +++ b/packages/side-nav/src/SideNavGroupCollapsed/SideNavGroupCollapsed.tsx @@ -53,14 +53,14 @@ export function SideNavGroupCollapsed({ // compute the entered ul wrapper styles based on the ul height useEffect(() => { - const ulHeight = ulRef?.current?.getBoundingClientRect().height ?? 0; + 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, ulRef.current, darkMode]); return ( <> From f4d6baff515c79d57453fc2c2cf2dc9e3cbd20bf Mon Sep 17 00:00:00 2001 From: Stephen Lee Date: Mon, 18 Mar 2024 15:49:35 -0700 Subject: [PATCH 3/4] SideNav changeset --- .changeset/long-sheep-hang.md | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 .changeset/long-sheep-hang.md diff --git a/.changeset/long-sheep-hang.md b/.changeset/long-sheep-hang.md new file mode 100644 index 0000000000..131b72fae5 --- /dev/null +++ b/.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) From e163213948f257276fd4fe01bd70ff5b5c5f09ba Mon Sep 17 00:00:00 2001 From: Stephen Lee Date: Tue, 19 Mar 2024 12:25:25 -0700 Subject: [PATCH 4/4] Use callback ref --- .../SideNavGroupCollapsed.tsx | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/packages/side-nav/src/SideNavGroupCollapsed/SideNavGroupCollapsed.tsx b/packages/side-nav/src/SideNavGroupCollapsed/SideNavGroupCollapsed.tsx index 4d5f2b1383..71760430a0 100644 --- a/packages/side-nav/src/SideNavGroupCollapsed/SideNavGroupCollapsed.tsx +++ b/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(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.current, darkMode]); + }, [open, ulHeight, darkMode]); return ( <>