Skip to content

Commit 917d53a

Browse files
floriandurosflorianduros
authored
Add wrap props to flex component (#29480)
* feat(flex): add wrap props to flex component * test: update snapshot
1 parent e44ca88 commit 917d53a

21 files changed

Lines changed: 104 additions & 96 deletions

File tree

‎res/css/components/views/utils/_Flex.pcss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,4 +12,5 @@ Please see LICENSE files in the repository root for full details.
1212
align-items: var(--mx-flex-align, unset);
1313
justify-content: var(--mx-flex-justify, unset);
1414
gap: var(--mx-flex-gap, unset);
15+
flex-wrap: var(--mx-flex-wrap, unset);
1516
}

‎src/components/utils/Flex.tsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,11 @@ type FlexProps<T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any
3939
* @default start
4040
*/
4141
justify?: "start" | "center" | "end" | "space-between";
42+
/**
43+
* The wrapping of the flex children
44+
* @default nowrap
45+
*/
46+
wrap?: "wrap" | "nowrap" | "wrap-reverse";
4247
/**
4348
* The spacing between the flex children, expressed with the CSS unit
4449
* @default 0
@@ -60,6 +65,7 @@ export function Flex<T extends keyof JSX.IntrinsicElements | JSXElementConstruct
6065
align = "start",
6166
justify = "start",
6267
gap = "0",
68+
wrap = "nowrap",
6369
className,
6470
children,
6571
...props
@@ -71,8 +77,9 @@ export function Flex<T extends keyof JSX.IntrinsicElements | JSXElementConstruct
7177
"--mx-flex-align": align,
7278
"--mx-flex-justify": justify,
7379
"--mx-flex-gap": gap,
80+
"--mx-flex-wrap": wrap,
7481
}),
75-
[align, direction, display, gap, justify],
82+
[align, direction, display, gap, justify, wrap],
7683
);
7784

7885
return React.createElement(as, { ...props, className: classNames("mx_Flex", className), style }, children);

‎test/unit-tests/async-components/structures/__snapshots__/ErrorView-test.tsx.snap‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@ exports[`<UnsupportedBrowserView /> should match snapshot 1`] = `
9999
</p>
100100
<div
101101
class="mx_Flex mx_ErrorView_buttons"
102-
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-4x);"
102+
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-4x); --mx-flex-wrap: nowrap;"
103103
>
104104
<button
105105
class="_button_vczzf_8 _has-icon_vczzf_57"
@@ -140,7 +140,7 @@ exports[`<UnsupportedBrowserView /> should match snapshot 1`] = `
140140
</h2>
141141
<div
142142
class="mx_Flex"
143-
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-4x);"
143+
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-4x); --mx-flex-wrap: nowrap;"
144144
>
145145
<a
146146
class="_button_vczzf_8 _has-icon_vczzf_57"
@@ -210,7 +210,7 @@ exports[`<UnsupportedBrowserView /> should match snapshot 1`] = `
210210
</h2>
211211
<div
212212
class="mx_Flex"
213-
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-6x);"
213+
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-6x); --mx-flex-wrap: nowrap;"
214214
>
215215
<a
216216
href="https://apps.apple.com/app/vector/id1083446067"

‎test/unit-tests/components/structures/__snapshots__/FilePanel-test.tsx.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ exports[`FilePanel renders empty state 1`] = `
5252
>
5353
<div
5454
class="mx_Flex mx_EmptyState"
55-
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-4x);"
55+
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-4x); --mx-flex-wrap: nowrap;"
5656
>
5757
<svg
5858
fill="currentColor"

‎test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
77
>
88
<header
99
class="mx_Flex mx_RoomHeader light-panel"
10-
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
10+
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
1111
>
1212
<button
1313
aria-label="Open room settings"
@@ -222,7 +222,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
222222
>
223223
<header
224224
class="mx_Flex mx_RoomHeader light-panel"
225-
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
225+
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
226226
>
227227
<button
228228
aria-label="Open room settings"
@@ -522,7 +522,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
522522
>
523523
<header
524524
class="mx_Flex mx_RoomHeader light-panel"
525-
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
525+
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
526526
>
527527
<button
528528
aria-label="Open room settings"
@@ -899,7 +899,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
899899
>
900900
<header
901901
class="mx_Flex mx_RoomHeader light-panel"
902-
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
902+
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
903903
>
904904
<button
905905
aria-label="Open room settings"
@@ -1284,7 +1284,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
12841284
>
12851285
<header
12861286
class="mx_Flex mx_RoomHeader light-panel"
1287-
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
1287+
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
12881288
>
12891289
<button
12901290
aria-label="Open room settings"
@@ -1492,7 +1492,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
14921492
>
14931493
<header
14941494
class="mx_Flex mx_RoomHeader light-panel"
1495-
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
1495+
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
14961496
>
14971497
<button
14981498
aria-label="Open room settings"
@@ -1873,7 +1873,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
18731873
>
18741874
<header
18751875
class="mx_Flex mx_RoomHeader light-panel"
1876-
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
1876+
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
18771877
>
18781878
<button
18791879
aria-label="Open room settings"

‎test/unit-tests/components/views/auth/__snapshots__/InteractiveAuthEntryComponents-test.tsx.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ exports[`<MasUnlockCrossSigningAuthEntry/> should render 1`] = `
4343
</p>
4444
<div
4545
class="mx_Flex"
46-
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-4x);"
46+
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-4x); --mx-flex-wrap: nowrap;"
4747
>
4848
<button
4949
class="_button_vczzf_8 mx_Dialog_nonDialogButton _has-icon_vczzf_57"

‎test/unit-tests/components/views/right_panel/__snapshots__/ExtensionsCard-test.tsx.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ exports[`<ExtensionsCard /> should render empty state 1`] = `
7171
</button>
7272
<div
7373
class="mx_Flex mx_EmptyState"
74-
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-4x);"
74+
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-4x); --mx-flex-wrap: nowrap;"
7575
>
7676
<svg
7777
fill="currentColor"

‎test/unit-tests/components/views/right_panel/__snapshots__/PinnedMessagesCard-test.tsx.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ exports[`<PinnedMessagesCard /> should show the empty state when there are no pi
5050
>
5151
<div
5252
class="mx_Flex mx_EmptyState"
53-
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-4x);"
53+
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-4x); --mx-flex-wrap: nowrap;"
5454
>
5555
<svg
5656
fill="currentColor"

‎test/unit-tests/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
6969
/>
7070
<section
7171
class="mx_Flex mx_RoomSummaryCard_badges"
72-
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x);"
72+
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
7373
>
7474
<span
7575
class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_1t12g_8"
@@ -91,7 +91,7 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
9191
</section>
9292
<section
9393
class="mx_Flex mx_RoomSummaryCard_topic"
94-
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x);"
94+
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
9595
>
9696
<div
9797
class="mx_Box mx_RoomSummaryCard_topic_container mx_Box--flex"
@@ -724,7 +724,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
724724
/>
725725
<section
726726
class="mx_Flex mx_RoomSummaryCard_badges"
727-
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x);"
727+
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
728728
>
729729
<span
730730
class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_1t12g_8"
@@ -746,7 +746,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
746746
</section>
747747
<section
748748
class="mx_Flex mx_RoomSummaryCard_topic"
749-
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x);"
749+
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
750750
>
751751
<div
752752
class="mx_Box mx_Box--flex"
@@ -1342,7 +1342,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
13421342
/>
13431343
<section
13441344
class="mx_Flex mx_RoomSummaryCard_badges"
1345-
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x);"
1345+
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
13461346
>
13471347
<span
13481348
class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_1t12g_8"
@@ -1364,7 +1364,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
13641364
</section>
13651365
<section
13661366
class="mx_Flex mx_RoomSummaryCard_topic"
1367-
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x);"
1367+
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
13681368
>
13691369
<div
13701370
class="mx_Box mx_RoomSummaryCard_topic_container mx_Box--flex"

0 commit comments

Comments
 (0)
⚡