From 2fa36a4daba0f0b338aa26a8d85d471096d7c80d Mon Sep 17 00:00:00 2001 From: Tomasz Janiczek Date: Mon, 18 Sep 2023 21:17:14 +0200 Subject: [PATCH] fix: textinput sizing for react-native-web@0.19 (#4084) Co-authored-by: Tomasz Janiczek --- example/assets/fonts/Abel-Regular.ttf | Bin 0 -> 33184 bytes example/src/Examples/TextInputExample.tsx | 23 ++++++ example/src/index.native.tsx | 4 +- example/src/index.tsx | 4 +- src/components/TextInput/TextInputFlat.tsx | 3 +- .../TextInput/TextInputOutlined.tsx | 3 +- src/components/__tests__/TextInput.test.tsx | 72 +++++++++++++++++- .../__snapshots__/TextInput.test.tsx.snap | 54 ++++++------- 8 files changed, 129 insertions(+), 34 deletions(-) create mode 100644 example/assets/fonts/Abel-Regular.ttf diff --git a/example/assets/fonts/Abel-Regular.ttf b/example/assets/fonts/Abel-Regular.ttf new file mode 100644 index 0000000000000000000000000000000000000000..5245501653c3771a8acea32cf23892be5ecdf2a4 GIT binary patch literal 33184 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 literal 0 HcmV?d00001 diff --git a/example/src/Examples/TextInputExample.tsx b/example/src/Examples/TextInputExample.tsx index 530c22f3ba..a8cab508da 100644 --- a/example/src/Examples/TextInputExample.tsx +++ b/example/src/Examples/TextInputExample.tsx @@ -7,7 +7,9 @@ import { View, } from 'react-native'; +import { useFonts } from 'expo-font'; import { + configureFonts, HelperText, List, MD2Colors, @@ -141,6 +143,10 @@ const TextInputExample = () => { }); }; + const [fontsLoaded] = useFonts({ + Abel: require('../../assets/fonts/Abel-Regular.ttf'), + }); + const [expandedId, setExpandedId] = React.useState('flat'); const onAccordionPress = (id: string | number) => @@ -674,6 +680,23 @@ const TextInputExample = () => { placeholder="Custom colors" /> + {fontsLoaded && theme.isV3 ? ( + + + + ) : null} diff --git a/example/src/index.native.tsx b/example/src/index.native.tsx index a7966a6cc8..3a18202aa2 100644 --- a/example/src/index.native.tsx +++ b/example/src/index.native.tsx @@ -59,7 +59,7 @@ export default function PaperExample() { useKeepAwake(); const [fontsLoaded] = useFonts({ - NotoSans: require('../assets/fonts/NotoSans-Regular.ttf'), + Abel: require('../assets/fonts/Abel-Regular.ttf'), }); const [isReady, setIsReady] = React.useState(false); @@ -220,7 +220,7 @@ export default function PaperExample() { ...combinedTheme, fonts: configureFonts({ config: { - fontFamily: 'NotoSans', + fontFamily: 'Abel', }, }), }; diff --git a/example/src/index.tsx b/example/src/index.tsx index 4638ac2715..d2c51cd08d 100644 --- a/example/src/index.tsx +++ b/example/src/index.tsx @@ -50,7 +50,7 @@ export default function PaperExample() { useKeepAwake(); const [fontsLoaded] = useFonts({ - NotoSans: require('../assets/fonts/NotoSans-Regular.ttf'), + Abel: require('../assets/fonts/Abel-Regular.ttf'), }); const [isReady, setIsReady] = React.useState(false); @@ -177,7 +177,7 @@ export default function PaperExample() { ...combinedTheme, fonts: configureFonts({ config: { - fontFamily: 'NotoSans', + fontFamily: 'Abel', }, }), }; diff --git a/src/components/TextInput/TextInputFlat.tsx b/src/components/TextInput/TextInputFlat.tsx index effe57fb00..9cca29cee0 100644 --- a/src/components/TextInput/TextInputFlat.tsx +++ b/src/components/TextInput/TextInputFlat.tsx @@ -83,7 +83,7 @@ const TextInputFlat = ({ const { fontSize: fontSizeStyle, - lineHeight, + lineHeight: lineHeightStyle, fontWeight, height, paddingHorizontal, @@ -91,6 +91,7 @@ const TextInputFlat = ({ ...viewStyle } = (StyleSheet.flatten(style) || {}) as TextStyle; const fontSize = fontSizeStyle || MAXIMIZED_LABEL_FONT_SIZE; + const lineHeight = lineHeightStyle || fontSize * 1.2; const isPaddingHorizontalPassed = paddingHorizontal !== undefined && typeof paddingHorizontal === 'number'; diff --git a/src/components/TextInput/TextInputOutlined.tsx b/src/components/TextInput/TextInputOutlined.tsx index 5f4ab044d9..025316c395 100644 --- a/src/components/TextInput/TextInputOutlined.tsx +++ b/src/components/TextInput/TextInputOutlined.tsx @@ -86,13 +86,14 @@ const TextInputOutlined = ({ const { fontSize: fontSizeStyle, fontWeight, - lineHeight, + lineHeight: lineHeightStyle, height, backgroundColor = colors?.background, textAlign, ...viewStyle } = (StyleSheet.flatten(style) || {}) as TextStyle; const fontSize = fontSizeStyle || MAXIMIZED_LABEL_FONT_SIZE; + const lineHeight = lineHeightStyle || fontSize * 1.2; const { inputTextColor, diff --git a/src/components/__tests__/TextInput.test.tsx b/src/components/__tests__/TextInput.test.tsx index cf9b4feb83..0719fad052 100644 --- a/src/components/__tests__/TextInput.test.tsx +++ b/src/components/__tests__/TextInput.test.tsx @@ -1,6 +1,6 @@ /* eslint-disable react-native/no-inline-styles */ import * as React from 'react'; -import { StyleSheet, Text, Platform, I18nManager } from 'react-native'; +import { StyleSheet, Text, Platform, I18nManager, View } from 'react-native'; import { fireEvent, render } from '@testing-library/react-native'; import color from 'color'; @@ -382,6 +382,76 @@ it("correctly applies theme background to label when input's background is trans }); }); +it('always applies line height, even if not specified', () => { + const { getByTestId } = render( + + + + + + + + + ); + + expect(getByTestId('default-font')).toHaveStyle({ lineHeight: 16 * 1.2 }); + expect(getByTestId('default-font-flat')).toHaveStyle({ + lineHeight: 16 * 1.2, + }); + + expect(getByTestId('large-font')).toHaveStyle({ lineHeight: 30 * 1.2 }); + expect(getByTestId('large-font-flat')).toHaveStyle({ lineHeight: 30 * 1.2 }); + + expect(getByTestId('custom-line-height')).toHaveStyle({ lineHeight: 29 }); + expect(getByTestId('custom-line-height-flat')).toHaveStyle({ + lineHeight: 29, + }); +}); + describe('maxFontSizeMultiplier', () => { const createInput = ( type: Exclude, diff --git a/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap index d89ec4b1e0..d977929c39 100644 --- a/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap @@ -79,7 +79,7 @@ exports[`correctly applies a component as the text label 1`] = ` "fontWeight": undefined, "left": 0, "letterSpacing": 0.15, - "lineHeight": undefined, + "lineHeight": 19.2, "opacity": 0, "paddingLeft": 16, "paddingRight": 16, @@ -124,7 +124,7 @@ exports[`correctly applies a component as the text label 1`] = ` "fontWeight": undefined, "left": 0, "letterSpacing": 0.15, - "lineHeight": undefined, + "lineHeight": 19.2, "opacity": 0, "paddingLeft": 16, "paddingRight": 16, @@ -187,7 +187,7 @@ exports[`correctly applies a component as the text label 1`] = ` "fontSize": 16, "fontWeight": undefined, "letterSpacing": 0.15, - "lineHeight": undefined, + "lineHeight": 19.2, "paddingLeft": 16, "paddingRight": 16, "textAlign": "left", @@ -287,7 +287,7 @@ exports[`correctly applies cursorColor prop 1`] = ` "fontWeight": undefined, "left": 0, "letterSpacing": 0.15, - "lineHeight": undefined, + "lineHeight": 19.2, "opacity": 0, "paddingLeft": 16, "paddingRight": 16, @@ -324,7 +324,7 @@ exports[`correctly applies cursorColor prop 1`] = ` "fontWeight": undefined, "left": 0, "letterSpacing": 0.15, - "lineHeight": undefined, + "lineHeight": 19.2, "opacity": 0, "paddingLeft": 16, "paddingRight": 16, @@ -379,7 +379,7 @@ exports[`correctly applies cursorColor prop 1`] = ` "fontSize": 16, "fontWeight": undefined, "letterSpacing": 0.15, - "lineHeight": undefined, + "lineHeight": 19.2, "paddingLeft": 16, "paddingRight": 16, "textAlign": "left", @@ -479,7 +479,7 @@ exports[`correctly applies default textAlign based on default RTL 1`] = ` "fontWeight": undefined, "left": 0, "letterSpacing": 0.15, - "lineHeight": undefined, + "lineHeight": 19.2, "opacity": 0, "paddingLeft": 16, "paddingRight": 16, @@ -516,7 +516,7 @@ exports[`correctly applies default textAlign based on default RTL 1`] = ` "fontWeight": undefined, "left": 0, "letterSpacing": 0.15, - "lineHeight": undefined, + "lineHeight": 19.2, "opacity": 0, "paddingLeft": 16, "paddingRight": 16, @@ -571,7 +571,7 @@ exports[`correctly applies default textAlign based on default RTL 1`] = ` "fontSize": 16, "fontWeight": undefined, "letterSpacing": 0.15, - "lineHeight": undefined, + "lineHeight": 19.2, "paddingLeft": 16, "paddingRight": 16, "textAlign": "left", @@ -665,7 +665,7 @@ exports[`correctly applies height to multiline Outline TextInput 1`] = ` "fontWeight": undefined, "left": 8, "letterSpacing": 0.15, - "lineHeight": undefined, + "lineHeight": 19.2, "opacity": 1, "paddingHorizontal": 0, "position": "absolute", @@ -706,7 +706,7 @@ exports[`correctly applies height to multiline Outline TextInput 1`] = ` "fontWeight": undefined, "left": 0, "letterSpacing": 0.15, - "lineHeight": undefined, + "lineHeight": 19.2, "opacity": 0, "paddingHorizontal": 16, "position": "absolute", @@ -742,7 +742,7 @@ exports[`correctly applies height to multiline Outline TextInput 1`] = ` "fontWeight": undefined, "left": 0, "letterSpacing": 0.15, - "lineHeight": undefined, + "lineHeight": 19.2, "opacity": 0, "paddingHorizontal": 16, "position": "absolute", @@ -797,7 +797,7 @@ exports[`correctly applies height to multiline Outline TextInput 1`] = ` "fontSize": 16, "fontWeight": undefined, "letterSpacing": 0.15, - "lineHeight": undefined, + "lineHeight": 19.2, "paddingHorizontal": 16, "textAlign": "left", "textAlignVertical": "top", @@ -897,7 +897,7 @@ exports[`correctly applies paddingLeft from contentStyleProp 1`] = ` "fontWeight": undefined, "left": 0, "letterSpacing": 0.15, - "lineHeight": undefined, + "lineHeight": 19.2, "opacity": 0, "paddingLeft": 16, "paddingRight": 16, @@ -934,7 +934,7 @@ exports[`correctly applies paddingLeft from contentStyleProp 1`] = ` "fontWeight": undefined, "left": 0, "letterSpacing": 0.15, - "lineHeight": undefined, + "lineHeight": 19.2, "opacity": 0, "paddingLeft": 16, "paddingRight": 16, @@ -989,7 +989,7 @@ exports[`correctly applies paddingLeft from contentStyleProp 1`] = ` "fontSize": 16, "fontWeight": undefined, "letterSpacing": 0.15, - "lineHeight": undefined, + "lineHeight": 19.2, "paddingLeft": 16, "paddingRight": 16, "textAlign": "left", @@ -1091,7 +1091,7 @@ exports[`correctly applies textAlign center 1`] = ` "fontWeight": undefined, "left": 0, "letterSpacing": 0.15, - "lineHeight": undefined, + "lineHeight": 19.2, "opacity": 0, "paddingLeft": 16, "paddingRight": 16, @@ -1128,7 +1128,7 @@ exports[`correctly applies textAlign center 1`] = ` "fontWeight": undefined, "left": 0, "letterSpacing": 0.15, - "lineHeight": undefined, + "lineHeight": 19.2, "opacity": 0, "paddingLeft": 16, "paddingRight": 16, @@ -1183,7 +1183,7 @@ exports[`correctly applies textAlign center 1`] = ` "fontSize": 16, "fontWeight": undefined, "letterSpacing": 0.15, - "lineHeight": undefined, + "lineHeight": 19.2, "paddingLeft": 16, "paddingRight": 16, "textAlign": "center", @@ -1283,7 +1283,7 @@ exports[`correctly renders left-side affix adornment, and right-side icon adornm "fontWeight": undefined, "left": 0, "letterSpacing": 0.15, - "lineHeight": undefined, + "lineHeight": 19.2, "opacity": 0, "paddingLeft": 16, "paddingRight": 56, @@ -1320,7 +1320,7 @@ exports[`correctly renders left-side affix adornment, and right-side icon adornm "fontWeight": undefined, "left": 0, "letterSpacing": 0.15, - "lineHeight": undefined, + "lineHeight": 19.2, "opacity": 0, "paddingLeft": 16, "paddingRight": 56, @@ -1375,7 +1375,7 @@ exports[`correctly renders left-side affix adornment, and right-side icon adornm "fontSize": 16, "fontWeight": undefined, "letterSpacing": 0.15, - "lineHeight": undefined, + "lineHeight": 19.2, "paddingLeft": 16, "paddingRight": 56, "textAlign": "left", @@ -1423,7 +1423,7 @@ exports[`correctly renders left-side affix adornment, and right-side icon adornm "fontSize": 16, "fontWeight": undefined, "letterSpacing": 0.15, - "lineHeight": undefined, + "lineHeight": 19.2, }, { "color": "#f44336", @@ -1677,7 +1677,7 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm "fontWeight": undefined, "left": 0, "letterSpacing": 0.15, - "lineHeight": undefined, + "lineHeight": 19.2, "opacity": 0, "paddingLeft": 56, "paddingRight": 56, @@ -1714,7 +1714,7 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm "fontWeight": undefined, "left": 0, "letterSpacing": 0.15, - "lineHeight": undefined, + "lineHeight": 19.2, "opacity": 0, "paddingLeft": 56, "paddingRight": 56, @@ -1769,7 +1769,7 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm "fontSize": 16, "fontWeight": undefined, "letterSpacing": 0.15, - "lineHeight": undefined, + "lineHeight": 19.2, "paddingLeft": 56, "paddingRight": 56, "textAlign": "left", @@ -1977,7 +1977,7 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm "fontSize": 16, "fontWeight": undefined, "letterSpacing": 0.15, - "lineHeight": undefined, + "lineHeight": 19.2, }, { "color": "#f44336",