chore: Audit style props in AI package by snowystinger · Pull Request #10218 · adobe/react-spectrum

snowystinger · 2026-06-17T04:57:04Z

Closes

Mostly matched everything to PromptField, it seemed the most correct.

✅ Pull Request Checklist:

Included link to corresponding React Spectrum GitHub Issue.
Added/updated unit tests and storybook for this change (for new code or code which already has tests).
Filled out test instructions.
Updated documentation (if it already exists for this component).
Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

🧢 Your Project:

rspbot · 2026-06-17T05:02:33Z

Build successful! 🎉

devongovett · 2026-06-17T17:52:13Z

Sorry I wasn't clear. We should:

Not include UNSAFE for now (except for wrappers around existing S2 components).
Exclude className/style.
The styles prop should be StyleString for AI-specific components. For simple wrappers around S2 components, just accept whatever the S2 component accepted.

Going for easiest path here, not going out of our way to restrict and also not going out of our way to allow.

also updated chat to be more consistent and other audit todos

rspbot · 2026-06-17T18:16:38Z

Build successful! 🎉

rspbot · 2026-06-17T18:24:59Z

Build successful! 🎉

rspbot · 2026-06-17T18:32:50Z

Build successful! 🎉

rspbot · 2026-06-17T18:32:53Z

## API Changes

@react-spectrum/ai

/@react-spectrum/ai:Attachment

 Attachment {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children: ReactNode | (AttachmentRenderProps) => ReactNode
   density?: 'compact' | 'regular' | 'spacious' = 'regular'
   download?: boolean | string
   href?: Href
   hrefLang?: string
   id?: Key
   isDisabled?: boolean
   onAction?: () => void
   onPress?: (PressEvent) => void
   onPressChange?: (boolean) => void
   onPressEnd?: (PressEvent) => void
   onPressStart?: (PressEvent) => void
   onPressUp?: (PressEvent) => void
   ping?: string
   referrerPolicy?: HTMLAttributeReferrerPolicy
   rel?: string
+  render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, TagRenderProps>
   routerOptions?: RouterOptions
   size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
   styles?: StyleString
   target?: HTMLAttributeAnchorTarget
   uploadProgress?: number
   value?: T
   variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet' = 'primary'
 }

/@react-spectrum/ai:MessageFeedback

 MessageFeedback {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   defaultValue?: MessageFeedbackValue
   id?: string
   isDisabled?: boolean
   onChange?: (MessageFeedbackValue) => void
   slot?: string | null
-  styles?: StyleString
+  styles?: StylesPropWithHeight
   thumbDownLabel?: string
   thumbUpLabel?: string
   value?: MessageFeedbackValue
 }

/@react-spectrum/ai:MessageSource

 MessageSource {
   children: ReactNode
   defaultExpanded?: boolean
   density?: 'compact' | 'regular' | 'spacious' = 'regular'
   id?: Key
   isDisabled?: boolean
   isExpanded?: boolean
   label: string
   onExpandedChange?: (boolean) => void
   size?: 'S' | 'M' | 'L' | 'XL' = 'M'
   slot?: string | null
-  styles?: StyleString
+  styles?: StylesProp
 }

/@react-spectrum/ai:SourceList

 SourceList {
+  UNSAFE_className?: UnsafeClassName
+  UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children: React.ReactNode
   id?: string
   label?: ReactNode
   labelElementType?: ElementType = 'label'
   role?: 'group' | 'region' = 'group'
-  styles?: StyleString
 }

