Merge pull request #140 from hypothesis/text-input-error-prop

Change `error` prop to `isError`
hypothesis · Jul 14, 2021 · aa22822 · aa22822
2 parents 099198f + 1e401f6
commit aa22822
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 16 deletions.
diff --git a/src/components/TextInput.js b/src/components/TextInput.js
@@ -5,10 +5,10 @@ import classnames from 'classnames';
  *
  * @typedef TextInputBaseProps
  * @prop {string} [classes] - Additional CSS classes to apply
- * @prop {boolean} [error] - There is an error associated with this input. Will
- *   set some error styling.
  * @prop {import('preact').Ref<HTMLInputElement>} [inputRef] - Optional ref for
  *   the rendered `input` element.
+ * @prop {boolean} [hasError] - There is an error associated with this input. Will
+ *   set some error styling.
  */
 
 /**
@@ -29,10 +29,19 @@ import classnames from 'classnames';
  *
  * @param {TextInputProps} props
  */
-export function TextInput({ classes = '', error, inputRef, ...restProps }) {
+export function TextInput({
+  classes = '',
+  inputRef,
+  hasError = false,
+  ...restProps
+}) {
   return (
     <input
-      className={classnames('Hyp-TextInput', { 'is-error': error }, classes)}
+      className={classnames(
+        'Hyp-TextInput',
+        { 'has-error': hasError },
+        classes
+      )}
       {...restProps}
       ref={inputRef}
       type="text"

diff --git a/src/components/test/TextInput-test.js b/src/components/test/TextInput-test.js
@@ -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`', () => {
@@ -20,9 +20,9 @@ describe('TextInput', () => {
   });
 
   it('applies an error class when in error', () => {
-    const wrapper = createComponent({ error: 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`', () => {

diff --git a/src/pattern-library/components/patterns/FormComponents.js b/src/pattern-library/components/patterns/FormComponents.js
@@ -14,6 +14,7 @@ import {
 export default function FormComponents() {
   const [wantSandwich, setWantSandwich] = useState(true);
   const [wantWatermelon, setWantWatermelon] = useState(false);
+  const [textInputHasError, setTextInputHasError] = useState(true);
   return (
     <PatternPage title="Forms">
       <Pattern title="Checkbox">
@@ -58,7 +59,7 @@ export default function FormComponents() {
           </PatternExample>
 
           <PatternExample details="text input field in an error state">
-            <TextInput name="my-input" error />
+            <TextInput name="my-input" hasError />
           </PatternExample>
         </PatternExamples>
       </Pattern>
@@ -81,10 +82,15 @@ export default function FormComponents() {
             </TextInputWithButton>
           </PatternExample>
 
-          <PatternExample details="text input field in an error state">
+          <PatternExample details="text input field in an error state; click button to toggle error state">
             <TextInputWithButton>
-              <TextInput name="my-input" error />
-              <IconButton icon="arrow-right" variant="dark" title="go" />
+              <TextInput name="my-input" hasError={textInputHasError} />
+              <IconButton
+                icon="arrow-right"
+                variant="dark"
+                title="go"
+                onClick={() => setTextInputHasError(!textInputHasError)}
+              />
             </TextInputWithButton>
           </PatternExample>
         </PatternExamples>

diff --git a/src/pattern-library/components/patterns/FormPatterns.js b/src/pattern-library/components/patterns/FormPatterns.js
@@ -50,7 +50,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"
             />
@@ -81,7 +81,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>

diff --git a/styles/mixins/patterns/_forms.scss b/styles/mixins/patterns/_forms.scss
@@ -37,12 +37,10 @@ $-color-text--disabled: var.$color-text--disabled;
 @mixin text-input {
   @include input;
 
+  &.has-error,
   &.is-error {
     // Apply an error-colored inset outline.
-    // Remove any outlines or borders to make sure the input element doesn't
-    // change dimensions when applying the inset outline
     outline: none;
-    border: none;
     @include focus.outline-rule($inset: true, $color: $-color-error);
   }