Add isInvalid field to tagInput (#1398)

* add isInvalid field to tagInput

* revert removal of styles

* add isInvalid to ts interface

* feedback -- change style addition

Author: Catherine Ligad

index.d.ts

@@ -2499,6 +2499,7 @@ export interface TagInputOwnProps {
   addOnBlur?: boolean
   className?: string
   disabled?: boolean
+  isInvalid?: boolean
   height?: number
   inputProps?: PolymorphicBoxProps<'input', TextOwnProps>
   inputRef?: React.Ref<HTMLInputElement>

src/tag-input/src/TagInput.js

@@ -28,7 +28,8 @@ const internalStyles = {
 
 const pseudoSelectors = {
   _focused: '&[aria-activedescendant]',
-  _disabled: '&[aria-disabled="true"]'
+  _disabled: '&[aria-disabled="true"]',
+  _invalid: '&[aria-invalid="true"]:not(:focus)'
 }
 
 const TagInput = memo(
@@ -50,6 +51,7 @@ const TagInput = memo(
       className,
       inputProps = emptyProps,
       inputRef,
+      isInvalid,
       ...rest
     } = props
     const [inputValue, setInputValue] = useState('')
@@ -165,6 +167,7 @@ const TagInput = memo(
       <Box
         aria-disabled={disabled || undefined}
         aria-activedescendant={isFocused ? id : undefined}
+        aria-invalid={isInvalid}
         className={cx(themedContainerClassName, className)}
         ref={ref}
         onBlur={handleBlur}
@@ -199,6 +202,8 @@ TagInput.propTypes = {
   className: PropTypes.string,
   /** Whether or not the input should be disabled. */
   disabled: PropTypes.bool,
+  /** Whether or not the input is invalid. */
+  isInvalid: PropTypes.bool,
   /** The vertical size of the input */
   height: PropTypes.number,
   /** Props to pass to the input component. Note that `ref` and `key` are not supported. See `inputRef`. */

src/tag-input/stories/TagInput.stories.js

@@ -122,6 +122,22 @@ storiesOf('tag-input', module).add('TagInput', () => (
         )}
       </StateManager>
     </StorySection>
+    <StorySection>
+      <StoryHeader>
+        <StoryHeading>Invalid</StoryHeading>
+      </StoryHeader>
+      <StateManager>
+        {({ addValues, removeValue, values }) => (
+          <TagInput
+            inputProps={{ placeholder: 'Enter something...', validationMessage: 'This field should not be empty' }}
+            values={values}
+            onAdd={addValues}
+            onRemove={removeValue}
+            isInvalid={true}
+          />
+        )}
+      </StateManager>
+    </StorySection>
     <StorySection>
       <StoryHeader>
         <StoryHeading>With `tagProps`</StoryHeading>

src/themes/default/components/tag-input.js

@@ -17,6 +17,9 @@ const appearances = {
     _disabled: {
       cursor: 'not-allowed',
       backgroundColor: 'colors.gray100'
+    },
+    _invalid: {
+      borderColor: 'colors.red600'
     }
   }
 }