Skip to content
This repository was archived by the owner on Oct 16, 2026. It is now read-only.

feat(fuselage): Restyle the sidebar collapse group header - #2285

Merged
ggazzo merged 3 commits into
mainfrom
feat/sidebar-group-header-colors
Oct 2, 2026
Merged

ggazzo merged 3 commits into
mainfrom
feat/sidebar-group-header-colors

Conversation

@dougfabris

@dougfabris dougfabris commented Oct 2, 2026 •

Copy link
Copy Markdown
Member

Proposed changes (including videos or screenshots)

Brings over the collapse group header visuals from #2229, without its spacing changes.

  • Chevron after the title: SidebarGroupTitle wraps the title and chevron in a new __heading element, so a collapsed group's badge sits at the far end of the bar.
  • Title: c1 (regular) in font(secondary-info).
  • empty prop: SidebarCollapseGroup accepts empty. A collapsed empty group renders in font(disabled).
  • Unread: a collapsed group with a badge uses $sidebar-item-color-highlighted and bumps its title to c2 (bold).
  • Menu reveal: the hidden menu wrapper takes margin-inline-end: -4, so the bar keeps the same width before and after the menu appears.
  • Hover: the bar hover goes from surface(tint) to $sidebar-color-surface-hover, the same themeable token the rows use.
  • Semantics: SidebarCollapseGroup renders <div role='group' aria-labelledby> instead of <section>.

The shared &-collapse-group, &-accordion-item block held the __bar[tabindex] and __bar--disabled rules, but only the accordion item uses them. They now live on the accordion bar, along with its font(default) color. The accordion item looks the same as before.

Not included from #2229: new bar margins, radius, padding and min-height, the inset box-shadow focus ring, and the accordion bar rework.

Issue(s)

Subset of #2229.

Further comments

The visual regression snapshots for navigation-sidebar--* have not been regenerated.

SCC-55

🤖 Generated with Claude Code

@changeset-bot

changeset-bot Bot commented Oct 2, 2026 •

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 7402665

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@rocket.chat/fuselage Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@dougfabris
dougfabris force-pushed the feat/sidebar-group-header-colors branch from 5ad0b57 to 2c95b98 Compare October 2, 2026 19:30
@dougfabris
dougfabris force-pushed the feat/sidebar-group-header-colors branch from 2c95b98 to f501585 Compare October 2, 2026 19:32
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants