Skip to content

Commit

Permalink
Change isError prop to hasError
Browse files Browse the repository at this point in the history
This prop naming more clearly communicates that there is an error
associated with the input but that the input itself is not in error.
  • Loading branch information
lyzadanger committed Jul 13, 2021
1 parent d43c288 commit 1e401f6
Show file tree
Hide file tree
Showing 5 changed files with 17 additions and 12 deletions.
10 changes: 7 additions & 3 deletions src/components/TextInput.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import classnames from 'classnames';
* @prop {string} [classes] - Additional CSS classes to apply
* @prop {import('preact').Ref<HTMLInputElement>} [inputRef] - Optional ref for
* the rendered `input` element.
* @prop {boolean} [isError] - There is an error associated with this input. Will
* @prop {boolean} [hasError] - There is an error associated with this input. Will
* set some error styling.
*/

Expand All @@ -32,12 +32,16 @@ import classnames from 'classnames';
export function TextInput({
classes = '',
inputRef,
isError = false,
hasError = false,
...restProps
}) {
return (
<input
className={classnames('Hyp-TextInput', { 'is-error': isError }, classes)}
className={classnames(
'Hyp-TextInput',
{ 'has-error': hasError },
classes
)}
{...restProps}
ref={inputRef}
type="text"
Expand Down
6 changes: 3 additions & 3 deletions src/components/test/TextInput-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ describe('TextInput', () => {
const wrapper = createComponent();

assert.isTrue(wrapper.find('input').hasClass('Hyp-TextInput'));
assert.isFalse(wrapper.find('input').hasClass('is-error'));
assert.isFalse(wrapper.find('input').hasClass('has-error'));
});

it('ignores `type` property and sets `type` to `text`', () => {
Expand All @@ -20,9 +20,9 @@ describe('TextInput', () => {
});

it('applies an error class when in error', () => {
const wrapper = createComponent({ isError: true });
const wrapper = createComponent({ hasError: true });

assert.isTrue(wrapper.find('input').hasClass('is-error'));
assert.isTrue(wrapper.find('input').hasClass('has-error'));
});

it('passes along a `ref` to the input element through `inputRef`', () => {
Expand Down
8 changes: 4 additions & 4 deletions src/pattern-library/components/patterns/FormComponents.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import {
export default function FormComponents() {
const [wantSandwich, setWantSandwich] = useState(true);
const [wantWatermelon, setWantWatermelon] = useState(false);
const [textInputIsError, setTextInputIsError] = useState(true);
const [textInputHasError, setTextInputHasError] = useState(true);
return (
<PatternPage title="Forms">
<Pattern title="Checkbox">
Expand Down Expand Up @@ -59,7 +59,7 @@ export default function FormComponents() {
</PatternExample>

<PatternExample details="text input field in an error state">
<TextInput name="my-input" isError />
<TextInput name="my-input" hasError />
</PatternExample>
</PatternExamples>
</Pattern>
Expand All @@ -84,12 +84,12 @@ export default function FormComponents() {

<PatternExample details="text input field in an error state; click button to toggle error state">
<TextInputWithButton>
<TextInput name="my-input" isError={textInputIsError} />
<TextInput name="my-input" hasError={textInputHasError} />
<IconButton
icon="arrow-right"
variant="dark"
title="go"
onClick={() => setTextInputIsError(!textInputIsError)}
onClick={() => setTextInputHasError(!textInputHasError)}
/>
</TextInputWithButton>
</PatternExample>
Expand Down
4 changes: 2 additions & 2 deletions src/pattern-library/components/patterns/FormPatterns.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export default function FormPatterns() {
</PatternExample>
<PatternExample details="text input in an error state">
<input
className="hyp-text-input is-error"
className="hyp-text-input has-error"
type="text"
placeholder="http://www.example.com"
/>
Expand Down Expand Up @@ -55,7 +55,7 @@ export default function FormPatterns() {
<input
type="text"
placeholder="http://www.example.com"
className="is-error"
className="has-error"
/>
<IconButton icon="arrow-right" title="go" variant="dark" />
</div>
Expand Down
1 change: 1 addition & 0 deletions styles/mixins/patterns/_forms.scss
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ $-color-text--disabled: var.$color-text--disabled;
@mixin text-input {
@include input;

&.has-error,
&.is-error {
// Apply an error-colored inset outline.
outline: none;
Expand Down

0 comments on commit 1e401f6

Please sign in to comment.