[ggazzo]

Proposed changes

Fuselage components accept only DOM/ARIA attributes and the variations they declare: no Box styling props, no free is, no rcx-* props. The container owns the layout, mostly through gap. This pull request carries the proposal, the scan that measures it, and the migration of the app and of Fuselage's own compositions, one commit per component or step. The Tamagui pilot (#42942) is rebased on it.

• docs/proposals/fuselage-component-style-props.md: why, what the code does today, how each category of prop is replaced, and the plan.
• packages/fuselage/scripts/scan-style-props.mjs: an AST scan listing every use of a Fuselage component that passes a styling prop it doesn't declare, plus every element laid out by Margins/Scrollable. Run node packages/fuselage/scripts/scan-style-props.mjs [out.json] from the repository root.
• .github/workflows/ci-code-check.yml: the lint job runs the scan with --max <n>, so a new styling prop on a component fails CI. Each migration commit lowers n to its new count.

Result

	develop	this branch
Scan findings (total)	933	378
Skeleton findings	185	10
Elements laid out by Margins/Scrollable outside Fuselage	75	26

Commits, by step

Step	What
Scan, CI limit, proposal	scanner, --max in the lint job, the proposal (Skeleton last)
rcx-* props in the app	dead classes removed, the live one becomes className
Icon	gap on the container (two passes), flex-shrink: 0 in .rcx-icon, input addon Icons no longer centred by hand, Button/Tag own their icon spacing
Callout, Divider, Field family, Button/IconButton, inputs and selects, Modal/Label, Tile/Chip/Tag/Card/Grid/CheckBox/Tabs/…	one commit per component or family: spacing becomes gap on the container, flex-child and sizing props move to the parent's layout
Margins/Scrollable	replaced by gap/padding in 18 app files
Skeleton	declares width/height; stacked skeletons spaced by their container
Fuselage's own compositions	rcx-* passed between components become a merged className; layout props move to SCSS or the container
Stack	new Fuselage layout component (direction, gap, align, justify, wrap, grow), and the 77 gap containers this branch added that it fits
Review fixes	retry icon spinner, Stack typing, MessageBlock fixed width, shared not-available callout, simpler divider boxes, Position keeping its child's style

Fuselage changes visible to consumers (changesets)

• Stack (new component, minor).
• .rcx-icon: flex-shrink: 0.
• .rcx-tag: gap: 4px between icon and label; Tag icons no longer carry their own margin.
• CardGrid items stretch their content (cards no longer need height='full').

Issue(s)

https://rocketchat.atlassian.net/browse/ARCH-2573

Steps to test or reproduce

• node packages/fuselage/scripts/scan-style-props.mjs /tmp/style-props.json prints the remaining findings with file:line.
• Every change was compared before/after in Storybook, rebuilding the site's local layout at its real and narrowest widths: pixel-identical unless listed below.
• Final check, develop against this branch:
  • all 531 Fuselage stories at 1000 and 360px are identical; Fuselage's visual regression suite passes;
  • the real app on open.rocket.chat (UI preview, preview label), home, rooms and every contextual bar, account, directory, admin, marketplace, modals, at 1280 and 400px: identical except the sidebar badge listed below.

Further comments

Visible changes in this branch