/@react-spectrum/ai:SourceListItem

 SourceListItem {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children: React.ReactNode
   download?: boolean | string
   href?: Href
   hrefLang?: string
   id?: string
   isDisabled?: boolean
   onBlur?: (FocusEvent<Target>) => void
   onClick?: (MouseEvent<FocusableElement>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onPress?: (PressEvent) => void
   onPressChange?: (boolean) => void
   onPressEnd?: (PressEvent) => void
   onPressStart?: (PressEvent) => void
   onPressUp?: (PressEvent) => void
   ping?: string
   referrerPolicy?: HTMLAttributeReferrerPolicy
   rel?: string
-  render?: (DetailedHTMLProps<LinkWithRequiredHref, HTMLAnchorElement> | React.JSX.IntrinsicElements[keyof React.JSX.IntrinsicElements], LinkRenderProps) => ReactElement
   routerOptions?: RouterOptions
   slot?: string | null
   styles?: StyleString
   target?: HTMLAttributeAnchorTarget

/@react-spectrum/ai:MessageSuggestion

 MessageSuggestion {
   aria-controls?: string
   aria-current?: boolean | 'true' | 'false' | 'page' | 'step' | 'location' | 'date' | 'time'
   aria-describedby?: string
   aria-details?: string
   aria-disabled?: boolean | 'true' | 'false'
   aria-expanded?: boolean | 'true' | 'false'
   aria-haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
   aria-label?: string
   aria-labelledby?: string
   aria-pressed?: boolean | 'true' | 'false' | 'mixed'
   autoFocus?: boolean
   children: ReactNode
   excludeFromTabOrder?: boolean
   form?: string
   formAction?: ButtonHTMLAttributes<HTMLButtonElement>['formAction']
   formEncType?: string
   formMethod?: string
   formNoValidate?: boolean
   formTarget?: string
   id?: string
   name?: string
   onBlur?: (FocusEvent<Target>) => void
   onClick?: (MouseEvent<FocusableElement>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onPress?: (PressEvent) => void
   onPressChange?: (boolean) => void
   onPressEnd?: (PressEvent) => void
   onPressStart?: (PressEvent) => void
   onPressUp?: (PressEvent) => void
   preventFocusOnPress?: boolean
-  render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, ButtonRenderProps>
-  size?: 'S' | 'M' | 'L' | 'XL'
+  size?: 'S' | 'M' | 'L' | 'XL' = 'M'
   slot?: string | null
   styles?: StyleString
   type?: 'button' | 'submit' | 'reset' = 'button'
   value?: string

/@react-spectrum/ai:PromptField

 PromptField {
-  UNSAFE_className?: UnsafeClassName
-  UNSAFE_style?: CSSProperties
   acceptedAttachmentTypes?: Array<string>
   children: React.ReactNode
   isGenerating?: boolean
   onAddAttachments?: (Array<PromptFieldAttachment>) => void
   onStop?: () => void
   onSubmit?: (TokenSegmentList, Array<PromptFieldAttachment>) => void
   styles?: StyleString
 }

/@react-spectrum/ai:PromptToken

 PromptToken {
   children: React.ReactNode
   className?: ClassNameOrFunction<TokenRenderProps>
-  render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, TokenRenderProps>
   style?: StyleOrFunction<TokenRenderProps>
 }

/@react-spectrum/ai:Chat

 Chat {
   children?: ReactNode
-  className?: string
-  style?: CSSProperties
+  styles?: StyleString
 }

/@react-spectrum/ai:Thread

 Thread <T extends {}> {
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode | (T) => ReactNode
-  className?: ClassNameOrFunction<GridListRenderProps> = 'react-aria-GridList'
   items?: Iterable<T>
+  styles?: StyleString
 }

/@react-spectrum/ai:ThreadItem

 ThreadItem {
   children?: ChildrenOrFunction<GridListItemRenderProps>
-  className?: ClassNameOrFunction<GridListItemRenderProps> = 'react-aria-GridListItem'
   isStreaming?: boolean
   shouldAnnounceOnMount?: boolean
+  styles?: StyleString
   textValue?: string
 }

/@react-spectrum/ai:AttachmentProps

 AttachmentProps {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children: ReactNode | (AttachmentRenderProps) => ReactNode
   density?: 'compact' | 'regular' | 'spacious' = 'regular'
   download?: boolean | string
   href?: Href
   hrefLang?: string
   id?: Key
   isDisabled?: boolean
   onAction?: () => void
   onPress?: (PressEvent) => void
   onPressChange?: (boolean) => void
   onPressEnd?: (PressEvent) => void
   onPressStart?: (PressEvent) => void
   onPressUp?: (PressEvent) => void
   ping?: string
   referrerPolicy?: HTMLAttributeReferrerPolicy
   rel?: string
+  render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, TagRenderProps>
   routerOptions?: RouterOptions
   size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
   styles?: StyleString
   target?: HTMLAttributeAnchorTarget
   uploadProgress?: number
   value?: T
   variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet' = 'primary'
 }

/@react-spectrum/ai:PromptFieldProps

 PromptFieldProps {
-  UNSAFE_className?: UnsafeClassName
-  UNSAFE_style?: CSSProperties
   acceptedAttachmentTypes?: Array<string>
   children: React.ReactNode
   isGenerating?: boolean
   onAddAttachments?: (Array<PromptFieldAttachment>) => void
   onStop?: () => void
   onSubmit?: (TokenSegmentList, Array<PromptFieldAttachment>) => void
   styles?: StyleString
 }

/@react-spectrum/ai:PromptTokenProps

 PromptTokenProps {
   children: React.ReactNode
   className?: ClassNameOrFunction<TokenRenderProps>
-  render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, TokenRenderProps>
   style?: StyleOrFunction<TokenRenderProps>
 }

/@react-spectrum/ai:MessageFeedbackProps

 MessageFeedbackProps {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   defaultValue?: MessageFeedbackValue
   id?: string
   isDisabled?: boolean
   onChange?: (MessageFeedbackValue) => void
   slot?: string | null
-  styles?: StyleString
+  styles?: StylesPropWithHeight
   thumbDownLabel?: string
   thumbUpLabel?: string
   value?: MessageFeedbackValue
 }

/@react-spectrum/ai:MessageSourceProps

 MessageSourceProps {
   children: ReactNode
   defaultExpanded?: boolean
   density?: 'compact' | 'regular' | 'spacious' = 'regular'
   id?: Key
   isDisabled?: boolean
   isExpanded?: boolean
   label: string
   onExpandedChange?: (boolean) => void
   size?: 'S' | 'M' | 'L' | 'XL' = 'M'
   slot?: string | null
-  styles?: StyleString
+  styles?: StylesProp
 }

/@react-spectrum/ai:SourceListProps

 SourceListProps {
+  UNSAFE_className?: UnsafeClassName
+  UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children: React.ReactNode
   id?: string
   label?: ReactNode
   labelElementType?: ElementType = 'label'
   role?: 'group' | 'region' = 'group'
-  styles?: StyleString
 }

/@react-spectrum/ai:SourceListItemProps

 SourceListItemProps {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children: React.ReactNode
   download?: boolean | string
   href?: Href
   hrefLang?: string
   id?: string
   isDisabled?: boolean
   onBlur?: (FocusEvent<Target>) => void
   onClick?: (MouseEvent<FocusableElement>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onPress?: (PressEvent) => void
   onPressChange?: (boolean) => void
   onPressEnd?: (PressEvent) => void
   onPressStart?: (PressEvent) => void
   onPressUp?: (PressEvent) => void
   ping?: string
   referrerPolicy?: HTMLAttributeReferrerPolicy
   rel?: string
-  render?: (DetailedHTMLProps<LinkWithRequiredHref, HTMLAnchorElement> | React.JSX.IntrinsicElements[keyof React.JSX.IntrinsicElements], LinkRenderProps) => ReactElement
   routerOptions?: RouterOptions
   slot?: string | null
   styles?: StyleString
   target?: HTMLAttributeAnchorTarget

/@react-spectrum/ai:MessageSuggestionProps

 MessageSuggestionProps {
   aria-controls?: string
   aria-current?: boolean | 'true' | 'false' | 'page' | 'step' | 'location' | 'date' | 'time'
   aria-describedby?: string
   aria-details?: string
   aria-disabled?: boolean | 'true' | 'false'
   aria-expanded?: boolean | 'true' | 'false'
   aria-haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
   aria-label?: string
   aria-labelledby?: string
   aria-pressed?: boolean | 'true' | 'false' | 'mixed'
   autoFocus?: boolean
   children: ReactNode
   excludeFromTabOrder?: boolean
   form?: string
   formAction?: ButtonHTMLAttributes<HTMLButtonElement>['formAction']
   formEncType?: string
   formMethod?: string
   formNoValidate?: boolean
   formTarget?: string
   id?: string
   name?: string
   onBlur?: (FocusEvent<Target>) => void
   onClick?: (MouseEvent<FocusableElement>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onPress?: (PressEvent) => void
   onPressChange?: (boolean) => void
   onPressEnd?: (PressEvent) => void
   onPressStart?: (PressEvent) => void
   onPressUp?: (PressEvent) => void
   preventFocusOnPress?: boolean
-  render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, ButtonRenderProps>
-  size?: 'S' | 'M' | 'L' | 'XL'
+  size?: 'S' | 'M' | 'L' | 'XL' = 'M'
   slot?: string | null
   styles?: StyleString
   type?: 'button' | 'submit' | 'reset' = 'button'
   value?: string

/@react-spectrum/ai:ChatProps

 ChatProps {
   children?: ReactNode
-  className?: string
-  style?: CSSProperties
+  styles?: StyleString
 }

/@react-spectrum/ai:ThreadProps

 ThreadProps <T extends {}> {
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode | (T) => ReactNode
-  className?: ClassNameOrFunction<GridListRenderProps> = 'react-aria-GridList'
   items?: Iterable<T>
+  styles?: StyleString
 }

/@react-spectrum/ai:ThreadItemProps

 ThreadItemProps {
   children?: ChildrenOrFunction<GridListItemRenderProps>
-  className?: ClassNameOrFunction<GridListItemRenderProps> = 'react-aria-GridListItem'
   isStreaming?: boolean
   shouldAnnounceOnMount?: boolean
+  styles?: StyleString
   textValue?: string
 }

/@react-spectrum/ai:BasicHorizontalCard

+BasicHorizontalCard {
+  children: ReactNode | (HorizontalCardRenderProps) => ReactNode
+  density?: 'compact' | 'regular' | 'spacious' = 'regular'
+  download?: boolean | string
+  href?: Href
+  hrefLang?: string
+  id?: Key
+  isDisabled?: boolean
+  onAction?: () => void
+  onPress?: (PressEvent) => void
+  onPressChange?: (boolean) => void
+  onPressEnd?: (PressEvent) => void
+  onPressStart?: (PressEvent) => void
+  onPressUp?: (PressEvent) => void
+  ping?: string
+  referrerPolicy?: HTMLAttributeReferrerPolicy
+  rel?: string
+  routerOptions?: RouterOptions
+  size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
+  styles?: StyleString
+  target?: HTMLAttributeAnchorTarget
+  textValue?: string
+  value?: T
+  variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet' = 'primary'
+}

/@react-spectrum/ai:CardPreview

+CardPreview {
+  children: ReactNode
+  id?: string
+  styles?: StyleString
+}

/@react-spectrum/ai:HorizontalCard

+HorizontalCard {
+  children: ReactNode | (HorizontalCardRenderProps) => ReactNode
+  density?: 'compact' | 'regular' | 'spacious' = 'regular'
+  download?: boolean | string
+  href?: Href
+  hrefLang?: string
+  id?: Key
+  isDisabled?: boolean
+  onAction?: () => void
+  onPress?: (PressEvent) => void
+  onPressChange?: (boolean) => void
+  onPressEnd?: (PressEvent) => void
+  onPressStart?: (PressEvent) => void
+  onPressUp?: (PressEvent) => void
+  ping?: string
+  referrerPolicy?: HTMLAttributeReferrerPolicy
+  rel?: string
+  routerOptions?: RouterOptions
+  size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
+  styles?: StyleString
+  target?: HTMLAttributeAnchorTarget
+  textValue?: string
+  value?: T
+  variant?: 'primary' | 'secondary' | 'tertiary' = 'primary'
+}

/@react-spectrum/ai:HorizontalCardProps

+HorizontalCardProps {
+  children: ReactNode | (HorizontalCardRenderProps) => ReactNode
+  density?: 'compact' | 'regular' | 'spacious' = 'regular'
+  download?: boolean | string
+  href?: Href
+  hrefLang?: string
+  id?: Key
+  isDisabled?: boolean
+  onAction?: () => void
+  onPress?: (PressEvent) => void
+  onPressChange?: (boolean) => void
+  onPressEnd?: (PressEvent) => void
+  onPressStart?: (PressEvent) => void
+  onPressUp?: (PressEvent) => void
+  ping?: string
+  referrerPolicy?: HTMLAttributeReferrerPolicy
+  rel?: string
+  routerOptions?: RouterOptions
+  size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
+  styles?: StyleString
+  target?: HTMLAttributeAnchorTarget
+  textValue?: string
+  value?: T
+  variant?: 'primary' | 'secondary' | 'tertiary' = 'primary'
+}

/@react-spectrum/ai:BasicCardProps

+BasicCardProps {
+  children: ReactNode | (HorizontalCardRenderProps) => ReactNode
+  density?: 'compact' | 'regular' | 'spacious' = 'regular'
+  download?: boolean | string
+  href?: Href
+  hrefLang?: string
+  id?: Key
+  isDisabled?: boolean
+  onAction?: () => void
+  onPress?: (PressEvent) => void
+  onPressChange?: (boolean) => void
+  onPressEnd?: (PressEvent) => void
+  onPressStart?: (PressEvent) => void
+  onPressUp?: (PressEvent) => void
+  ping?: string
+  referrerPolicy?: HTMLAttributeReferrerPolicy
+  rel?: string
+  routerOptions?: RouterOptions
+  size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
+  styles?: StyleString
+  target?: HTMLAttributeAnchorTarget
+  textValue?: string
+  value?: T
+  variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet' = 'primary'
+}

snowystinger added 2 commits June 17, 2026 14:52

chore: Audit style props in AI package

ecf7d25

more cleanup

484879e

get rid of unsafe and simplify to just use styleString

4304940

also updated chat to be more consistent and other audit todos

add missing style props jsdoc

57a7e8d

match toggleButtonGroup style prop type

4ac78bb

devongovett approved these changes Jun 17, 2026

View reviewed changes

reidbarber approved these changes Jun 17, 2026

View reviewed changes

LFDanLu added this pull request to the merge queue Jun 17, 2026

Merged via the queue into main with commit b8b0688 Jun 17, 2026
30 checks passed

LFDanLu deleted the audit-props-for-ai-package branch June 17, 2026 19:54

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: Audit style props in AI package#10218

chore: Audit style props in AI package#10218
LFDanLu merged 5 commits into
mainfrom
audit-props-for-ai-package

snowystinger commented Jun 17, 2026

Uh oh!

rspbot commented Jun 17, 2026

Uh oh!

devongovett commented Jun 17, 2026 •

edited

Loading

Uh oh!

rspbot commented Jun 17, 2026

Uh oh!

rspbot commented Jun 17, 2026

Uh oh!

rspbot commented Jun 17, 2026

Uh oh!

rspbot commented Jun 17, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Conversation

snowystinger commented Jun 17, 2026

✅ Pull Request Checklist:

📝 Test Instructions:

🧢 Your Project:

Uh oh!

rspbot commented Jun 17, 2026

Uh oh!

devongovett commented Jun 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

rspbot commented Jun 17, 2026

Uh oh!

rspbot commented Jun 17, 2026

Uh oh!

rspbot commented Jun 17, 2026

Uh oh!

rspbot commented Jun 17, 2026

@react-spectrum/ai

/@react-spectrum/ai:Attachment

/@react-spectrum/ai:MessageFeedback

/@react-spectrum/ai:MessageSource

/@react-spectrum/ai:SourceList

/@react-spectrum/ai:SourceListItem

/@react-spectrum/ai:MessageSuggestion

/@react-spectrum/ai:PromptField

/@react-spectrum/ai:PromptToken

/@react-spectrum/ai:Chat

/@react-spectrum/ai:Thread

/@react-spectrum/ai:ThreadItem

/@react-spectrum/ai:AttachmentProps

/@react-spectrum/ai:PromptFieldProps

/@react-spectrum/ai:PromptTokenProps

/@react-spectrum/ai:MessageFeedbackProps

/@react-spectrum/ai:MessageSourceProps

/@react-spectrum/ai:SourceListProps

/@react-spectrum/ai:SourceListItemProps

/@react-spectrum/ai:MessageSuggestionProps

/@react-spectrum/ai:ChatProps

/@react-spectrum/ai:ThreadProps

/@react-spectrum/ai:ThreadItemProps

/@react-spectrum/ai:BasicHorizontalCard

/@react-spectrum/ai:CardPreview

/@react-spectrum/ai:HorizontalCard

/@react-spectrum/ai:HorizontalCardProps

/@react-spectrum/ai:BasicCardProps

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

devongovett commented Jun 17, 2026 •

edited

Loading