From 340b7806bb1636cda557971d536c50d7c6607021 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Sun, 14 Aug 2022 21:58:18 +0200 Subject: [PATCH] fix: correct text input label color --- src/components/TextInput/Label/InputLabel.tsx | 14 +++----- src/components/TextInput/TextInput.tsx | 4 +++ src/components/TextInput/TextInputFlat.tsx | 4 ++- .../TextInput/TextInputOutlined.tsx | 5 +-- src/components/TextInput/types.tsx | 3 +- src/components/__tests__/TextInput.test.js | 34 +++++++++++++++++++ .../__snapshots__/TextInput.test.js.snap | 22 +++++++++--- 7 files changed, 68 insertions(+), 18 deletions(-) diff --git a/src/components/TextInput/Label/InputLabel.tsx b/src/components/TextInput/Label/InputLabel.tsx index ee95e42c49..0790ff9418 100644 --- a/src/components/TextInput/Label/InputLabel.tsx +++ b/src/components/TextInput/Label/InputLabel.tsx @@ -7,7 +7,7 @@ import type { InputLabelProps } from '../types'; const InputLabel = (props: InputLabelProps) => { const { isV3 } = useTheme(); - const { parentState, labelBackground, mode } = props; + const { parentState, labelBackground } = props; const { label, error, @@ -29,6 +29,7 @@ const InputLabel = (props: InputLabelProps) => { errorColor, labelTranslationXOffset, maxFontSizeMultiplier, + testID, } = props.labelProps; const labelTranslationX = { @@ -72,14 +73,7 @@ const InputLabel = (props: InputLabelProps) => { ], }; - let textColor = placeholderColor; - - if (error && errorColor) { - textColor = errorColor; - } - if (isV3 && parentState.value && mode !== 'outlined') { - textColor = activeColor; - } + const textColor = error && errorColor ? errorColor : placeholderColor; return label ? ( // Position colored placeholder and gray placeholder on top of each other and crossfade them @@ -128,6 +122,7 @@ const InputLabel = (props: InputLabelProps) => { ]} numberOfLines={1} maxFontSizeMultiplier={maxFontSizeMultiplier} + testID={`${testID}-label-active`} > {label} @@ -148,6 +143,7 @@ const InputLabel = (props: InputLabelProps) => { ]} numberOfLines={1} maxFontSizeMultiplier={maxFontSizeMultiplier} + testID={`${testID}-label-inactive`} > {label} diff --git a/src/components/TextInput/TextInput.tsx b/src/components/TextInput/TextInput.tsx index b2988583d2..ac75509f0b 100644 --- a/src/components/TextInput/TextInput.tsx +++ b/src/components/TextInput/TextInput.tsx @@ -132,6 +132,10 @@ export type Props = React.ComponentPropsWithRef & { * @optional */ theme: Theme; + /** + * testID to be used on tests. + */ + testID?: string; }; interface CompoundedComponent diff --git a/src/components/TextInput/TextInputFlat.tsx b/src/components/TextInput/TextInputFlat.tsx index e28eb47f34..e3b1447398 100644 --- a/src/components/TextInput/TextInputFlat.tsx +++ b/src/components/TextInput/TextInputFlat.tsx @@ -69,6 +69,7 @@ const TextInputFlat = ({ left, right, placeholderTextColor, + testID = 'text-input', ...rest }: ChildTextInputProps) => { const isAndroid = Platform.OS === 'android'; @@ -258,6 +259,7 @@ const TextInputFlat = ({ errorColor, roundness, maxFontSizeMultiplier: rest.maxFontSizeMultiplier, + testID, }; const affixTopPosition = { [AdornmentSide.Left]: leftAffixTopPosition, @@ -328,7 +330,7 @@ const TextInputFlat = ({ )} {render?.({ - testID: 'text-input-flat', + testID: `${testID}-flat`, ...rest, ref: innerRef, onChangeText, diff --git a/src/components/TextInput/TextInputOutlined.tsx b/src/components/TextInput/TextInputOutlined.tsx index cf223ecae5..5bf57aff49 100644 --- a/src/components/TextInput/TextInputOutlined.tsx +++ b/src/components/TextInput/TextInputOutlined.tsx @@ -67,6 +67,7 @@ const TextInputOutlined = ({ left, right, placeholderTextColor, + testID = 'text-input', ...rest }: ChildTextInputProps) => { const adornmentConfig = getAdornmentConfig({ left, right }); @@ -202,6 +203,7 @@ const TextInputOutlined = ({ labelTranslationXOffset, roundness, maxFontSizeMultiplier: rest.maxFontSizeMultiplier, + testID, }; const minHeight = (height || @@ -299,14 +301,13 @@ const TextInputOutlined = ({ ]} > {render?.({ - testID: 'text-input-outlined', + testID: `${testID}-outlined`, ...rest, ref: innerRef, onChangeText, diff --git a/src/components/TextInput/types.tsx b/src/components/TextInput/types.tsx index 8f13976221..9f0392f3d0 100644 --- a/src/components/TextInput/types.tsx +++ b/src/components/TextInput/types.tsx @@ -25,6 +25,7 @@ export type RenderProps = { numberOfLines?: number; value?: string; adjustsFontSizeToFit?: boolean; + testID?: string; }; type TextInputTypesWithoutMode = $Omit; export type State = { @@ -72,13 +73,13 @@ export type LabelProps = { onLayoutAnimatedText: (args: any) => void; roundness: number; maxFontSizeMultiplier?: number | undefined | null; + testID?: string; }; export type InputLabelProps = { parentState: State; labelProps: LabelProps; labelBackground?: any; maxFontSizeMultiplier?: number | undefined | null; - mode?: 'flat' | 'outlined'; }; export type LabelBackgroundProps = { diff --git a/src/components/__tests__/TextInput.test.js b/src/components/__tests__/TextInput.test.js index 53d2a6c972..179d1061c9 100644 --- a/src/components/__tests__/TextInput.test.js +++ b/src/components/__tests__/TextInput.test.js @@ -176,6 +176,40 @@ it('correctly applies a component as the text label', () => { expect(toJSON()).toMatchSnapshot(); }); +it('renders label with correct color when active', () => { + const { getByTestId } = render( + this.setState({ text })} + testID={'text-input'} + /> + ); + + fireEvent(getByTestId('text-input-flat'), 'focus'); + + expect(getByTestId('text-input-label-active')).toHaveStyle({ + color: getTheme().colors.primary, + }); +}); + +it('renders label with correct color when inactive', () => { + const { getByTestId } = render( + this.setState({ text })} + testID={'text-input'} + /> + ); + + expect(getByTestId('text-input-label-inactive')).toHaveStyle({ + color: getTheme().colors.onSurfaceVariant, + }); +}); + describe('maxFontSizeMultiplier', () => { const createInput = (type, maxFontSizeMultiplier) => { return ( diff --git a/src/components/__tests__/__snapshots__/TextInput.test.js.snap b/src/components/__tests__/__snapshots__/TextInput.test.js.snap index d55452e9a6..96e7ed1578 100644 --- a/src/components/__tests__/__snapshots__/TextInput.test.js.snap +++ b/src/components/__tests__/__snapshots__/TextInput.test.js.snap @@ -98,6 +98,7 @@ exports[`correctly applies a component as the text label 1`] = ` "writingDirection": "ltr", } } + testID="text-input-label-active" > Flat input @@ -308,7 +311,7 @@ exports[`correctly applies default textAlign based on default RTL 1`] = ` numberOfLines={1} style={ Object { - "color": "rgba(103, 80, 164, 1)", + "color": "rgba(73, 69, 79, 1)", "fontSize": 16, "fontWeight": undefined, "left": 0, @@ -334,6 +337,7 @@ exports[`correctly applies default textAlign based on default RTL 1`] = ` "writingDirection": "ltr", } } + testID="text-input-label-inactive" > Flat input @@ -533,6 +537,7 @@ exports[`correctly applies height to multiline Outline TextInput 1`] = ` "writingDirection": "ltr", } } + testID="text-input-label-active" > Outline Input @@ -567,6 +572,7 @@ exports[`correctly applies height to multiline Outline TextInput 1`] = ` "writingDirection": "ltr", } } + testID="text-input-label-inactive" > Outline Input @@ -716,6 +722,7 @@ exports[`correctly applies textAlign center 1`] = ` "writingDirection": "ltr", } } + testID="text-input-label-active" > Flat input @@ -725,7 +732,7 @@ exports[`correctly applies textAlign center 1`] = ` numberOfLines={1} style={ Object { - "color": "rgba(103, 80, 164, 1)", + "color": "rgba(73, 69, 79, 1)", "fontSize": 16, "fontWeight": undefined, "left": 0, @@ -751,6 +758,7 @@ exports[`correctly applies textAlign center 1`] = ` "writingDirection": "ltr", } } + testID="text-input-label-inactive" > Flat input @@ -901,6 +909,7 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm "writingDirection": "ltr", } } + testID="text-input-label-active" > Flat input @@ -910,7 +919,7 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm numberOfLines={1} style={ Object { - "color": "rgba(103, 80, 164, 1)", + "color": "rgba(73, 69, 79, 1)", "fontSize": 16, "fontWeight": undefined, "left": 0, @@ -936,6 +945,7 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm "writingDirection": "ltr", } } + testID="text-input-label-inactive" > Flat input @@ -1253,6 +1263,7 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm "writingDirection": "ltr", } } + testID="text-input-label-active" > Flat input @@ -1262,7 +1273,7 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm numberOfLines={1} style={ Object { - "color": "rgba(103, 80, 164, 1)", + "color": "rgba(73, 69, 79, 1)", "fontSize": 16, "fontWeight": undefined, "left": 0, @@ -1288,6 +1299,7 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm "writingDirection": "ltr", } } + testID="text-input-label-inactive" > Flat input