Repository navigation
refactor(fuselage): components take no styling props - #42974
Merged
Merged
Conversation
Contributor
|
Looks like this PR is not ready to merge, because of the following issues:
Please fix the issues and try again If you have any trouble, please check the PR guidelines |
🦋 Changeset detectedLatest commit: d5362b4 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 |
Contributor
|
Important Review skippedToo many files! This PR contains 631 files, which is 331 over the limit of 300. To get a review, reduce the PR to 300 files or fewer by splitting it into smaller PRs or changing its base branch. Usage-priced reviews support at most 300 files. ⚙️ Run configuration
⛔ Files ignored due to path filters: 59
📒 Files selected for processing: 631
You can disable this status message by setting the
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 |
Codecov Report❌ Patch coverage is Additional details and impacted files@@ Coverage Diff @@
## develop #42974 +/- ##
===========================================
+ Coverage 71.98% 72.05% +0.07%
===========================================
Files 5274 5281 +7
Lines 224972 225469 +497
Branches 41644 41811 +167
===========================================
+ Hits 161939 162467 +528
+ Misses 57807 57778 -29
+ Partials 5226 5224 -2
Flags with carried forward coverage won't be shown. Click here to find out more. 🚀 New features to boost your workflow:
|
ggazzo
force-pushed
the
docs/fuselage-component-style-props
branch
from
October 22, 2026 00:35
5e87038 to
143f1dc
Compare
Contributor
🖥️ UI previewRemoved from |
ggazzo
force-pushed
the
docs/fuselage-component-style-props
branch
2 times, most recently
from
October 23, 2026 02:19
476f070 to
bff57bf
Compare
ggazzo
changed the title
ggazzo
force-pushed
the
docs/fuselage-component-style-props
branch
2 times, most recently
from
October 23, 2026 11:28
4837b0e to
65df6ae
Compare
ggazzo
marked this pull request as ready for review
October 23, 2026 11:43
Hacktron Security Check - SkippedReason: This PR exceeds Hacktron's 500-file review cap and will not be scanned. Split the PR into smaller changes for review coverage.
|
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
9 issues found across 687 files
Prompt for AI agents (unresolved issues)
Check if these issues are valid — if so, understand the root cause of each and fix them. When an issue isn't valid or won't be fixed in this PR, reply in its thread with the reason and then resolve the thread. If appropriate, use sub-agents to investigate and fix each issue separately.
<file name="apps/meteor/client/views/admin/moderation/UserReports/UserReportInfo.tsx">
<violation number="1" location="apps/meteor/client/views/admin/moderation/UserReports/UserReportInfo.tsx:89">
P2: The role badges lose the `spacing={1}` gap because `FieldRow` now contains only the wrapper; add the gap to the inner flex container so adjacent roles retain their previous spacing.</violation>
</file>
<file name="apps/meteor/client/components/TwoFactorModal/TwoFactorEmailModal.tsx">
<violation number="1" location="apps/meteor/client/components/TwoFactorModal/TwoFactorEmailModal.tsx:128">
P2: This changes the resend action from right-aligned to left-aligned: the old full-width flex button justified its content to the end, while `ButtonGroup` defaults to start alignment and keeps the button intrinsic-width. Preserve the existing layout with `align='end'`.</violation>
</file>
<file name="apps/meteor/client/views/audit/components/AuditLogTable.tsx">
<violation number="1" location="apps/meteor/client/views/audit/components/AuditLogTable.tsx:72">
P2: This still passes the arbitrary `flexGrow` styling prop through `DateRangePicker`, whose props are inherited from `Box`; move the growth to a wrapping `Box` and keep the picker on its DOM/value props so this composition follows the new styling boundary.</violation>
</file>
<file name="apps/meteor/client/views/admin/subscription/components/cards/PlanCard/PlanCardHeader.tsx">
<violation number="1" location="apps/meteor/client/views/admin/subscription/components/cards/PlanCard/PlanCardHeader.tsx:8">
P2: Removing `marginInlineEnd={4}` changes the plan-card header spacing by 4px because `CardHeader` already supplies an 8px gap. Preserve the previous 12px separation through the parent layout rather than dropping the margin without an equivalent gap.</violation>
</file>
<file name="apps/meteor/client/components/ABAC/AbacRoomCreation/CreateRoomModalSkeleton.tsx">
<violation number="1" location="apps/meteor/client/components/ABAC/AbacRoomCreation/CreateRoomModalSkeleton.tsx:19">
P2: This replaces each skeleton's trailing `16px` margin with a flex gap, which only applies between children, so the modal loses 16px of bottom spacing. Preserve the former trailing space with `paddingBlockEnd={16}` (or an equivalent bottom spacing declaration) on this container.</violation>
</file>
<file name="apps/meteor/client/views/account/omnichannel/PreferencesConversationTranscript.tsx">
<violation number="1" location="apps/meteor/client/views/account/omnichannel/PreferencesConversationTranscript.tsx:25">
P2: These label wrappers cannot wrap their text and tag, so long translations can overflow the `FieldRow` on narrow screens where the previous inline content wrapped normally. Add `flexWrap='wrap'` to both wrappers.</violation>
</file>
<file name="apps/meteor/client/views/admin/users/AdminInviteUsers.tsx">
<violation number="1" location="apps/meteor/client/views/admin/users/AdminInviteUsers.tsx:68">
P2: Removing `flexGrow={0}` changes the textarea from a fixed five-row flex item to one that grows in the scrollable column, potentially filling the contextual bar and changing its layout. Keep the layout on a parent container, such as a non-growing flex wrapper around the textarea.</violation>
</file>
<file name="apps/meteor/client/views/admin/import/PrepareImportPage.tsx">
<violation number="1" location="apps/meteor/client/views/admin/import/PrepareImportPage.tsx:213">
P2: This unconditional bottom padding adds 24px of extra blank space below the loaded table and pagination views. The old `Margins` transform does not reach the final native `Pagination` `nav`, so only the outer `marginBlock` supplied bottom spacing in those states; apply this padding only while the preparation indicator is shown, or otherwise preserve the loaded-state bottom spacing.</violation>
</file>
<file name="apps/meteor/client/components/UserAutoCompleteMultiple/UserAvatarChip.tsx">
<violation number="1" location="apps/meteor/client/components/UserAutoCompleteMultiple/UserAvatarChip.tsx:15">
P2: This removes the 20px height from every `UserAvatarChip`, so autocomplete selections now render as the default 28px Chip instead of their previous 20px height. Use Chip's declared `small` variation to preserve the existing layout.</violation>
</file>
Note: This PR contains a large number of files. cubic selects up to 200 of the highest-priority eligible files for this review, so some files may not have been reviewed.
View guided diff | Re-trigger cubic
| <UserCardRole key={index}>{role}</UserCardRole> | ||
| ))} | ||
| <FieldRow spacing={1}> | ||
| <Box display='flex' alignItems='center' minWidth={0}> |
Contributor
There was a problem hiding this comment.
P2: The role badges lose the spacing={1} gap because FieldRow now contains only the wrapper; add the gap to the inner flex container so adjacent roles retain their previous spacing.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. When an issue isn't valid or won't be fixed in this PR, reply in its thread with the reason and then resolve the thread. At apps/meteor/client/views/admin/moderation/UserReports/UserReportInfo.tsx, line 89:
<comment>The role badges lose the `spacing={1}` gap because `FieldRow` now contains only the wrapper; add the gap to the inner flex container so adjacent roles retain their previous spacing.</comment>
<file context>
@@ -85,10 +85,12 @@ const UserReportInfo = ({ userId }: UserReportInfoProps) => {
- <UserCardRole key={index}>{role}</UserCardRole>
- ))}
+ <FieldRow spacing={1}>
+ <Box display='flex' alignItems='center' minWidth={0}>
+ {report.user.roles.map((role, index) => (
+ <UserCardRole key={index}>{role}</UserCardRole>
</file context>
Suggested change
| <Box display='flex' alignItems='center' minWidth={0}> | |
| <Box display='flex' alignItems='center' minWidth={0} gap={1}> |
| <Chip height='x20' {...props}> | ||
| {federated ? <Icon size='x20' name='globe' verticalAlign='middle' /> : <UserAvatar size='x20' username={username} />} | ||
| <Box is='span' margin='none' marginInlineStart={4} verticalAlign='middle'> | ||
| <Chip {...props}> |
Contributor
There was a problem hiding this comment.
P2: This removes the 20px height from every UserAvatarChip, so autocomplete selections now render as the default 28px Chip instead of their previous 20px height. Use Chip's declared small variation to preserve the existing layout.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. When an issue isn't valid or won't be fixed in this PR, reply in its thread with the reason and then resolve the thread. At apps/meteor/client/components/UserAutoCompleteMultiple/UserAvatarChip.tsx, line 15:
<comment>This removes the 20px height from every `UserAvatarChip`, so autocomplete selections now render as the default 28px Chip instead of their previous 20px height. Use Chip's declared `small` variation to preserve the existing layout.</comment>
<file context>
@@ -12,9 +12,9 @@ export type UserAvatarChipProps = ComponentProps<typeof Chip> & {
- <Chip height='x20' {...props}>
- {federated ? <Icon size='x20' name='globe' verticalAlign='middle' /> : <UserAvatar size='x20' username={username} />}
- <Box is='span' margin='none' marginInlineStart={4} verticalAlign='middle'>
+ <Chip {...props}>
+ <Box is='span' display='inline-flex' alignItems='center' gap={4}>
+ {federated ? <Icon size='x20' name='globe' /> : <UserAvatar size='x20' username={username} />}
</file context>
Suggested change
| <Chip {...props}> | |
| <Chip small {...props}> |
| display='flex' | ||
| flexDirection='column' | ||
| gap={24} | ||
| paddingBlockEnd={24} |
Contributor
There was a problem hiding this comment.
P2: This unconditional bottom padding adds 24px of extra blank space below the loaded table and pagination views. The old Margins transform does not reach the final native Pagination nav, so only the outer marginBlock supplied bottom spacing in those states; apply this padding only while the preparation indicator is shown, or otherwise preserve the loaded-state bottom spacing.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. When an issue isn't valid or won't be fixed in this PR, reply in its thread with the reason and then resolve the thread. At apps/meteor/client/views/admin/import/PrepareImportPage.tsx, line 213:
<comment>This unconditional bottom padding adds 24px of extra blank space below the loaded table and pagination views. The old `Margins` transform does not reach the final native `Pagination` `nav`, so only the outer `marginBlock` supplied bottom spacing in those states; apply this padding only while the preparation indicator is shown, or otherwise preserve the loaded-state bottom spacing.</comment>
<file context>
@@ -202,50 +202,59 @@ function PrepareImportPage() {
+ display='flex'
+ flexDirection='column'
+ gap={24}
+ paddingBlockEnd={24}
+ >
+ <Box>
</file context>
Suggested change
| paddingBlockEnd={24} | |
| paddingBlockEnd={isPreparing ? 24 : 0} |
|
Layne could not analyze all changed content. Review the Check Run summary before merging. |
ggazzo
added
the
stat: QA assured
dionisio-bot
Bot
added
the
stat: ready to merge
Contributor
There was a problem hiding this comment.
3 issues found across 13 files (changes from recent commits).
Prompt for AI agents (unresolved issues)
Check if these issues are valid — if so, understand the root cause of each and fix them. When an issue isn't valid or won't be fixed in this PR, reply in its thread with the reason and then resolve the thread. If appropriate, use sub-agents to investigate and fix each issue separately.
<file name="apps/meteor/client/views/admin/permissions/PermissionsTable/RoleCell.tsx">
<violation number="1" location="apps/meteor/client/views/admin/permissions/PermissionsTable/RoleCell.tsx:69">
P2: The loading wrapper now uses baseline alignment, so the spinner is not vertically centered with the checkbox as it was in the previous flex layout. Add `verticalAlign='middle'` to this wrapper.</violation>
<violation number="2" location="apps/meteor/client/views/admin/permissions/PermissionsTable/RoleCell.tsx:69">
P3: This span contains a `Throbber` whose root element is a `div`, producing invalid `span > div` markup. Remove `is='span'` from the wrapper or render the Throbber as a span.</violation>
</file>
<file name="apps/meteor/client/components/UserAutoCompleteMultiple/UserAvatarChip.tsx">
<violation number="1" location="apps/meteor/client/components/UserAutoCompleteMultiple/UserAvatarChip.tsx:16">
P2: This explicit `margin='none'` overrides `Chip`'s `<Margins all='x4'>`, removing the chip's normal outer spacing around the wrapped avatar and name. Remove the override so the wrapper receives the chip's 4px margin.</violation>
</file>
Reply with feedback, questions, or to request a fix.
View guided diff | Re-trigger cubic
| </Box> | ||
| )} | ||
| {loading && ( | ||
| <Box is='span' display='inline-block' marginInline={2}> |
Contributor
There was a problem hiding this comment.
P2: The loading wrapper now uses baseline alignment, so the spinner is not vertically centered with the checkbox as it was in the previous flex layout. Add verticalAlign='middle' to this wrapper.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. When an issue isn't valid or won't be fixed in this PR, reply in its thread with the reason and then resolve the thread. At apps/meteor/client/views/admin/permissions/PermissionsTable/RoleCell.tsx, line 69:
<comment>The loading wrapper now uses baseline alignment, so the spinner is not vertically centered with the checkbox as it was in the previous flex layout. Add `verticalAlign='middle'` to this wrapper.</comment>
<file context>
@@ -57,15 +57,19 @@ const RoleCell = ({ _id, name, description, onChange, permissionId, permissionNa
+ </Box>
+ )}
+ {loading && (
+ <Box is='span' display='inline-block' marginInline={2}>
+ <Throbber size='x12' />
+ </Box>
</file context>
Suggested change
| <Box is='span' display='inline-block' marginInline={2}> | |
| <Box is='span' display='inline-block' verticalAlign='middle' marginInline={2}> |
| {federated ? <Icon size='x20' name='globe' verticalAlign='middle' /> : <UserAvatar size='x20' username={username} />} | ||
| <Box is='span' margin='none' marginInlineStart={4} verticalAlign='middle'> | ||
| <Chip {...props}> | ||
| <Box is='span' display='flex' alignItems='center' gap={4} margin='none'> |
Contributor
There was a problem hiding this comment.
P2: This explicit margin='none' overrides Chip's <Margins all='x4'>, removing the chip's normal outer spacing around the wrapped avatar and name. Remove the override so the wrapper receives the chip's 4px margin.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. When an issue isn't valid or won't be fixed in this PR, reply in its thread with the reason and then resolve the thread. At apps/meteor/client/components/UserAutoCompleteMultiple/UserAvatarChip.tsx, line 16:
<comment>This explicit `margin='none'` overrides `Chip`'s `<Margins all='x4'>`, removing the chip's normal outer spacing around the wrapped avatar and name. Remove the override so the wrapper receives the chip's 4px margin.</comment>
<file context>
@@ -13,7 +13,7 @@ const UserAvatarChip = ({ federated, username, name, ...props }: UserAvatarChipP
return (
<Chip {...props}>
- <Box is='span' display='inline-flex' alignItems='center' gap={4}>
+ <Box is='span' display='flex' alignItems='center' gap={4} margin='none'>
{federated ? <Icon size='x20' name='globe' /> : <UserAvatar size='x20' username={username} />}
{displayName}
</file context>
Suggested change
| <Box is='span' display='flex' alignItems='center' gap={4} margin='none'> | |
| <Box is='span' display='flex' alignItems='center' gap={4}> |
| </Box> | ||
| )} | ||
| {loading && ( | ||
| <Box is='span' display='inline-block' marginInline={2}> |
Contributor
There was a problem hiding this comment.
P3: This span contains a Throbber whose root element is a div, producing invalid span > div markup. Remove is='span' from the wrapper or render the Throbber as a span.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. When an issue isn't valid or won't be fixed in this PR, reply in its thread with the reason and then resolve the thread. At apps/meteor/client/views/admin/permissions/PermissionsTable/RoleCell.tsx, line 69:
<comment>This span contains a `Throbber` whose root element is a `div`, producing invalid `span > div` markup. Remove `is='span'` from the wrapper or render the Throbber as a span.</comment>
<file context>
@@ -57,15 +57,19 @@ const RoleCell = ({ _id, name, description, onChange, permissionId, permissionNa
+ </Box>
+ )}
+ {loading && (
+ <Box is='span' display='inline-block' marginInline={2}>
+ <Throbber size='x12' />
+ </Box>
</file context>
Suggested change
| <Box is='span' display='inline-block' marginInline={2}> | |
| <Box display='inline-block' marginInline={2}> |
The press animation sets `transform: translateY(1px)` on every child of an IconButton but a `role='status'` one. The badge wrapper has no role, so on press that transform replaced the badge's own `translate(30%, ±30%)` and the badge jumped toward the button's center. Positioning it with the `translate` property lets both apply: the badge keeps its corner, top-end or bottom-end, and moves 1px with the icon.
dionisio-bot
Bot
removed
the
stat: ready to merge
tassoevan
approved these changes
Oct 23, 2026
gabriellsh
added a commit
that referenced
this pull request
Oct 23, 2026
Follows #42974: containers space their children with gap, the number input and its remove button share a Stack row, and the dividers around the phone list are flush. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
gabriellsh
added a commit
that referenced
this pull request
Oct 23, 2026
Follows #42974: containers space their children with gap, the number input and its remove button share a Stack row, and the dividers around the phone list are flush. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
ggazzo
added a commit
that referenced
this pull request
Oct 23, 2026
#42974 Ports #42974 onto the frames, which won the rebase over develop's Box and SCSS versions: Button compact and link types, IconButton badge position, ButtonGroup stretch='equal', Chip small and label, Divider light, flush, small and stretch, Tag gap, Icon colors, Table columns and row headers, Tabs stretch, Tile flush, Skeleton inverted, Modal hidden, ModalBackdrop transparent, ModalTagline subtle, InputBox end-addon-flush, FieldRow justify, and the internal compositions that stopped passing styling props. CardGrid's and Tile's class rules, which develop styles in SCSS, move to plain CSS. Button's block padding follows the size scale, as #43021 did.
This was referenced Oct 23, 2026
ggazzo
added a commit
that referenced
this pull request
Oct 24, 2026
#42974 Ports #42974 onto the frames, which won the rebase over develop's Box and SCSS versions: Button compact and link types, IconButton badge position, ButtonGroup stretch='equal', Chip small and label, Divider light, flush, small and stretch, Tag gap, Icon colors, Table columns and row headers, Tabs stretch, Tile flush, Skeleton inverted, Modal hidden, ModalBackdrop transparent, ModalTagline subtle, InputBox end-addon-flush, FieldRow justify, and the internal compositions that stopped passing styling props. CardGrid's and Tile's class rules, which develop styles in SCSS, move to plain CSS. Button's block padding follows the size scale, as #43021 did.
ggazzo
added a commit
that referenced
this pull request
Oct 24, 2026
#42974 Ports #42974 onto the frames, which won the rebase over develop's Box and SCSS versions: Button compact and link types, IconButton badge position, ButtonGroup stretch='equal', Chip small and label, Divider light, flush, small and stretch, Tag gap, Icon colors, Table columns and row headers, Tabs stretch, Tile flush, Skeleton inverted, Modal hidden, ModalBackdrop transparent, ModalTagline subtle, InputBox end-addon-flush, FieldRow justify, and the internal compositions that stopped passing styling props. CardGrid's and Tile's class rules, which develop styles in SCSS, move to plain CSS. Button's block padding follows the size scale, as #43021 did.
mrityunjay-pandey
added a commit
to mrityunjay-pandey/Rocket.Chat
that referenced
this pull request
Oct 25, 2026
Reimplements the row and cell vertical alignment on top of the variant props from RocketChat#42974 and RocketChat#43100, which removed the Box styling props the first version relied on.
ggazzo
added a commit
that referenced
this pull request
Oct 26, 2026
#42974 Ports #42974 onto the frames, which won the rebase over develop's Box and SCSS versions: Button compact and link types, IconButton badge position, ButtonGroup stretch='equal', Chip small and label, Divider light, flush, small and stretch, Tag gap, Icon colors, Table columns and row headers, Tabs stretch, Tile flush, Skeleton inverted, Modal hidden, ModalBackdrop transparent, ModalTagline subtle, InputBox end-addon-flush, FieldRow justify, and the internal compositions that stopped passing styling props. CardGrid's and Tile's class rules, which develop styles in SCSS, move to plain CSS. Button's block padding follows the size scale, as #43021 did.
ggazzo
added a commit
that referenced
this pull request
Oct 26, 2026
#42974 Ports #42974 onto the frames, which won the rebase over develop's Box and SCSS versions: Button compact and link types, IconButton badge position, ButtonGroup stretch='equal', Chip small and label, Divider light, flush, small and stretch, Tag gap, Icon colors, Table columns and row headers, Tabs stretch, Tile flush, Skeleton inverted, Modal hidden, ModalBackdrop transparent, ModalTagline subtle, InputBox end-addon-flush, FieldRow justify, and the internal compositions that stopped passing styling props. CardGrid's and Tile's class rules, which develop styles in SCSS, move to plain CSS. Button's block padding follows the size scale, as #43021 did.
ggazzo
added a commit
that referenced
this pull request
Oct 26, 2026
#42974 Ports #42974 onto the frames, which won the rebase over develop's Box and SCSS versions: Button compact and link types, IconButton badge position, ButtonGroup stretch='equal', Chip small and label, Divider light, flush, small and stretch, Tag gap, Icon colors, Table columns and row headers, Tabs stretch, Tile flush, Skeleton inverted, Modal hidden, ModalBackdrop transparent, ModalTagline subtle, InputBox end-addon-flush, FieldRow justify, and the internal compositions that stopped passing styling props. CardGrid's and Tile's class rules, which develop styles in SCSS, move to plain CSS. Button's block padding follows the size scale, as #43021 did.
This was referenced Oct 26, 2026
ggazzo
added a commit
that referenced
this pull request
Oct 26, 2026
#42974 Ports #42974 onto the frames, which won the rebase over develop's Box and SCSS versions: Button compact and link types, IconButton badge position, ButtonGroup stretch='equal', Chip small and label, Divider light, flush, small and stretch, Tag gap, Icon colors, Table columns and row headers, Tabs stretch, Tile flush, Skeleton inverted, Modal hidden, ModalBackdrop transparent, ModalTagline subtle, InputBox end-addon-flush, FieldRow justify, and the internal compositions that stopped passing styling props. CardGrid's and Tile's class rules, which develop styles in SCSS, move to plain CSS. Button's block padding follows the size scale, as #43021 did.
ggazzo
added a commit
that referenced
this pull request
Oct 26, 2026
#42974 Ports #42974 onto the frames, which won the rebase over develop's Box and SCSS versions: Button compact and link types, IconButton badge position, ButtonGroup stretch='equal', Chip small and label, Divider light, flush, small and stretch, Tag gap, Icon colors, Table columns and row headers, Tabs stretch, Tile flush, Skeleton inverted, Modal hidden, ModalBackdrop transparent, ModalTagline subtle, InputBox end-addon-flush, FieldRow justify, and the internal compositions that stopped passing styling props. CardGrid's and Tile's class rules, which develop styles in SCSS, move to plain CSS. Button's block padding follows the size scale, as #43021 did.
ggazzo
added a commit
that referenced
this pull request
Oct 27, 2026
#42974 Ports #42974 onto the frames, which won the rebase over develop's Box and SCSS versions: Button compact and link types, IconButton badge position, ButtonGroup stretch='equal', Chip small and label, Divider light, flush, small and stretch, Tag gap, Icon colors, Table columns and row headers, Tabs stretch, Tile flush, Skeleton inverted, Modal hidden, ModalBackdrop transparent, ModalTagline subtle, InputBox end-addon-flush, FieldRow justify, and the internal compositions that stopped passing styling props. CardGrid's and Tile's class rules, which develop styles in SCSS, move to plain CSS. Button's block padding follows the size scale, as #43021 did.
Open
ggazzo
added a commit
that referenced
this pull request
Oct 27, 2026
#42974 Ports #42974 onto the frames, which won the rebase over develop's Box and SCSS versions: Button compact and link types, IconButton badge position, ButtonGroup stretch='equal', Chip small and label, Divider light, flush, small and stretch, Tag gap, Icon colors, Table columns and row headers, Tabs stretch, Tile flush, Skeleton inverted, Modal hidden, ModalBackdrop transparent, ModalTagline subtle, InputBox end-addon-flush, FieldRow justify, and the internal compositions that stopped passing styling props. CardGrid's and Tile's class rules, which develop styles in SCSS, move to plain CSS. Button's block padding follows the size scale, as #43021 did.
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)
Fuselage components stop taking
Boxstyling props from their callers. A component accepts DOM/ARIA attributes and the variations it declares (no margins, sizes, flex-child props, colours, freeisorrcx-*props), and the container owns the layout, mostly throughgap. The rule and its reasoning are indocs/proposals/fuselage-component-style-props.md.The lock,
scripts/scan-style-props.mjsrun 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 byMargins/Scrollable, starting at--max 914, the count ondevelop.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,
--maxin #43056's CI step drops to 1.developThe one finding left, the ContactInfo conflicts
Callout, stays on purpose: centring its icon would need a newCalloutAPI.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
node scripts/scan-style-props.mjs --max 1passes on this branch, and adding a styling prop to any Fuselage component makes it fail.Further comments
Merge order: #43056 (scanner and CI step) can be merged first, independently.