fix(fuselage): useCollapse expanded prop usage (#1464)

RocketChat · Oct 17, 2024 · 1ca8371 · 1ca8371
1 parent 1265102
commit 1ca8371
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 1 deletion.
diff --git a/.changeset/tasty-planets-travel.md b/.changeset/tasty-planets-travel.md
@@ -0,0 +1,5 @@
+---
+"@rocket.chat/fuselage": patch
+---
+
+fix(fuselage): adjust `SidebarCollapseGroup` padding
diff --git a/packages/fuselage/src/components/SidebarV2/Sidebar.styles.scss b/packages/fuselage/src/components/SidebarV2/Sidebar.styles.scss
@@ -199,6 +199,10 @@ $sidebar-banner-color-danger: theme(
     }
   }
 
+  &-collapse-group__panel--expanded {
+    padding-block: lengths.padding(none);
+  }
+
   &-accordion-item {
     flex: 0 1 0;
 

diff --git a/packages/fuselage/src/components/SidebarV2/hooks/useCollapse.tsx b/packages/fuselage/src/components/SidebarV2/hooks/useCollapse.tsx
@@ -1,6 +1,9 @@
 import { useToggle, useUniqueId } from '@rocket.chat/fuselage-hooks';
 import type { KeyboardEventHandler, MouseEvent } from 'react';
 
+const hasPropExpanded = (expanded: boolean | undefined) =>
+  expanded !== undefined;
+
 export const useCollapse = ({
   expanded: propExpanded,
   defaultExpanded,
@@ -15,7 +18,7 @@ export const useCollapse = ({
   tabIndex?: number;
 }) => {
   const [stateExpanded, toggleStateExpanded] = useToggle(defaultExpanded);
-  const expanded = propExpanded || stateExpanded;
+  const expanded = hasPropExpanded(propExpanded) ? propExpanded : stateExpanded;
 
   const panelExpanded = noncollapsible || expanded;