• Tag icon spacing: RoomForewordUsernameListItem passes an icon without margin, so it now gets the 4px gap (as Tag's own stories show).
• Sidebar navigation badges: marketplace "Requested" and similar badges are no longer squeezed (18.2 → 20.9px wide).

Open questions

Most remaining findings need a declared variation, a design call, or accepting a small visual change.

1. Variations to declare:
   • Icon color (50 sites, tokens only)
   • ModalIcon/ModalTagline variant
   • Divider flush / light / compact vertical
   • Chip small
   • FieldRow align
   • FieldLabel is (label | span) and text variants
   • ButtonGroup stretch='equal'
   • TableCell header
   • FramedIcon size
   • Tile flush
   • Tabs stretch
   • Skeleton inverted
2. Visual changes to accept or reject:
   • icons inline in text becoming flex (0.5–1px)
   • Throbber's -1px
   • Margins leaks into Select's hidden element and into Pagination
   • AutoComplete/MultiSelect chips spaced by gap
   • date/time input height
   • a few 2–4px spacing quirks
3. API confirmations:
   • Skeleton declaring width/height
   • Stack's grow
   • lone padding boxes for insets
   • Tile replaced by a Box with Tile's classes in Fuselage's dropdowns
4. Structure:
   • --max changes in most commits, so extracting a single commit conflicts on that line.
   • The Fuselage API changes could be split into their own pull requests before merging.
   • The off-scale gaps (2, 6, 10, 14, 15, 19, 20, 28) go to the spacing-scale work (docs(fuselage): propose enforcing the spacing scale #42973).

All open questions, by component

Icon (from Icon agent)

• color variation: proposed union of text/status tokens; off-token sites (hex, red, white, stroke-highlight, Palette string): 5 app + 3 uikit-playground.
• verticalAlign (4): flex+A/B or alignment variation; TileFrame text-bottom optical nudge.
• Text-run icons switching to flex change pixels: CountMACCard (601px), VideoConfBlockModal (378px), InfoPanelLabel (wraps at 140px), PeerCardSlot ×2 untested.
• MenuItemContent inline icons (useAppMenu ×7): GenericMenuItem icon prop renders separate column (visual change).
• Optical nudges: GenericPreview -2, WidgetInfo marginBlockEnd 4.
• Shared containers without gap: MessageFooterCallout (ComposerAirGappedRestricted, MessageComposerIcon), HeaderState, onboarding Description ListItem spacing (12 vs 4).
• AbacPreviewMemberGroup/AbacRoomPreviewMemberRow middle-box offset; SidebarNavigationItem/RoomRow marginInline outer edge; WorkspaceCardTextSeparator mixed spacing.

Divider (from Divider agent)

1. flush (no margin) variation: KeyboardShortcutsModal:127, AppLogsItem:61, CreateCloudWorkspaceForm:182, CounterRow:28, HeaderDivider:3 (-2 pull).
2. Labelled Divider without inline padding: ForwardChatModal:131, LoginServices:43.
3. Color light: OmnichannelFilters:24, TeamCollabFilters:19, MessageComposerActionsDivider:5.
4. Compact vertical (4px) / stretching vertical: HeaderToolbarDivider:3, MessageComposerActionsDivider:5, CounterRow.
5. NavBarAISearchListbox:116 — display:contents overlay DOM.
6. fuselage-ui-kit DividerBlock:9 — UiKit surface spacing.

Callout (from Callout agent)

1. Single-component padding wrappers for lone insets (Canned×2, Priority, Sla, Tag×2, Unit, AdminUserForm×2, MessageSearchTab, DiscussionsList, ThreadList, AdminUsersPage, UserReportInfo, 3 AbacAttributesRemovalWarning callers): keep, or containers (ContextualbarDialog/MainContent/ModalContent) accept an inset?
2. UserMessages:50: 8px top offset on lone "user deleted" callout a bug? gap fix = visual change.
3. AccountSecurityPage:61: 2FA email margin collapse; accept +16px in callout+email state or move TwoFactorEmail margin to parent.
4. Subscription callouts (SubscriptionPage:127, SubscriptionCalloutLimits ×4): SubscriptionPage reads useLicenseLimitsByBehavior so one conditional padding+gap box holds all.
5. ComposerOmnichannelCallout:40: accept 2px change or drop MessageComposer marginBlockStart={2}.
6. Extra grouping Boxes only for gap placement: AICenterOverview, MessageSearchForm, BusinessHoursForm, NewZapier.
7. Conditions hoisted into booleans so gap groups render only when non-empty (AppDetails, SearchPage).
8. Container Box margins to non-sibling edges (AbacMembershipPreview, Create*Modal, VideoConf): later from ModalContent?

• Not migrated: ContactInfo alignItems; Margins-laid-out ×12.

Field family (from Field agent)

1. FieldRow align?: 'start'|'end' (flex-start ×6, initial ×3, end ×1 + EnterE2E alignSelf end): would remove 9 grouping Boxes added.
2. FieldLabel is ×14 all 'span' → is?: 'label'|'span' or standalone flag.
3. FieldLabel fontScale ×6: variant='option' (p2) + terms variant; CloseChatModal note → FieldHint (visual change).
4. Field flexShrink ×10 side-by-side: drop flex-shrink:0 from .rcx-field or horizontal field row container.
5. Off-rhythm spacing inside Field (FieldHint 12/0/4, FieldRow 8/12, FieldLabel 8/0/4, PeerAutocomplete -2, CodeMirrorBox 4): variation or visual change.
6. Lone Field insets with Fuselage/shared container: AddExistingModal, ThreadChat, AgreeTermsField (forward className).
7. Centered form column (maxWidth x600 alignSelf center) ×3: app FormColumn container?
8. FieldLabel containing action (emoji, canned response): FieldLabel end slot or accept 8px/4px change.
9. Chip/CheckBox/IconButton margins inside new FieldRow groups → gap later.
10. CloseChatModal 4 nested gap boxes reproduce uneven spacing: consistent gap (visual change)?

• FieldLabel alignSelf stretch removed: identical pixels but label click area shrinks to text (behavior note).

Button / IconButton (from Button agent)

1. Equal-width stretch (9 sites: AdminUserCreated, RoomMembers, TeamsChannels, VideoConfButton, UserCardAction): ButtonGroup stretch='equal' (flex-basis 0).
2. Opt-out of stretch (AccountProfilePage, UserPresenceEditorForm, RoomInfo, TeamsInfo, UserInfoActions): Fuselage CSS .rcx-button-group--stretch > .rcx-button--icon {flex-grow:0} + Button pattern (changeset).
3. Insets needing one-component Box: NavBarSearchIntelligentSection:55, AdminInviteUsers:72 (or accept visual change).
4. Negative margins compensating addon padding: AppInstallPage:50, UserAvatarEditor:130 → addon size/variant.
5. Spacing gap can't express: LinearScaleElement (12), MessageFooterCalloutAction, AppStatus:149, header rows (Favorite, RoomHeaderCategoryMenu, HeaderState, PageHeaderNoShadow), SidebarTogglerButton, Action:6, RetryButton, LoginSwitchLanguageFooter, LoginServices:57, uikit-playground tiles.
6. position overlays (CodeBlock, ScreenshotCarousel ×2, HeaderToolbarAction, playground ×2): allow positioning props or overlay slot.
7. minWidth='4ch' (ButtonElement ×2, LinearScaleElement): compact variation.
8. Lone Button wrapped in ButtonGroup to keep natural width (SettingsSection, TwoFactorEmailModal): OK pattern?

• Not identical, left: Setting:142 (strut), NotificationPreferencesForm:87 (hidden Select sibling), NewImportPage:208/CreateFirstMemberForm:100 minHeight, AppLogsFilter wrap row.

Inputs / selects (from inputs agent)

1. Date/time InputBox height='x20' ×4 (audit DateRangePicker ×2, PruneMessagesDateTimeRow ×2): inner date/time input is 22px → fix in Fuselage (changeset) then drop props.
2. TextInput minWidth='x220' (FilterByText, UsersTableFilters): minWidth x280 on container (small visual change <280px) or declared min-width.
3. Margins around Select shifts trigger 8px via hidden Box (ColorSettingInput, ContactInfoHistory): accept removal as fix (visual). flexShrink={0} on single paginated selects (AutoCompleteAgent, AutoCompleteContact, AutoCompleteOutboundProvider, EditDepartment offline): long label overflow → truncation; accept as fix. withTruncatedText on RoomFormAttributeField selects ×2: declared truncation variation or drop. ReportUserModal TextAreaInput marginBlockEnd={4} inside FieldRow: drop (4px) or Field-level. CreateRoomModalSkeleton InputBoxSkeleton marginBlockEnd 16: column gap 16 (visual change, probably intended). uikit-playground SignInSignUp InputBox: migrate with Button. Found: Select drops width/minWidth/maxWidth (dead props, e.g. UsersTableFilters fixFiltersSize). DepartmentTags row at 240px: 24px A/B diff after Button rebase (believed TextInput AA noise) Modal / Label (from Modal-Label agent) ModalIcon color → variant='danger|warning|info|success' (WarningModal, ResetKeysE2EEModal, AppUpdateModal, MyDataModal, GenericModal). ModalTagline color 'annotation' (GenericModal upsell) → subtle variation. ModalBackdrop backgroundColor transparent (Backdrop.tsx, OutboundMessageModal) → transparent variation. Modal sizing (IframeModal height, ConferenceThreadModal width x480) → size variation; OutboundMessageModal display none while closing → declared hidden. OutboundMessageModal ModalContent height 100% → "fill" variation. ModalHeroImage width/height (GenericUpsellModal) → declared size. ContextualbarHeader marginBlockStart={-1} (ui-client wrapper, every bar): accept 1px or Fuselage absorbs. Label marginBlock 4 ×5 (AnalyticsPage, QueueListFilter): Select hidden sibling doubles gap → use Field* (visual) or accept 4px. Label as body text (withDoNotAskAgain, uikit-playground ×10) → Label text-scale variation or Box is='label'. Dialpad TextInput inset marginInline 24 (widget ~222px): padding on Field or declared inset (inputs agent) Fuselage-side (Icon in Fuselage) Tag gap 4px (Fuselage, changeset) VISIBLY changes RoomForewordUsernameListItem (+4px between icon and name; 987px): keep, revert, or opt-in gap. Button icon prop always x16: CallHistoryContextualbar:114/125 use x20 → Button icon size or switch to x16. Medium Tag icon slot 1px vertical offset vs inline icon (HeaderTagIcon): nudge in Tag? Icon flex-shrink:0 changeset added as precaution (no story changed). Tail (Tile/Chip/Tag/Card/Grid/CheckBox/Tabs/TableCell…) Chip height='x20' ×9 (+ minHeight x20 ×2) → small Chip variation. Chip textTransform uppercase (AppDetails categories) → label Chip variation. RoomTags padding+gap: 1px shift only when truncating — accept? Tag color (AppInstances) variation; SidePanelTag maxWidth 50% needs container cap; AppStatusPriceDisplay waits Button. Subscription Grid/GridItem/Card height (Grid ×2, GridItem ×11, Card ×6) → CardGridItem with spans + min row height. CreateCloudWorkspaceForm Grid marginBlock 16 → Grid spacing decision. TableCell is='th' ×19 → header cell variation; width ×8 → column widths on table head; DescriptionListEntry visual props. FramedIcon size 20/28 → size variations. Color variations: MessageStatusIndicatorItem (danger/info), MenuItemIcon iconColor, uikit Chevron. Tile as popover surface ×11 → flush/popover Tile variation or dropdown surface. Tabs: ModConsoleReportDetails paddingBlockStart (ContextualbarDialog), UiKit TabNavigationBlock marginBlock 24, WizardTabs → stretch Tabs variation. OutboundMessageWizardErrorState States inside ModalContent. Margins-driven left: RoleCell, import Throbbers, AuditPage States. One-offs: MessageMetricsReply position, SidebarItemLink is='button', Options width. CardGrid stretch (Fuselage, changeset): .rcx-card-grid__item display grid. CheckBox styling props go to hidden → margins never applied (dead props everywhere).

Icon round 2

1. Icons in text runs, no identical layout: CountMACCard:21 (accept 0.5px, match CountSeatsCard), VideoConfBlockModal:12 (Button icon prop = 16px icon, visible; or 1px), InfoPanelLabel:9 (identical unless label wraps), PeerCardSlot:15/16 (1px shift).
2. UserAvatarChip:16 verticalAlign: Chip should lay out its children with flex (Fuselage change).
3. RoomActivityIcon:16 verticalAlign middle in truncated cell: leave or accept 1px.
4. HeaderState:15: RoomHeader groups encrypted/translate/topic with gap (bigger restructure).
5. MessageComposerIcon:8 / MessageFooterCallout: move whole callout to gap 4 and drop children margins (public ui-composer).
• Untouched: GenericPreview:9 (-2 nudge), WidgetInfo:36, PlanCardHeader:8, useAppMenu MenuItemContent ×7, uikit-playground height/invisible, ActionExternalServiceUrl:90.

Margins / Scrollable removal

1. Throbber margin-block -1px resurfaces (ImportProgressPage ×2, PrepareImportPage): Throbber variation or accept 1px.
2. Margins leaking into plain-DOM components: EmailInboxForm (ButtonGroup → gap 38/22, or gap 22 visual), UsersInRolePage Pagination chevrons (accept fix).
3. Inline icon+text in table cells (ChannelsOverview, MessagesPerChannelSection icon cell, ChannelDesertionTableRow): flex moves icon 1px; exact only with margin on text span.
4. RoleCell inline cell: row height 38→41 with inline-flex gap.
5. AuditPage: States overrides className, Margins reaches inner parts; needs States/Callout decision.
6. MemoizedSetting: Callout margin collapse varies per input type; accept 2px.
7. UsersTableFilters wrap case differs; reverted.
8. ContactInfoDetails Divider margin override → Divider flush.
9. AnalyticsPage chart Field spills 2px; paddingInline 2 (2px narrower).
10. AppStatusPriceDisplay lone Tag inset → AppStatus container.
11. Scrollable ×3 (MessageForm, RecipientForm, RepliesForm): wait for Fuselage Scrollable rendering own container.
• Review: SecurityLogsTable ButtonGroup became plain Box role=group gap 20 (semantics check); ContactInfoHistory kept 8px indent from Margins leak.

Skeleton

1. Confirm API: Skeleton declares width/height (rest of Box-styling type kept for now; callers still use margins/bg/flex at 10 sites).
2. Inline style gridTemplateColumns in AbacRoomPreviewSkeleton/UserCardSkeleton (Box has no grid-template prop): OK or flex?
3. PageSkeleton width x320 maxWidth full in PageHeader h1: declare maxWidth or accept min(320px,100%) header-wrap change <800px.
4. Tooltip skeletons backgroundColor surface-light ×5 → inverted variation.
5. ReportCardLoadingState: accept bar 16px shorter (stops overflowing).
6. VideoConfMessageSkeleton ×2 paddingBlock: explicit height or shorter bar.
7. AccordionLoading margin 2px across block/flex parents: gap 4 padding 2 (AppInstances +2px).

Stack (review pass)

1. grow on Stack (13 sites) is a flex-child prop; keep, or those go back to Box?
2. shrink/minWidth 0 not added (2 sites); maybe minWidth 0 default for rows later.
3. 3 Stacks inside <Margins block={24}> still receive injected margins (Margins doubts pending).
4. Stack passes DOM attrs incl. className/style (like ButtonGroup).
• 85 gap Boxes stay Box (padding/margin 46, sizes 12, is 8, spread 7, visual 7, grid 4, stretch 1).

Fuselage internals (step 4)

1. Icon color in Fuselage (SelectAria chevron, MessageGenericPreviewIcon public API): treat Icon color as declared in scanner once variation lands?
2. Tile padding: 5 sites swapped Tile for Box with rcx-tile classes (duplicates Tile class names) vs Tile padding='none' variation.
3. AutoComplete/MultiSelect inner Margins all x4: gap is visual change for renderSelected consumers (~17) → accept with changeset + fix app renderSelected margins.
4. AudioPlayerControls IconButton is='a' → link variation/href.
5. Select addon rule .rcx-select .rcx-select__addon {margin-inline:4px} next to InputBox addon area: OK?

Review findings (structural)

• --max edited in 51/56 commits → any extraction conflicts. Option: drop per-commit --max edits, set once at the end (history rewrite + force push), or CI compares with develop's count instead of a constant.
• PR mixes migration categories + 5 Fuselage API changes (Stack, CardGrid stretch, Icon flex-shrink, Tag gap, Skeleton types) vs proposal's one-category-per-PR plan (user chose single PR; split Fuselage API commits into own PRs later?).
• 100 of 414 remaining findings in files this PR touches (half-migrated files).
• Off-scale gaps to hand to spacing-scale PR docs(fuselage): propose enforcing the spacing scale #42973: 15, 14, 10, 6, 2, 20, 28, padding 19.
• FieldRow default gap would delete 10 row Stacks + 7 wrappers (needs visual check).
• MessageBlock fixed width CSS fixed (width:100 → 100%), identical in tested layouts, no changeset; Stack story now shows tint bg

Final visual check

• SidebarNavigationItem badge (marketplace 'Requested 76') no longer squeezed: 18.2→20.9px, starts 2.7px left (70b7701/c24485c65c). Arguably a fix; accept or restore width='100%' on wrapper.
• Everything else identical: 1062 Fuselage story shots; all app routes incl. admin on open (1280/400).

[dionisio-bot]

Looks like this PR is not ready to merge, because of the following issues:

• This PR is still a draft
• This PR is missing the 'stat: QA assured' label
• GitHub is still computing mergeability — this will refresh shortly

Please fix the issues and try again

If you have any trouble, please check the PR guidelines

[changeset-bot]

🦋 Changeset detected

Latest commit: 72e30d7

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

This PR includes changesets to release 22 packages

Name	Type
@rocket.chat/fuselage	Minor
@rocket.chat/meteor	Patch
@rocket.chat/uikit-playground	Patch
@rocket.chat/core-typings	Patch
@rocket.chat/fuselage-forms	Patch
@rocket.chat/fuselage-toastbar	Patch
@rocket.chat/fuselage-ui-kit	Patch
@rocket.chat/gazzodown	Patch
@rocket.chat/layout	Patch
@rocket.chat/onboarding-ui	Patch
@rocket.chat/storybook-config	Patch
@rocket.chat/ui-account	Patch
@rocket.chat/ui-avatar	Patch
@rocket.chat/ui-client	Patch
@rocket.chat/ui-composer	Patch
@rocket.chat/ui-conference	Patch
@rocket.chat/ui-media	Patch
@rocket.chat/ui-video-conf	Patch
@rocket.chat/ui-voip	Patch
@rocket.chat/web-ui-registration	Patch
@rocket.chat/ui-livekit	Patch
@rocket.chat/rest-typings	Patch

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

[coderabbitai]

Important

Draft PR not reviewed

Draft PRs are not automatically reviewed by default.

• Trigger a manual review

To automatically review draft PRs, update your CodeRabbit configuration:

reviews:
  auto_review:
    drafts: true

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[codecov]

Codecov Report

❌ Patch coverage is 76.25523% with 227 lines in your changes missing coverage. Please review.
✅ Project coverage is 71.39%. Comparing base (1034e1f) to head (72e30d7).
⚠️ Report is 3 commits behind head on develop.

Additional details and impacted files

@@            Coverage Diff            @@
##           develop   #42974    +/-   ##
=========================================
  Coverage    71.39%   71.39%            
=========================================
  Files         5281     5291    +10     
  Lines       227560   228095   +535     
  Branches     42151    42120    -31     
=========================================
+ Hits        162457   162853   +396     
- Misses       59867    60043   +176     
+ Partials      5236     5199    -37     

Flag	Coverage Δ
unit	71.44% <76.25%> (-0.02%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.