Skip to content

Commit

Permalink
fix: outlined input error border width (#2975)
Browse files Browse the repository at this point in the history
  • Loading branch information
enagorny authored Dec 10, 2021
1 parent 85d679e commit e509bf8
Show file tree
Hide file tree
Showing 4 changed files with 56 additions and 2 deletions.
7 changes: 7 additions & 0 deletions example/src/Examples/TextInputExample.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -468,6 +468,13 @@ const TextInputExample = () => {
label="Custom rounded input"
/>
</View>
<View style={styles.inputContainerStyle}>
<TextInput
mode="outlined"
label="Outlined text input with error"
error
/>
</View>
</ScreenWrapper>
</TextInputAvoidingView>
);
Expand Down
7 changes: 6 additions & 1 deletion src/components/TextInput/TextInputOutlined.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -295,6 +295,7 @@ class TextInputOutlined extends React.Component<ChildTextInputProps> {
<Outline
theme={theme}
hasActiveOutline={hasActiveOutline}
focused={parentState.focused}
activeColor={activeColor}
outlineColor={outlineColor}
backgroundColor={backgroundColor}
Expand All @@ -314,6 +315,7 @@ class TextInputOutlined extends React.Component<ChildTextInputProps> {
labelBackground={LabelBackground}
/>
{render?.({
testID: 'text-input-outlined',
...rest,
ref: innerRef,
onChangeText,
Expand Down Expand Up @@ -365,6 +367,7 @@ export default TextInputOutlined;
type OutlineProps = {
activeColor: string;
hasActiveOutline?: boolean;
focused?: boolean;
outlineColor?: string;
backgroundColor: ColorValue;
theme: ReactNativePaper.Theme;
Expand All @@ -375,17 +378,19 @@ const Outline = ({
hasActiveOutline,
activeColor,
outlineColor,
focused,
backgroundColor,
}: OutlineProps) => (
<View
testID="text-input-outline"
pointerEvents="none"
style={[
styles.outline,
// eslint-disable-next-line react-native/no-inline-styles
{
backgroundColor,
borderRadius: theme.roundness,
borderWidth: hasActiveOutline ? 2 : 1,
borderWidth: focused ? 2 : 1,
borderColor: hasActiveOutline ? activeColor : outlineColor,
},
]}
Expand Down
42 changes: 41 additions & 1 deletion src/components/__tests__/TextInput.test.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import * as React from 'react';
import { StyleSheet } from 'react-native';
import { render } from 'react-native-testing-library';
import { fireEvent, render } from 'react-native-testing-library';
import TextInput from '../TextInput/TextInput';
import { red500 } from '../../styles/colors';

Expand Down Expand Up @@ -108,3 +108,43 @@ it('correctly applies height to multiline Outline TextInput', () => {

expect(toJSON()).toMatchSnapshot();
});

it('correctly applies error state Outline TextInput', () => {
const { getByTestId } = render(
<TextInput
mode="outlined"
label="Outline Input with error"
placeholder="Type Something"
value={'Some test value'}
error
/>
);

const outline = getByTestId('text-input-outline');
expect(outline.props.style).toEqual(
expect.arrayContaining([expect.objectContaining({ borderWidth: 1 })])
);
});

it('correctly applies focused state Outline TextInput', () => {
const { getByTestId } = render(
<TextInput
mode="outlined"
label="Outline Input with error"
placeholder="Type Something"
value={'Some test value'}
error
/>
);

const outline = getByTestId('text-input-outline');
expect(outline.props.style).toEqual(
expect.arrayContaining([expect.objectContaining({ borderWidth: 1 })])
);

fireEvent(getByTestId('text-input-outlined'), 'focus');

expect(outline.props.style).toEqual(
expect.arrayContaining([expect.objectContaining({ borderWidth: 2 })])
);
});
2 changes: 2 additions & 0 deletions src/components/__tests__/__snapshots__/TextInput.test.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -201,6 +201,7 @@ exports[`correctly applies height to multiline Outline TextInput 1`] = `
},
]
}
testID="text-input-outline"
/>
<View
style={
Expand Down Expand Up @@ -392,6 +393,7 @@ exports[`correctly applies height to multiline Outline TextInput 1`] = `
],
]
}
testID="text-input-outlined"
underlineColorAndroid="transparent"
value="Some test value"
/>
Expand Down

0 comments on commit e509bf8

Please sign in to comment.