refactor(fuselage): components take no styling props

Merged
GG
5d ago
+6415-4817

Proposed changes (including videos or screenshots)

Fuselage components stop taking Box styling props from their callers. A component accepts DOM/ARIA attributes and the variations it declares (no margins, sizes, flex-child props, colours, free is or rcx-* props), and the container owns the layout, mostly through gap. The rule and its reasoning are in docs/proposals/fuselage-component-style-props.md.

The lock, scripts/scan-style-props.mjs run in the lint job with --max, lives in #43056. It counts every use of a Fuselage component that passes a styling prop it doesn't declare, and every element laid out by Margins/Scrollable, starting at --max 914, the count on develop.

The pull request has two parts:

  1. The migration. One commit per component or family moves spacing to gap on the container, sizing and flex-child props to the parent's layout, and spacing that a component should own into its own styles. Fuselage's own compositions get the same treatment.

  2. The variations the migration needed. These are declared on the components instead of passed as Box props:

    • Stack and PopoverSurface;
    • Divider flush/light/vertical sizes;
    • Button compact, ButtonGroup stretch='equal', IconButton badgePosition/color;
    • Chip small/label, Tile flush;
    • Table columns and TableCell rowHeader;
    • Icon color (semantic tokens), Skeleton inverted;
    • InputBox endAddonFlush, FieldRow justify;
    • Modal sizing, ModalIcon variant.

    is is narrowed where it is legitimate: Button/IconButton to 'button' | 'a', TableCell to 'td' | 'th'.

The last commit merges the pull request's changesets into one. Once both pull requests are in, --max in #43056's CI step drops to 1.

developthis branch
Scan findings9141

The one finding left, the ContactInfo conflicts Callout, stays on purpose: centring its icon would need a new Callout API.

Visible changes are small and were reviewed one by one in Storybook. Most layouts are pixel-identical. The intended differences are covered by the visual regression baselines updated in this branch, and are listed in the changeset.

Issue(s)

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

Steps to test or reproduce

  • Scan, with #43056's script: node scripts/scan-style-props.mjs --max 1 passes on this branch, and adding a styling prop to any Fuselage component makes it fail.
  • Storybook: the Fuselage visual regression suite covers the changed and the new components.
  • In the app, the screens with visible changes are:
    • the room header;
    • message attachments and UiKit blocks;
    • admin forms and settings;
    • the omnichannel filters and contact info;
    • the Marketplace;
    • login and registration.

Further comments

Merge order: #43056 (scanner and CI step) can be merged first, independently.