diff --git a/.changeset/tasty-planets-travel.md b/.changeset/tasty-planets-travel.md new file mode 100644 index 0000000000..9a3a6d79d1 --- /dev/null +++ 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 index f3884a27e5..da76a27d99 100644 --- 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 index 81758a91d5..5e97b73be4 100644 --- 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;