From 468f905cacf01925677de38f7e9e118d498a49c3 Mon Sep 17 00:00:00 2001 From: Paul V Puey Date: Wed, 17 Jan 2024 17:41:01 -0800 Subject: [PATCH] fixup! Tweak FilledTextInput spacing --- .../FilledTextInput.test.tsx.snap | 31 +- .../__snapshots__/CategoryModal.test.tsx.snap | 900 +++++++++--------- .../WalletListModal.test.tsx.snap | 2 +- ...reateWalletAccountSetupScene.test.tsx.snap | 531 +++++------ .../CreateWalletImportScene.test.tsx.snap | 456 ++++----- ...reateWalletSelectCryptoScene.test.tsx.snap | 2 +- src/components/scenes/InputTesterScene.tsx | 20 +- src/components/themed/FilledTextInput.tsx | 46 +- src/components/themed/SimpleTextInput.tsx | 2 +- 9 files changed, 1008 insertions(+), 982 deletions(-) diff --git a/src/__tests__/components/__snapshots__/FilledTextInput.test.tsx.snap b/src/__tests__/components/__snapshots__/FilledTextInput.test.tsx.snap index c68b98ebeae..8804bbbfab2 100644 --- a/src/__tests__/components/__snapshots__/FilledTextInput.test.tsx.snap +++ b/src/__tests__/components/__snapshots__/FilledTextInput.test.tsx.snap @@ -1,7 +1,20 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`FilledTextInput should render with some props 1`] = ` - + - string - - + + 5 - + - + `; diff --git a/src/__tests__/modals/__snapshots__/CategoryModal.test.tsx.snap b/src/__tests__/modals/__snapshots__/CategoryModal.test.tsx.snap index 25bbaaf8f27..f9210e11a52 100644 --- a/src/__tests__/modals/__snapshots__/CategoryModal.test.tsx.snap +++ b/src/__tests__/modals/__snapshots__/CategoryModal.test.tsx.snap @@ -419,149 +419,195 @@ exports[`CategoryModal should render with a subcategory 1`] = ` - + - + + Sub-category + + + - Sub-category - + testID="undefined.textInput" + textAlignVertical="top" + value="Paycheck" + /> - - - - - -  - + +  + + @@ -1844,119 +1849,76 @@ exports[`CategoryModal should render with an empty subcategory 1`] = ` - + - + + Sub-category + + + - Sub-category - + testID="undefined.textInput" + textAlignVertical="top" + value="" + /> - - - - - -  - + +  + + diff --git a/src/__tests__/modals/__snapshots__/WalletListModal.test.tsx.snap b/src/__tests__/modals/__snapshots__/WalletListModal.test.tsx.snap index cb6961ddc29..f0f9e9fe631 100644 --- a/src/__tests__/modals/__snapshots__/WalletListModal.test.tsx.snap +++ b/src/__tests__/modals/__snapshots__/WalletListModal.test.tsx.snap @@ -184,7 +184,7 @@ exports[`WalletListModal should render with loading props 1`] = ` "borderColor": undefined, "marginHorizontal": undefined, "opacity": undefined, - "paddingVertical": 17.6, + "paddingVertical": 16.5, }, ] } diff --git a/src/__tests__/scenes/__snapshots__/CreateWalletAccountSetupScene.test.tsx.snap b/src/__tests__/scenes/__snapshots__/CreateWalletAccountSetupScene.test.tsx.snap index 981e03ceda7..e31af0fb32d 100644 --- a/src/__tests__/scenes/__snapshots__/CreateWalletAccountSetupScene.test.tsx.snap +++ b/src/__tests__/scenes/__snapshots__/CreateWalletAccountSetupScene.test.tsx.snap @@ -350,121 +350,76 @@ exports[`CreateWalletAccountSelect renders 1`] = ` - + - + + Account Handle + + + - Account Handle - + testID="undefined.textInput" + textAlignVertical="top" + value="" + /> - + + "value": 0, + } + } + style={ + [ + { + "alignItems": "stretch", + "aspectRatio": 1, + }, + { + "opacity": 0, + "width": 0, + }, + ] + } + > + +  + + + - - -  - - - - - - - + - 12 - + ] + } + > + 12 + + - + - + + Private Key or Private Seed + + + - Private Key or Private Seed - + testID="undefined.textInput" + textAlignVertical="top" + value="" + /> - - - - - -  - + +  + + diff --git a/src/__tests__/scenes/__snapshots__/CreateWalletSelectCryptoScene.test.tsx.snap b/src/__tests__/scenes/__snapshots__/CreateWalletSelectCryptoScene.test.tsx.snap index dd2a2c839ac..4af5eb8fa48 100644 --- a/src/__tests__/scenes/__snapshots__/CreateWalletSelectCryptoScene.test.tsx.snap +++ b/src/__tests__/scenes/__snapshots__/CreateWalletSelectCryptoScene.test.tsx.snap @@ -354,7 +354,7 @@ exports[`CreateWalletSelectCrypto should render with loading props 1`] = ` "borderColor": undefined, "marginHorizontal": undefined, "opacity": undefined, - "paddingVertical": 17.6, + "paddingVertical": 16.5, }, ] } diff --git a/src/components/scenes/InputTesterScene.tsx b/src/components/scenes/InputTesterScene.tsx index bcd8a33e8a7..8c14b9b46bf 100644 --- a/src/components/scenes/InputTesterScene.tsx +++ b/src/components/scenes/InputTesterScene.tsx @@ -29,6 +29,7 @@ export function InputTesterScene() { const [filledTextInputValue2, setFilledTextInputValue2] = useState('') const [filledTextInputValue3, setFilledTextInputValue3] = useState('') const [filledTextInputValue4, setFilledTextInputValue4] = useState('') + const [filledTextInputValue5, setFilledTextInputValue5] = useState('') const walletId = selectedWallet?.wallet.id ?? '' const tokenId = selectedWallet?.tokenId ?? null const exchangedFlipInputRef = React.useRef(null) @@ -81,13 +82,13 @@ export function InputTesterScene() { + + + + + + setHidePassword(!hidePassword) @@ -208,9 +209,9 @@ export const FilledTextInput = React.forwardRef + focus()}> - + {LeftIcon == null ? null : } @@ -281,7 +282,7 @@ export const FilledTextInput = React.forwardRef{charactersLeft} ) : null} - + ) }) @@ -290,8 +291,7 @@ const Container = styled(Animated.View)<{ focusAnimation: SharedValue multiline: boolean scale: SharedValue - spaceProps: SpaceProps -}>(theme => ({ disableAnimation, focusAnimation, multiline, scale, spaceProps }) => { +}>(theme => ({ disableAnimation, focusAnimation, multiline, scale }) => { const rem = theme.rem(1) const interpolateInputBackgroundColor = useAnimatedColorInterpolateFn( theme.textInputBackgroundColor, @@ -303,10 +303,8 @@ const Container = styled(Animated.View)<{ theme.textInputBorderColorFocused, theme.textInputBorderColorDisabled ) - const spaceStyle = useSpaceStyle(spaceProps) return [ - spaceStyle, { flex: multiline ? 1 : undefined, alignItems: multiline ? 'stretch' : 'center', @@ -347,6 +345,8 @@ const InnerContainer = styled(Animated.View)<{ hasPlaceholder: boolean }>(theme => ({ hasPlaceholder, focusValue }) => { const rem = theme.rem(1) + + // Need 2 pixels of shift given a 16 point rem settings const androidHShift = isAndroid ? rem / 8 : 0 return [ @@ -369,33 +369,29 @@ const InnerContainer = styled(Animated.View)<{ const PrefixAnimatedText = styled(Animated.Text)<{ visibility: SharedValue }>(theme => ({ visibility }) => { const rem = theme.rem(1) - const androidVShift = isAndroid ? rem / 16 : 0 return [ { color: theme.secondaryText, fontFamily: theme.fontFaceDefault, + fontSize: theme.rem(1), includeFontPadding: false }, useAnimatedStyle(() => { return { opacity: visibility.value, - top: androidVShift, transform: [{ translateY: (1 - visibility.value) * rem }, { scale: visibility.value }] } }) ] }) -const SuffixText = styled(EdgeText)(theme => { - const rem3 = theme.rem(3) - const androidVShift = isAndroid ? rem3 / 16 : 0 - +const SuffixText = styled(Text)(theme => { return { color: theme.secondaryText, fontFamily: theme.fontFaceDefault, + fontSize: theme.rem(1), includeFontPadding: false, - marginTop: androidVShift, marginRight: theme.rem(0.5) } }) @@ -417,7 +413,7 @@ const Placeholder = styled(Animated.View)<{ shift: SharedValue }>(theme useAnimatedStyle(() => ({ transform: [ { - translateY: interpolate(shift.value, [0, 1], [0, -0.9 * rem]) + translateY: interpolate(shift.value, [0, 1], [0, -1 * rem]) }, { translateX: interpolate(shift.value, [0, 1], [0, -0.4 * rem]) @@ -462,6 +458,10 @@ const StyledAnimatedTextInput = styledWithRef(AnimatedTextInput)<{ }>(theme => ({ disableAnimation, focusAnimation, scale }) => { const rem = theme.rem(1) const interpolateTextColor = useAnimatedColorInterpolateFn(theme.textInputTextColor, theme.textInputTextColorFocused, theme.textInputTextColorDisabled) + // Need 2 pixels of shift given a 16 point rem settings + // This is due to Android rendering a text input vertically lower + // than a Text field by ~2 pixels + const androidVShift = isAndroid ? rem / 8 : 0 return [ { @@ -471,6 +471,7 @@ const StyledAnimatedTextInput = styledWithRef(AnimatedTextInput)<{ fontFamily: theme.fontFaceDefault, paddingHorizontal: 0, paddingVertical: 0, + transform: [{ translateY: -androidVShift }], margin: 0 }, useAnimatedStyle(() => ({ @@ -487,6 +488,10 @@ const StyledNumericInput = styledWithRef(NumericInput)<{ }>(theme => ({ disableAnimation, focusAnimation, scale }) => { const rem = theme.rem(1) const interpolateTextColor = useAnimatedColorInterpolateFn(theme.textInputTextColor, theme.textInputTextColorFocused, theme.textInputTextColorDisabled) + // Need 2 pixels of shift given a 16 point rem settings + // This is due to Android rendering a text input vertically lower + // than a Text field by ~2 pixels + const androidVShift = isAndroid ? rem / 8 : 0 return [ { @@ -496,6 +501,7 @@ const StyledNumericInput = styledWithRef(NumericInput)<{ fontFamily: theme.fontFaceDefault, paddingHorizontal: 0, paddingVertical: 0, + transform: [{ translateY: -androidVShift }], margin: 0 }, useAnimatedStyle(() => ({ @@ -511,10 +517,12 @@ const MessagesContainer = styled(Animated.View)(theme => ({ paddingHorizontal: theme.rem(0.5) })) -const Message = styled(EdgeText)<{ danger?: boolean }>(theme => props => [ +const Message = styled(Text)<{ danger?: boolean }>(theme => props => [ { color: props.danger === true ? theme.dangerText : theme.secondaryText, - fontSize: theme.rem(0.8) + fontFamily: theme.fontFaceDefault, + fontSize: theme.rem(0.75), + includeFontPadding: false } ]) diff --git a/src/components/themed/SimpleTextInput.tsx b/src/components/themed/SimpleTextInput.tsx index 489aeef2a65..74f3471d8fd 100644 --- a/src/components/themed/SimpleTextInput.tsx +++ b/src/components/themed/SimpleTextInput.tsx @@ -257,7 +257,7 @@ const Container = styled(Animated.View)<{ borderColor: interpolateOutlineColor(focusAnimation, disableAnimation), opacity: interpolate(scale.value, [1, 0.5], [1, 0]), marginHorizontal: interpolate(scale.value, [1, 0], [0, 2 * rem]), - paddingVertical: scale.value * 0.8 * rem + paddingVertical: scale.value * 0.75 * rem })) ] })