diff --git a/src/components/TextInput/Label/InputLabel.tsx b/src/components/TextInput/Label/InputLabel.tsx index cd9536add6..05bac4053b 100644 --- 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 index 44e163838a..2299830825 100644 --- 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 index c4c97318cf..000736b728 100644 --- 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 index 659c960e8b..2311aff2a6 100644 --- 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 index 508c6e17ec..acb800615b 100644 --- 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,