Skip to content

Commit

Permalink
fix(suite-native): input top padding
Browse files Browse the repository at this point in the history
- fixes conditonal top padding, the padding should be always the same independent of `isFocused` state

Closes #9472
  • Loading branch information
PeKne committed Feb 7, 2024
1 parent 9a95962 commit 7c4e8d7
Showing 1 changed file with 3 additions and 4 deletions.
7 changes: 3 additions & 4 deletions suite-native/atoms/src/Input/Input.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,6 @@ type InputLabelStyleProps = {

type InputStyleProps = {
isIconDisplayed: boolean;
isFocused: boolean;
};

const inputWrapperStyle = prepareNativeStyle<InputWrapperStyleProps>(
Expand Down Expand Up @@ -100,7 +99,7 @@ const inputWrapperStyle = prepareNativeStyle<InputWrapperStyleProps>(
}),
);

const inputStyle = prepareNativeStyle<InputStyleProps>((utils, { isIconDisplayed, isFocused }) => ({
const inputStyle = prepareNativeStyle<InputStyleProps>((utils, { isIconDisplayed }) => ({
...utils.typography.body,
// letterSpacing from `typography.body` is making strange layout jumps on Android while filling the input.
// This resets it to the default TextInput value.
Expand All @@ -113,7 +112,7 @@ const inputStyle = prepareNativeStyle<InputStyleProps>((utils, { isIconDisplayed
borderWidth: 0,
flex: 1,
// Make the text input uniform on both platforms (https://stackoverflow.com/a/68458803/1281305)
paddingTop: isFocused ? utils.spacings.large : 0,
paddingTop: utils.spacings.large,
paddingBottom: utils.spacings.extraSmall,
}));

Expand Down Expand Up @@ -251,7 +250,7 @@ export const Input = forwardRef<TextInput, InputProps>(
<Box flexDirection="row" alignItems="center">
<TextInput
ref={ref}
style={applyStyle(inputStyle, { isIconDisplayed, isFocused })}
style={applyStyle(inputStyle, { isIconDisplayed })}
onFocus={handleOnFocus}
onBlur={handleOnBlur}
hitSlop={inputHitSlop}
Expand Down

0 comments on commit 7c4e8d7

Please sign in to comment.