From f6900f6701bde37756f043012e62c1b33165f98e Mon Sep 17 00:00:00 2001 From: Grace Park Date: Fri, 1 Sep 2023 13:55:43 -0700 Subject: [PATCH 1/5] adding defaultOpen to NavList --- src/NavList/NavList.docs.json | 5 +++++ src/NavList/NavList.stories.tsx | 8 +++++++- src/NavList/NavList.tsx | 12 +++++++----- 3 files changed, 19 insertions(+), 6 deletions(-) diff --git a/src/NavList/NavList.docs.json b/src/NavList/NavList.docs.json index 9d76c1e656f..4426b77e5d5 100644 --- a/src/NavList/NavList.docs.json +++ b/src/NavList/NavList.docs.json @@ -47,6 +47,11 @@ "defaultValue": "false", "description": "Set `aria-current` to `\"page\"` to indicate that the item represents the current page. Set `aria-current` to `\"location\"` to indicate that the item represents the current location on a page. For more information about `aria-current`, see [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)." }, + { + "name": "defaultOpen", + "type": "boolean", + "description": "The open state of the item when it is initially rendered." + }, { "name": "ref", "type": "React.RefObject" diff --git a/src/NavList/NavList.stories.tsx b/src/NavList/NavList.stories.tsx index 5baf3de9793..36afea1bef5 100644 --- a/src/NavList/NavList.stories.tsx +++ b/src/NavList/NavList.stories.tsx @@ -51,7 +51,13 @@ export const WithNestedSubItems: Story = () => ( - Item 1 + Item 1 + + + Sub item 1 + + + Item 2{/* NOTE: Don't nest SubNavs. For testing purposes only */} diff --git a/src/NavList/NavList.tsx b/src/NavList/NavList.tsx index 591b75a08f7..a07c1a745c2 100644 --- a/src/NavList/NavList.tsx +++ b/src/NavList/NavList.tsx @@ -48,12 +48,13 @@ Root.displayName = 'NavList' export type NavListItemProps = { children: React.ReactNode + defaultOpen?: boolean href?: string 'aria-current'?: 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false' | boolean } & SxProp const Item = React.forwardRef( - ({'aria-current': ariaCurrent, children, sx: sxProp = defaultSxProp, ...props}, ref) => { + ({'aria-current': ariaCurrent, children, defaultOpen, sx: sxProp = defaultSxProp, ...props}, ref) => { const {depth} = React.useContext(SubNavContext) // Get SubNav from children @@ -67,7 +68,7 @@ const Item = React.forwardRef( // Render ItemWithSubNav if SubNav is present if (subNav && isValidElement(subNav)) { return ( - + {childrenWithoutSubNav} ) @@ -96,6 +97,7 @@ type ItemWithSubNavProps = { children: React.ReactNode subNav: React.ReactNode depth: number + defaultOpen?: boolean } & SxProp const ItemWithSubNavContext = React.createContext<{buttonId: string; subNavId: string; isOpen: boolean}>({ @@ -106,10 +108,10 @@ const ItemWithSubNavContext = React.createContext<{buttonId: string; subNavId: s // TODO: ref prop // TODO: Animate open/close transition -function ItemWithSubNav({children, subNav, depth, sx: sxProp = defaultSxProp}: ItemWithSubNavProps) { +function ItemWithSubNav({children, subNav, depth, defaultOpen, sx: sxProp = defaultSxProp}: ItemWithSubNavProps) { const buttonId = useId() const subNavId = useId() - const [isOpen, setIsOpen] = React.useState(false) + const [isOpen, setIsOpen] = React.useState(defaultOpen ?? false) const subNavRef = React.useRef(null) const [containsCurrentItem, setContainsCurrentItem] = React.useState(false) @@ -124,7 +126,7 @@ function ItemWithSubNav({children, subNav, depth, sx: sxProp = defaultSxProp}: I setIsOpen(true) } } - }, [subNav]) + }, [subNav, buttonId]) return ( From 4af9da64816c0a0c7cf05618980569216415fdec Mon Sep 17 00:00:00 2001 From: Grace Park Date: Tue, 5 Sep 2023 08:03:40 -0700 Subject: [PATCH 2/5] add console.error if using defaultOpen on a NavList.Item without a NavList.SubNav --- src/NavList/NavList.docs.json | 2 +- src/NavList/NavList.tsx | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/NavList/NavList.docs.json b/src/NavList/NavList.docs.json index 4426b77e5d5..9d356697217 100644 --- a/src/NavList/NavList.docs.json +++ b/src/NavList/NavList.docs.json @@ -50,7 +50,7 @@ { "name": "defaultOpen", "type": "boolean", - "description": "The open state of the item when it is initially rendered." + "description": "The open state of the item when it is initially rendered if the item has a SubNav." }, { "name": "ref", diff --git a/src/NavList/NavList.tsx b/src/NavList/NavList.tsx index a07c1a745c2..4605648758c 100644 --- a/src/NavList/NavList.tsx +++ b/src/NavList/NavList.tsx @@ -65,6 +65,8 @@ const Item = React.forwardRef( isValidElement(child) ? child.type !== SubNav : true, ) + if (!isValidElement(subNav) && defaultOpen) console.error('NavList.Item must have a NavList.SubNav to use defaultOpen.') + // Render ItemWithSubNav if SubNav is present if (subNav && isValidElement(subNav)) { return ( From 1480fbc74cf334da9e7506c178e7fea4010799c1 Mon Sep 17 00:00:00 2001 From: Grace Park Date: Tue, 5 Sep 2023 08:20:27 -0700 Subject: [PATCH 3/5] update defaultOpen --- src/NavList/NavList.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/NavList/NavList.tsx b/src/NavList/NavList.tsx index 4605648758c..870ca66c592 100644 --- a/src/NavList/NavList.tsx +++ b/src/NavList/NavList.tsx @@ -65,7 +65,9 @@ const Item = React.forwardRef( isValidElement(child) ? child.type !== SubNav : true, ) - if (!isValidElement(subNav) && defaultOpen) console.error('NavList.Item must have a NavList.SubNav to use defaultOpen.') + if (!isValidElement(subNav) && defaultOpen) + // eslint-disable-next-line no-console + console.error('NavList.Item must have a NavList.SubNav to use defaultOpen.') // Render ItemWithSubNav if SubNav is present if (subNav && isValidElement(subNav)) { @@ -113,7 +115,7 @@ const ItemWithSubNavContext = React.createContext<{buttonId: string; subNavId: s function ItemWithSubNav({children, subNav, depth, defaultOpen, sx: sxProp = defaultSxProp}: ItemWithSubNavProps) { const buttonId = useId() const subNavId = useId() - const [isOpen, setIsOpen] = React.useState(defaultOpen ?? false) + const [isOpen, setIsOpen] = React.useState((defaultOpen || null) ?? false) const subNavRef = React.useRef(null) const [containsCurrentItem, setContainsCurrentItem] = React.useState(false) From 7904710a45bbd8f0e84c3311d979cce688683bcd Mon Sep 17 00:00:00 2001 From: Grace Park Date: Tue, 5 Sep 2023 08:43:21 -0700 Subject: [PATCH 4/5] add changeset --- .changeset/fifty-seas-relax.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 .changeset/fifty-seas-relax.md diff --git a/.changeset/fifty-seas-relax.md b/.changeset/fifty-seas-relax.md new file mode 100644 index 00000000000..56e1ccce064 --- /dev/null +++ b/.changeset/fifty-seas-relax.md @@ -0,0 +1,7 @@ +--- +'@primer/react': patch +--- + +Adds the defaultOpen prop to NavList.Item + + From ad2a14fe24eb5a09ee032ab5ab481a357e8c60a0 Mon Sep 17 00:00:00 2001 From: Grace Park Date: Tue, 5 Sep 2023 08:59:21 -0700 Subject: [PATCH 5/5] fix lint errors --- src/NavList/NavList.stories.tsx | 7 +++---- src/NavList/NavList.tsx | 6 +++--- 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/src/NavList/NavList.stories.tsx b/src/NavList/NavList.stories.tsx index 36afea1bef5..2ce3f77d3ea 100644 --- a/src/NavList/NavList.stories.tsx +++ b/src/NavList/NavList.stories.tsx @@ -51,11 +51,10 @@ export const WithNestedSubItems: Story = () => ( - Item 1 + + Item 1 - - Sub item 1 - + Sub item 1 diff --git a/src/NavList/NavList.tsx b/src/NavList/NavList.tsx index 870ca66c592..0a7687bb204 100644 --- a/src/NavList/NavList.tsx +++ b/src/NavList/NavList.tsx @@ -65,9 +65,9 @@ const Item = React.forwardRef( isValidElement(child) ? child.type !== SubNav : true, ) - if (!isValidElement(subNav) && defaultOpen) - // eslint-disable-next-line no-console - console.error('NavList.Item must have a NavList.SubNav to use defaultOpen.') + if (!isValidElement(subNav) && defaultOpen) + // eslint-disable-next-line no-console + console.error('NavList.Item must have a NavList.SubNav to use defaultOpen.') // Render ItemWithSubNav if SubNav is present if (subNav && isValidElement(subNav)) {