Skip to content

Commit 9695ec7

Browse files
juliajforestijuliajforesti
authored
feat(fuselage): add ButtonGroup rtl support (#1854)
1 parent a5028b6 commit 9695ec7

File tree

16 files changed

+134
-196
lines changed

16 files changed

+134
-196
lines changed

‎.changeset/tame-wolves-try.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@rocket.chat/fuselage': minor
3+
---
4+
5+
feat(fuselage): add `ButtonGroup` `rtl` support

‎packages/fuselage/src/components/ButtonGroup/ButtonGroup.styles.scss‎

Lines changed: 14 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -8,17 +8,28 @@
88

99
align-items: center;
1010

11+
gap: lengths.margin(8);
12+
13+
&--small {
14+
gap: lengths.margin(4);
15+
}
16+
17+
&--large {
18+
gap: lengths.margin(16);
19+
}
20+
1121
&--wrap {
1222
flex-wrap: wrap;
13-
14-
margin-block-end: lengths.margin(-16);
1523
}
1624

1725
&--stretch {
18-
justify-content: stretch;
1926
align-items: stretch;
2027

2128
flex-grow: 1;
29+
30+
> * {
31+
flex-grow: 1;
32+
}
2233
}
2334

2435
&--vertical {
@@ -37,69 +48,3 @@
3748
justify-content: flex-end;
3849
}
3950
}
40-
41-
.rcx-button-group__item {
42-
margin-inline: lengths.margin(4);
43-
44-
.rcx-button-group--small & {
45-
margin-inline: lengths.margin(2);
46-
}
47-
48-
.rcx-button-group--large & {
49-
margin-inline: lengths.margin(8);
50-
}
51-
52-
&:first-of-type {
53-
margin-inline-start: lengths.margin(none);
54-
}
55-
56-
&:last-of-type {
57-
margin-inline-end: lengths.margin(none);
58-
}
59-
60-
.rcx-button-group--wrap > & {
61-
margin-block-end: lengths.margin(16);
62-
margin-inline: lengths.margin(none) lengths.margin(16);
63-
}
64-
65-
.rcx-button-group--stretch > & {
66-
flex-grow: 1;
67-
}
68-
69-
.rcx-button-group--vertical & {
70-
margin-block: lengths.margin(4);
71-
margin-inline: lengths.margin(none);
72-
73-
&:first-child {
74-
margin-block-start: lengths.margin(none);
75-
}
76-
77-
&:last-child {
78-
margin-block-end: lengths.margin(none);
79-
}
80-
}
81-
82-
.rcx-button-group--vertical.rcx-button-group--large > & {
83-
margin-block: lengths.margin(8);
84-
85-
&:first-child {
86-
margin-block-start: lengths.margin(none);
87-
}
88-
89-
&:last-child {
90-
margin-block-end: lengths.margin(none);
91-
}
92-
}
93-
94-
.rcx-button-group--vertical.rcx-button-group--small > & {
95-
margin-block: lengths.margin(2);
96-
97-
&:first-child {
98-
margin-block-start: lengths.margin(none);
99-
}
100-
101-
&:last-child {
102-
margin-block-end: lengths.margin(none);
103-
}
104-
}
105-
}

‎packages/fuselage/src/components/ButtonGroup/ButtonGroup.tsx‎

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
import type { HTMLAttributes } from 'react';
22
import { forwardRef } from 'react';
33

4-
import { appendClassName } from '../../helpers/appendClassName';
5-
import { patchChildren } from '../../helpers/patchChildren';
6-
74
export type ButtonGroupProps = {
85
align?: 'start' | 'center' | 'end';
96
stretch?: boolean;
@@ -49,15 +46,7 @@ const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(
4946
role='group'
5047
{...props}
5148
>
52-
{patchChildren(
53-
children,
54-
(childProps: { className: string | string[] }) => ({
55-
className: appendClassName(
56-
childProps.className,
57-
'rcx-button-group__item',
58-
),
59-
}),
60-
)}
49+
{children}
6150
</div>
6251
);
6352
},

