docs(fuselage): propose that components take no styling props

Draft
GG
16m ago
+3334-2811

Proposed changes

Proposes that Fuselage components accept only DOM/ARIA attributes and the variations they declare: no Box styling props, no free is, no rcx-* props. The change lands on develop first; 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 (one pull request per step, BoxProps removed from component types in 9.0.0).
  • 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 933 (the count on develop at 1034e1f85d), so a new styling prop on a component fails CI while the migration lowers the number. Without it the count grew by 26 sites in one day of develop.

Findings on develop (36b596b453):

Use-sites outside Fuselage passing undeclared styling props804
… inside Fuselage45
Components receiving them57
Elements laid out implicitly by Margins/Scrollable86

By category: dimensions 381, spacing between siblings 343, own content layout 169, flex child 146, visual 143, undeclared is 41, rcx-* props 26. Most affected: Skeleton 179, Icon 119, Button 71, Callout 44, FieldLabel 44, IconButton 41.

Open questions for design are listed in the proposal: which variations components declare (for example Icon color, a full-width Button), and what replaces Scrollable. Skeleton, the largest by far, is migrated last.

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 summary and writes every finding with its file:line.

Further comments

Related: the spacing scale proposal (#42973), which the spacing migration step builds on.