Skip to content

Commit a7eeb62

Browse files
lukewalczaklukewalczak
authored
fix: passing flex to the shared and inner layer Surface styles (#3653)
1 parent 4189f4b commit a7eeb62

18 files changed

+636
-35
lines changed

‎src/components/Surface.tsx

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@ const Surface = forwardRef<View, Props>(
113113
children,
114114
theme: overridenTheme,
115115
style,
116-
testID,
116+
testID = 'surface',
117117
...props
118118
}: Props,
119119
ref
@@ -228,6 +228,7 @@ const Surface = forwardRef<View, Props>(
228228
bottom,
229229
start,
230230
end,
231+
flex,
231232
...restStyle
232233
} = (StyleSheet.flatten(style) || {}) as ViewStyle;
233234

@@ -241,7 +242,12 @@ const Surface = forwardRef<View, Props>(
241242
start,
242243
end,
243244
};
244-
const sharedStyle = [{ backgroundColor }, restStyle];
245+
246+
const sharedStyle = [{ backgroundColor, flex }, restStyle];
247+
248+
const innerLayerViewStyles = [{ flex }];
249+
250+
const outerLayerViewStyles = [absoluteStyles, innerLayerViewStyles];
245251

246252
if (isAnimatedValue(elevation)) {
247253
const inputRange = [0, 1, 2, 3, 4, 5];
@@ -270,9 +276,13 @@ const Surface = forwardRef<View, Props>(
270276

271277
return (
272278
<Animated.View
273-
style={[getStyleForAnimatedShadowLayer(0), absoluteStyles]}
279+
style={[getStyleForAnimatedShadowLayer(0), outerLayerViewStyles]}
280+
testID={`${testID}-outer-layer`}
274281
>
275-
<Animated.View style={getStyleForAnimatedShadowLayer(1)}>
282+
<Animated.View
283+
style={[getStyleForAnimatedShadowLayer(1), innerLayerViewStyles]}
284+
testID={`${testID}-inner-layer`}
285+
>
276286
<Animated.View {...props} testID={testID} style={sharedStyle}>
277287
{children}
278288
</Animated.View>
@@ -298,9 +308,13 @@ const Surface = forwardRef<View, Props>(
298308
return (
299309
<Animated.View
300310
ref={ref}
301-
style={[getStyleForShadowLayer(0), absoluteStyles]}
311+
style={[getStyleForShadowLayer(0), outerLayerViewStyles]}
312+
testID={`${testID}-outer-layer`}
302313
>
303-
<Animated.View style={getStyleForShadowLayer(1)}>
314+
<Animated.View
315+
style={[getStyleForShadowLayer(1), innerLayerViewStyles]}
316+
testID={`${testID}-inner-layer`}
317+
>
304318
<Animated.View {...props} testID={testID} style={sharedStyle}>
305319
{children}
306320
</Animated.View>

‎src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
88
"alignSelf": undefined,
99
"bottom": undefined,
1010
"end": undefined,
11+
"flex": undefined,
1112
"left": undefined,
1213
"position": undefined,
1314
"right": undefined,
@@ -22,11 +23,13 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
2223
"top": undefined,
2324
}
2425
}
26+
testID="surface-outer-layer"
2527
>
2628
<View
2729
collapsable={false}
2830
style={
2931
Object {
32+
"flex": undefined,
3033
"shadowColor": "#000",
3134
"shadowOffset": Object {
3235
"height": 0,
@@ -36,13 +39,15 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
3639
"shadowRadius": 0,
3740
}
3841
}
42+
testID="surface-inner-layer"
3943
>
4044
<View
4145
collapsable={false}
4246
style={
4347
Object {
4448
"alignItems": "center",
4549
"backgroundColor": "rgba(255, 251, 254, 1)",
50+
"flex": undefined,
4651
"flexDirection": "row",
4752
"height": 64,
4853
"paddingBottom": undefined,
@@ -52,6 +57,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
5257
"paddingTop": undefined,
5358
}
5459
}
60+
testID="surface"
5561
>
5662
<View
5763
collapsable={false}
@@ -60,6 +66,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
6066
"alignSelf": undefined,
6167
"bottom": undefined,
6268
"end": undefined,
69+
"flex": undefined,
6370
"left": undefined,
6471
"position": undefined,
6572
"right": undefined,
@@ -74,11 +81,13 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
7481
"top": undefined,
7582
}
7683
}
84+
testID="search-bar-container-outer-layer"
7785
>
7886
<View
7987
collapsable={false}
8088
style={
8189
Object {
90+
"flex": undefined,
8291
"shadowColor": "#000",
8392
"shadowOffset": Object {
8493
"height": 1,
@@ -88,6 +97,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
8897
"shadowRadius": 1,
8998
}
9099
}
100+
testID="search-bar-container-inner-layer"
91101
>
92102
<View
93103
collapsable={false}
@@ -96,6 +106,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
96106
"alignItems": "center",
97107
"backgroundColor": "rgb(247, 243, 249)",
98108
"borderRadius": 4,
109+
"flex": undefined,
99110
"flexDirection": "row",
100111
}
101112
}
@@ -108,6 +119,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
108119
"alignSelf": undefined,
109120
"bottom": undefined,
110121
"end": undefined,
122+
"flex": undefined,
111123
"left": undefined,
112124
"position": undefined,
113125
"right": undefined,
@@ -122,11 +134,13 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
122134
"top": undefined,
123135
}
124136
}
137+
testID="icon-button-container-outer-layer"
125138
>
126139
<View
127140
collapsable={false}
128141
style={
129142
Object {
143+
"flex": undefined,
130144
"shadowColor": "#000",
131145
"shadowOffset": Object {
132146
"height": 0,
@@ -136,6 +150,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
136150
"shadowRadius": 0,
137151
}
138152
}
153+
testID="icon-button-container-inner-layer"
139154
>
140155
<View
141156
collapsable={false}
@@ -146,6 +161,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
146161
"borderRadius": 20,
147162
"borderWidth": 0,
148163
"elevation": 0,
164+
"flex": undefined,
149165
"height": 40,
150166
"margin": 6,
151167
"overflow": "hidden",
@@ -286,6 +302,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
286302
"alignSelf": undefined,
287303
"bottom": undefined,
288304
"end": undefined,
305+
"flex": undefined,
289306
"left": undefined,
290307
"position": undefined,
291308
"right": undefined,
@@ -300,11 +317,13 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
300317
"top": undefined,
301318
}
302319
}
320+
testID="icon-button-container-outer-layer"
303321
>
304322
<View
305323
collapsable={false}
306324
style={
307325
Object {
326+
"flex": undefined,
308327
"shadowColor": "#000",
309328
"shadowOffset": Object {
310329
"height": 0,
@@ -314,6 +333,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
314333
"shadowRadius": 0,
315334
}
316335
}
336+
testID="icon-button-container-inner-layer"
317337
>
318338
<View
319339
collapsable={false}
@@ -324,6 +344,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
324344
"borderRadius": 20,
325345
"borderWidth": 0,
326346
"elevation": 0,
347+
"flex": undefined,
327348
"height": 40,
328349
"margin": 6,
329350
"overflow": "hidden",
@@ -440,6 +461,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
440461
"alignSelf": undefined,
441462
"bottom": undefined,
442463
"end": undefined,
464+
"flex": undefined,
443465
"left": undefined,
444466
"position": undefined,
445467
"right": undefined,
@@ -454,11 +476,13 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
454476
"top": undefined,
455477
}
456478
}
479+
testID="surface-outer-layer"
457480
>
458481
<View
459482
collapsable={false}
460483
style={
461484
Object {
485+
"flex": undefined,
462486
"shadowColor": "#000",
463487
"shadowOffset": Object {
464488
"height": 0,
@@ -468,13 +492,15 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
468492
"shadowRadius": 0,
469493
}
470494
}
495+
testID="surface-inner-layer"
471496
>
472497
<View
473498
collapsable={false}
474499
style={
475500
Object {
476501
"alignItems": "center",
477502
"backgroundColor": "rgba(255, 251, 254, 1)",
503+
"flex": undefined,
478504
"flexDirection": "row",
479505
"height": 64,
480506
"paddingBottom": undefined,
@@ -484,6 +510,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
484510
"paddingTop": undefined,
485511
}
486512
}
513+
testID="surface"
487514
>
488515
<View
489516
collapsable={false}
@@ -492,6 +519,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
492519
"alignSelf": undefined,
493520
"bottom": undefined,
494521
"end": undefined,
522+
"flex": undefined,
495523
"left": undefined,
496524
"position": undefined,
497525
"right": undefined,
@@ -506,11 +534,13 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
506534
"top": undefined,
507535
}
508536
}
537+
testID="icon-button-container-outer-layer"
509538
>
510539
<View
511540
collapsable={false}
512541
style={
513542
Object {
543+
"flex": undefined,
514544
"shadowColor": "#000",
515545
"shadowOffset": Object {
516546
"height": 0,
@@ -520,6 +550,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
520550
"shadowRadius": 0,
521551
}
522552
}
553+
testID="icon-button-container-inner-layer"
523554
>
524555
<View
525556
collapsable={false}
@@ -530,6 +561,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
530561
"borderRadius": 20,
531562
"borderWidth": 0,
532563
"elevation": 0,
564+
"flex": undefined,
533565
"height": 40,
534566
"margin": 6,
535567
"overflow": "hidden",
@@ -748,6 +780,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
748780
"alignSelf": undefined,
749781
"bottom": undefined,
750782
"end": undefined,
783+
"flex": undefined,
751784
"left": undefined,
752785
"position": undefined,
753786
"right": undefined,
@@ -762,11 +795,13 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
762795
"top": undefined,
763796
}
764797
}
798+
testID="icon-button-container-outer-layer"
765799
>
766800
<View
767801
collapsable={false}
768802
style={
769803
Object {
804+
"flex": undefined,
770805
"shadowColor": "#000",
771806
"shadowOffset": Object {
772807
"height": 0,
@@ -776,6 +811,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
776811
"shadowRadius": 0,
777812
}
778813
}
814+
testID="icon-button-container-inner-layer"
779815
>
780816
<View
781817
collapsable={false}
@@ -786,6 +822,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
786822
"borderRadius": 20,
787823
"borderWidth": 0,
788824
"elevation": 0,
825+
"flex": undefined,
789826
"height": 40,
790827
"margin": 6,
791828
"overflow": "hidden",

‎src/components/__tests__/Card/__snapshots__/Card.test.tsx.snap

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ exports[`Card renders an outlined card 1`] = `
88
"alignSelf": undefined,
99
"bottom": undefined,
1010
"end": undefined,
11+
"flex": undefined,
1112
"left": undefined,
1213
"position": undefined,
1314
"right": undefined,
@@ -22,11 +23,13 @@ exports[`Card renders an outlined card 1`] = `
2223
"top": undefined,
2324
}
2425
}
26+
testID="card-container-outer-layer"
2527
>
2628
<View
2729
collapsable={false}
2830
style={
2931
Object {
32+
"flex": undefined,
3033
"shadowColor": "#000",
3134
"shadowOffset": Object {
3235
"height": 0,
@@ -36,6 +39,7 @@ exports[`Card renders an outlined card 1`] = `
3639
"shadowRadius": 0,
3740
}
3841
}
42+
testID="card-container-inner-layer"
3943
>
4044
<View
4145
collapsable={false}
@@ -44,6 +48,7 @@ exports[`Card renders an outlined card 1`] = `
4448
"backgroundColor": "rgba(255, 251, 254, 1)",
4549
"borderRadius": 12,
4650
"elevation": 1,
51+
"flex": undefined,
4752
}
4853
}
4954
testID="card-container"

0 commit comments

Comments
 (0)