‎packages/fuselage/src/components/Callout/__snapshots__/Callout.spec.tsx.snap‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -247,7 +247,7 @@ exports[`[CheckBox Rendering] renders WithActions without crashing 1`] = `
247247
role="group"
248248
>
249249
<button
250-
class="rcx-box rcx-box--full rcx-button--small rcx-button rcx-button-group__item"
250+
class="rcx-box rcx-box--full rcx-button--small rcx-button"
251251
type="button"
252252
>
253253
<span
@@ -257,7 +257,7 @@ exports[`[CheckBox Rendering] renders WithActions without crashing 1`] = `
257257
</span>
258258
</button>
259259
<button
260-
class="rcx-box rcx-box--full rcx-button--small rcx-button rcx-button-group__item"
260+
class="rcx-box rcx-box--full rcx-button--small rcx-button"
261261
type="button"
262262
>
263263
<span

‎packages/fuselage/src/components/Contextualbar/__snapshots__/Contextualbar.spec.tsx.snap‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ exports[`[Contextualbar Rendering] renders Default without crashing 1`] = `
3737
role="group"
3838
>
3939
<button
40-
class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-button-group__item rcx-css-1yzvz7u"
40+
class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-css-1yzvz7u"
4141
title="Title"
4242
type="button"
4343
>
@@ -49,7 +49,7 @@ exports[`[Contextualbar Rendering] renders Default without crashing 1`] = `
4949
</i>
5050
</button>
5151
<button
52-
class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-button-group__item rcx-css-1yzvz7u"
52+
class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-css-1yzvz7u"
5353
title="Add user"
5454
type="button"
5555
>
@@ -61,7 +61,7 @@ exports[`[Contextualbar Rendering] renders Default without crashing 1`] = `
6161
</i>
6262
</button>
6363
<button
64-
class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-button-group__item rcx-css-1yzvz7u"
64+
class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-css-1yzvz7u"
6565
title="Close"
6666
type="button"
6767
>
@@ -110,7 +110,7 @@ exports[`[Contextualbar Rendering] renders Default without crashing 1`] = `
110110
role="group"
111111
>
112112
<button
113-
class="rcx-box rcx-box--full rcx-button--secondary rcx-button rcx-button-group__item rcx-css-1qcz93u"
113+
class="rcx-box rcx-box--full rcx-button--secondary rcx-button rcx-css-1qcz93u"
114114
type="button"
115115
>
116116
<span
@@ -120,7 +120,7 @@ exports[`[Contextualbar Rendering] renders Default without crashing 1`] = `
120120
</span>
121121
</button>
122122
<button
123-
class="rcx-box rcx-box--full rcx-button--primary rcx-button rcx-button-group__item rcx-css-1qcz93u"
123+
class="rcx-box rcx-box--full rcx-button--primary rcx-button rcx-css-1qcz93u"
124124
type="button"
125125
>
126126
<span
@@ -130,7 +130,7 @@ exports[`[Contextualbar Rendering] renders Default without crashing 1`] = `
130130
</span>
131131
</button>
132132
<button
133-
class="rcx-box rcx-box--full rcx-button--large-square rcx-button--icon-secondary rcx-button--square rcx-button--icon rcx-button rcx-button-group__item"
133+
class="rcx-box rcx-box--full rcx-button--large-square rcx-button--icon-secondary rcx-button--square rcx-button--icon rcx-button"
134134
title="More"
135135
type="button"
136136
>
@@ -186,7 +186,7 @@ exports[`[Contextualbar Rendering] renders Empty without crashing 1`] = `
186186
role="group"
187187
>
188188
<button
189-
class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-button-group__item rcx-css-1yzvz7u"
189+
class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-css-1yzvz7u"
190190
title="Title"
191191
type="button"
192192
>

‎packages/fuselage/src/components/ContextualbarV2/__snapshots__/Contextualbar.spec.tsx.snap‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ exports[`[Contextualbar Rendering] renders Default without crashing 1`] = `
3737
role="group"
3838
>
3939
<button
40-
class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-button-group__item rcx-css-ue04py"
40+
class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-css-ue04py"
4141
title="Title"
4242
type="button"
4343
>
@@ -49,7 +49,7 @@ exports[`[Contextualbar Rendering] renders Default without crashing 1`] = `
4949
</i>
5050
</button>
5151
<button
52-
class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-button-group__item rcx-css-ue04py"
52+
class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-css-ue04py"
5353
title="Add user"
5454
type="button"
5555
>
@@ -61,7 +61,7 @@ exports[`[Contextualbar Rendering] renders Default without crashing 1`] = `
6161
</i>
6262
</button>
6363
<button
64-
class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-button-group__item rcx-css-ue04py"
64+
class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-css-ue04py"
6565
title="Close"
6666
type="button"
6767
>
@@ -110,7 +110,7 @@ exports[`[Contextualbar Rendering] renders Default without crashing 1`] = `
110110
role="group"
111111
>
112112
<button
113-
class="rcx-box rcx-box--full rcx-button--secondary rcx-button rcx-button-group__item rcx-css-1qcz93u"
113+
class="rcx-box rcx-box--full rcx-button--secondary rcx-button rcx-css-1qcz93u"
114114
type="button"
115115
>
116116
<span
@@ -120,7 +120,7 @@ exports[`[Contextualbar Rendering] renders Default without crashing 1`] = `
120120
</span>
121121
</button>
122122
<button
123-
class="rcx-box rcx-box--full rcx-button--primary rcx-button rcx-button-group__item rcx-css-1qcz93u"
123+
class="rcx-box rcx-box--full rcx-button--primary rcx-button rcx-css-1qcz93u"
124124
type="button"
125125
>
126126
<span
@@ -130,7 +130,7 @@ exports[`[Contextualbar Rendering] renders Default without crashing 1`] = `
130130
</span>
131131
</button>
132132
<button
133-
class="rcx-box rcx-box--full rcx-button--large-square rcx-button--icon-secondary rcx-button--square rcx-button--icon rcx-button rcx-button-group__item"
133+
class="rcx-box rcx-box--full rcx-button--large-square rcx-button--icon-secondary rcx-button--square rcx-button--icon rcx-button"
134134
title="More"
135135
type="button"
136136
>
@@ -186,7 +186,7 @@ exports[`[Contextualbar Rendering] renders Empty without crashing 1`] = `
186186
role="group"
187187
>
188188
<button
189-
class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-button-group__item rcx-css-ue04py"
189+
class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-css-ue04py"
190190
title="Title"
191191
type="button"
192192
>
@@ -315,7 +315,7 @@ exports[`[Contextualbar Rendering] renders WithLongTitle without crashing 1`] =
315315
role="group"
316316
>
317317
<button
318-
class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-button-group__item rcx-css-ue04py"
318+
class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-css-ue04py"
319319
title="Title"
320320
type="button"
321321
>
@@ -327,7 +327,7 @@ exports[`[Contextualbar Rendering] renders WithLongTitle without crashing 1`] =
327327
</i>
328328
</button>
329329
<button
330-
class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-button-group__item rcx-css-ue04py"
330+
class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-css-ue04py"
331331
title="Add user"
332332
type="button"
333333
>
@@ -339,7 +339,7 @@ exports[`[Contextualbar Rendering] renders WithLongTitle without crashing 1`] =
339339
</i>
340340
</button>
341341
<button
342-
class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-button-group__item rcx-css-ue04py"
342+
class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-css-ue04py"
343343
title="Close"
344344
type="button"
345345
>
@@ -388,7 +388,7 @@ exports[`[Contextualbar Rendering] renders WithLongTitle without crashing 1`] =
388388
role="group"
389389
>
390390
<button
391-
class="rcx-box rcx-box--full rcx-button--secondary rcx-button rcx-button-group__item rcx-css-1qcz93u"
391+
class="rcx-box rcx-box--full rcx-button--secondary rcx-button rcx-css-1qcz93u"
392392
type="button"
393393
>
394394
<span
@@ -398,7 +398,7 @@ exports[`[Contextualbar Rendering] renders WithLongTitle without crashing 1`] =
398398
</span>
399399
</button>
400400
<button
401-
class="rcx-box rcx-box--full rcx-button--primary rcx-button rcx-button-group__item rcx-css-1qcz93u"
401+
class="rcx-box rcx-box--full rcx-button--primary rcx-button rcx-css-1qcz93u"
402402
type="button"
403403
>
404404
<span
@@ -408,7 +408,7 @@ exports[`[Contextualbar Rendering] renders WithLongTitle without crashing 1`] =
408408
</span>
409409
</button>
410410
<button
411-
class="rcx-box rcx-box--full rcx-button--large-square rcx-button--icon-secondary rcx-button--square rcx-button--icon rcx-button rcx-button-group__item"
411+
class="rcx-box rcx-box--full rcx-button--large-square rcx-button--icon-secondary rcx-button--square rcx-button--icon rcx-button"
412412
title="More"
413413
type="button"
414414
>

0 commit comments

Comments
 (0)