fix: adjust label width

callstack · Oct 16, 2023 · 9f7fc67 · 9f7fc67
1 parent 23e7fd8
commit 9f7fc67
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 16 deletions.
diff --git a/src/components/TextInput/Label/InputLabel.tsx b/src/components/TextInput/Label/InputLabel.tsx
@@ -1,5 +1,11 @@
 import React from 'react';
-import { Animated, Dimensions, StyleSheet } from 'react-native';
+import {
+  Animated,
+  ColorValue,
+  Platform,
+  StyleSheet,
+  useWindowDimensions,
+} from 'react-native';
 
 import AnimatedText from '../../Typography/AnimatedText';
 import type { InputLabelProps } from '../types';
@@ -41,7 +47,7 @@ const InputLabel = (props: InputLabelProps) => {
     testID,
   } = props;
 
-  const { width } = Dimensions.get('window');
+  const { width } = useWindowDimensions();
 
   const paddingOffset =
     paddingLeft && paddingRight ? { paddingLeft, paddingRight } : {};
@@ -100,7 +106,20 @@ const InputLabel = (props: InputLabelProps) => {
     ],
   };
 
-  const textColor = labelError && errorColor ? errorColor : placeholderColor;
+  const commonStyles = [
+    placeholderStyle,
+    {
+      top: topPosition,
+    },
+    labelStyle,
+    paddingOffset || {},
+  ];
+
+  const textColor = (
+    labelError && errorColor ? errorColor : placeholderColor
+  ) as ColorValue;
+
+  const maxWidth = width - (placeholderStyle.paddingHorizontal || 0);
 
   return (
     // Position colored placeholder and gray placeholder on top of each other and crossfade them
@@ -110,7 +129,8 @@ const InputLabel = (props: InputLabelProps) => {
       style={[
         StyleSheet.absoluteFill,
         styles.labelContainer,
-        { opacity, width },
+        Platform.OS !== 'web' && { width },
+        { opacity },
         labelTranslationX,
       ]}
     >
@@ -132,12 +152,7 @@ const InputLabel = (props: InputLabelProps) => {
         onLayout={onLayoutAnimatedText}
         onTextLayout={onLabelTextLayout}
         style={[
-          placeholderStyle,
-          {
-            top: topPosition,
-          },
-          labelStyle,
-          paddingOffset || {},
+          commonStyles,
           {
             color: activeColor,
           },
@@ -151,15 +166,11 @@ const InputLabel = (props: InputLabelProps) => {
       <AnimatedText
         variant={focused ? 'bodyLarge' : 'bodySmall'}
         style={[
-          placeholderStyle,
-          {
-            top: topPosition,
-          },
-          labelStyle,
-          paddingOffset,
+          commonStyles,
           {
             color: textColor,
             opacity: placeholderOpacity,
+            maxWidth,
           },
         ]}
         numberOfLines={1}

diff --git a/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap
@@ -127,6 +127,7 @@ exports[`correctly applies a component as the text label 1`] = `
             "left": 0,
             "letterSpacing": 0.15,
             "lineHeight": 19.2,
+            "maxWidth": 750,
             "opacity": 0,
             "paddingLeft": 16,
             "paddingRight": 16,
@@ -330,6 +331,7 @@ exports[`correctly applies cursorColor prop 1`] = `
             "left": 0,
             "letterSpacing": 0.15,
             "lineHeight": 19.2,
+            "maxWidth": 750,
             "opacity": 0,
             "paddingLeft": 16,
             "paddingRight": 16,
@@ -525,6 +527,7 @@ exports[`correctly applies default textAlign based on default RTL 1`] = `
             "left": 0,
             "letterSpacing": 0.15,
             "lineHeight": 19.2,
+            "maxWidth": 750,
             "opacity": 0,
             "paddingLeft": 16,
             "paddingRight": 16,
@@ -755,6 +758,7 @@ exports[`correctly applies height to multiline Outline TextInput 1`] = `
               "left": 0,
               "letterSpacing": 0.15,
               "lineHeight": 19.2,
+              "maxWidth": 734,
               "opacity": 0,
               "paddingHorizontal": 16,
               "position": "absolute",
@@ -949,6 +953,7 @@ exports[`correctly applies paddingLeft from contentStyleProp 1`] = `
             "left": 0,
             "letterSpacing": 0.15,
             "lineHeight": 19.2,
+            "maxWidth": 750,
             "opacity": 0,
             "paddingLeft": 16,
             "paddingRight": 16,
@@ -1146,6 +1151,7 @@ exports[`correctly applies textAlign center 1`] = `
             "left": 0,
             "letterSpacing": 0.15,
             "lineHeight": 19.2,
+            "maxWidth": 750,
             "opacity": 0,
             "paddingLeft": 16,
             "paddingRight": 16,
@@ -1341,6 +1347,7 @@ exports[`correctly renders left-side affix adornment, and right-side icon adornm
             "left": 0,
             "letterSpacing": 0.15,
             "lineHeight": 19.2,
+            "maxWidth": 750,
             "opacity": 0,
             "paddingLeft": 16,
             "paddingRight": 56,
@@ -1738,6 +1745,7 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm
             "left": 0,
             "letterSpacing": 0.15,
             "lineHeight": 19.2,
+            "maxWidth": 750,
             "opacity": 0,
             "paddingLeft": 56,
             "paddingRight": 56,