From ff57091a32020f24d174714515cb3b158efa37af Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Mon, 14 Mar 2022 21:21:31 +0100 Subject: [PATCH] refactor: add helper for constants --- .../Adornment/TextInputAdornment.tsx | 6 +- .../TextInput/Adornment/TextInputAffix.tsx | 5 +- .../TextInput/Adornment/TextInputIcon.tsx | 8 +- src/components/TextInput/Label/InputLabel.tsx | 17 ++- .../TextInput/Label/LabelBackground.tsx | 2 +- src/components/TextInput/TextInputFlat.tsx | 44 ++++--- .../TextInput/TextInputOutlined.tsx | 22 ++-- src/components/TextInput/constants.tsx | 46 ++++++- src/components/TextInput/helpers.tsx | 97 ++++++++++++-- .../__snapshots__/TextInput.test.js.snap | 120 +++++++++--------- 10 files changed, 249 insertions(+), 118 deletions(-) diff --git a/src/components/TextInput/Adornment/TextInputAdornment.tsx b/src/components/TextInput/Adornment/TextInputAdornment.tsx index 50cffdee8f..057d63c6fa 100644 --- a/src/components/TextInput/Adornment/TextInputAdornment.tsx +++ b/src/components/TextInput/Adornment/TextInputAdornment.tsx @@ -1,7 +1,6 @@ import React from 'react'; import TextInputIcon, { IconAdornment } from './TextInputIcon'; import TextInputAffix, { AffixAdornment } from './TextInputAffix'; -import { ADORNMENT_OFFSET, OUTLINED_INPUT_OFFSET } from '../constants'; import type { LayoutChangeEvent, TextStyle, @@ -13,6 +12,7 @@ import type { AdornmentStyleAdjustmentForNativeInput, } from './types'; import { AdornmentSide, AdornmentType, InputMode } from './enums'; +import { getConstants } from '../helpers'; export function getAdornmentConfig({ left, @@ -52,6 +52,7 @@ export function getAdornmentStyleAdjustmentForNativeInput({ paddingHorizontal, inputOffset = 0, mode, + isV3, }: { inputOffset?: number; adornmentConfig: AdornmentConfig[]; @@ -59,7 +60,10 @@ export function getAdornmentStyleAdjustmentForNativeInput({ rightAffixWidth: number; mode?: 'outlined' | 'flat'; paddingHorizontal?: number | string; + isV3?: boolean; }): AdornmentStyleAdjustmentForNativeInput | {} { + const { OUTLINED_INPUT_OFFSET, ADORNMENT_OFFSET } = getConstants(isV3); + if (adornmentConfig.length) { const adornmentStyleAdjustmentForNativeInput = adornmentConfig.map( ({ type, side }: AdornmentConfig) => { diff --git a/src/components/TextInput/Adornment/TextInputAffix.tsx b/src/components/TextInput/Adornment/TextInputAffix.tsx index cbbf9b7401..13e50011cb 100644 --- a/src/components/TextInput/Adornment/TextInputAffix.tsx +++ b/src/components/TextInput/Adornment/TextInputAffix.tsx @@ -13,8 +13,7 @@ import { import { withTheme } from '../../../core/theming'; import { AdornmentSide } from './enums'; import type { Theme } from '../../../types'; - -const AFFIX_OFFSET = 16; +import { getConstants } from '../helpers'; export type Props = { /** @@ -109,6 +108,8 @@ const AffixAdornment: React.FunctionComponent< */ const TextInputAffix = ({ text, textStyle: labelStyle, theme }: Props) => { + const { AFFIX_OFFSET } = getConstants(theme.isV3); + const { textStyle, onLayout, topPosition, side, visible, paddingHorizontal } = React.useContext(AffixContext); const textColor = color( diff --git a/src/components/TextInput/Adornment/TextInputIcon.tsx b/src/components/TextInput/Adornment/TextInputIcon.tsx index fa4ae87c41..e82fbd1b6b 100644 --- a/src/components/TextInput/Adornment/TextInputIcon.tsx +++ b/src/components/TextInput/Adornment/TextInputIcon.tsx @@ -5,6 +5,8 @@ import IconButton from '../../IconButton'; import type { $Omit, Theme } from '../../../types'; import type { IconSource } from '../../Icon'; import { useTheme } from '../../../core/theming'; +import { getConstants } from '../helpers'; +import { ICON_SIZE } from '../constants'; export type Props = $Omit< React.ComponentProps, @@ -33,9 +35,6 @@ export type Props = $Omit< theme?: Theme; }; -export const ICON_SIZE = 24; -const ICON_OFFSET = 16; - type StyleContextType = { style: StyleProp; isTextInputFocused: boolean; @@ -56,6 +55,9 @@ const IconAdornment: React.FunctionComponent< side: 'left' | 'right'; } & Omit > = ({ icon, topPosition, side, isTextInputFocused, forceFocus }) => { + const { isV3 } = useTheme(); + const { ICON_OFFSET } = getConstants(isV3); + const style = { top: topPosition, [side]: ICON_OFFSET, diff --git a/src/components/TextInput/Label/InputLabel.tsx b/src/components/TextInput/Label/InputLabel.tsx index faf1cae04d..90328ef8bc 100644 --- a/src/components/TextInput/Label/InputLabel.tsx +++ b/src/components/TextInput/Label/InputLabel.tsx @@ -71,6 +71,16 @@ const InputLabel = (props: InputLabelProps) => { ], }; + let textColor; + + if (error && errorColor) { + textColor = errorColor; + } else if (isV3 && parentState.value && mode !== 'outlined') { + textColor = activeColor; + } else { + textColor = placeholderColor; + } + return label ? ( // Position colored placeholder and gray placeholder on top of each other and crossfade them // This gives the effect of animating the color, but allows us to use native driver @@ -129,12 +139,7 @@ const InputLabel = (props: InputLabelProps) => { labelStyle, paddingOffset, { - color: - error && errorColor - ? errorColor - : parentState.value && mode !== 'outlined' - ? activeColor - : placeholderColor, + color: textColor, opacity: placeholderOpacity, }, isV3 && styles.md3TextLine, diff --git a/src/components/TextInput/Label/LabelBackground.tsx b/src/components/TextInput/Label/LabelBackground.tsx index d8df1e4f26..6af685a0d1 100644 --- a/src/components/TextInput/Label/LabelBackground.tsx +++ b/src/components/TextInput/Label/LabelBackground.tsx @@ -64,7 +64,7 @@ const LabelBackground = ({ isV3 && styles.md3OutlinedLabel, { top: topPosition + (isV3 ? 0 : 1), - backgroundColor: colors.surface, + backgroundColor: isV3 ? colors.surface : backgroundColor, opacity, transform: isV3 ? [...labelStyle.transform] diff --git a/src/components/TextInput/TextInputFlat.tsx b/src/components/TextInput/TextInputFlat.tsx index e594a994e4..f4f99230da 100644 --- a/src/components/TextInput/TextInputFlat.tsx +++ b/src/components/TextInput/TextInputFlat.tsx @@ -13,13 +13,17 @@ import TextInputAdornment, { TextInputAdornmentProps, } from './Adornment/TextInputAdornment'; import type { RenderProps, ChildTextInputProps } from './types'; +import { useTheme } from '../../core/theming'; import { MAXIMIZED_LABEL_FONT_SIZE, MINIMIZED_LABEL_FONT_SIZE, LABEL_WIGGLE_X_OFFSET, ADORNMENT_SIZE, - FLAT_INPUT_OFFSET, + MINIMIZED_LABEL_Y_OFFSET, + LABEL_PADDING_TOP_DENSE, + MIN_DENSE_HEIGHT_WL, + MIN_DENSE_HEIGHT, } from './constants'; import { @@ -32,6 +36,7 @@ import { calculateFlatAffixTopPosition, calculateFlatInputHorizontalPadding, getFlatInputColors, + getConstants, } from './helpers'; import { getAdornmentConfig, @@ -39,16 +44,6 @@ import { } from './Adornment/TextInputAdornment'; import { AdornmentSide, AdornmentType, InputMode } from './Adornment/enums'; -const MINIMIZED_LABEL_Y_OFFSET = -18; - -const MD2_LABEL_PADDING_TOP = 30; -const MD3_LABEL_PADDING_TOP = 26; -const LABEL_PADDING_TOP_DENSE = 24; -const MD2_MIN_HEIGHT = 64; -const MD3_MIN_HEIGHT = 56; -const MIN_DENSE_HEIGHT_WL = 52; -const MIN_DENSE_HEIGHT = 40; - const TextInputFlat = ({ disabled = false, editable = true, @@ -81,10 +76,9 @@ const TextInputFlat = ({ const font = fonts.regular; const hasActiveOutline = parentState.focused || error; - const MIN_HEIGHT = theme.isV3 ? MD3_MIN_HEIGHT : MD2_MIN_HEIGHT; - const LABEL_PADDING_TOP = theme.isV3 - ? MD3_LABEL_PADDING_TOP - : MD2_LABEL_PADDING_TOP; + const { LABEL_PADDING_TOP, FLAT_INPUT_OFFSET, MIN_HEIGHT } = getConstants( + theme.isV3 + ); const { fontSize: fontSizeStyle, @@ -106,6 +100,7 @@ const TextInputFlat = ({ let { paddingLeft, paddingRight } = calculateFlatInputHorizontalPadding({ adornmentConfig, + isV3: theme.isV3, }); if (isPaddingHorizontalPassed) { @@ -131,6 +126,7 @@ const TextInputFlat = ({ paddingHorizontal, inputOffset: FLAT_INPUT_OFFSET, mode: InputMode.Flat, + isV3: theme.isV3, }); const { @@ -395,20 +391,31 @@ const Underline = ({ underlineColorCustom, hasActiveOutline, }: UnderlineProps) => { + const { isV3 } = useTheme(); + let backgroundColor = parentState.focused ? activeColor : underlineColorCustom; if (error) backgroundColor = colors?.error; + const activeScale = isV3 ? 2 : 1; + return ( @@ -425,9 +432,12 @@ const styles = StyleSheet.create({ left: 0, right: 0, bottom: 0, - height: 1, + height: 2, zIndex: 1, }, + md3Underline: { + height: 1, + }, labelContainer: { paddingTop: 0, paddingBottom: 0, diff --git a/src/components/TextInput/TextInputOutlined.tsx b/src/components/TextInput/TextInputOutlined.tsx index 43885ce049..17067e746c 100644 --- a/src/components/TextInput/TextInputOutlined.tsx +++ b/src/components/TextInput/TextInputOutlined.tsx @@ -23,7 +23,9 @@ import { MINIMIZED_LABEL_FONT_SIZE, LABEL_WIGGLE_X_OFFSET, ADORNMENT_SIZE, - ADORNMENT_OFFSET, + OUTLINE_MINIMIZED_LABEL_Y_OFFSET, + LABEL_PADDING_TOP, + MIN_DENSE_HEIGHT_OUTLINED, } from './constants'; import { @@ -35,17 +37,11 @@ import { interpolatePlaceholder, calculateOutlinedIconAndAffixTopPosition, getOutlinedInputColors, + getConstants, } from './helpers'; import { AdornmentType, AdornmentSide } from './Adornment/enums'; import type { Theme } from '../../types'; -const OUTLINE_MINIMIZED_LABEL_Y_OFFSET = -6; -const LABEL_PADDING_TOP = 8; -const MD2_MIN_HEIGHT = 64; -const MD3_MIN_HEIGHT = 56; -const MIN_DENSE_HEIGHT = 48; -const INPUT_PADDING_HORIZONTAL = 16; - const TextInputOutlined = ({ disabled = false, editable = true, @@ -80,7 +76,8 @@ const TextInputOutlined = ({ const font = fonts.regular; const hasActiveOutline = parentState.focused || error; - const MIN_HEIGHT = theme.isV3 ? MD3_MIN_HEIGHT : MD2_MIN_HEIGHT; + const { INPUT_PADDING_HORIZONTAL, MIN_HEIGHT, ADORNMENT_OFFSET } = + getConstants(theme.isV3); const { fontSize: fontSizeStyle, @@ -133,7 +130,7 @@ const TextInputOutlined = ({ } const minInputHeight = - (dense ? MIN_DENSE_HEIGHT : MIN_HEIGHT) - LABEL_PADDING_TOP; + (dense ? MIN_DENSE_HEIGHT_OUTLINED : MIN_HEIGHT) - LABEL_PADDING_TOP; const inputHeight = calculateInputHeight(labelHeight, height, minInputHeight); @@ -208,7 +205,7 @@ const TextInputOutlined = ({ }; const minHeight = (height || - (dense ? MIN_DENSE_HEIGHT : MIN_HEIGHT)) as number; + (dense ? MIN_DENSE_HEIGHT_OUTLINED : MIN_HEIGHT)) as number; const { leftLayout, rightLayout } = parentState; @@ -243,6 +240,7 @@ const TextInputOutlined = ({ rightAffixWidth, leftAffixWidth, mode: 'outlined', + isV3: theme.isV3, }); const affixTopPosition = { [AdornmentSide.Left]: leftAffixTopPosition, @@ -337,6 +335,7 @@ const TextInputOutlined = ({ : I18nManager.isRTL ? 'right' : 'left', + paddingHorizontal: INPUT_PADDING_HORIZONTAL, }, Platform.OS === 'web' && { outline: 'none' }, adornmentStyleAdjustmentForNativeInput, @@ -397,7 +396,6 @@ const styles = StyleSheet.create({ }, input: { flexGrow: 1, - paddingHorizontal: INPUT_PADDING_HORIZONTAL, margin: 0, zIndex: 1, }, diff --git a/src/components/TextInput/constants.tsx b/src/components/TextInput/constants.tsx index 492d99f0a5..db375caf99 100644 --- a/src/components/TextInput/constants.tsx +++ b/src/components/TextInput/constants.tsx @@ -1,9 +1,47 @@ export const MAXIMIZED_LABEL_FONT_SIZE = 16; export const MINIMIZED_LABEL_FONT_SIZE = 12; export const LABEL_WIGGLE_X_OFFSET = 4; -export const LABEL_PADDING_HORIZONTAL = 16; + export const ADORNMENT_SIZE = 24; -export const ADORNMENT_OFFSET = 16; -export const FLAT_INPUT_OFFSET = 16; + +//Text input affix offset +export const MD2_AFFIX_OFFSET = 12; +export const MD3_AFFIX_OFFSET = 16; + +// Text input icon +export const ICON_SIZE = 24; +export const MD2_ICON_OFFSET = 12; +export const MD3_ICON_OFFSET = 16; + +// Text input common +export const MD2_MIN_HEIGHT = 64; +export const MD3_MIN_HEIGHT = 56; +export const MD3_ADORNMENT_OFFSET = 16; +export const MD2_ADORNMENT_OFFSET = 12; + +// Text input flat +export const MD2_LABEL_PADDING_TOP = 30; +export const MD3_LABEL_PADDING_TOP = 26; + +export const MD2_LABEL_PADDING_HORIZONTAL = 12; +export const MD3_LABEL_PADDING_HORIZONTAL = 16; + +export const MD2_FLAT_INPUT_OFFSET = 8; +export const MD3_FLAT_INPUT_OFFSET = 16; + +export const MINIMIZED_LABEL_Y_OFFSET = -18; +export const LABEL_PADDING_TOP_DENSE = 24; +export const MIN_DENSE_HEIGHT_WL = 52; +export const MIN_DENSE_HEIGHT = 40; + +// Text input outlined +export const MD2_INPUT_PADDING_HORIZONTAL = 14; +export const MD3_INPUT_PADDING_HORIZONTAL = 16; + // extra space to avoid overlapping input's text and icon -export const OUTLINED_INPUT_OFFSET = 16; +export const MD2_OUTLINED_INPUT_OFFSET = 8; +export const MD3_OUTLINED_INPUT_OFFSET = 16; + +export const OUTLINE_MINIMIZED_LABEL_Y_OFFSET = -6; +export const LABEL_PADDING_TOP = 8; +export const MIN_DENSE_HEIGHT_OUTLINED = 48; diff --git a/src/components/TextInput/helpers.tsx b/src/components/TextInput/helpers.tsx index 03d68df976..d96ddc16aa 100644 --- a/src/components/TextInput/helpers.tsx +++ b/src/components/TextInput/helpers.tsx @@ -2,10 +2,25 @@ import type { Animated } from 'react-native'; import color from 'color'; import type { AdornmentConfig } from './Adornment/types'; import { - LABEL_PADDING_HORIZONTAL, - ADORNMENT_OFFSET, ADORNMENT_SIZE, - FLAT_INPUT_OFFSET, + MD3_LABEL_PADDING_HORIZONTAL, + MD2_LABEL_PADDING_HORIZONTAL, + MD3_ADORNMENT_OFFSET, + MD2_ADORNMENT_OFFSET, + MD3_FLAT_INPUT_OFFSET, + MD2_FLAT_INPUT_OFFSET, + MD3_AFFIX_OFFSET, + MD2_AFFIX_OFFSET, + MD3_ICON_OFFSET, + MD2_ICON_OFFSET, + MD3_LABEL_PADDING_TOP, + MD2_LABEL_PADDING_TOP, + MD3_MIN_HEIGHT, + MD2_MIN_HEIGHT, + MD3_INPUT_PADDING_HORIZONTAL, + MD2_INPUT_PADDING_HORIZONTAL, + MD3_OUTLINED_INPUT_OFFSET, + MD2_OUTLINED_INPUT_OFFSET, } from './constants'; import { AdornmentType, AdornmentSide } from './Adornment/enums'; import type { TextInputLabelProp } from './types'; @@ -270,9 +285,14 @@ export function calculateOutlinedIconAndAffixTopPosition({ export const calculateFlatInputHorizontalPadding = ({ adornmentConfig, + isV3, }: { adornmentConfig: AdornmentConfig[]; + isV3?: boolean; }) => { + const { LABEL_PADDING_HORIZONTAL, ADORNMENT_OFFSET, FLAT_INPUT_OFFSET } = + getConstants(isV3); + let paddingLeft = LABEL_PADDING_HORIZONTAL; let paddingRight = LABEL_PADDING_HORIZONTAL; @@ -326,10 +346,11 @@ export const getFlatInputColors = ({ theme.colors.onSurfaceDisabled; // @ts-ignore According to Figma for both themes the base color for disabled in `onSecondaryContainer` backgroundColor = color(MD3LightTheme.colors.onSecondaryContainer); + } else { + inputTextColor = placeholderColor = theme.colors.onSurfaceVariant; + underlineColorCustom = underlineColor || theme.colors.onSurface; + backgroundColor = theme.colors.surfaceVariant; } - inputTextColor = placeholderColor = theme.colors.onSurfaceVariant; - underlineColorCustom = underlineColor || theme.colors.onSurface; - backgroundColor = theme.colors.surfaceVariant; } else { if (disabled) { inputTextColor = activeColor = color(theme.colors?.text) @@ -387,19 +408,21 @@ export const getOutlinedInputColors = ({ inputTextColor = activeColor = theme.colors.onSurfaceDisabled; placeholderColor = theme.colors.onSurfaceDisabled; outlineColor = theme.dark ? 'transparent' : theme.colors.surfaceDisabled; + } else { + inputTextColor = textColor; + placeholderColor = theme.colors.onSurfaceVariant; + outlineColor = customOutlineColor || theme.colors.outline; } - inputTextColor = textColor; - placeholderColor = theme.colors.onSurfaceVariant; - outlineColor = customOutlineColor || theme.colors.outline; } else { if (disabled) { inputTextColor = color(textColor).alpha(0.54).rgb().string(); placeholderColor = theme.colors?.disabled; outlineColor = isTransparent ? customOutlineColor : theme.colors.disabled; + } else { + inputTextColor = textColor; + placeholderColor = theme.colors.placeholder; + outlineColor = customOutlineColor || theme.colors.placeholder; } - inputTextColor = textColor; - placeholderColor = theme.colors.placeholder; - outlineColor = customOutlineColor || theme.colors.placeholder; } return { @@ -410,3 +433,53 @@ export const getOutlinedInputColors = ({ errorColor, }; }; + +export const getConstants = (isV3?: boolean) => { + // Text input affix + let AFFIX_OFFSET; + // Text input icon + let ICON_OFFSET; + //Text input flat + let LABEL_PADDING_TOP; + let LABEL_PADDING_HORIZONTAL; + let FLAT_INPUT_OFFSET; + let MIN_HEIGHT; + // Text input outlined; + let INPUT_PADDING_HORIZONTAL; + let ADORNMENT_OFFSET; + let OUTLINED_INPUT_OFFSET; + + if (isV3) { + AFFIX_OFFSET = MD3_AFFIX_OFFSET; + ICON_OFFSET = MD3_ICON_OFFSET; + LABEL_PADDING_TOP = MD3_LABEL_PADDING_TOP; + LABEL_PADDING_HORIZONTAL = MD3_LABEL_PADDING_HORIZONTAL; + FLAT_INPUT_OFFSET = MD3_FLAT_INPUT_OFFSET; + MIN_HEIGHT = MD3_MIN_HEIGHT; + INPUT_PADDING_HORIZONTAL = MD3_INPUT_PADDING_HORIZONTAL; + ADORNMENT_OFFSET = MD3_ADORNMENT_OFFSET; + OUTLINED_INPUT_OFFSET = MD3_OUTLINED_INPUT_OFFSET; + } else { + AFFIX_OFFSET = MD2_AFFIX_OFFSET; + ICON_OFFSET = MD2_ICON_OFFSET; + LABEL_PADDING_TOP = MD2_LABEL_PADDING_TOP; + LABEL_PADDING_HORIZONTAL = MD2_LABEL_PADDING_HORIZONTAL; + FLAT_INPUT_OFFSET = MD2_FLAT_INPUT_OFFSET; + MIN_HEIGHT = MD2_MIN_HEIGHT; + INPUT_PADDING_HORIZONTAL = MD2_INPUT_PADDING_HORIZONTAL; + ADORNMENT_OFFSET = MD2_ADORNMENT_OFFSET; + OUTLINED_INPUT_OFFSET = MD2_OUTLINED_INPUT_OFFSET; + } + + return { + AFFIX_OFFSET, + ICON_OFFSET, + LABEL_PADDING_TOP, + LABEL_PADDING_HORIZONTAL, + FLAT_INPUT_OFFSET, + MIN_HEIGHT, + INPUT_PADDING_HORIZONTAL, + ADORNMENT_OFFSET, + OUTLINED_INPUT_OFFSET, + }; +}; diff --git a/src/components/__tests__/__snapshots__/TextInput.test.js.snap b/src/components/__tests__/__snapshots__/TextInput.test.js.snap index f91c887e79..010e10b6c7 100644 --- a/src/components/__tests__/__snapshots__/TextInput.test.js.snap +++ b/src/components/__tests__/__snapshots__/TextInput.test.js.snap @@ -18,7 +18,7 @@ exports[`correctly applies a component as the text label 1`] = ` Object { "backgroundColor": "rgba(0, 0, 0, 0.26)", "bottom": 0, - "height": 1, + "height": 2, "left": 0, "position": "absolute", "right": 0, @@ -56,7 +56,7 @@ exports[`correctly applies a component as the text label 1`] = ` "top": 0, "transform": Array [ Object { - "translateX": 4, + "translateX": 3, }, ], "zIndex": 3, @@ -74,8 +74,8 @@ exports[`correctly applies a component as the text label 1`] = ` "fontWeight": undefined, "left": 0, "opacity": 0, - "paddingLeft": 16, - "paddingRight": 16, + "paddingLeft": 12, + "paddingRight": 12, "position": "absolute", "textAlign": "left", "top": 34, @@ -108,14 +108,14 @@ exports[`correctly applies a component as the text label 1`] = ` numberOfLines={1} style={ Object { - "color": "#6200ee", + "color": "rgba(0, 0, 0, 0.54)", "fontFamily": "System", "fontSize": 16, "fontWeight": undefined, "left": 0, "opacity": 0, - "paddingLeft": 16, - "paddingRight": 16, + "paddingLeft": 12, + "paddingRight": 12, "position": "absolute", "textAlign": "left", "top": 34, @@ -163,8 +163,8 @@ exports[`correctly applies a component as the text label 1`] = ` "margin": 0, }, Object { - "paddingLeft": 16, - "paddingRight": 16, + "paddingLeft": 12, + "paddingRight": 12, }, Object { "height": 64, @@ -212,7 +212,7 @@ exports[`correctly applies default textAlign based on default RTL 1`] = ` Object { "backgroundColor": "rgba(0, 0, 0, 0.26)", "bottom": 0, - "height": 1, + "height": 2, "left": 0, "position": "absolute", "right": 0, @@ -250,7 +250,7 @@ exports[`correctly applies default textAlign based on default RTL 1`] = ` "top": 0, "transform": Array [ Object { - "translateX": 4, + "translateX": 3, }, ], "zIndex": 3, @@ -268,8 +268,8 @@ exports[`correctly applies default textAlign based on default RTL 1`] = ` "fontWeight": undefined, "left": 0, "opacity": 0, - "paddingLeft": 16, - "paddingRight": 16, + "paddingLeft": 12, + "paddingRight": 12, "position": "absolute", "textAlign": "left", "top": 34, @@ -294,14 +294,14 @@ exports[`correctly applies default textAlign based on default RTL 1`] = ` numberOfLines={1} style={ Object { - "color": "#6200ee", + "color": "rgba(0, 0, 0, 0.54)", "fontFamily": "System", "fontSize": 16, "fontWeight": undefined, "left": 0, "opacity": 0, - "paddingLeft": 16, - "paddingRight": 16, + "paddingLeft": 12, + "paddingRight": 12, "position": "absolute", "textAlign": "left", "top": 34, @@ -341,8 +341,8 @@ exports[`correctly applies default textAlign based on default RTL 1`] = ` "margin": 0, }, Object { - "paddingLeft": 16, - "paddingRight": 16, + "paddingLeft": 12, + "paddingRight": 12, }, Object { "height": 64, @@ -455,13 +455,13 @@ exports[`correctly applies height to multiline Outline TextInput 1`] = ` numberOfLines={1} style={ Object { - "backgroundColor": "#ffffff", + "backgroundColor": "#f6f6f6", "color": "transparent", "fontFamily": "System", "fontSize": 16, "fontWeight": undefined, "left": 18, - "maxWidth": -32, + "maxWidth": -28, "opacity": 1, "paddingHorizontal": 0, "position": "absolute", @@ -498,7 +498,7 @@ exports[`correctly applies height to multiline Outline TextInput 1`] = ` "fontWeight": undefined, "left": 0, "opacity": 0, - "paddingHorizontal": 16, + "paddingHorizontal": 14, "position": "absolute", "textAlign": "left", "top": 58, @@ -529,7 +529,7 @@ exports[`correctly applies height to multiline Outline TextInput 1`] = ` "fontWeight": undefined, "left": 0, "opacity": 0, - "paddingHorizontal": 16, + "paddingHorizontal": 14, "position": "absolute", "textAlign": "left", "top": 58, @@ -567,7 +567,6 @@ exports[`correctly applies height to multiline Outline TextInput 1`] = ` Object { "flexGrow": 1, "margin": 0, - "paddingHorizontal": 16, "zIndex": 1, }, Object { @@ -582,6 +581,7 @@ exports[`correctly applies height to multiline Outline TextInput 1`] = ` "fontFamily": "System", "fontSize": 16, "fontWeight": undefined, + "paddingHorizontal": 14, "textAlign": "left", "textAlignVertical": "top", }, @@ -618,7 +618,7 @@ exports[`correctly applies textAlign center 1`] = ` Object { "backgroundColor": "rgba(0, 0, 0, 0.26)", "bottom": 0, - "height": 1, + "height": 2, "left": 0, "position": "absolute", "right": 0, @@ -656,7 +656,7 @@ exports[`correctly applies textAlign center 1`] = ` "top": 0, "transform": Array [ Object { - "translateX": 4, + "translateX": 3, }, ], "zIndex": 3, @@ -674,8 +674,8 @@ exports[`correctly applies textAlign center 1`] = ` "fontWeight": undefined, "left": 0, "opacity": 0, - "paddingLeft": 16, - "paddingRight": 16, + "paddingLeft": 12, + "paddingRight": 12, "position": "absolute", "textAlign": "left", "top": 34, @@ -700,14 +700,14 @@ exports[`correctly applies textAlign center 1`] = ` numberOfLines={1} style={ Object { - "color": "#6200ee", + "color": "rgba(0, 0, 0, 0.54)", "fontFamily": "System", "fontSize": 16, "fontWeight": undefined, "left": 0, "opacity": 0, - "paddingLeft": 16, - "paddingRight": 16, + "paddingLeft": 12, + "paddingRight": 12, "position": "absolute", "textAlign": "left", "top": 34, @@ -747,8 +747,8 @@ exports[`correctly applies textAlign center 1`] = ` "margin": 0, }, Object { - "paddingLeft": 16, - "paddingRight": 16, + "paddingLeft": 12, + "paddingRight": 12, }, Object { "height": 64, @@ -796,7 +796,7 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm Object { "backgroundColor": "rgba(0, 0, 0, 0.26)", "bottom": 0, - "height": 1, + "height": 2, "left": 0, "position": "absolute", "right": 0, @@ -834,7 +834,7 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm "top": 0, "transform": Array [ Object { - "translateX": 4, + "translateX": 3, }, ], "zIndex": 3, @@ -852,8 +852,8 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm "fontWeight": undefined, "left": 0, "opacity": 0, - "paddingLeft": 16, - "paddingRight": 56, + "paddingLeft": 12, + "paddingRight": 44, "position": "absolute", "textAlign": "left", "top": 34, @@ -878,14 +878,14 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm numberOfLines={1} style={ Object { - "color": "#6200ee", + "color": "rgba(0, 0, 0, 0.54)", "fontFamily": "System", "fontSize": 16, "fontWeight": undefined, "left": 0, "opacity": 0, - "paddingLeft": 16, - "paddingRight": 56, + "paddingLeft": 12, + "paddingRight": 44, "position": "absolute", "textAlign": "left", "top": 34, @@ -925,8 +925,8 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm "margin": 0, }, Object { - "paddingLeft": 16, - "paddingRight": 56, + "paddingLeft": 12, + "paddingRight": 44, }, Object { "height": 64, @@ -946,9 +946,9 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm false, Object { "marginLeft": 0, - "marginRight": 40, - "paddingLeft": 40, - "paddingRight": 16, + "marginRight": 36, + "paddingLeft": 36, + "paddingRight": 8, }, ] } @@ -962,7 +962,7 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm Object { "alignItems": "center", "justifyContent": "center", - "left": 16, + "left": 12, "opacity": 1, "position": "absolute", "top": null, @@ -1000,7 +1000,7 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm "width": 24, }, Object { - "right": 16, + "right": 12, "top": 20, }, ] @@ -1099,7 +1099,7 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm Object { "backgroundColor": "rgba(0, 0, 0, 0.26)", "bottom": 0, - "height": 1, + "height": 2, "left": 0, "position": "absolute", "right": 0, @@ -1137,7 +1137,7 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm "top": 0, "transform": Array [ Object { - "translateX": 14, + "translateX": 11, }, ], "zIndex": 3, @@ -1155,8 +1155,8 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm "fontWeight": undefined, "left": 0, "opacity": 0, - "paddingLeft": 56, - "paddingRight": 56, + "paddingLeft": 44, + "paddingRight": 44, "position": "absolute", "textAlign": "left", "top": 34, @@ -1181,14 +1181,14 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm numberOfLines={1} style={ Object { - "color": "#6200ee", + "color": "rgba(0, 0, 0, 0.54)", "fontFamily": "System", "fontSize": 16, "fontWeight": undefined, "left": 0, "opacity": 0, - "paddingLeft": 56, - "paddingRight": 56, + "paddingLeft": 44, + "paddingRight": 44, "position": "absolute", "textAlign": "left", "top": 34, @@ -1228,8 +1228,8 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm "margin": 0, }, Object { - "paddingLeft": 56, - "paddingRight": 56, + "paddingLeft": 44, + "paddingRight": 44, }, Object { "height": 64, @@ -1248,10 +1248,10 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm }, false, Object { - "marginLeft": 40, + "marginLeft": 36, "marginRight": 0, - "paddingLeft": 16, - "paddingRight": 40, + "paddingLeft": 8, + "paddingRight": 36, }, ] } @@ -1270,7 +1270,7 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm "width": 24, }, Object { - "left": 16, + "left": 12, "top": 20, }, ] @@ -1356,7 +1356,7 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm "justifyContent": "center", "opacity": 1, "position": "absolute", - "right": 16, + "right": 12, "top": null, } }