From 13265292aefc333c66314835e49f438b46244f5a Mon Sep 17 00:00:00 2001 From: Paul V Puey Date: Wed, 17 Jan 2024 17:41:01 -0800 Subject: [PATCH] Tweak FilledTextInput spacing Also add more test cases to InputTester --- .../FilledTextInput.test.tsx.snap | 31 +- .../__snapshots__/CategoryModal.test.tsx.snap | 890 +++++++++--------- .../WalletListModal.test.tsx.snap | 2 +- ...reateWalletAccountSetupScene.test.tsx.snap | 526 +++++------ .../CreateWalletImportScene.test.tsx.snap | 451 ++++----- ...reateWalletSelectCryptoScene.test.tsx.snap | 2 +- src/components/scenes/InputTesterScene.tsx | 46 +- src/components/themed/FilledTextInput.tsx | 84 +- src/components/themed/SimpleTextInput.tsx | 2 +- 9 files changed, 1063 insertions(+), 971 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 f9d78c590cc..846f3093b29 100644 --- a/src/__tests__/modals/__snapshots__/CategoryModal.test.tsx.snap +++ b/src/__tests__/modals/__snapshots__/CategoryModal.test.tsx.snap @@ -467,144 +467,195 @@ exports[`CategoryModal should render with a subcategory 1`] = ` - + - + + Sub-category + + + - Sub-category - + testID="undefined.textInput" + textAlignVertical="top" + value="Paycheck" + /> - - - - - -  - + +  + + @@ -1872,118 +1882,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 e2d8abf7a60..617ec0c95fe 100644 --- a/src/__tests__/modals/__snapshots__/WalletListModal.test.tsx.snap +++ b/src/__tests__/modals/__snapshots__/WalletListModal.test.tsx.snap @@ -222,7 +222,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 28a01d569ff..5d0dfdfc675 100644 --- a/src/__tests__/scenes/__snapshots__/CreateWalletAccountSetupScene.test.tsx.snap +++ b/src/__tests__/scenes/__snapshots__/CreateWalletAccountSetupScene.test.tsx.snap @@ -355,120 +355,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 ee84c5554df..f1ae301edad 100644 --- a/src/__tests__/scenes/__snapshots__/CreateWalletSelectCryptoScene.test.tsx.snap +++ b/src/__tests__/scenes/__snapshots__/CreateWalletSelectCryptoScene.test.tsx.snap @@ -355,7 +355,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 7779dba564d..3349f23dc09 100644 --- a/src/components/scenes/InputTesterScene.tsx +++ b/src/components/scenes/InputTesterScene.tsx @@ -33,6 +33,10 @@ export function InputTesterScene(props: Props) { const [value0, setValue0] = useState('') const [value1, setValue1] = useState('') const [filledTextInputValue, setFilledTextInputValue] = useState('') + 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) @@ -85,14 +89,52 @@ export function InputTesterScene(props: Props) { - + + + + setHidePassword(!hidePassword) @@ -207,9 +209,9 @@ export const FilledTextInput = React.forwardRef + focus()}> - + {LeftIcon == null ? null : } @@ -280,7 +282,7 @@ export const FilledTextInput = React.forwardRef{charactersLeft} ) : null} - + ) }) @@ -289,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, @@ -302,24 +303,22 @@ const Container = styled(Animated.View)<{ theme.textInputBorderColorFocused, theme.textInputBorderColorDisabled ) - const spaceStyle = useSpaceStyle(spaceProps) return [ - spaceStyle, { flex: multiline ? 1 : undefined, alignItems: multiline ? 'stretch' : 'center', borderWidth: theme.textInputBorderWidth, borderRadius: theme.rem(0.5), flexDirection: 'row', - paddingHorizontal: theme.rem(1) + paddingHorizontal: theme.rem(0.4) }, useAnimatedStyle(() => ({ backgroundColor: interpolateInputBackgroundColor(focusAnimation, disableAnimation), 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 })) ] }) @@ -346,15 +345,20 @@ 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 [ { + left: androidHShift, flex: 1, flexDirection: 'row', alignItems: 'flex-start', alignSelf: 'flex-start' }, useAnimatedStyle(() => { - const shiftValue = interpolate(focusValue.value, [0, 1], [0, rem * 0.4]) + const shiftValue = interpolate(focusValue.value, [0, 1], [0, rem * 0.5]) return { marginTop: hasPlaceholder ? shiftValue : undefined, marginBottom: hasPlaceholder ? -shiftValue : undefined @@ -365,44 +369,56 @@ const InnerContainer = styled(Animated.View)<{ const PrefixAnimatedText = styled(Animated.Text)<{ visibility: SharedValue }>(theme => ({ visibility }) => { const rem = theme.rem(1) - const isAndroid = Platform.OS === 'android' + return [ { color: theme.secondaryText, fontFamily: theme.fontFaceDefault, + fontSize: theme.rem(1), includeFontPadding: false }, useAnimatedStyle(() => { return { opacity: visibility.value, - top: isAndroid ? -1 : 0, transform: [{ translateY: (1 - visibility.value) * rem }, { scale: visibility.value }] } }) ] }) -const SuffixText = styled(EdgeText)(theme => ({ - color: theme.secondaryText, - fontFamily: theme.fontFaceDefault, - includeFontPadding: false, - marginRight: theme.rem(1) -})) +const SuffixText = styled(Text)(theme => { + return { + color: theme.secondaryText, + fontFamily: theme.fontFaceDefault, + fontSize: theme.rem(1), + includeFontPadding: false, + marginRight: theme.rem(0.5) + } +}) const Placeholder = styled(Animated.View)<{ shift: SharedValue }>(theme => ({ shift }) => { const rem = theme.rem(1) + const androidVShift = isAndroid ? rem / 16 : 0 return [ { position: 'absolute', - top: 0, + top: androidVShift, + left: rem * 0.4, alignItems: 'center', justifyContent: 'center', - paddingHorizontal: theme.rem(0.5), + paddingHorizontal: theme.rem(0), paddingVertical: 0, margin: 0 }, useAnimatedStyle(() => ({ - transform: [{ translateY: interpolate(shift.value, [0, 1], [0, -1.2 * rem]) }] + transform: [ + { + translateY: interpolate(shift.value, [0, 1], [0, -1 * rem]) + }, + { + translateX: interpolate(shift.value, [0, 1], [0, -0.4 * rem]) + } + ] })) ] }) @@ -429,7 +445,7 @@ const PlaceholderText = styled(Animated.Text)<{ useAnimatedStyle(() => { return { color: interpolatePlaceholderTextColor(focusAnimation, disableAnimation), - fontSize: interpolate(shift.value, [0, 1], [fontSizeBase, 0.8 * fontSizeBase]) + fontSize: interpolate(shift.value, [0, 1], [fontSizeBase, 0.75 * fontSizeBase]) } }) ] @@ -442,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 [ { @@ -449,8 +469,9 @@ const StyledAnimatedTextInput = styledWithRef(AnimatedTextInput)<{ flexGrow: 1, flexShrink: 1, fontFamily: theme.fontFaceDefault, - paddingHorizontal: theme.rem(0.5), + paddingHorizontal: 0, paddingVertical: 0, + transform: [{ translateY: -androidVShift }], margin: 0 }, useAnimatedStyle(() => ({ @@ -467,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 [ { @@ -474,8 +499,9 @@ const StyledNumericInput = styledWithRef(NumericInput)<{ flexGrow: 1, flexShrink: 1, fontFamily: theme.fontFaceDefault, - paddingHorizontal: theme.rem(0.5), + paddingHorizontal: 0, paddingVertical: 0, + transform: [{ translateY: -androidVShift }], margin: 0 }, useAnimatedStyle(() => ({ @@ -491,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 })) ] })