Skip to content

Commit 5c7b25f

Browse files
ggazzoggazzo
authored
refactor(fuselage): components no longer accept Box styling props (#43100)
1 parent aab3e5f commit 5c7b25f

314 files changed

Lines changed: 2182 additions & 1673 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.changeset/fuselage-component-variations.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
'@rocket.chat/fuselage': minor
3+
---
4+
5+
Adds the component variations and the hook that replace Box styling props on Fuselage components:
6+
7+
- `TableCell` accepts `truncate`, which keeps its content on one line cut with an ellipsis, `color='default' | 'hint'`, and `strong`, which renders the text in the medium weight.
8+
- `Contextualbar` accepts `stretch`, which makes it as wide as its container.
9+
- `ContextualbarContent` accepts `flush`, which drops its inline padding, and `spaced`, which adds a 12px block padding.
10+
- `ModalFooter` accepts `justify='space-between'`, and `ModalIcon` accepts `align='end'`.
11+
- `Table` `columns` take pixel and percentage widths (`'150px'`, `40`, `'20%'`) besides Fuselage sizes.
12+
- `useStyle` is exported: it turns a style built with `css` into a class name, for a `className` that takes strings only.

‎.changeset/fuselage-components-drop-box-props.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
---
2+
'@rocket.chat/fuselage': minor
3+
---
4+
5+
Fuselage components no longer accept `Box` styling props. Their props are now the DOM and ARIA attributes of the element they render plus the variations each component declares, so TypeScript rejects `margin*`, `width`, `flexGrow`, `fontScale`, `color` and the other `Box` styling props, a free `is`, and a `className` built with `css` or passed as an array (it must be a string; `useStyle` turns a `css` style into one). `rcx-*` props are not part of any component's API either. To lay out or style a component, place it in a `Box` (a container with `gap`, or a wrapper) or use one of the component's own variations. `Box`, `Flex`, `Margins` and `Scrollable` keep accepting styling props.
6+
7+
Some components swap a styling prop they used to read for a named variation:
8+
9+
- `Contextualbar` takes `stretch` instead of `width='100%'`, no longer takes `backgroundColor`, and its `position` is one of `static`, `relative`, `absolute` or `fixed`.
10+
- `ModalFooter` takes `justify` instead of `justifyContent`, and `ModalIcon` takes `align` instead of `alignItems`.
11+
- `Tile` takes `flush` instead of `padding`.
12+
- `Modal` keeps `width` and `height` and also takes `maxHeight`; `Options` keeps `maxHeight`; `Tile` keeps `elevation`; `Throbber` and `ModalIcon` keep `size`; `InputBox` keeps `invisible`.
13+
- `Select`, `PaginatedSelect` and `PaginatedMultiSelect` take `name`.

‎.github/workflows/ci-code-check.yml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -101,11 +101,11 @@ jobs:
101101

102102
- name: Styling props on Fuselage components
103103
if: matrix.check == 'lint'
104-
run: node scripts/scan-style-props.mjs --max 1 "$RUNNER_TEMP/style-props-findings.json"
104+
run: node scripts/scan-style-props.mjs --max 0 "$RUNNER_TEMP/style-props-findings.json"
105105

106106
- name: Raw layout elements in screens
107107
if: matrix.check == 'lint'
108-
run: node scripts/scan-raw-layout.mjs --max 1248 "$RUNNER_TEMP/raw-layout-findings.json"
108+
run: node scripts/scan-raw-layout.mjs --max 1268 "$RUNNER_TEMP/raw-layout-findings.json"
109109

110110
- name: Stylelint
111111
if: matrix.check == 'lint'

‎apps/meteor/client/components/ABAC/AbacRoomCreation/CreateRoomSteps.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ const CreateRoomSteps = ({ abac, flow, details, security, onCancel, submitDisabl
6161
/>
6262
)}
6363
</ModalContent>
64-
<ModalFooter justifyContent={isStepped ? 'space-between' : undefined}>
64+
<ModalFooter justify={isStepped ? 'space-between' : undefined}>
6565
{isStepped && <ModalFooterAnnotation>{t('Step_of_total', { step: index + 1, total })}</ModalFooterAnnotation>}
6666
<ModalFooterControllers>
6767
{index === 0 ? (

‎apps/meteor/client/components/ABAC/AbacRoomMembershipPreview/AbacRoomMembershipPreview.stories.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -196,7 +196,7 @@ const meta = {
196196
(Story) => (
197197
<TooltipProvider>
198198
<Box width='x500' height='100vh' display='flex'>
199-
<Contextualbar width='full'>
199+
<Contextualbar stretch>
200200
<Story />
201201
</Contextualbar>
202202
</Box>

‎apps/meteor/client/components/ABAC/AbacRoomMembershipPreview/AbacRoomMembershipPreview.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -180,7 +180,7 @@ const AbacRoomMembershipPreview = ({ rid, roomName, attributes, isSaving, onBack
180180
/>
181181
</Box>
182182
</ContextualbarSection>
183-
<ContextualbarContent paddingInline={0}>
183+
<ContextualbarContent flush>
184184
{isError && (
185185
<Box paddingInline={24} paddingBlock={12}>
186186
<AbacErrorCallout

‎apps/meteor/client/components/ImageGallery/ImageGalleryError.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { css } from '@rocket.chat/css-in-js';
2-
import { Box, IconButton, ModalBackdrop } from '@rocket.chat/fuselage';
2+
import { Box, IconButton, ModalBackdrop, useStyle } from '@rocket.chat/fuselage';
33
import { createPortal } from 'react-dom';
44
import { useTranslation } from 'react-i18next';
55

@@ -14,12 +14,13 @@ const closeButtonStyle = css`
1414

1515
export const ImageGalleryError = ({ onClose }: { onClose: () => void }) => {
1616
const { t } = useTranslation();
17+
const closeButtonClassName = useStyle(closeButtonStyle);
1718

1819
return createPortal(
1920
<ModalBackdrop>
2021
<Box display='flex' flexDirection='column' flexGrow={1} justifyContent='center' color='pure-white'>
2122
<GenericError buttonAction={onClose} buttonTitle={t('Close')} />
22-
<IconButton icon='cross' aria-label={t('Close_gallery')} className={closeButtonStyle} onClick={onClose} />
23+
<IconButton icon='cross' aria-label={t('Close_gallery')} className={closeButtonClassName} onClick={onClose} />
2324
</Box>
2425
</ModalBackdrop>,
2526
document.body,

‎apps/meteor/client/components/ImageGallery/ImageGalleryLoading.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { css } from '@rocket.chat/css-in-js';
2-
import { Box, IconButton, ModalBackdrop, Throbber } from '@rocket.chat/fuselage';
2+
import { Box, IconButton, ModalBackdrop, Throbber, useStyle } from '@rocket.chat/fuselage';
33
import { createPortal } from 'react-dom';
44
import { useTranslation } from 'react-i18next';
55

@@ -12,11 +12,12 @@ const closeButtonStyle = css`
1212

1313
export const ImageGalleryLoading = ({ onClose }: { onClose: () => void }) => {
1414
const { t } = useTranslation();
15+
const closeButtonClassName = useStyle(closeButtonStyle);
1516

1617
return createPortal(
1718
<ModalBackdrop>
1819
<Box display='flex' flexDirection='column' flexGrow={1} justifyContent='center' color='pure-white'>
19-
<IconButton icon='cross' aria-label={t('Close_gallery')} className={closeButtonStyle} onClick={onClose} />
20+
<IconButton icon='cross' aria-label={t('Close_gallery')} className={closeButtonClassName} onClick={onClose} />
2021
<Throbber inheritColor />
2122
</Box>
2223
</ModalBackdrop>,

‎apps/meteor/client/components/ListItem.stories.tsx‎

Lines changed: 52 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -16,44 +16,56 @@ export default {
1616

1717
export const ListWithIcon: StoryFn<typeof Tile> = () => {
1818
return (
19-
<Tile elevation='2' padding='0' display='flex' flexDirection='column' overflow='auto' width='x240'>
20-
<Box flexShrink={1} paddingBlock={12}>
21-
<OptionTitle>Title</OptionTitle>
22-
<ListItem text='Item 1' icon='info' />
23-
<ListItem text='Item 2' icon='star' />
24-
<ListItem text='Item 3' icon='hashtag' />
25-
<ListItem text='Item 4' icon='team' />
26-
</Box>
27-
</Tile>
19+
<Box width='x240'>
20+
<Tile elevation='2' flush>
21+
<Box display='flex' flexDirection='column' overflow='auto'>
22+
<Box flexShrink={1} paddingBlock={12}>
23+
<OptionTitle>Title</OptionTitle>
24+
<ListItem text='Item 1' icon='info' />
25+
<ListItem text='Item 2' icon='star' />
26+
<ListItem text='Item 3' icon='hashtag' />
27+
<ListItem text='Item 4' icon='team' />
28+
</Box>
29+
</Box>
30+
</Tile>
31+
</Box>
2832
);
2933
};
3034

3135
export const NoIcon: StoryFn<typeof Tile> = () => {
3236
return (
33-
<Tile elevation='2' padding='0' display='flex' flexDirection='column' overflow='auto' width='x240'>
34-
<Box flexShrink={1} paddingBlock={12}>
35-
<OptionTitle>Title</OptionTitle>
36-
<ListItem text='Item 1' />
37-
<ListItem text='Item 2' />
38-
<ListItem text='Item 3' />
39-
<ListItem text='Item 4' />
40-
</Box>
41-
</Tile>
37+
<Box width='x240'>
38+
<Tile elevation='2' flush>
39+
<Box display='flex' flexDirection='column' overflow='auto'>
40+
<Box flexShrink={1} paddingBlock={12}>
41+
<OptionTitle>Title</OptionTitle>
42+
<ListItem text='Item 1' />
43+
<ListItem text='Item 2' />
44+
<ListItem text='Item 3' />
45+
<ListItem text='Item 4' />
46+
</Box>
47+
</Box>
48+
</Tile>
49+
</Box>
4250
);
4351
};
4452

4553
export const MixedWithGap: StoryObj<typeof Tile> = {
4654
render: () => {
4755
return (
48-
<Tile elevation='2' padding='0' display='flex' flexDirection='column' overflow='auto' width='x240'>
49-
<Box flexShrink={1} paddingBlock={12}>
50-
<OptionTitle>Title</OptionTitle>
51-
<ListItem text='Item 1' icon='hashtag' />
52-
<ListItem text='Item 2' icon='team' />
53-
<ListItem text='Item 3' gap />
54-
<ListItem text='Item 4' icon='airplane' />
55-
</Box>
56-
</Tile>
56+
<Box width='x240'>
57+
<Tile elevation='2' flush>
58+
<Box display='flex' flexDirection='column' overflow='auto'>
59+
<Box flexShrink={1} paddingBlock={12}>
60+
<OptionTitle>Title</OptionTitle>
61+
<ListItem text='Item 1' icon='hashtag' />
62+
<ListItem text='Item 2' icon='team' />
63+
<ListItem text='Item 3' gap />
64+
<ListItem text='Item 4' icon='airplane' />
65+
</Box>
66+
</Box>
67+
</Tile>
68+
</Box>
5769
);
5870
},
5971

@@ -70,15 +82,19 @@ export const MixedWithGap: StoryObj<typeof Tile> = {
7082
export const MixedWithoutGap: StoryObj<typeof Tile> = {
7183
render: () => {
7284
return (
73-
<Tile elevation='2' padding='0' display='flex' flexDirection='column' overflow='auto' width='x240'>
74-
<Box flexShrink={1} paddingBlock={12}>
75-
<OptionTitle>Title</OptionTitle>
76-
<ListItem text='Item 1' icon='hashtag' />
77-
<ListItem text='Item 2' icon='team' />
78-
<ListItem text='Item 3' />
79-
<ListItem text='Item 4' icon='airplane' />
80-
</Box>
81-
</Tile>
85+
<Box width='x240'>
86+
<Tile elevation='2' flush>
87+
<Box display='flex' flexDirection='column' overflow='auto'>
88+
<Box flexShrink={1} paddingBlock={12}>
89+
<OptionTitle>Title</OptionTitle>
90+
<ListItem text='Item 1' icon='hashtag' />
91+
<ListItem text='Item 2' icon='team' />
92+
<ListItem text='Item 3' />
93+
<ListItem text='Item 4' icon='airplane' />
94+
</Box>
95+
</Box>
96+
</Tile>
97+
</Box>
8298
);
8399
},
84100

‎apps/meteor/client/components/TwoFactorModal/TwoFactorEmailModal.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,7 @@ const TwoFactorEmailModal = ({ onConfirm, onClose, invalidAttempt, emailOrUserna
100100
<Stack gap={24}>
101101
<FieldGroup>
102102
<Field>
103-
<FieldLabel alignSelf='stretch'>{t('Enter_the_code_we_just_emailed_you')}</FieldLabel>
103+
<FieldLabel>{t('Enter_the_code_we_just_emailed_you')}</FieldLabel>
104104
<FieldRow>
105105
<Controller
106106
name='code'

0 commit comments

Comments
 (0)