addresses PR feedback

docs/content/TextInputWithTokens.mdx

@@ -185,6 +185,37 @@ const MaxHeightExample = () => {
 render(MaxHeightExample)
 ```
 
+### With an error validation status
+
+```javascript live noinline
+const BasicExample = () => {
+  const [tokens, setTokens] = React.useState([
+    {text: 'zero', id: 0},
+    {text: 'one', id: 1},
+    {text: 'two', id: 2}
+  ])
+  const onTokenRemove = tokenId => {
+    setTokens(tokens.filter(token => token.id !== tokenId))
+  }
+
+  return (
+    <>
+      <Box as="label" display="block" htmlFor="inputWithTokens-basic">
+        Basic example tokens
+      </Box>
+      <TextInputWithTokens
+        tokens={tokens}
+        onTokenRemove={onTokenRemove}
+        id="inputWithTokens-basic"
+        validationStatus="error"
+      />
+    </>
+  )
+}
+
+render(BasicExample)
+```
+
 ## Props
 
 <PropsTable>
@@ -225,7 +256,7 @@ render(MaxHeightExample)
     defaultValue="false"
     description="Whether the remove buttons should be rendered in the tokens"
   />
-  <PropsTableRow name="validationStatus" type="'warning' | 'error' | 'success'" description="Style the input to match the status" />
+  <PropsTableRow name="validationStatus" type="'warning' | 'error'" description="Style the input to match the status" />
   <PropsTable.Row
     name="visibleTokenCount"
     type="number"

src/Select.tsx

@@ -55,6 +55,7 @@ const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
         disabled={disabled}
         aria-required={required}
         aria-disabled={disabled}
+        aria-invalid={validationStatus === 'error' ? 'true' : 'false'}
         {...rest}
       >
         {placeholder && (

src/TextInputWithTokens.tsx

@@ -9,7 +9,7 @@ import {TokenSizeKeys} from './Token/TokenBase'
 import {TextInputProps} from './TextInput'
 import {useProvidedRefOrCreate} from './hooks'
 import UnstyledTextInput from './_UnstyledTextInput'
-import TextInputWrapper, {StyledWrapperProps, textInputHorizPadding} from './_TextInputWrapper'
+import TextInputWrapper, {textInputHorizPadding, TextInputSizes} from './_TextInputWrapper'
 import Box from './Box'
 import Text from './Text'
 import {isFocusable} from '@primer/behaviors/utils'
@@ -42,13 +42,9 @@ type TextInputWithTokensInternalProps<TokenComponentType extends AnyReactCompone
    */
   preventTokenWrapping?: boolean
   /**
-   * The size of the tokens
+   * The size of the tokens and text input
    */
   size?: TokenSizeKeys
-  /**
-   * The size of the text input
-   */
-  inputSize?: StyledWrapperProps['size']
   /**
    * Whether the remove buttons should be rendered in the tokens
    */
@@ -87,8 +83,7 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
     minWidth: minWidthProp,
     maxWidth: maxWidthProp,
     validationStatus,
-    variant: variantProp, // deprecated. use `inputSize` instead
-    inputSize,
+    variant: variantProp, // deprecated. use `size` instead
     visibleTokenCount,
     ...rest
   }: TextInputWithTokensInternalProps<TokenComponentType> & {
@@ -240,6 +235,12 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
   }
 
   const visibleTokens = tokensAreTruncated ? tokens.slice(0, visibleTokenCount) : tokens
+  const inputSizeMap: Record<TokenSizeKeys, TextInputSizes> = {
+    small: 'small',
+    medium: 'small',
+    large: 'medium',
+    extralarge: 'medium'
+  }
 
   return (
     <TextInputWrapper
@@ -252,7 +253,7 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
       width={widthProp}
       minWidth={minWidthProp}
       maxWidth={maxWidthProp}
-      size={inputSize}
+      size={size && inputSizeMap[size]}
       validationStatus={validationStatus}
       variant={variantProp} // deprecated. use `size` prop instead
       onClick={focusInput}
@@ -314,6 +315,7 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
             onKeyDown={handleInputKeyDown}
             type="text"
             sx={{height: '100%'}}
+            aria-invalid={validationStatus === 'error' ? 'true' : 'false'}
             {...inputPropsRest}
           />
         </Box>

src/_TextInputWrapper.tsx

@@ -4,6 +4,8 @@ import {get} from './constants'
 import sx, {SxProp} from './sx'
 import {FormValidationStatus} from './utils/types/FormValidationStatus'
 
+export type TextInputSizes = 'small' | 'medium' | 'large'
+
 const sizeDeprecatedVariants = variant({
   variants: {
     small: {
@@ -53,8 +55,8 @@ export type StyledWrapperProps = {
   hasLeadingVisual?: boolean
   hasTrailingVisual?: boolean
   /** @deprecated Use `size` prop instead */
-  variant?: 'small' | 'large'
-  size?: 'small' | 'large'
+  variant?: TextInputSizes
+  size?: TextInputSizes
 } & StyledBaseWrapperProps
 
 const textInputBasePadding = '12px'

src/stories/TextInputWithTokens.stories.tsx

@@ -54,13 +54,6 @@ export default {
         type: 'radio'
       }
     },
-    inputSize: {
-      defaultValue: 'small',
-      options: ['small', 'large'],
-      control: {
-        type: 'radio'
-      }
-    },
     hideTokenRemoveButtons: {
       defaultValue: false,
       control: {