Fix up review comments

Author: pksjce

src/TextInput.tsx

@@ -6,13 +6,13 @@ import TextInputWrapper from './_TextInputWrapper'
 
 type NonPassthroughProps = {
   className?: string
-  // deprecate icon prop
+  /** @deprecated Use `leadingIcon` or `trailingIcon` prop instead */
   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' | 'size'
+  'block' | 'contrast' | 'disabled' | 'sx' | 'width' | 'maxWidth' | 'minWidth' | 'variant' | 'size'
 >
 
 // Note: using ComponentProps instead of ComponentPropsWithoutRef here would cause a type issue where `css` is a required prop.
@@ -29,9 +29,8 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputInternalProps>(
       className,
       contrast,
       disabled,
-      status,
+      validationStatus,
       sx: sxProp,
-      theme,
       size: sizeProp,
       // start deprecated props
       width: widthProp,
@@ -50,12 +49,11 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputInternalProps>(
       <TextInputWrapper
         block={block}
         className={wrapperClasses}
-        status={status}
+        validationStatus={validationStatus}
         contrast={contrast}
         disabled={disabled}
         hasIcon={!!IconComponent || !!(LeadingIconComponent || TrailingIconComponent)}
         sx={sxProp}
-        theme={theme}
         size={sizeProp}
         width={widthProp}
         minWidth={minWidthProp}

src/_TextInputWrapper.tsx

@@ -43,7 +43,8 @@ type StyledWrapperProps = {
   hasIcon?: boolean
   block?: boolean
   contrast?: boolean
-  status?: 'error' | 'warning'
+  validationStatus?: 'error' | 'warning'
+  /** @deprecated Use `size` prop instead */
   variant?: 'small' | 'large'
   size?: 'small' | 'large'
 } & WidthProps &
@@ -108,7 +109,7 @@ const TextInputWrapper = styled.span<StyledWrapperProps>`
     `}
 
   ${props =>
-    props.status === 'error' &&
+    props.validationStatus === 'error' &&
     css`
       border-color: ${get('colors.danger.emphasis')};
       &:focus-within {
@@ -118,7 +119,7 @@ const TextInputWrapper = styled.span<StyledWrapperProps>`
     `}
 
   ${props =>
-    props.status === 'warning' &&
+    props.validationStatus === 'warning' &&
     css`
       border-color: ${get('colors.attention.emphasis')};
       &:focus-within {

src/stories/TextInput.stories.tsx

@@ -44,8 +44,8 @@ export default {
       options: ['small', 'medium', 'large'],
       control: {type: 'radio'}
     },
-    status: {
-      name: 'Status',
+    validationStatus: {
+      name: 'Validation Status',
       options: ['warning', 'error'],
       control: {type: 'radio'}
     },
@@ -173,7 +173,14 @@ export const TextInputInWarningState = (args: TextInputProps) => {
     <form>
       <Label htmlFor={inputId}>Password</Label>
       <br />
-      <TextInput type="password" id={inputId} value={value} status="warning" onChange={handleChange} {...args} />
+      <TextInput
+        type="password"
+        id={inputId}
+        value={value}
+        validationStatus="warning"
+        onChange={handleChange}
+        {...args}
+      />
     </form>
   )
 }