diff --git a/docs/content/TextInputWithTokens.mdx b/docs/content/TextInputWithTokens.mdx index caa3b07f647..3c16f506bf1 100644 --- a/docs/content/TextInputWithTokens.mdx +++ b/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 ( + <> + + Basic example tokens + + + + ) +} + +render(BasicExample) +``` + ## Props @@ -225,7 +256,7 @@ render(MaxHeightExample) defaultValue="false" description="Whether the remove buttons should be rendered in the tokens" /> - + ( disabled={disabled} aria-required={required} aria-disabled={disabled} + aria-invalid={validationStatus === 'error' ? 'true' : 'false'} {...rest} > {placeholder && ( diff --git a/src/TextInputWithTokens.tsx b/src/TextInputWithTokens.tsx index c63f538e54b..8ac994a4c2c 100644 --- a/src/TextInputWithTokens.tsx +++ b/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 & { @@ -240,6 +235,12 @@ function TextInputWithTokensInnerComponent = { + small: 'small', + medium: 'small', + large: 'medium', + extralarge: 'medium' + } return ( diff --git a/src/_TextInputWrapper.tsx b/src/_TextInputWrapper.tsx index f5bedf4c2a6..5b52ae93496 100644 --- a/src/_TextInputWrapper.tsx +++ b/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' diff --git a/src/stories/TextInputWithTokens.stories.tsx b/src/stories/TextInputWithTokens.stories.tsx index c04d7fcb1b8..85aef4618a9 100644 --- a/src/stories/TextInputWithTokens.stories.tsx +++ b/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: {