updated InputText to have Icon warning when ValidationType = error

Author: Lara Harrow

CHANGELOG.md

@@ -15,6 +15,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - removed labelFontWeight from FieldInline and update test for it
 
+### Fixed
+
+- updated InputText to have Icon warning when ValidationType = error
+
 ## [0.7.27] - 2020-04-15
 
 ### Added

packages/components/src/Form/Inputs/InputText/InputText.tsx

@@ -91,12 +91,13 @@ export interface InputTextProps
 const InputComponent = forwardRef(
   (
     {
-      type = 'text',
+      className,
       iconAfter,
       iconBefore,
       prefix,
       suffix,
-      className,
+      type = 'text',
+      validationType,
       ...props
     }: InputTextProps,
     forwardedRef: Ref<HTMLInputElement>
@@ -142,24 +143,18 @@ const InputComponent = forwardRef(
       inputPropKeys
     )
 
-    if (before || after) {
-      return (
-        <InputLayout className={className} onClick={focusInput}>
-          {before}
-          <input {...inputProps} type={type} ref={ref} />
-          {after}
-        </InputLayout>
-      )
-    } else {
-      return (
-        <StyledInput
-          {...inputProps}
-          className={className}
-          type={type}
-          ref={ref}
-        />
-      )
-    }
+    return (
+      <InputLayout className={className} onClick={focusInput}>
+        {before && before}
+        <input {...inputProps} type={type} ref={ref} />
+        {after && after}
+        {validationType && (
+          <InputIconStyle paddingLeft="xsmall">
+            <Icon color="palette.red500" name="Warning" size={18} />
+          </InputIconStyle>
+        )}
+      </InputLayout>
+    )
   }
 )
 
@@ -181,27 +176,11 @@ export const inputTextDisabled = css`
 
 export const inputHeight = '36px'
 
-const shared = css`
-  height: ${inputHeight};
-
-  ::placeholder {
-    color: ${(props) => props.theme.colors.palette.charcoal400};
-  }
-
-  &:hover {
-    ${inputTextHover}
-  }
-  &:focus,
-  :focus-within {
-    ${inputTextFocus}
-  }
-`
-
 export const InputLayout = styled.div`
-  ${shared}
   align-items: center;
   background-color: ${(props) => props.theme.colors.palette.white};
   display: inline-flex;
+  height: ${inputHeight};
   justify-content: space-evenly;
 
   input {
@@ -214,10 +193,18 @@ export const InputLayout = styled.div`
     outline: none;
     padding: 0;
   }
-`
 
-const StyledInput = styled.input`
-  ${shared}
+  ::placeholder {
+    color: ${(props) => props.theme.colors.palette.charcoal400};
+  }
+
+  &:hover {
+    ${inputTextHover}
+  }
+  &:focus,
+  :focus-within {
+    ${inputTextFocus}
+  }
 `
 
 export const InputIconStyle = styled(Flex)`

packages/playground/src/Form/FieldsDemo.tsx

@@ -52,16 +52,77 @@ export const FieldsDemo: FC = () => {
           inline
           label="Text Input"
           placeholder="placeholder"
+        />{' '}
+        <FieldText
+          label="Text Input"
+          placeholder="placeholder"
+          validationMessage={{ message: 'validation Message', type: 'error' }}
+        />
+        <FieldText
+          inline
+          label="Text Input"
+          placeholder="placeholder"
+          validationMessage={{ message: 'validation Message', type: 'error' }}
+        />
+        <FieldText
+          label="Text Input"
+          iconBefore="GearOutline"
+          placeholder="placeholder"
+          validationMessage={{ message: 'validation Message', type: 'error' }}
+        />
+        <FieldText
+          inline
+          label="Text Input"
+          iconBefore="GearOutline"
+          placeholder="placeholder"
+          validationMessage={{ message: 'validation Message', type: 'error' }}
+        />
+        <FieldText
+          label="Text Input"
+          iconAfter="Check"
+          placeholder="placeholder"
+          validationMessage={{ message: 'validation Message', type: 'error' }}
+        />
+        <FieldText
+          inline
+          label="Text Input"
+          iconAfter="Check"
+          placeholder="placeholder"
+          validationMessage={{ message: 'validation Message', type: 'error' }}
+        />
+        <FieldText
+          label="Text Input"
+          suffix="%"
+          placeholder="placeholder"
+          validationMessage={{ message: 'validation Message', type: 'error' }}
+        />
+        <FieldText
+          inline
+          label="Text Input"
+          suffix="%"
+          placeholder="placeholder"
+          validationMessage={{ message: 'validation Message', type: 'error' }}
+        />
+        <FieldText
+          label="Text Input"
+          prefix="$"
+          placeholder="placeholder"
+          validationMessage={{ message: 'validation Message', type: 'error' }}
+        />
+        <FieldText
+          inline
+          label="Text Input"
+          prefix="$"
+          placeholder="placeholder"
+          validationMessage={{ message: 'validation Message', type: 'error' }}
         />
-
         <FieldText label="Text Input" placeholder="placeholder" required />
         <FieldText
           inline
           label="Text Input"
           placeholder="placeholder"
           required
         />
-
         <FieldText
           description="no vegetables allowed"
           label="Text Input"
@@ -73,30 +134,23 @@ export const FieldsDemo: FC = () => {
           label="Text Input"
           placeholder="placeholder"
         />
-
         <FieldText label="Label" prefix="$" />
         <FieldText inline label="Label" prefix="$" />
-
         <FieldText label="Label" iconBefore="GearOutline" />
         <FieldText inline label="Label" iconBefore="GearOutline" />
-
         <FieldText label="Label" suffix="%" />
         <FieldText inline label="Label" suffix="%" />
-
         <FieldText label="Label" iconAfter="Check" />
         <FieldText inline label="Label" iconAfter="Check" />
-
         <FieldText label="Label" prefix="$" iconAfter="Check" />
         <FieldText inline label="Label" prefix="$" iconAfter="Check" />
-
         <FieldText label="hello" detail="5/50" placeholder="placeholder" />
         <FieldText
           inline
           label="hello"
           detail="5/50"
           placeholder="placeholder"
         />
-
         <FieldText
           label="Label"
           required
@@ -112,21 +166,17 @@ export const FieldsDemo: FC = () => {
           description="A special kind of thing..."
           detail="What?"
         />
-
         <FieldTextArea label="Text Area" />
         <FieldTextArea placeholder="Neat stuff" inline label="Text Area" />
-
         <FieldTextArea label="Text Area" disabled />
         <FieldTextArea
           placeholder="Neat stuff"
           inline
           label="Text Area"
           disabled
         />
-
         <FieldTextArea label="Text Area" required placeholder="Hello world" />
         <FieldTextArea inline label="Text Area" required />
-
         <FieldTextArea
           label="Text Area"
           validationMessage={{ message: 'validation Message', type: 'error' }}
@@ -137,7 +187,6 @@ export const FieldsDemo: FC = () => {
           required
           validationMessage={{ message: 'validation Message', type: 'error' }}
         />
-
         <FieldSelect
           label="Label"
           placeholder="placeholder"
@@ -157,7 +206,6 @@ export const FieldsDemo: FC = () => {
             { label: 'Swiss', value: 'swiss' },
           ]}
         />
-
         <FieldSelect
           label="Label"
           placeholder="placeholder"