fix: correct Text, unblock using theme in TextInput

callstack · Sep 5, 2022 · 2a31919 · 2a31919
1 parent 7714a5a
commit 2a31919
Show file tree

Hide file tree

Showing 25 changed files with 189 additions and 30 deletions.
diff --git a/src/components/TextInput/Label/InputLabel.tsx b/src/components/TextInput/Label/InputLabel.tsx
@@ -1,12 +1,10 @@
 import React from 'react';
 import { Animated, StyleSheet } from 'react-native';
 import AnimatedText from '../../Typography/AnimatedText';
-import { useTheme } from '../../../core/theming';
 
 import type { InputLabelProps } from '../types';
 
 const InputLabel = (props: InputLabelProps) => {
-  const { isV3 } = useTheme();
   const { parentState, labelBackground } = props;
   const {
     label,
@@ -19,6 +17,7 @@ const InputLabel = (props: InputLabelProps) => {
     baseLabelTranslateY,
     font,
     fontSize,
+    lineHeight,
     fontWeight,
     placeholderOpacity,
     wiggleOffsetX,
@@ -47,6 +46,7 @@ const InputLabel = (props: InputLabelProps) => {
   const labelStyle = {
     ...font,
     fontSize,
+    lineHeight,
     fontWeight,
     transform: [
       {
@@ -118,7 +118,6 @@ const InputLabel = (props: InputLabelProps) => {
               outputRange: [hasActiveOutline ? 1 : 0, 0],
             }),
           },
-          isV3 && styles.md3TextLine,
         ]}
         numberOfLines={1}
         maxFontSizeMultiplier={maxFontSizeMultiplier}
@@ -139,7 +138,6 @@ const InputLabel = (props: InputLabelProps) => {
             color: textColor,
             opacity: placeholderOpacity,
           },
-          isV3 && styles.md3TextLine,
         ]}
         numberOfLines={1}
         maxFontSizeMultiplier={maxFontSizeMultiplier}
@@ -155,9 +153,6 @@ const styles = StyleSheet.create({
   labelContainer: {
     zIndex: 3,
   },
-  md3TextLine: {
-    lineHeight: undefined,
-  },
 });
 
 export default InputLabel;
diff --git a/src/components/TextInput/TextInputFlat.tsx b/src/components/TextInput/TextInputFlat.tsx
@@ -74,14 +74,15 @@ const TextInputFlat = ({
 }: ChildTextInputProps) => {
   const isAndroid = Platform.OS === 'android';
   const { colors, isV3, roundness } = theme;
-  const font = !isV3 ? theme.fonts.regular : {};
+  const font = isV3 ? theme.typescale.bodyLarge : theme.fonts.regular;
   const hasActiveOutline = parentState.focused || error;
 
   const { LABEL_PADDING_TOP, FLAT_INPUT_OFFSET, MIN_HEIGHT } =
     getConstants(isV3);
 
   const {
     fontSize: fontSizeStyle,
+    lineHeight,
     fontWeight,
     height,
     paddingHorizontal,
@@ -188,6 +189,7 @@ const TextInputFlat = ({
     dense: dense ? dense : null,
     topPosition,
     fontSize,
+    lineHeight,
     label,
     scale: fontScale,
     isAndroid,
@@ -248,6 +250,7 @@ const TextInputFlat = ({
     baseLabelTranslateX,
     font,
     fontSize,
+    lineHeight,
     fontWeight,
     labelScale,
     wiggleOffsetX: LABEL_WIGGLE_X_OFFSET,
@@ -292,7 +295,7 @@ const TextInputFlat = ({
       ...adornmentProps,
       left,
       right,
-      textStyle: { ...font, fontSize, fontWeight },
+      textStyle: { ...font, fontSize, lineHeight, fontWeight },
       visible: parentState.labeled,
     };
   }
@@ -358,6 +361,7 @@ const TextInputFlat = ({
             {
               ...font,
               fontSize,
+              lineHeight,
               fontWeight,
               color: inputTextColor,
               textAlignVertical: multiline ? 'top' : 'center',

diff --git a/src/components/TextInput/TextInputOutlined.tsx b/src/components/TextInput/TextInputOutlined.tsx
@@ -26,6 +26,7 @@ import {
   OUTLINE_MINIMIZED_LABEL_Y_OFFSET,
   LABEL_PADDING_TOP,
   MIN_DENSE_HEIGHT_OUTLINED,
+  LABEL_PADDING_TOP_DENSE,
 } from './constants';
 
 import {
@@ -73,7 +74,7 @@ const TextInputOutlined = ({
   const adornmentConfig = getAdornmentConfig({ left, right });
 
   const { colors, isV3, roundness } = theme;
-  const font = !isV3 ? theme.fonts.regular : {};
+  const font = isV3 ? theme.typescale.bodyLarge : theme.fonts.regular;
   const hasActiveOutline = parentState.focused || error;
 
   const { INPUT_PADDING_HORIZONTAL, MIN_HEIGHT, ADORNMENT_OFFSET } =
@@ -191,6 +192,7 @@ const TextInputOutlined = ({
     baseLabelTranslateX,
     font,
     fontSize,
+    lineHeight,
     fontWeight,
     labelScale,
     wiggleOffsetX: LABEL_WIGGLE_X_OFFSET,
@@ -209,21 +211,25 @@ const TextInputOutlined = ({
   const minHeight = (height ||
     (dense ? MIN_DENSE_HEIGHT_OUTLINED : MIN_HEIGHT)) as number;
 
+  const outlinedHeight =
+    inputHeight +
+    (!height ? (dense ? LABEL_PADDING_TOP_DENSE / 2 : LABEL_PADDING_TOP) : 0);
+
   const { leftLayout, rightLayout } = parentState;
 
   const leftAffixTopPosition = calculateOutlinedIconAndAffixTopPosition({
-    height: minHeight,
+    height: outlinedHeight,
     affixHeight: leftLayout.height || 0,
     labelYOffset: -OUTLINE_MINIMIZED_LABEL_Y_OFFSET,
   });
 
   const rightAffixTopPosition = calculateOutlinedIconAndAffixTopPosition({
-    height: minHeight,
+    height: outlinedHeight,
     affixHeight: rightLayout.height || 0,
     labelYOffset: -OUTLINE_MINIMIZED_LABEL_Y_OFFSET,
   });
   const iconTopPosition = calculateOutlinedIconAndAffixTopPosition({
-    height: minHeight,
+    height: outlinedHeight,
     affixHeight: ADORNMENT_SIZE,
     labelYOffset: -OUTLINE_MINIMIZED_LABEL_Y_OFFSET,
   });
@@ -269,7 +275,7 @@ const TextInputOutlined = ({
       ...adornmentProps,
       left,
       right,
-      textStyle: { ...font, fontSize, fontWeight },
+      textStyle: { ...font, fontSize, lineHeight, fontWeight },
       visible: parentState.labeled,
     };
   }
@@ -331,6 +337,7 @@ const TextInputOutlined = ({
               {
                 ...font,
                 fontSize,
+                lineHeight,
                 fontWeight,
                 color: inputTextColor,
                 textAlignVertical: multiline ? 'top' : 'center',

diff --git a/src/components/TextInput/constants.tsx b/src/components/TextInput/constants.tsx
@@ -18,6 +18,8 @@ export const MD2_MIN_HEIGHT = 64;
 export const MD3_MIN_HEIGHT = 56;
 export const MD3_ADORNMENT_OFFSET = 16;
 export const MD2_ADORNMENT_OFFSET = 12;
+export const LABEL_PADDING_TOP_DENSE = 24;
+export const LABEL_PADDING_TOP = 8;
 
 // Text input flat
 export const MD2_LABEL_PADDING_TOP = 30;
@@ -30,7 +32,6 @@ export const MD2_FLAT_INPUT_OFFSET = 8;
 export const MD3_FLAT_INPUT_OFFSET = 16;
 
 export const MINIMIZED_LABEL_Y_OFFSET = -18;
-export const LABEL_PADDING_TOP_DENSE = 24;
 export const MIN_DENSE_HEIGHT_WL = 52;
 export const MIN_DENSE_HEIGHT = 40;
 
@@ -43,5 +44,4 @@ export const MD2_OUTLINED_INPUT_OFFSET = 8;
 export const MD3_OUTLINED_INPUT_OFFSET = 16;
 
 export const OUTLINE_MINIMIZED_LABEL_Y_OFFSET = -6;
-export const LABEL_PADDING_TOP = 8;
 export const MIN_DENSE_HEIGHT_OUTLINED = 48;
diff --git a/src/components/TextInput/types.tsx b/src/components/TextInput/types.tsx
@@ -58,6 +58,7 @@ export type LabelProps = {
   wiggleOffsetX: number;
   labelScale: number;
   fontSize: number;
+  lineHeight?: number | undefined;
   fontWeight: TextStyle['fontWeight'];
   font: any;
   topPosition: number;

diff --git a/src/components/Typography/Text.tsx b/src/components/Typography/Text.tsx
@@ -5,7 +5,6 @@ import {
   StyleProp,
   StyleSheet,
   I18nManager,
-  Platform,
 } from 'react-native';
 import { useTheme } from '../../core/theming';
 import { Font, MD3TypescaleKey, ThemeProp } from '../../types';
@@ -99,7 +98,7 @@ const Text: React.ForwardRefRenderFunction<{}, Props> = (
         return {
           ...acc,
           [key]: {
-            ...(Platform.OS === 'android' && { fontFamily }),
+            fontFamily,
             fontSize,
             fontWeight,
             lineHeight,

diff --git a/src/components/__tests__/Appbar/__snapshots__/Appbar.test.js.snap b/src/components/__tests__/Appbar/__snapshots__/Appbar.test.js.snap
@@ -608,6 +608,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
             Array [
               Object {
                 "color": "rgba(28, 27, 31, 1)",
+                "fontFamily": "System",
                 "fontSize": 22,
                 "fontWeight": "400",
                 "letterSpacing": 0,

diff --git a/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.js.snap b/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.js.snap
@@ -106,6 +106,7 @@ exports[`can render leading checkbox control 1`] = `
         Array [
           Object {
             "color": "rgba(28, 27, 31, 1)",
+            "fontFamily": "System",
             "fontSize": 16,
             "fontWeight": "400",
             "letterSpacing": 0.15,
@@ -185,6 +186,7 @@ exports[`can render the Android checkbox on different platforms 1`] = `
         Array [
           Object {
             "color": "rgba(28, 27, 31, 1)",
+            "fontFamily": "System",
             "fontSize": 16,
             "fontWeight": "400",
             "letterSpacing": 0.15,
@@ -498,6 +500,7 @@ exports[`renders unchecked 1`] = `
         Array [
           Object {
             "color": "rgba(28, 27, 31, 1)",
+            "fontFamily": "System",
             "fontSize": 16,
             "fontWeight": "400",
             "letterSpacing": 0.15,

diff --git a/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.js.snap b/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.js.snap
@@ -105,6 +105,7 @@ exports[`can render leading radio button control 1`] = `
         Array [
           Object {
             "color": "rgba(28, 27, 31, 1)",
+            "fontFamily": "System",
             "fontSize": 16,
             "fontWeight": "400",
             "letterSpacing": 0.15,
@@ -183,6 +184,7 @@ exports[`can render the Android radio button on different platforms 1`] = `
         Array [
           Object {
             "color": "rgba(28, 27, 31, 1)",
+            "fontFamily": "System",
             "fontSize": 16,
             "fontWeight": "400",
             "letterSpacing": 0.15,
@@ -442,6 +444,7 @@ exports[`renders unchecked 1`] = `
         Array [
           Object {
             "color": "rgba(28, 27, 31, 1)",
+            "fontFamily": "System",
             "fontSize": 16,
             "fontWeight": "400",
             "letterSpacing": 0.15,

diff --git a/src/components/__tests__/TextInput.test.js b/src/components/__tests__/TextInput.test.js
@@ -21,6 +21,9 @@ const style = StyleSheet.create({
   height: {
     height: 100,
   },
+  lineHeight: {
+    lineHeight: 22,
+  },
 });
 
 const affixTextValue = '/100';
@@ -266,6 +269,23 @@ it('correctly applies padding offset to input label on Android when LTR', () =>
     paddingRight: 56,
   });
 });
+['outlined', 'flat'].forEach((mode) =>
+  it('renders input with correct line height', () => {
+    const input = render(
+      <TextInput
+        mode={mode}
+        multiline
+        label="Flat input"
+        testID={'text-input'}
+        style={style.lineHeight}
+      />
+    );
+
+    expect(input.getByTestId(`text-input-${mode}`)).toHaveStyle({
+      lineHeight: 22,
+    });
+  })
+);
 
 describe('maxFontSizeMultiplier', () => {
   const createInput = (type, maxFontSizeMultiplier) => {