refactor(fuselage): components take no styling props
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:
-
The migration. One commit per component or family moves spacing to
gapon 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. -
The variations the migration needed. These are declared on the components instead of passed as
Boxprops:StackandPopoverSurface;Dividerflush/light/vertical sizes;Buttoncompact,ButtonGroupstretch='equal',IconButtonbadgePosition/color;Chipsmall/label,Tileflush;TablecolumnsandTableCellrowHeader;Iconcolor(semantic tokens),Skeletoninverted;InputBoxendAddonFlush,FieldRowjustify;Modalsizing,ModalIconvariant.
isis narrowed where it is legitimate:Button/IconButtonto'button' | 'a',TableCellto'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.
develop | this branch | |
|---|---|---|
| Scan findings | 914 | 1 |
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 1passes 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.