fix: correct long label in outlined text input (#2960)

callstack · Dec 10, 2021 · c7bedca · c7bedca
1 parent 1684719
commit c7bedca
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 2 deletions.
diff --git a/example/src/Examples/TextInputExample.tsx b/example/src/Examples/TextInputExample.tsx
@@ -28,6 +28,7 @@ const initialState: State = {
   outlinedMultiline: '',
   outlinedTextArea: '',
   outlinedColors: '',
+  outlinedLongLabel: '',
   maxLengthName: '',
   flatTextSecureEntry: true,
   outlineTextSecureEntry: true,
@@ -391,6 +392,15 @@ const TextInputExample = () => {
           outlineColor={pink400}
           activeOutlineColor={amber900}
         />
+        <TextInput
+          mode="outlined"
+          style={styles.inputContainerStyle}
+          label="Outlined with super long label which is truncating at some point"
+          placeholder="Type something"
+          onChangeText={(outlinedLongLabel) =>
+            inputActionHandler('outlinedLongLabel', outlinedLongLabel)
+          }
+        />
         <View style={styles.inputContainerStyle}>
           <TextInput
             label="Input with helper text"

diff --git a/example/utils/index.ts b/example/utils/index.ts
@@ -31,6 +31,7 @@ export type State = {
   outlinedMultiline: string;
   outlinedTextArea: string;
   outlinedColors: string;
+  outlinedLongLabel: string;
   maxLengthName: string;
   flatTextSecureEntry: boolean;
   outlineTextSecureEntry: boolean;

diff --git a/src/components/TextInput/Label/LabelBackground.tsx b/src/components/TextInput/Label/LabelBackground.tsx
@@ -70,6 +70,9 @@ const LabelBackground = ({
                   }),
                 },
               ],
+              maxWidth:
+                parentState.labelLayout.width -
+                2 * placeholderStyle.paddingHorizontal,
             },
           ]}
           numberOfLines={1}
@@ -87,7 +90,7 @@ const styles = StyleSheet.create({
     position: 'absolute',
     top: 6,
     left: 10,
-    width: 8,
+    width: 12,
   },
   outlinedLabel: {
     position: 'absolute',

diff --git a/src/components/__tests__/__snapshots__/TextInput.test.js.snap b/src/components/__tests__/__snapshots__/TextInput.test.js.snap
@@ -250,7 +250,7 @@ exports[`correctly applies height to multiline Outline TextInput 1`] = `
                   "translateX": -3,
                 },
               ],
-              "width": 8,
+              "width": 12,
             }
           }
         />
@@ -264,6 +264,7 @@ exports[`correctly applies height to multiline Outline TextInput 1`] = `
               "fontSize": 16,
               "fontWeight": undefined,
               "left": 18,
+              "maxWidth": -28,
               "opacity": 1,
               "paddingHorizontal": 0,
               "position": "absolute",