Skip to content

Commit 4664a1c

Browse files
lukewalczaklukewalczak
authored
refactor: typography text styles adjustments (#3947)
1 parent 05e750f commit 4664a1c

21 files changed

+1967
-1658
lines changed

‎example/src/Examples/ButtonExample.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react';
22
import { Image, StyleSheet, View } from 'react-native';
33

4-
import { Button, List } from 'react-native-paper';
4+
import { Button, List, Text } from 'react-native-paper';
55

66
import { useExampleTheme } from '..';
77
import ScreenWrapper from '../ScreenWrapper';
@@ -283,6 +283,9 @@ const ButtonExample = () => {
283283
>
284284
Custom Font
285285
</Button>
286+
<Button mode="outlined" onPress={() => {}} style={styles.button}>
287+
<Text variant="titleLarge">Custom text</Text>
288+
</Button>
286289
</View>
287290

288291
<View style={styles.row}>

‎example/src/Examples/ChipExample.tsx‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,14 @@ import * as React from 'react';
22
import { Image, StyleSheet, View } from 'react-native';
33

44
import color from 'color';
5-
import { Chip, List, MD2Colors, MD3Colors, Snackbar } from 'react-native-paper';
5+
import {
6+
Chip,
7+
List,
8+
MD2Colors,
9+
MD3Colors,
10+
Snackbar,
11+
Text,
12+
} from 'react-native-paper';
613

714
import { useExampleTheme } from '..';
815
import ScreenWrapper from '../ScreenWrapper';
@@ -310,6 +317,13 @@ const ChipExample = () => {
310317
>
311318
With custom close icon
312319
</Chip>
320+
<Chip
321+
onPress={() => {}}
322+
style={styles.chip}
323+
textStyle={styles.tiny}
324+
>
325+
<Text variant="titleLarge">With custom text</Text>
326+
</Chip>
313327
</View>
314328
<Chip mode="outlined" onPress={() => {}} style={styles.fullWidthChip}>
315329
Full width chip

‎src/components/Typography/Text.tsx‎

Lines changed: 38 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,43 @@ const Text = (
9696
}));
9797

9898
if (theme.isV3 && variant) {
99-
const font = theme.fonts[variant];
99+
let font = theme.fonts[variant];
100+
let textStyle = [font, style];
101+
102+
if (
103+
rest.children &&
104+
typeof rest.children === 'object' &&
105+
'props' in rest.children
106+
) {
107+
const { props } = rest.children;
108+
109+
// Context: Some components have the built-in `Text` component with a predefined variant,
110+
// that also accepts `children` as a `React.Node`. This can result in a situation,
111+
// where another `Text` component is rendered within the built-in `Text` component.
112+
// By doing that, we assume that user doesn't want to consume pre-defined font properties.
113+
// Case one: Nested `Text` has different `variant` that specified in parent. For example:
114+
// <Chip>
115+
// <Text variant="displayMedium">Nested</Text>
116+
// </Chip>
117+
// Solution: To address the following scenario, the code below overrides the `variant`
118+
// specified in a parent in favor of children's variant:
119+
if (props.variant) {
120+
font = theme.fonts[props.variant as VariantProp<typeof props.variant>];
121+
textStyle = [style, font];
122+
}
123+
124+
// Case two: Nested `Text` has specified `styles` which intefere
125+
// with font properties, from the parent's `variant`. For example:
126+
// <Chip>
127+
// <Text style={{fontSize: 30}}>Nested</Text>
128+
// </Chip>
129+
// Solution: To address the following scenario, the code below overrides the
130+
// parent's style with children's style:
131+
if (!props.variant) {
132+
textStyle = [style, props.style];
133+
}
134+
}
135+
100136
if (typeof font !== 'object') {
101137
throw new Error(
102138
`Variant ${variant} was not provided properly. Valid variants are ${Object.keys(
@@ -109,10 +145,9 @@ const Text = (
109145
<NativeText
110146
ref={root}
111147
style={[
112-
font,
113148
styles.text,
114149
{ writingDirection, color: theme.colors.onSurface },
115-
style,
150+
textStyle,
116151
]}
117152
{...rest}
118153
/>

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

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -637,13 +637,6 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
637637
numberOfLines={1}
638638
style={
639639
Array [
640-
Object {
641-
"fontFamily": "System",
642-
"fontSize": 22,
643-
"fontWeight": "400",
644-
"letterSpacing": 0,
645-
"lineHeight": 28,
646-
},
647640
Object {
648641
"textAlign": "left",
649642
},
@@ -653,15 +646,24 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
653646
},
654647
Array [
655648
Object {
656-
"color": "rgba(28, 27, 31, 1)",
657649
"fontFamily": "System",
658650
"fontSize": 22,
659651
"fontWeight": "400",
660652
"letterSpacing": 0,
661653
"lineHeight": 28,
662654
},
663-
false,
664-
undefined,
655+
Array [
656+
Object {
657+
"color": "rgba(28, 27, 31, 1)",
658+
"fontFamily": "System",
659+
"fontSize": 22,
660+
"fontWeight": "400",
661+
"letterSpacing": 0,
662+
"lineHeight": 28,
663+
},
664+
false,
665+
undefined,
666+
],
665667
],
666668
]
667669
}

‎src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.tsx.snap‎

Lines changed: 68 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -127,13 +127,6 @@ exports[`can render leading checkbox control 1`] = `
127127
maxFontSizeMultiplier={1.5}
128128
style={
129129
Array [
130-
Object {
131-
"fontFamily": "System",
132-
"fontSize": 16,
133-
"fontWeight": "400",
134-
"letterSpacing": 0.15,
135-
"lineHeight": 24,
136-
},
137130
Object {
138131
"textAlign": "left",
139132
},
@@ -143,15 +136,24 @@ exports[`can render leading checkbox control 1`] = `
143136
},
144137
Array [
145138
Object {
146-
"flexGrow": 1,
147-
"flexShrink": 1,
139+
"fontFamily": "System",
140+
"fontSize": 16,
141+
"fontWeight": "400",
142+
"letterSpacing": 0.15,
143+
"lineHeight": 24,
148144
},
149-
false,
150-
Object {
151-
"color": "rgba(28, 27, 31, 1)",
152-
"textAlign": "right",
153-
},
154-
undefined,
145+
Array [
146+
Object {
147+
"flexGrow": 1,
148+
"flexShrink": 1,
149+
},
150+
false,
151+
Object {
152+
"color": "rgba(28, 27, 31, 1)",
153+
"textAlign": "right",
154+
},
155+
undefined,
156+
],
155157
],
156158
]
157159
}
@@ -212,13 +214,6 @@ exports[`can render the Android checkbox on different platforms 1`] = `
212214
maxFontSizeMultiplier={1.5}
213215
style={
214216
Array [
215-
Object {
216-
"fontFamily": "System",
217-
"fontSize": 16,
218-
"fontWeight": "400",
219-
"letterSpacing": 0.15,
220-
"lineHeight": 24,
221-
},
222217
Object {
223218
"textAlign": "left",
224219
},
@@ -228,15 +223,24 @@ exports[`can render the Android checkbox on different platforms 1`] = `
228223
},
229224
Array [
230225
Object {
231-
"flexGrow": 1,
232-
"flexShrink": 1,
226+
"fontFamily": "System",
227+
"fontSize": 16,
228+
"fontWeight": "400",
229+
"letterSpacing": 0.15,
230+
"lineHeight": 24,
233231
},
234-
false,
235-
Object {
236-
"color": "rgba(28, 27, 31, 1)",
237-
"textAlign": "left",
238-
},
239-
undefined,
232+
Array [
233+
Object {
234+
"flexGrow": 1,
235+
"flexShrink": 1,
236+
},
237+
false,
238+
Object {
239+
"color": "rgba(28, 27, 31, 1)",
240+
"textAlign": "left",
241+
},
242+
undefined,
243+
],
240244
],
241245
]
242246
}
@@ -411,13 +415,6 @@ exports[`can render the iOS checkbox on different platforms 1`] = `
411415
maxFontSizeMultiplier={1.5}
412416
style={
413417
Array [
414-
Object {
415-
"fontFamily": "System",
416-
"fontSize": 16,
417-
"fontWeight": "400",
418-
"letterSpacing": 0.15,
419-
"lineHeight": 24,
420-
},
421418
Object {
422419
"textAlign": "left",
423420
},
@@ -427,15 +424,24 @@ exports[`can render the iOS checkbox on different platforms 1`] = `
427424
},
428425
Array [
429426
Object {
430-
"flexGrow": 1,
431-
"flexShrink": 1,
427+
"fontFamily": "System",
428+
"fontSize": 16,
429+
"fontWeight": "400",
430+
"letterSpacing": 0.15,
431+
"lineHeight": 24,
432432
},
433-
false,
434-
Object {
435-
"color": "rgba(28, 27, 31, 1)",
436-
"textAlign": "left",
437-
},
438-
undefined,
433+
Array [
434+
Object {
435+
"flexGrow": 1,
436+
"flexShrink": 1,
437+
},
438+
false,
439+
Object {
440+
"color": "rgba(28, 27, 31, 1)",
441+
"textAlign": "left",
442+
},
443+
undefined,
444+
],
439445
],
440446
]
441447
}
@@ -574,13 +580,6 @@ exports[`renders unchecked 1`] = `
574580
maxFontSizeMultiplier={1.5}
575581
style={
576582
Array [
577-
Object {
578-
"fontFamily": "System",
579-
"fontSize": 16,
580-
"fontWeight": "400",
581-
"letterSpacing": 0.15,
582-
"lineHeight": 24,
583-
},
584583
Object {
585584
"textAlign": "left",
586585
},
@@ -590,15 +589,24 @@ exports[`renders unchecked 1`] = `
590589
},
591590
Array [
592591
Object {
593-
"flexGrow": 1,
594-
"flexShrink": 1,
592+
"fontFamily": "System",
593+
"fontSize": 16,
594+
"fontWeight": "400",
595+
"letterSpacing": 0.15,
596+
"lineHeight": 24,
595597
},
596-
false,
597-
Object {
598-
"color": "rgba(28, 27, 31, 1)",
599-
"textAlign": "left",
600-
},
601-
undefined,
598+
Array [
599+
Object {
600+
"flexGrow": 1,
601+
"flexShrink": 1,
602+
},
603+
false,
604+
Object {
605+
"color": "rgba(28, 27, 31, 1)",
606+
"textAlign": "left",
607+
},
608+
undefined,
609+
],
602610
],
603611
]
604612
}

0 commit comments

Comments
 (0)