feat(fuselage): Migrate `Sidebar` and `Sidepanel` to `Item` components

Draft
JU
7d ago
+6668-851

Proposed changes (including videos or screenshots)

Renders the Sidebar and Sidepanel components with the Item family from #2281. The public rcx-sidebar-* classes stay in place.

  • SidebarItem, its parts and SidebarLink render with Item, ItemMedia, ItemIcon, ItemContent, ItemRow, ItemTitle, ItemDescription, ItemMeta and ItemActions.
  • New optional label prop on SidebarItemIcon names the icon for assistive technology.
  • SidebarGroupTitle, SidebarCollapseGroup and SidebarCollapseGroupMenu render as ItemGroupHeader, ItemGroup and ItemActions. The collapse group's list is named by its title. This keeps the restyled collapse group header from #2285.
  • Sidebar rows, links and the collapse group header use the md inset from the Item scale, set inside the components. It replaces the fixed 12px inset, and headers and rows line up.
  • SidebarItem can render as a container row: pass is='div' and put the new SidebarItemLink inside SidebarItemTitle. Only the title is the link, and it covers the whole row, so menus and buttons sit beside it instead of inside it. The new SidebarItemActions holds always-visible buttons, such as accepting or rejecting a call. SidebarItem also gets a highlighted prop. A div row drops href, target, rel and download. The default anchor row is unchanged.
  • SidebarDivider renders as ItemDivider.
  • SidepanelList renders as an ItemGroup and SidepanelDivider as an ItemDivider, keeping the full-width line under SidepanelHeader.
  • Fix: a hidden ItemActions reveal='hover' no longer leaves its container's gap behind in Item, ItemRow or ItemGroupHeader. Trailing content lines up with rows without actions and doesn't shift when the actions appear.
  • Fix: SidebarCollapseGroup no longer passes its actions prop to the DOM.

Issue(s)

Related: RocketChat/Rocket.Chat#42520, which applies the Item components in Rocket.Chat.

Further comments

This PR used to hold the whole Item migration. It is now split into three independent PRs off main:

  • this PR: Sidebar and Sidepanel
  • #2310: Options, Select and Menu (merge first)
  • #2311: ItemMeta truncate

The hidden-actions gap fix is the first commit here and in #2310, because both PRs start rendering ItemActions reveal='hover'. Whichever merges second drops the duplicate when rebased onto main.

If #2310 merges first, this PR needs a rebase and yarn jest -u. Only generated React ids in the Sidebar and Sidepanel snapshots change.

Not changed here: SidebarLink still renders its menu inside its anchor. Moving it out changes the DOM for existing callers, so it belongs in a separate fix. Container rows are the way to keep menus and buttons out of the link.

Each component change has jest-axe coverage and updated snapshots. Container rows also have specs checking that no button sits inside the link and that the link is named by its title alone. fuselage.api.md and the visual-regression snapshots were regenerated for this branch.

šŸ¤– Generated with Claude Code