From 8a96409d53f592d2951ccbbf147019e0c4218a93 Mon Sep 17 00:00:00 2001 From: Chase Bennett Date: Tue, 27 Feb 2024 15:11:42 -0800 Subject: [PATCH 1/8] Add expanded field to SidebarSubmenuItem Signed-off-by: Chase Bennett --- .../core-components/src/layout/Sidebar/SidebarSubmenuItem.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/core-components/src/layout/Sidebar/SidebarSubmenuItem.tsx b/packages/core-components/src/layout/Sidebar/SidebarSubmenuItem.tsx index 0503f58f1c..da00b0a367 100644 --- a/packages/core-components/src/layout/Sidebar/SidebarSubmenuItem.tsx +++ b/packages/core-components/src/layout/Sidebar/SidebarSubmenuItem.tsx @@ -131,6 +131,7 @@ export type SidebarSubmenuItemProps = { icon?: IconComponent; dropdownItems?: SidebarSubmenuItemDropdownItem[]; exact?: boolean; + expanded?: boolean; }; /** @@ -149,7 +150,7 @@ export const SidebarSubmenuItem = (props: SidebarSubmenuItemProps) => { const currentLocation = useLocation(); let isActive = isLocationMatch(currentLocation, toLocation, exact); - const [showDropDown, setShowDropDown] = useState(false); + const [showDropDown, setShowDropDown] = useState(props.expanded ?? false); const handleClickDropdown = () => { setShowDropDown(!showDropDown); }; From 71e4229db5e76881fde9f2502995234253e9c40e Mon Sep 17 00:00:00 2001 From: Chase Bennett Date: Tue, 27 Feb 2024 15:20:09 -0800 Subject: [PATCH 2/8] Add changeset Signed-off-by: Chase Bennett --- .changeset/rare-fireants-tickle.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/rare-fireants-tickle.md diff --git a/.changeset/rare-fireants-tickle.md b/.changeset/rare-fireants-tickle.md new file mode 100644 index 0000000000..76c6189d85 --- /dev/null +++ b/.changeset/rare-fireants-tickle.md @@ -0,0 +1,5 @@ +--- +'@backstage/core-components': patch +--- + +Added expanded property to allow optionally have sub menu items automatically expand their contents on the sidebar From a809c05d82a0240529693ff5941c06cc561eb679 Mon Sep 17 00:00:00 2001 From: Chase Bennett Date: Wed, 28 Feb 2024 08:16:43 -0800 Subject: [PATCH 3/8] Update API reports Signed-off-by: Chase Bennett --- packages/core-components/api-report.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/core-components/api-report.md b/packages/core-components/api-report.md index 7fd706db43..5fe484c4b7 100644 --- a/packages/core-components/api-report.md +++ b/packages/core-components/api-report.md @@ -1128,6 +1128,7 @@ export type SidebarSubmenuItemProps = { icon?: IconComponent; dropdownItems?: SidebarSubmenuItemDropdownItem[]; exact?: boolean; + expanded?: boolean; }; // @public From 87ad7c153ac017159a4f885d27e3c5c658ad560e Mon Sep 17 00:00:00 2001 From: Chase Bennett Date: Wed, 28 Feb 2024 13:49:27 -0800 Subject: [PATCH 4/8] Update property name Signed-off-by: Chase Bennett --- .../src/layout/Sidebar/SidebarSubmenuItem.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/core-components/src/layout/Sidebar/SidebarSubmenuItem.tsx b/packages/core-components/src/layout/Sidebar/SidebarSubmenuItem.tsx index da00b0a367..58c215e9d6 100644 --- a/packages/core-components/src/layout/Sidebar/SidebarSubmenuItem.tsx +++ b/packages/core-components/src/layout/Sidebar/SidebarSubmenuItem.tsx @@ -131,7 +131,7 @@ export type SidebarSubmenuItemProps = { icon?: IconComponent; dropdownItems?: SidebarSubmenuItemDropdownItem[]; exact?: boolean; - expanded?: boolean; + initialShowDropDown?: boolean; }; /** @@ -150,7 +150,9 @@ export const SidebarSubmenuItem = (props: SidebarSubmenuItemProps) => { const currentLocation = useLocation(); let isActive = isLocationMatch(currentLocation, toLocation, exact); - const [showDropDown, setShowDropDown] = useState(props.expanded ?? false); + const [showDropDown, setShowDropDown] = useState( + props.initialShowDropDown ?? false, + ); const handleClickDropdown = () => { setShowDropDown(!showDropDown); }; From f39257d454f64a0178da2996e84ffd92d8fbe266 Mon Sep 17 00:00:00 2001 From: Chase Bennett Date: Wed, 28 Feb 2024 13:54:15 -0800 Subject: [PATCH 5/8] Update api reports to reflect property name change Signed-off-by: Chase Bennett --- packages/core-components/api-report.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core-components/api-report.md b/packages/core-components/api-report.md index 5fe484c4b7..8b181cc3be 100644 --- a/packages/core-components/api-report.md +++ b/packages/core-components/api-report.md @@ -1128,7 +1128,7 @@ export type SidebarSubmenuItemProps = { icon?: IconComponent; dropdownItems?: SidebarSubmenuItemDropdownItem[]; exact?: boolean; - expanded?: boolean; + initialShowDropDown?: boolean; }; // @public From 3f541b116384b655b219c9ce724ff75610670049 Mon Sep 17 00:00:00 2001 From: Chase Bennett Date: Thu, 29 Feb 2024 11:48:53 -0800 Subject: [PATCH 6/8] Formatting Signed-off-by: Chase Bennett --- .../core-components/src/layout/Sidebar/SidebarSubmenuItem.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/core-components/src/layout/Sidebar/SidebarSubmenuItem.tsx b/packages/core-components/src/layout/Sidebar/SidebarSubmenuItem.tsx index 58c215e9d6..19834268f9 100644 --- a/packages/core-components/src/layout/Sidebar/SidebarSubmenuItem.tsx +++ b/packages/core-components/src/layout/Sidebar/SidebarSubmenuItem.tsx @@ -131,7 +131,7 @@ export type SidebarSubmenuItemProps = { icon?: IconComponent; dropdownItems?: SidebarSubmenuItemDropdownItem[]; exact?: boolean; - initialShowDropDown?: boolean; + initialShowDropdown?: boolean; }; /** @@ -151,7 +151,7 @@ export const SidebarSubmenuItem = (props: SidebarSubmenuItemProps) => { let isActive = isLocationMatch(currentLocation, toLocation, exact); const [showDropDown, setShowDropDown] = useState( - props.initialShowDropDown ?? false, + props.initialShowDropdown ?? false, ); const handleClickDropdown = () => { setShowDropDown(!showDropDown); From 4bff30aeb5126a73b5cc170b45db9629020112e6 Mon Sep 17 00:00:00 2001 From: Chase Bennett Date: Thu, 29 Feb 2024 12:15:11 -0800 Subject: [PATCH 7/8] +Update api report Signed-off-by: Chase Bennett --- packages/core-components/api-report.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core-components/api-report.md b/packages/core-components/api-report.md index 8b181cc3be..2a146e70e0 100644 --- a/packages/core-components/api-report.md +++ b/packages/core-components/api-report.md @@ -1128,7 +1128,7 @@ export type SidebarSubmenuItemProps = { icon?: IconComponent; dropdownItems?: SidebarSubmenuItemDropdownItem[]; exact?: boolean; - initialShowDropDown?: boolean; + initialShowDropdown?: boolean; }; // @public From 76c437800a140fe14b13a6703ddb40374421b13f Mon Sep 17 00:00:00 2001 From: carnageX Date: Fri, 1 Mar 2024 13:28:17 -0800 Subject: [PATCH 8/8] Update .changeset/rare-fireants-tickle.md Co-authored-by: Vincenzo Scamporlino Signed-off-by: carnageX --- .changeset/rare-fireants-tickle.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/rare-fireants-tickle.md b/.changeset/rare-fireants-tickle.md index 76c6189d85..8668d4c287 100644 --- a/.changeset/rare-fireants-tickle.md +++ b/.changeset/rare-fireants-tickle.md @@ -2,4 +2,4 @@ '@backstage/core-components': patch --- -Added expanded property to allow optionally have sub menu items automatically expand their contents on the sidebar +Added optional `initialShowDropDown` prop to `SidebarSubmenuItem` to internally manage the initial display state of the dropdown items.