diff --git a/.changeset/sidenav-collapsed-footer-centering.md b/.changeset/sidenav-collapsed-footer-centering.md new file mode 100644 index 000000000000..3b06d51b599a --- /dev/null +++ b/.changeset/sidenav-collapsed-footer-centering.md @@ -0,0 +1,7 @@ +--- +'@astryxdesign/core': patch +--- + +[fix] SideNav: center `footer` content in the collapsed rail. The collapsed variant of the sticky-bottom slot was missing the `alignItems: 'center'` that the children slot's collapsed variant already applies, so footer content stretched to the full rail width instead of centering. + +@AKnassa diff --git a/packages/core/src/SideNav/SideNav.test.tsx b/packages/core/src/SideNav/SideNav.test.tsx index 063aba4a15f1..309b9c1ff7bb 100644 --- a/packages/core/src/SideNav/SideNav.test.tsx +++ b/packages/core/src/SideNav/SideNav.test.tsx @@ -183,6 +183,24 @@ describe('SideNav', () => { expect(nav.children).toHaveLength(1); }); + it('centers footer content when collapsed, matching the children slot', () => { + render( + Footer}> + Content + , + ); + + // Control: the collapsed rail centers the children slot... + const scrollable = screen.getByTestId('content').parentElement!; + expect(getComputedStyle(scrollable).alignItems).toBe('center'); + + // ...and the footer slot must center the same way, not stretch. + const stickyBottom = screen.getByTestId('footer').parentElement!; + expect(getComputedStyle(stickyBottom).alignItems).toBe('center'); + }); + it('fires a consumer onClick on the collapse button in addition to toggling', async () => { const user = userEvent.setup(); const onClick = vi.fn(); diff --git a/packages/core/src/SideNav/SideNav.tsx b/packages/core/src/SideNav/SideNav.tsx index 76f32cd5fc2c..439d65420817 100644 --- a/packages/core/src/SideNav/SideNav.tsx +++ b/packages/core/src/SideNav/SideNav.tsx @@ -143,6 +143,7 @@ const styles = stylex.create({ }, stickyBottomCollapsed: { paddingBlockStart: 0, + alignItems: 'center', }, // Drawer footer — pushed to bottom of the scrollable content area drawerFooter: {