fix: adjust label padding value

callstack · Oct 16, 2023 · 01275e9 · 01275e9
1 parent 9895ccd
commit 01275e9
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 8 deletions.
diff --git a/src/components/TextInput/Label/InputLabel.tsx b/src/components/TextInput/Label/InputLabel.tsx
@@ -8,6 +8,7 @@ import {
 } from 'react-native';
 
 import AnimatedText from '../../Typography/AnimatedText';
+import { getConstants } from '../helpers';
 import type { InputLabelProps } from '../types';
 
 const InputLabel = (props: InputLabelProps) => {
@@ -45,8 +46,10 @@ const InputLabel = (props: InputLabelProps) => {
     labelTranslationXOffset,
     maxFontSizeMultiplier,
     testID,
+    isV3,
   } = props;
 
+  const { INPUT_PADDING_HORIZONTAL } = getConstants(isV3);
   const { width } = useWindowDimensions();
 
   const paddingOffset =
@@ -119,7 +122,7 @@ const InputLabel = (props: InputLabelProps) => {
     labelError && errorColor ? errorColor : placeholderColor
   ) as ColorValue;
 
-  const maxWidth = width - (placeholderStyle.paddingHorizontal || 0);
+  const maxWidth = width - INPUT_PADDING_HORIZONTAL;
 
   return (
     // Position colored placeholder and gray placeholder on top of each other and crossfade them

diff --git a/src/components/TextInput/TextInputFlat.tsx b/src/components/TextInput/TextInputFlat.tsx
@@ -292,6 +292,7 @@ const TextInputFlat = ({
           ? 1
           : 0
         : 1,
+    isV3,
   };
 
   const affixTopPosition = {

diff --git a/src/components/TextInput/TextInputOutlined.tsx b/src/components/TextInput/TextInputOutlined.tsx
@@ -233,6 +233,7 @@ const TextInputOutlined = ({
           ? 1
           : 0
         : 1,
+    isV3,
   };
 
   const minHeight = (height ||

diff --git a/src/components/TextInput/types.tsx b/src/components/TextInput/types.tsx
@@ -135,6 +135,7 @@ export type InputLabelProps = {
   labelLayoutWidth: number;
   labelBackground?: any;
   maxFontSizeMultiplier?: number | undefined | null;
+  isV3?: boolean;
 } & LabelProps;
 
 export type LabelBackgroundProps = {

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