feat(fuselage): Add the `Item` family

Merged
JU
8d ago
+8476-4

Proposed changes

Adds the Item family to @rocket.chat/fuselage. It's one set of composable parts for any list row made of leading media, a title and description, and trailing actions. This is the Fuselage half of the Item family proposal. Migrating Rocket.Chat to it is a separate PR.

Parts: ItemGroup, ItemGroupHeader, ItemGroupTitle, Item, ItemMedia, ItemIcon, ItemContent, ItemRow, ItemTitle, ItemDescription, ItemMeta, ItemActions, ItemLink, ItemDivider, ItemSkeleton.

  • No size prop. A row's height comes from its content: the taller of the media and the text lines, plus padding. With two text lines, the gap widens from 4px to 8px through :has().
  • inset (sm / md / lg) adds space at the start and end only, so the row lines up with its container's gutter. It never changes the height.
  • No implied semantics. Every part renders a div and sets no role. Consumers pass is / role for the pattern they need: a list (ul/li), a listbox (option) or a menu. The exception is ItemLink, which renders an a with a required href; with is="button" the href isn't needed. It stretches over the whole row, so actions sit beside it and aren't nested inside the link.
  • ItemActions as a direct child of Item spans every line. Inside an ItemRow, it only takes space from that line. reveal="hover" shows it on hover or focus, and it's always visible on touch devices.
  • ItemIcon: its label is added to the row link's description, so a screen reader announces "Kenji Takahashi, Away".
  • States: selected, highlighted, focused, disabled, plus variant="danger".
  • normalize.scss keeps the global link style off .rcx-item and .rcx-item__link.

Changes after review

  • Removed size from Item and ItemSkeleton. Height now comes from content. ItemSkeleton takes mediaSize and description instead.
  • ItemActions can now be placed inside an ItemRow.
  • inset on all sides was tried and then reverted. It would make every row that uses it as a gutter 16 to 40px taller.

Testing

  • 17 Storybook stories under Navigation/Item, covering the parts, states, headers, dividers, skeletons and real compositions: sidebar, search results, members, files, menu sections and select options.
  • Unit tests and snapshots in Item.spec.tsx. Visual regression snapshots updated.
  • fuselage.api.md updated. The changeset is a minor bump.

Further comments

Nothing existing is deprecated or removed here. Replacing SidebarItem, the option and menu item parts, and the old headers and dividers comes in follow-up PRs, as the migration tracker in the proposal lists.

šŸ¤– Generated with Claude Code

Proposed changes (including videos or screenshots)

Issue(s)

Further comments