Enhance text input component

Author: pksjce

src/TextInput.tsx

@@ -6,10 +6,13 @@ import TextInputWrapper from './_TextInputWrapper'
 
 type NonPassthroughProps = {
   className?: string
+  // deprecate icon prop
   icon?: React.ComponentType<{className?: string}>
+  leadingIcon?: React.ComponentType<{className?: string}>
+  trailingIcon?: React.ComponentType<{className?: string}>
 } & Pick<
   ComponentProps<typeof TextInputWrapper>,
-  'block' | 'contrast' | 'disabled' | 'sx' | 'theme' | 'width' | 'maxWidth' | 'minWidth' | 'variant'
+  'block' | 'contrast' | 'disabled' | 'sx' | 'theme' | 'width' | 'maxWidth' | 'minWidth' | 'variant' | 'size'
 >
 
 // Note: using ComponentProps instead of ComponentPropsWithoutRef here would cause a type issue where `css` is a required prop.
@@ -20,16 +23,22 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputInternalProps>(
   (
     {
       icon: IconComponent,
+      leadingIcon: LeadingIconComponent,
+      trailingIcon: TrailingIconComponent,
       block,
       className,
       contrast,
       disabled,
+      status,
       sx: sxProp,
       theme,
+      size: sizeProp,
+      // start deprecated props
       width: widthProp,
       minWidth: minWidthProp,
       maxWidth: maxWidthProp,
       variant: variantProp,
+      // end deprecated props
       ...inputProps
     },
     ref
@@ -41,18 +50,21 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputInternalProps>(
       <TextInputWrapper
         block={block}
         className={wrapperClasses}
+        status={status}
         contrast={contrast}
         disabled={disabled}
-        hasIcon={!!IconComponent}
+        hasIcon={!!IconComponent || !!(LeadingIconComponent || TrailingIconComponent)}
         sx={sxProp}
         theme={theme}
         width={widthProp}
         minWidth={minWidthProp}
         maxWidth={maxWidthProp}
         variant={variantProp}
       >
-        {IconComponent && <IconComponent className="TextInput-icon" />}
-        <UnstyledTextInput ref={ref} disabled={disabled} {...inputProps} />
+        {IconComponent && <IconComponent className="TextInput-leading-icon" />}
+        {LeadingIconComponent && <LeadingIconComponent className="TextInput-leading-icon" />}
+        <UnstyledTextInput ref={ref} disabled={disabled} {...inputProps} data-component="input" />
+        {TrailingIconComponent && <TrailingIconComponent className="TextInput-trailing-icon" />}
       </TextInputWrapper>
     )
   }

src/_TextInputWrapper.tsx

@@ -3,7 +3,25 @@ import {maxWidth, MaxWidthProps, minWidth, MinWidthProps, variant, width, WidthP
 import {get} from './constants'
 import sx, {SxProp} from './sx'
 
+const sizeDeprecatedVariants = variant({
+  variants: {
+    small: {
+      minHeight: '28px',
+      px: 2,
+      py: '3px',
+      fontSize: 0,
+      lineHeight: '20px'
+    },
+    large: {
+      px: 2,
+      py: '10px',
+      fontSize: 3
+    }
+  }
+})
+
 const sizeVariants = variant({
+  prop: 'size',
   variants: {
     small: {
       minHeight: '28px',
@@ -25,45 +43,49 @@ type StyledWrapperProps = {
   hasIcon?: boolean
   block?: boolean
   contrast?: boolean
+  status?: 'error' | 'warning'
   variant?: 'small' | 'large'
+  size?: 'small' | 'large'
 } & WidthProps &
   MinWidthProps &
   MaxWidthProps &
   SxProp
 
 const TextInputWrapper = styled.span<StyledWrapperProps>`
-  display: inline-flex;
-  align-items: stretch;
+  width: max-content;
   min-height: 34px;
   font-size: ${get('fontSizes.1')};
   line-height: 20px;
   color: ${get('colors.fg.default')};
   vertical-align: middle;
+  background-color: ${get('colors.input.bg')};
   background-repeat: no-repeat; // Repeat and position set for form states (success, error, etc)
   background-position: right 8px center; // For form validation. This keeps images 8px from right and centered vertically.
   border: 1px solid ${get('colors.border.default')};
   border-radius: ${get('radii.2')};
   outline: none;
   box-shadow: ${get('shadows.primer.shadow.inset')};
   cursor: text;
+  padding: 6px 12px;
+  display: grid;
+  grid-template-areas: 'leadingIcon input trailingIcon';
+  & > :not(:last-child) {
+    margin-right: ${get('space.2')};
+  }
+  [data-component='input'] {
+    grid-area: input;
+  }
 
-  ${props => {
-    if (props.hasIcon) {
-      return css`
-        padding: 0;
-      `
-    } else {
-      return css`
-        padding: 6px 12px;
-      `
-    }
-  }}
+  .TextInput-leading-icon {
+    align-self: center;
+    color: ${get('colors.fg.muted')};
+    grid-area: leadingIcon;
+  }
 
-  .TextInput-icon {
+  .TextInput-trailing-icon {
     align-self: center;
     color: ${get('colors.fg.muted')};
-    margin: 0 ${get('space.2')};
-    flex-shrink: 0;
+    grid-area: trailingIcon;
   }
 
   &:focus-within {
@@ -84,19 +106,31 @@ const TextInputWrapper = styled.span<StyledWrapperProps>`
       background-color: ${get('colors.input.disabledBg')};
       border-color: ${get('colors.border.default')};
     `}
-  
-    ${props =>
-    props.block &&
+
+  ${props =>
+    props.status === 'error' &&
     css`
-      display: block;
-      width: 100%;
+      border-color: ${get('colors.danger.emphasis')};
+      &:focus-within {
+        border-color: ${get('colors.danger.emphasis')};
+        box-shadow: ${get('shadows.btn.danger.focusShadow')};
+      }
     `}
 
+  ${props =>
+    props.status === 'warning' &&
+    css`
+      border-color: ${get('colors.attention.emphasis')};
+      &:focus-within {
+        border-color: ${get('colors.attention.emphasis')};
+        box-shadow: 0 0 0 3px ${get('colors.attention.muted')};
+      }
+    `}
+  
     ${props =>
     props.block &&
-    props.hasIcon &&
     css`
-      display: flex;
+      width: 100%;
     `}
   
     // Ensures inputs don't zoom on mobile but are body-font size on desktop
@@ -105,9 +139,10 @@ const TextInputWrapper = styled.span<StyledWrapperProps>`
   }
   ${width}
   ${minWidth}
-    ${maxWidth}
-    ${sizeVariants}
-    ${sx};
+  ${maxWidth}
+  ${sizeDeprecatedVariants}
+  ${sizeVariants}
+  ${sx};
 `
 
 export default TextInputWrapper

src/stories/TextInput.stories.tsx

@@ -43,6 +43,18 @@ export default {
       name: 'Variants',
       options: ['small', 'medium', 'large'],
       control: {type: 'radio'}
+    },
+    status: {
+      name: 'Status',
+      options: ['warning', 'error'],
+      control: {type: 'radio'}
+    },
+    placeholder: {
+      name: 'Placeholder',
+      defaultValue: 'Hello!',
+      control: {
+        type: 'text'
+      }
     }
   }
 } as Meta
@@ -89,7 +101,43 @@ export const WithLeadingIcon = (args: TextInputProps) => {
     <form>
       <Label htmlFor={inputId}>Example label</Label>
       <br />
-      <TextInput icon={CheckIcon} id={inputId} value={value} onChange={handleChange} type="password" {...args} />
+      <TextInput leadingIcon={CheckIcon} id={inputId} value={value} onChange={handleChange} {...args} />
+    </form>
+  )
+}
+
+export const WithTrailingIcon = (args: TextInputProps) => {
+  const [value, setValue] = useState('')
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value)
+  }
+
+  const inputId = 'basic-text-input-with-trailing-icon'
+
+  return (
+    <form>
+      <Label htmlFor={inputId}>Example label</Label>
+      <br />
+      <TextInput trailingIcon={CheckIcon} id={inputId} value={value} onChange={handleChange} {...args} />
+    </form>
+  )
+}
+
+export const ContrastTextInput = (args: TextInputProps) => {
+  const [value, setValue] = useState('')
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value)
+  }
+
+  const inputId = 'contrast-text-input'
+
+  return (
+    <form>
+      <Label htmlFor={inputId}>Example label</Label>
+      <br />
+      <TextInput contrast id={inputId} value={value} onChange={handleChange} {...args} />
     </form>
   )
 }
@@ -111,3 +159,21 @@ export const Password = (args: TextInputProps) => {
     </form>
   )
 }
+
+export const TextInputInWarningState = (args: TextInputProps) => {
+  const [value, setValue] = useState('')
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value)
+  }
+
+  const inputId = 'text-input-with-warning'
+
+  return (
+    <form>
+      <Label htmlFor={inputId}>Password</Label>
+      <br />
+      <TextInput type="password" id={inputId} value={value} status="warning" {...args} />
+    </form>
+  )
+}