diff --git a/example/assets/fonts/Abel-Regular.ttf b/example/assets/fonts/Abel-Regular.ttf new file mode 100644 index 0000000000..5245501653 Binary files /dev/null and b/example/assets/fonts/Abel-Regular.ttf differ 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 9ee30fac79..8fafa703ff 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 80d8adcae7..78df6bf3d6 100644 --- a/src/components/TextInput/TextInputOutlined.tsx +++ b/src/components/TextInput/TextInputOutlined.tsx @@ -85,13 +85,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",