Skip to content

fix(sidebar): align spacing and tooltip offset with design #788

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
rohanchkrabrty merged 1 commit into from
May 7, 2026
Merged

fix(sidebar): align spacing and tooltip offset with design #788

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 33 additions & 0 deletions apps/www/src/content/docs/components/sidebar/demo.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -402,6 +402,39 @@ export const collapsibleGroupDemo = {
style: styleDemo
};

export const groupIconDemo = {
type: 'code',
code: sidebarLayout(`<Sidebar defaultOpen>
<Sidebar.Header>
<Flex align="center" gap={3}>
<IconButton size={4} aria-label="Logo">
<BellIcon width={24} height={24} />
</IconButton>
<Text size={4} weight="medium" data-collapse-hidden>Apsara</Text>
</Flex>
</Sidebar.Header>
<Sidebar.Main>
<Sidebar.Group label="Workspace" leadingIcon={<OrganizationIcon width={16} height={16} />}>
<Sidebar.Item href="#" leadingIcon={<BellIcon width={16} height={16} />} active>
Dashboard
</Sidebar.Item>
<Sidebar.Item href="#" leadingIcon={<FilterIcon width={16} height={16} />}>
Analytics
</Sidebar.Item>
</Sidebar.Group>
<Sidebar.Group label="Resources" leadingIcon={<FilterIcon width={16} height={16} />}>
<Sidebar.Item href="#" leadingIcon={<OrganizationIcon width={16} height={16} />}>
Reports
</Sidebar.Item>
<Sidebar.Item href="#" leadingIcon={<BellIcon width={16} height={16} />}>
Activities
</Sidebar.Item>
</Sidebar.Group>
</Sidebar.Main>
</Sidebar>`),
style: styleDemo
};

export const moreDemo = {
type: 'code',
code: sidebarLayout(`<Sidebar defaultOpen>
Expand Down
7 changes: 7 additions & 0 deletions apps/www/src/content/docs/components/sidebar/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
positionDemo,
variantDemo,
collapsibleGroupDemo,
groupIconDemo,
stateDemo,
tooltipDemo,
collapsibleDemo,
Expand Down Expand Up @@ -123,6 +124,12 @@ Set `hideCollapsedItemTooltip` to disable tooltips on navigation items when the

<Demo data={hideTooltipDemo} />

### Group with icon

Pass `leadingIcon` to `Sidebar.Group` to render an icon next to the section label.

<Demo data={groupIconDemo} />

### Collapsible Group

Enable `collapsible` on `Sidebar.Group` to make section items collapsible. You can also pass `trailingIcon` for section-level actions.
Expand Down
2 changes: 2 additions & 0 deletions docs/V1-migration.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1506,6 +1506,8 @@ If you were attaching refs to `Sidebar`, `Sidebar.Header`, `Sidebar.Main`, `Side

7. **`Sidebar.Footer` role changed: `group` -> `list`**

8. **Spacing tightened to match Figma.** The gap between sidebar groups is now `var(--rs-space-6)` (20px, was 4px), and `.nav-group` / `.nav-group-header` no longer apply a `margin-top`. Collapsed `Sidebar.Item` and `Sidebar.More` tooltips now render with a 16px `sideOffset` for clearance from the rail. If you were overriding sidebar group spacing or tooltip positioning, expect slightly different vertical rhythm.

**Full before/after example:**

```tsx
Expand Down
4 changes: 3 additions & 1 deletion packages/raystack/components/sidebar/sidebar-item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,9 @@ export function SidebarItem({
return (
<Tooltip>
<Tooltip.Trigger render={content} />
<Tooltip.Content side='right'>{children}</Tooltip.Content>
<Tooltip.Content side='right' sideOffset={16}>
{children}
</Tooltip.Content>
</Tooltip>
);
}
Expand Down
5 changes: 4 additions & 1 deletion packages/raystack/components/sidebar/sidebar-more.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,10 @@ export function SidebarMore({
{isCollapsed && !hideCollapsedItemTooltip ? (
<Tooltip>
<Tooltip.Trigger render={<Menu.Trigger render={triggerContent} />} />
<Tooltip.Content side={position === 'left' ? 'right' : 'left'}>
<Tooltip.Content
side={position === 'left' ? 'right' : 'left'}
sideOffset={16}
>
{label}
</Tooltip.Content>
</Tooltip>
Expand Down
9 changes: 1 addition & 8 deletions packages/raystack/components/sidebar/sidebar.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@
flex: 1;
overflow-y: auto;
width: 100%;
gap: var(--rs-space-2);
gap: var(--rs-space-6);
align-items: flex-start;
}

Expand Down Expand Up @@ -235,7 +235,6 @@
flex-direction: column;
align-items: flex-start;
width: 100%;
margin-top: var(--rs-space-3);
}

.root[data-closed] .nav-group {
Expand All @@ -247,11 +246,9 @@
height: var(--rs-space-7);
padding: var(--rs-space-2) var(--rs-space-3);
margin-bottom: var(--rs-space-1);
justify-content: space-between;
align-items: center;
align-self: stretch;
color: var(--rs-color-foreground-base-secondary);
margin-top: var(--rs-space-4);
border-radius: var(--rs-radius-2);
}

Expand All @@ -267,10 +264,6 @@
padding: 0;
}

.nav-group-header:first-child {
margin-top: 0;
}

.nav-group-label {
color: var(--rs-color-foreground-base-secondary);
font-size: var(--rs-font-size-small);
Expand Down
Loading