Repository navigation
feat: migrate the sidebar and side panel to Item - #42819
Merged
Merged
Conversation
Contributor
|
Looks like this PR is ready to merge! 🎉 |
Contributor
|
Note Currently processing new changes in this PR. This may take a few minutes, please wait... ⚙️ Run configuration
⛔ Files ignored due to path filters: 12
📒 Files selected for processing: 92
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
juliajforesti
force-pushed
the
feat/item-bridges
branch
from
October 15, 2026 21:22
14ce269 to
a00bb61
Compare
🦋 Changeset detectedLatest commit: b052793 The changes in this PR will be included in the next version bump. This PR includes changesets to release 22 packages
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 |
Codecov Report❌ Patch coverage is Additional details and impacted files@@ Coverage Diff @@
## develop #42819 +/- ##
===========================================
+ Coverage 70.55% 70.61% +0.05%
===========================================
Files 5414 5414
Lines 229897 230512 +615
Branches 41802 41902 +100
===========================================
+ Hits 162201 162767 +566
- Misses 62372 62432 +60
+ Partials 5324 5313 -11
Flags with carried forward coverage won't be shown. Click here to find out more. 🚀 New features to boost your workflow:
|
juliajforesti
force-pushed
the
feat/item-bridges
branch
from
October 15, 2026 22:25
a00bb61 to
22b5d9f
Compare
This was referenced Oct 15, 2026
juliajforesti
changed the title
Sidebar and Sidepanel to Item componentsItem
ggazzo
force-pushed
the
feat/item-bridges
branch
from
October 16, 2026 01:20
22b5d9f to
5ff4728
Compare
ggazzo
added
preview
Contributor
🖥️ UI previewRemoved from |
ggazzo
force-pushed
the
feat/item-bridges
branch
from
October 16, 2026 04:54
ef8fcc1 to
c5de651
Compare
ggazzo
force-pushed
the
feat/item-meta-truncate
branch
from
October 16, 2026 05:08
854224f to
e54ebd8
Compare
ggazzo
force-pushed
the
feat/item-bridges
branch
from
October 16, 2026 05:12
c5de651 to
fe5cd54
Compare
ggazzo
force-pushed
the
feat/item-meta-truncate
branch
from
October 16, 2026 05:18
e54ebd8 to
73fc215
Compare
ggazzo
force-pushed
the
feat/item-bridges
branch
from
October 16, 2026 05:18
fe5cd54 to
912586b
Compare
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…ItemLink` and `SidebarItemActions` Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…logy Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
… the bridged `SidebarItem` Room rows are container rows: the title holds the `SidebarItemLink`, and menus and call buttons sit beside it in `SidebarItemActions`. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…debarCollapseGroup` Removes the `Condensed`, `Medium` and `Extended` templates. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…med `ItemTitle`s
Forwards `focused` and `focusVisible` to `Item`, so a sidebar row used as a listbox option can be its active descendant.
…its results The search field is a combobox, so it keeps DOM focus and points at the active result through `aria-activedescendant` instead of moving focus into the list. The result under the pointer becomes the active one, so a single row is highlighted and Enter opens it, and the focus ring shows only when the keyboard picked it.
ggazzo
force-pushed
the
feat/item-bridges
branch
from
October 16, 2026 06:02
912586b to
b052793
Compare
ggazzo
marked this pull request as ready for review
October 16, 2026 13:14
coderabbitai
Bot
added
type: bug
type: feature
ggazzo
approved these changes
Oct 16, 2026
ggazzo
added
the
stat: QA assured
dionisio-bot
Bot
added
the
stat: ready to merge
This was referenced Oct 19, 2026
ivans-netto
added a commit
that referenced
this pull request
Oct 21, 2026
develop moved the sidebar to `Item` (#42819) and to one keyboard model for lists of rows (#42842). The Teams panel follows both: - rows take the new RoomListRow data (viewMode, showAvatar); - the list uses the shared useSidebarListNavigation; - a team header toggles with Enter and Space, like the Inbox groups. Left and Right now move between a row's controls, so they no longer collapse a team. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Proposed changes (including videos or screenshots)
ARCH-2496
Migrates the Sidebar and Sidepanel components to the
Itemcomponents, and applies the result to the sidebar, side panel and navbar search in the same PR.It also makes the room search behave like the composer popups from #42820 when moving through it with a keyboard or a pointer: focus stays in the search field, one result is active at a time, the pointer and the arrow keys both move it, and the focus ring shows only when the keyboard picked it.
Room search after the arrow keys and then the pointer: develop keeps the ring on one result and the hover on another, this PR highlights one
Captured against open.rocket.chat with
yarn dev:next,developabove and this PR below. Private room names are blurred.Fuselage
Renders the Sidebar and Sidepanel components with the
Itemfamily from RocketChat/fuselage#2281. The publicrcx-sidebar-*classes stay in place.SidebarItem, its parts andSidebarLinkrender withItem,ItemMedia,ItemIcon,ItemContent,ItemRow,ItemTitle,ItemDescription,ItemMetaandItemActions.labelprop onSidebarItemIconnames the icon for assistive technology.SidebarGroupTitle,SidebarCollapseGroupandSidebarCollapseGroupMenurender asItemGroupHeader,ItemGroupandItemActions. The collapse group's list is named by its title. This keeps the restyled collapse group header from feat(fuselage): Restyle the sidebar collapse group header fuselage#2285.mdinset from theItemscale, set inside the components. It replaces the fixed 12px inset, and headers and rows line up.SidebarItemcan render as a container row: passis='div'and put the newSidebarItemLinkinsideSidebarItemTitle. Only the title is the link, and it covers the whole row, so menus and buttons sit beside it instead of inside it. The newSidebarItemActionsholds always-visible buttons, such as accepting or rejecting a call.SidebarItemalso gets ahighlightedprop. Adivrow dropshref,target,relanddownload. The default anchor row is unchanged.SidebarItemforwardsfocusedandfocusVisibletoItem, so a sidebar row can be a listbox's active option.SidebarDividerrenders asItemDivider.SidepanelListrenders as anItemGroupandSidepanelDivideras anItemDivider, keeping the full-width line underSidepanelHeader.SidebarCollapseGroupno longer passes itsactionsprop to the DOM.Rocket.Chat
SidebarItem is='div'+SidebarItemLink): only the title is the link, and the menu and call buttons sit beside it inSidebarItemActions. Group headers use the bridgedSidebarCollapseGroup, and the filters useItemparts.RoomListItem; theCondensed,MediumandExtendedtemplates are removed.SidebarItemparts.aria-activedescendant, as the combobox pattern expects. The result under the pointer becomes the one Enter opens.useRoomIconLabel), andUnreadBadgerenders withBadge.Issue(s)
Replaces RocketChat/fuselage#2295, and takes over the sidebar, side panel and navbar search parts of #42520.
Steps to test or reproduce
yarn workspace @rocket.chat/fuselage storybook: theSidebar,SidebarItemandSidepanelstories.Further comments
Based on
develop. The room search reusesuseActiveDescendant, which landed with #42820.The search commits sit on top, since they need the
Item-basedSidebarItemfrom this PR:feat(fuselage):SidebarItemforwardsfocusedandfocusVisiblefix: the room search keeps focus on its comboboxPart of the
Itemmigration, split by area:Item#42818: options, selects, menus and member lists (merged)Itemand addItemMetatruncate#42820: composer popups andItemMeta truncate(merged)Itemin room files, omnichannel, Outlook and ongoing call lists #42832: lists that only useItem(independent)Not changed here: the fuselage
SidebarLinkstill renders its menu inside its anchor. Container rows are the way to keep menus and buttons out of the link.Jest snapshots and the visual-regression baselines (arm64 image) were regenerated here.
fuselage.api.mdisn't part of this repository, so those changes were dropped.Summary by CodeRabbit