chore: Update icon sizes with new design intent by snowystinger · Pull Request #10414 · adobe/react-spectrum

snowystinger · 2026-08-03T06:50:10Z

Closes

Updates from design. Testing for chromatic and checking breadth of changes. The intent of design was to have the icon match the line height of the text. This works perfectly with the widely available lh unit. I had to make a few small changes to Avatar to also support it, but overall it simplifies our code.

https://www.chromatic.com/build?appId=5f0dd5ad2b5fc10022a2e320&number=1285

The question we'll need to answer, is this breaking, from a design point of view. It's not breaking any APIs since I'm not changing how fontRelative works. I did add to our existing API for Avatar, but that should be non-breaking. The question about breaking is, does anyone use fontRelative(20) already and will it be noticeable next to our components.

✅ 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-08-11T06:12:00Z

Build successful! 🎉

rspbot · 2026-08-12T01:28:00Z

Build successful! 🎉

rspbot · 2026-08-14T06:15:37Z

Build successful! 🎉

rspbot · 2026-08-14T06:15:39Z

## API Changes

react-aria-components

/react-aria-components:Checkbox

 Checkbox {
   aria-controls?: string
   aria-describedby?: string
   aria-details?: string
   aria-errormessage?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children?: ChildrenOrFunction<CheckboxRenderProps>
   className?: ClassNameOrFunction<CheckboxRenderProps> = 'react-aria-Checkbox'
   defaultSelected?: boolean
   excludeFromTabOrder?: boolean
   form?: string
   id?: string
-  inputRef?: Ref<HTMLInputElement | null>
+  inputRef?: RefObject<HTMLInputElement | null>
   isDisabled?: boolean
   isIndeterminate?: boolean
   isInvalid?: boolean
   isReadOnly?: boolean
   isSelected?: boolean
   name?: string
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (boolean) => 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
   render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, CheckboxRenderProps>
   slot?: string | null
   style?: StyleOrFunction<CheckboxRenderProps>
   validate?: (boolean) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
   value?: string
 }

/react-aria-components:CheckboxField

 CheckboxField {
   aria-controls?: string
   aria-describedby?: string
   aria-details?: string
   aria-errormessage?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children?: ChildrenOrFunction<CheckboxFieldRenderProps>
   className?: ClassNameOrFunction<CheckboxFieldRenderProps> = 'react-aria-CheckboxField'
   defaultSelected?: boolean
   excludeFromTabOrder?: boolean
   form?: string
   id?: string
-  inputRef?: Ref<HTMLInputElement | null>
+  inputRef?: RefObject<HTMLInputElement | null>
   isDisabled?: boolean
   isIndeterminate?: boolean
   isInvalid?: boolean
   isReadOnly?: boolean
   isSelected?: boolean
   name?: string
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (boolean) => void
   onClick?: (MouseEvent<FocusableElement>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onPress?: (PressEvent) => void
   onPressChange?: (boolean) => void
   onPressEnd?: (PressEvent) => void
   onPressStart?: (PressEvent) => void
   onPressUp?: (PressEvent) => void
   render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, CheckboxFieldRenderProps>
   slot?: string | null
   style?: StyleOrFunction<CheckboxFieldRenderProps>
   validate?: (boolean) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
   value?: string
 }

/react-aria-components:Radio

 Radio {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children?: ChildrenOrFunction<RadioRenderProps>
   className?: ClassNameOrFunction<RadioRenderProps> = 'react-aria-Radio'
   id?: string
-  inputRef?: Ref<HTMLInputElement | null>
+  inputRef?: RefObject<HTMLInputElement | null>
   isDisabled?: boolean
   onBlur?: (FocusEvent<Target>) => void
   onClick?: (MouseEvent<FocusableElement>) => void
   onFocus?: (FocusEvent<Target>) => 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
   render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, RadioRenderProps>
   slot?: string | null
   style?: StyleOrFunction<RadioRenderProps>
   value: string
 }

/react-aria-components:RadioField

 RadioField {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children?: ChildrenOrFunction<RadioFieldRenderProps>
   className?: ClassNameOrFunction<RadioFieldRenderProps> = 'react-aria-RadioField'
   id?: string
-  inputRef?: Ref<HTMLInputElement | null>
+  inputRef?: RefObject<HTMLInputElement | null>
   isDisabled?: boolean
   onBlur?: (FocusEvent<Target>) => void
   onClick?: (MouseEvent<FocusableElement>) => void
   onFocus?: (FocusEvent<Target>) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onPress?: (PressEvent) => void
   onPressChange?: (boolean) => void
   onPressEnd?: (PressEvent) => void
   onPressStart?: (PressEvent) => void
   onPressUp?: (PressEvent) => void
   render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, RadioFieldRenderProps>
   slot?: string | null
   style?: StyleOrFunction<RadioFieldRenderProps>
   value: string
 }

/react-aria-components:Switch

 Switch {
   aria-controls?: string
   aria-describedby?: string
   aria-details?: string
   aria-errormessage?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children?: ChildrenOrFunction<SwitchRenderProps>
   className?: ClassNameOrFunction<SwitchRenderProps> = 'react-aria-Switch'
   defaultSelected?: boolean
   excludeFromTabOrder?: boolean
   form?: string
   id?: string
-  inputRef?: Ref<HTMLInputElement | null>
+  inputRef?: RefObject<HTMLInputElement | null>
   isDisabled?: boolean
   isReadOnly?: boolean
   isSelected?: boolean
   name?: string
   onChange?: (boolean) => 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
   render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, SwitchRenderProps>
   slot?: string | null
   style?: StyleOrFunction<SwitchRenderProps>
   value?: string
 }

/react-aria-components:SwitchField

 SwitchField {
   aria-controls?: string
   aria-describedby?: string
   aria-details?: string
   aria-errormessage?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children?: ChildrenOrFunction<SwitchFieldRenderProps>
   className?: ClassNameOrFunction<SwitchFieldRenderProps> = 'react-aria-SwitchField'
   defaultSelected?: boolean
   excludeFromTabOrder?: boolean
   form?: string
   id?: string
-  inputRef?: Ref<HTMLInputElement | null>
+  inputRef?: RefObject<HTMLInputElement | null>
   isDisabled?: boolean
   isInvalid?: boolean
   isReadOnly?: boolean
   isRequired?: boolean
   name?: string
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (boolean) => void
   onClick?: (MouseEvent<FocusableElement>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onPress?: (PressEvent) => void
   onPressChange?: (boolean) => void
   onPressEnd?: (PressEvent) => void
   onPressStart?: (PressEvent) => void
   onPressUp?: (PressEvent) => void
   render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, SwitchFieldRenderProps>
   slot?: string | null
   style?: StyleOrFunction<SwitchFieldRenderProps>
   validate?: (boolean) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
   value?: string
 }

/react-aria-components:TokenFieldValue

 TokenFieldValue <T = any> {
   Direction: any
-  SelectedRange: any
   caretPosition: Position
   constructor: (readonly Array<TokenFieldSegment<T>>, TokenFieldValueOptions) => void
   delete: (Position, Intl.Segmenter, any, any) => this
   deleteLine: (Position, any, any) => this
   endCoalescing: () => void
   findBoundaryWithSegmenter: (Position, Intl.Segmenter, any) => Position | null
   findLineBoundary: (Position, any) => Position | null
   findText: (Position, any, string | RegExp) => Position | null
   redo: () => this
   replaceRange: (Position, Position, string, any) => this
   replaceRangeWithSegments: (Position, Position, Array<TokenFieldSegment<T>>, any) => this
   segments: readonly Array<TokenFieldSegment<T>>
-  selectedRange: SelectedRange
   slice: (Position, Position) => this
   toString: () => string
   undo: () => this
   withCaretPosition: (Position) => this
-  withSelectedRange: (SelectedRange) => this
 }

/react-aria-components:CheckboxProps

 CheckboxProps {
   aria-controls?: string
   aria-describedby?: string
   aria-details?: string
   aria-errormessage?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children?: ChildrenOrFunction<CheckboxRenderProps>
   className?: ClassNameOrFunction<CheckboxRenderProps> = 'react-aria-Checkbox'
   defaultSelected?: boolean
   excludeFromTabOrder?: boolean
   form?: string
   id?: string
-  inputRef?: Ref<HTMLInputElement | null>
+  inputRef?: RefObject<HTMLInputElement | null>
   isDisabled?: boolean
   isIndeterminate?: boolean
   isInvalid?: boolean
   isReadOnly?: boolean
   isSelected?: boolean
   name?: string
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (boolean) => 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
   render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, CheckboxRenderProps>
   slot?: string | null
   style?: StyleOrFunction<CheckboxRenderProps>
   validate?: (boolean) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
   value?: string
 }

/react-aria-components:CheckboxFieldProps

 CheckboxFieldProps {
   aria-controls?: string
   aria-describedby?: string
   aria-details?: string
   aria-errormessage?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children?: ChildrenOrFunction<CheckboxFieldRenderProps>
   className?: ClassNameOrFunction<CheckboxFieldRenderProps> = 'react-aria-CheckboxField'
   defaultSelected?: boolean
   excludeFromTabOrder?: boolean
   form?: string
   id?: string
-  inputRef?: Ref<HTMLInputElement | null>
+  inputRef?: RefObject<HTMLInputElement | null>
   isDisabled?: boolean
   isIndeterminate?: boolean
   isInvalid?: boolean
   isReadOnly?: boolean
   isSelected?: boolean
   name?: string
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (boolean) => void
   onClick?: (MouseEvent<FocusableElement>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onPress?: (PressEvent) => void
   onPressChange?: (boolean) => void
   onPressEnd?: (PressEvent) => void
   onPressStart?: (PressEvent) => void
   onPressUp?: (PressEvent) => void
   render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, CheckboxFieldRenderProps>
   slot?: string | null
   style?: StyleOrFunction<CheckboxFieldRenderProps>
   validate?: (boolean) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
   value?: string
 }

/react-aria-components:RadioProps

 RadioProps {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children?: ChildrenOrFunction<RadioRenderProps>
   className?: ClassNameOrFunction<RadioRenderProps> = 'react-aria-Radio'
   id?: string
-  inputRef?: Ref<HTMLInputElement | null>
+  inputRef?: RefObject<HTMLInputElement | null>
   isDisabled?: boolean
   onBlur?: (FocusEvent<Target>) => void
   onClick?: (MouseEvent<FocusableElement>) => void
   onFocus?: (FocusEvent<Target>) => 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
   render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, RadioRenderProps>
   slot?: string | null
   style?: StyleOrFunction<RadioRenderProps>
   value: string
 }

/react-aria-components:RadioFieldProps

 RadioFieldProps {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children?: ChildrenOrFunction<RadioFieldRenderProps>
   className?: ClassNameOrFunction<RadioFieldRenderProps> = 'react-aria-RadioField'
   id?: string
-  inputRef?: Ref<HTMLInputElement | null>
+  inputRef?: RefObject<HTMLInputElement | null>
   isDisabled?: boolean
   onBlur?: (FocusEvent<Target>) => void
   onClick?: (MouseEvent<FocusableElement>) => void
   onFocus?: (FocusEvent<Target>) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onPress?: (PressEvent) => void
   onPressChange?: (boolean) => void
   onPressEnd?: (PressEvent) => void
   onPressStart?: (PressEvent) => void
   onPressUp?: (PressEvent) => void
   render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, RadioFieldRenderProps>
   slot?: string | null
   style?: StyleOrFunction<RadioFieldRenderProps>
   value: string
 }

/react-aria-components:SwitchProps

 SwitchProps {
   aria-controls?: string
   aria-describedby?: string
   aria-details?: string
   aria-errormessage?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children?: ChildrenOrFunction<SwitchRenderProps>
   className?: ClassNameOrFunction<SwitchRenderProps> = 'react-aria-Switch'
   defaultSelected?: boolean
   excludeFromTabOrder?: boolean
   form?: string
   id?: string
-  inputRef?: Ref<HTMLInputElement | null>
+  inputRef?: RefObject<HTMLInputElement | null>
   isDisabled?: boolean
   isReadOnly?: boolean
   isSelected?: boolean
   name?: string
   onChange?: (boolean) => 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
   render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, SwitchRenderProps>
   slot?: string | null
   style?: StyleOrFunction<SwitchRenderProps>
   value?: string
 }

/react-aria-components:SwitchFieldProps

 SwitchFieldProps {
   aria-controls?: string
   aria-describedby?: string
   aria-details?: string
   aria-errormessage?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children?: ChildrenOrFunction<SwitchFieldRenderProps>
   className?: ClassNameOrFunction<SwitchFieldRenderProps> = 'react-aria-SwitchField'
   defaultSelected?: boolean
   excludeFromTabOrder?: boolean
   form?: string
   id?: string
-  inputRef?: Ref<HTMLInputElement | null>
+  inputRef?: RefObject<HTMLInputElement | null>
   isDisabled?: boolean
   isInvalid?: boolean
   isReadOnly?: boolean
   isRequired?: boolean
   name?: string
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (boolean) => void
   onClick?: (MouseEvent<FocusableElement>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onPress?: (PressEvent) => void
   onPressChange?: (boolean) => void
   onPressEnd?: (PressEvent) => void
   onPressStart?: (PressEvent) => void
   onPressUp?: (PressEvent) => void
   render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, SwitchFieldRenderProps>
   slot?: string | null
   style?: StyleOrFunction<SwitchFieldRenderProps>
   validate?: (boolean) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
   value?: string
 }

@react-spectrum/ai

/@react-spectrum/ai:PromptFieldValue

 PromptFieldValue {
   Direction: any
-  SelectedRange: any
   caretPosition: Position
   constructor: (readonly Array<TokenFieldSegment<T>>, TokenFieldValueOptions) => void
   delete: (Position, Intl.Segmenter, any, any) => this
   deleteLine: (Position, any, any) => this
   endCoalescing: () => void
   findBoundaryWithSegmenter: (Position, Intl.Segmenter, any) => Position | null
   findLineBoundary: (Position, any) => Position | null
   findText: (Position, any, string | RegExp) => Position | null
   redo: () => this
   replaceRange: (Position, Position, string, any) => this
-  replaceRangeWithSegments: (Position, Position, Array<TokenFieldSegment>, any) => this
+  replaceRangeWithSegments: (Position, Position, Array<TokenFieldSegment<T>>, any) => this
   segments: readonly Array<TokenFieldSegment<T>>
-  selectedRange: SelectedRange
   slice: (Position, Position) => this
   toString: () => string
   tokenize: (string) => Array<TokenFieldSegment>
   undo: () => this
   withCaretPosition: (Position) => this
-  withSelectedRange: (SelectedRange) => this
 }

/@react-spectrum/ai:PromptField

 PromptField {
   acceptedAttachmentTypes?: Array<string>
   attachments?: Array<PromptFieldAttachment>
   brandColor?: string
   children: React.ReactNode
   defaultAttachments?: Array<PromptFieldAttachment>
-  defaultValue?: PromptFieldValue
+  defaultValue?: TokenFieldValue
   isGenerating?: boolean
   onAddAttachments?: (Array<PromptFieldAttachment>) => void
   onAttachmentsChange?: (Array<PromptFieldAttachment>) => void
-  onChange?: (PromptFieldValue) => void
+  onChange?: (TokenFieldValue) => void
   onRemoveAttachments?: (Array<PromptFieldAttachment>) => void
   onStop?: () => void
   onSubmit?: (TokenFieldValue, Array<PromptFieldAttachment>) => void
   styles?: StyleString
-  value?: PromptFieldValue
+  value?: TokenFieldValue
   variant?: 'balanced' | 'prominent' | 'subtle'
 }

/@react-spectrum/ai:PromptTokenField

 PromptTokenField {
-  children?: (TokenSegment<PromptFieldTokenValue>) => React.ReactElement
+  children?: (TokenSegment) => React.ReactElement
   completionTrigger?: RegExp
   menuWidth?: number
   onKeyDown?: (React.KeyboardEvent<HTMLDivElement>) => void
   pixelLoader?: Array<Cell> | Array<Array<Cell>>
   placeholder?: string
-  renderCompletions?: (string, string | null) => Array<React.ReactNode> | null | Promise<Array<React.ReactNode> | null>
+  renderCompletions?: (string) => Array<React.ReactNode> | null | Promise<Array<React.ReactNode> | null>
 }

/@react-spectrum/ai:InsertTextMenuItem

 InsertTextMenuItem {
   aria-label?: string
   children: ReactNode
   id?: Key
   isDisabled?: boolean
   onAction?: () => void
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   onPress?: (PressEvent) => void
   onPressChange?: (boolean) => void
   onPressEnd?: (PressEvent) => void
   onPressStart?: (PressEvent) => void
   onPressUp?: (PressEvent) => void
   shouldCloseOnSelect?: boolean
   styles?: StylesProp
-  text: string
   textValue?: string
+  value?: T
 }

/@react-spectrum/ai:InsertTokenMenuItem

 InsertTokenMenuItem {
   aria-label?: string
   children: ReactNode
   id?: Key
   isDisabled?: boolean
   onAction?: () => void
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   onPress?: (PressEvent) => void
   onPressChange?: (boolean) => void
   onPressEnd?: (PressEvent) => void
   onPressStart?: (PressEvent) => void
   onPressUp?: (PressEvent) => void
   shouldCloseOnSelect?: boolean
   styles?: StylesProp
   textValue?: string
-  token: TokenSegment<PromptFieldTokenValue>
+  value?: T
 }

/@react-spectrum/ai:PromptToken

 PromptToken {
   children: React.ReactNode
   className?: ClassNameOrFunction<TokenRenderProps> = 'react-aria-Token'
   style?: StyleOrFunction<TokenRenderProps>
-  token: TokenSegment<PromptFieldTokenValue>
 }

/@react-spectrum/ai:TokenFieldValue

 TokenFieldValue <T = any> {
   Direction: any
-  SelectedRange: any
   caretPosition: Position
   constructor: (readonly Array<TokenFieldSegment<T>>, TokenFieldValueOptions) => void
   delete: (Position, Intl.Segmenter, any, any) => this
   deleteLine: (Position, any, any) => this
   endCoalescing: () => void
   findBoundaryWithSegmenter: (Position, Intl.Segmenter, any) => Position | null
   findLineBoundary: (Position, any) => Position | null
   findText: (Position, any, string | RegExp) => Position | null
   redo: () => this
   replaceRange: (Position, Position, string, any) => this
   replaceRangeWithSegments: (Position, Position, Array<TokenFieldSegment<T>>, any) => this
   segments: readonly Array<TokenFieldSegment<T>>
-  selectedRange: SelectedRange
   slice: (Position, Position) => this
   toString: () => string
   undo: () => this
   withCaretPosition: (Position) => this
-  withSelectedRange: (SelectedRange) => this
 }

/@react-spectrum/ai:PromptFieldProps

 PromptFieldProps {
   acceptedAttachmentTypes?: Array<string>
   attachments?: Array<PromptFieldAttachment>
   brandColor?: string
   children: React.ReactNode
   defaultAttachments?: Array<PromptFieldAttachment>
-  defaultValue?: PromptFieldValue
+  defaultValue?: TokenFieldValue
   isGenerating?: boolean
   onAddAttachments?: (Array<PromptFieldAttachment>) => void
   onAttachmentsChange?: (Array<PromptFieldAttachment>) => void
-  onChange?: (PromptFieldValue) => void
+  onChange?: (TokenFieldValue) => void
   onRemoveAttachments?: (Array<PromptFieldAttachment>) => void
   onStop?: () => void
   onSubmit?: (TokenFieldValue, Array<PromptFieldAttachment>) => void
   styles?: StyleString
-  value?: PromptFieldValue
+  value?: TokenFieldValue
   variant?: 'balanced' | 'prominent' | 'subtle'
 }

/@react-spectrum/ai:PromptTokenFieldProps

 PromptTokenFieldProps {
-  children?: (TokenSegment<PromptFieldTokenValue>) => React.ReactElement
+  children?: (TokenSegment) => React.ReactElement
   completionTrigger?: RegExp
   menuWidth?: number
   onKeyDown?: (React.KeyboardEvent<HTMLDivElement>) => void
   pixelLoader?: Array<Cell> | Array<Array<Cell>>
   placeholder?: string
-  renderCompletions?: (string, string | null) => Array<React.ReactNode> | null | Promise<Array<React.ReactNode> | null>
+  renderCompletions?: (string) => Array<React.ReactNode> | null | Promise<Array<React.ReactNode> | null>
 }

/@react-spectrum/ai:PromptTokenProps

 PromptTokenProps {
   children: React.ReactNode
   className?: ClassNameOrFunction<TokenRenderProps> = 'react-aria-Token'
   style?: StyleOrFunction<TokenRenderProps>
-  token: TokenSegment<PromptFieldTokenValue>
 }

/@react-spectrum/ai:PromptFieldTokenValue

-PromptFieldTokenValue {
-  P: undefined
-}

/@react-spectrum/ai:InsertTokenMenuItemProps

 InsertTokenMenuItemProps {
   aria-label?: string
   children: ReactNode
   id?: Key
   isDisabled?: boolean
   onAction?: () => void
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   onPress?: (PressEvent) => void
   onPressChange?: (boolean) => void
   onPressEnd?: (PressEvent) => void
   onPressStart?: (PressEvent) => void
   onPressUp?: (PressEvent) => void
   shouldCloseOnSelect?: boolean
   styles?: StylesProp
   textValue?: string
-  token: TokenSegment<PromptFieldTokenValue>
+  value?: T
 }

/@react-spectrum/ai:InsertTextMenuItemProps

 InsertTextMenuItemProps {
   aria-label?: string
   children: ReactNode
   id?: Key
   isDisabled?: boolean
   onAction?: () => void
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   onPress?: (PressEvent) => void
   onPressChange?: (boolean) => void
   onPressEnd?: (PressEvent) => void
   onPressStart?: (PressEvent) => void
   onPressUp?: (PressEvent) => void
   shouldCloseOnSelect?: boolean
   styles?: StylesProp
-  text: string
   textValue?: string
+  value?: T
 }

/@react-spectrum/ai:TokenFieldValueOptions

 TokenFieldValueOptions {
-  selectedRange?: SelectedRange | null
+  caretPosition?: Position | null
 }

@react-spectrum/s2

/@react-spectrum/s2:Avatar

 Avatar {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   alt?: string
   id?: string
   isOverBackground?: boolean
   size?: number | number | number | number | number | number | number | number | number | number | number | number | number | number | (number & {
   
-}) = 24
+}) | `${number}lh` = 24
   slot?: string | null
   src?: string
   styles?: StylesPropWithoutWidth
 }

/@react-spectrum/s2:Checkbox

 Checkbox {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-controls?: string
   aria-describedby?: string
   aria-details?: string
   aria-errormessage?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children?: ReactNode
   defaultSelected?: boolean
   description?: ReactNode
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
   excludeFromTabOrder?: boolean
   form?: string
   id?: string
-  inputRef?: Ref<HTMLInputElement | null>
+  inputRef?: RefObject<HTMLInputElement | null>
   isDisabled?: boolean
   isEmphasized?: boolean
   isIndeterminate?: boolean
   isInvalid?: boolean
   isRequired?: boolean
   isSelected?: boolean
   name?: string
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (boolean) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onPress?: (PressEvent) => void
   onPressChange?: (boolean) => void
   onPressEnd?: (PressEvent) => void
   onPressStart?: (PressEvent) => void
   onPressUp?: (PressEvent) => void
   size?: 'S' | 'M' | 'L' | 'XL' = 'M'
   slot?: string | null
   styles?: StylesProp
   validate?: (boolean) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
   value?: string
 }

/@react-spectrum/s2:Radio

 Radio {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children?: ReactNode
   description?: ReactNode
   id?: string
-  inputRef?: Ref<HTMLInputElement | null>
+  inputRef?: RefObject<HTMLInputElement | null>
   isDisabled?: boolean
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyUp?: (KeyboardEvent) => void
   onPress?: (PressEvent) => void
   onPressChange?: (boolean) => void
   onPressEnd?: (PressEvent) => void
   onPressStart?: (PressEvent) => void
   onPressUp?: (PressEvent) => void
   slot?: string | null
   styles?: StylesProp
   value: string
 }

/@react-spectrum/s2:Switch

 Switch {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-controls?: string
   aria-describedby?: string
   aria-details?: string
   aria-errormessage?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children?: ReactNode
   defaultSelected?: boolean
   description?: ReactNode
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
   excludeFromTabOrder?: boolean
   form?: string
   id?: string
-  inputRef?: Ref<HTMLInputElement | null>
+  inputRef?: RefObject<HTMLInputElement | null>
   isDisabled?: boolean
   isEmphasized?: boolean
   isInvalid?: boolean
   isReadOnly?: boolean
   isSelected?: boolean
   name?: string
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (boolean) => void
   onClick?: (MouseEvent<FocusableElement>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onPress?: (PressEvent) => void
   onPressChange?: (boolean) => void
   onPressEnd?: (PressEvent) => void
   onPressStart?: (PressEvent) => void
   onPressUp?: (PressEvent) => void
   size?: 'S' | 'M' | 'L' | 'XL' = 'M'
   slot?: string | null
   styles?: StylesProp
   validate?: (boolean) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
   value?: string
 }

/@react-spectrum/s2:AvatarProps

 AvatarProps {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   alt?: string
   id?: string
   isOverBackground?: boolean
   size?: number | number | number | number | number | number | number | number | number | number | number | number | number | number | (number & {
   
-}) = 24
+}) | `${number}lh` = 24
   slot?: string | null
   src?: string
   styles?: StylesPropWithoutWidth
 }

/@react-spectrum/s2:CheckboxProps

 CheckboxProps {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-controls?: string
   aria-describedby?: string
   aria-details?: string
   aria-errormessage?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children?: ReactNode
   defaultSelected?: boolean
   description?: ReactNode
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
   excludeFromTabOrder?: boolean
   form?: string
   id?: string
-  inputRef?: Ref<HTMLInputElement | null>
+  inputRef?: RefObject<HTMLInputElement | null>
   isDisabled?: boolean
   isEmphasized?: boolean
   isIndeterminate?: boolean
   isInvalid?: boolean
   isRequired?: boolean
   isSelected?: boolean
   name?: string
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (boolean) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onPress?: (PressEvent) => void
   onPressChange?: (boolean) => void
   onPressEnd?: (PressEvent) => void
   onPressStart?: (PressEvent) => void
   onPressUp?: (PressEvent) => void
   size?: 'S' | 'M' | 'L' | 'XL' = 'M'
   slot?: string | null
   styles?: StylesProp
   validate?: (boolean) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
   value?: string
 }

/@react-spectrum/s2:RadioProps

 RadioProps {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children?: ReactNode
   description?: ReactNode
   id?: string
-  inputRef?: Ref<HTMLInputElement | null>
+  inputRef?: RefObject<HTMLInputElement | null>
   isDisabled?: boolean
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyUp?: (KeyboardEvent) => void
   onPress?: (PressEvent) => void
   onPressChange?: (boolean) => void
   onPressEnd?: (PressEvent) => void
   onPressStart?: (PressEvent) => void
   onPressUp?: (PressEvent) => void
   slot?: string | null
   styles?: StylesProp
   value: string
 }

/@react-spectrum/s2:SwitchProps

 SwitchProps {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-controls?: string
   aria-describedby?: string
   aria-details?: string
   aria-errormessage?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children?: ReactNode
   defaultSelected?: boolean
   description?: ReactNode
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
   excludeFromTabOrder?: boolean
   form?: string
   id?: string
-  inputRef?: Ref<HTMLInputElement | null>
+  inputRef?: RefObject<HTMLInputElement | null>
   isDisabled?: boolean
   isEmphasized?: boolean
   isInvalid?: boolean
   isReadOnly?: boolean
   isSelected?: boolean
   name?: string
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (boolean) => void
   onClick?: (MouseEvent<FocusableElement>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onPress?: (PressEvent) => void
   onPressChange?: (boolean) => void
   onPressEnd?: (PressEvent) => void
   onPressStart?: (PressEvent) => void
   onPressUp?: (PressEvent) => void
   size?: 'S' | 'M' | 'L' | 'XL' = 'M'
   slot?: string | null
   styles?: StylesProp
   validate?: (boolean) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
   value?: string
 }

rspbot · 2026-08-14T06:15:40Z

Agent Skills Changes

Modified (9)

react-aria/skills/react-aria/references/components/Checkbox.md $\color{green}{+1}$ $\color{red}{-1}$
react-aria/skills/react-aria/references/components/RadioGroup.md $\color{green}{+1}$ $\color{red}{-1}$
react-aria/skills/react-aria/references/components/Separator/useSeparator.md $\color{green}{+1}$ $\color{red}{-1}$
react-aria/skills/react-aria/references/components/Switch.md $\color{green}{+1}$ $\color{red}{-1}$
s2/skills/react-spectrum-s2/references/components/Avatar.md $\color{green}{+1}$ $\color{red}{-1}$
s2/skills/react-spectrum-s2/references/react-aria/components/Checkbox.md $\color{green}{+1}$ $\color{red}{-1}$
s2/skills/react-spectrum-s2/references/react-aria/components/RadioGroup.md $\color{green}{+1}$ $\color{red}{-1}$
s2/skills/react-spectrum-s2/references/react-aria/components/Separator/useSeparator.md $\color{green}{+1}$ $\color{red}{-1}$
s2/skills/react-spectrum-s2/references/react-aria/components/Switch.md $\color{green}{+1}$ $\color{red}{-1}$

Install

React Spectrum S2:

npx skills add https://d1pzu54gtk2aed.cloudfront.net/pr/2c2af394bcf7473853b0c82a78ecc140488e81f1/

React Aria:

npx skills add https://d5iwopk28bdhl.cloudfront.net/pr/2c2af394bcf7473853b0c82a78ecc140488e81f1/

snowystinger added 3 commits August 3, 2026 16:07

chore: update icons to new size

ef8b0a2

update iconStyle

51a1696

sync avatar size with icon size for ActionButton

a85a244

github-actions Bot added ActionButton ToggleButton Badge Badge component Button ListView TagGroup SearchField TreeView S2 Menu labels Aug 3, 2026

use lh unit instead

288a744

github-actions Bot added the Avatar label Aug 11, 2026

snowystinger marked this pull request as ready for review August 11, 2026 03:43

snowystinger added the ready for review label Aug 11, 2026

fix lint

0b79d22

yihuiliao previously approved these changes Aug 11, 2026

View reviewed changes

Merge branch 'main' into new-icon-sizes

4fcc6cd

update some more instances

2c2af39

snowystinger dismissed yihuiliao’s stale review via 2c2af39 August 14, 2026 06:10

github-actions Bot added the ComboBox label Aug 14, 2026

Navigation Menu

Uh oh!

chore: Update icon sizes with new design intent - #10414

chore: Update icon sizes with new design intent#10414
snowystinger wants to merge 7 commits into
mainfrom
new-icon-sizes

snowystinger commented Aug 3, 2026 •

edited

Loading

Uh oh!

rspbot commented Aug 11, 2026

Uh oh!

rspbot commented Aug 12, 2026

Uh oh!

rspbot commented Aug 14, 2026

Uh oh!

rspbot commented Aug 14, 2026

Uh oh!

rspbot commented Aug 14, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

snowystinger commented Aug 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Pull Request Checklist:

📝 Test Instructions:

🧢 Your Project:

Uh oh!

rspbot commented Aug 11, 2026

Uh oh!

rspbot commented Aug 12, 2026

Uh oh!

rspbot commented Aug 14, 2026

Uh oh!

rspbot commented Aug 14, 2026

react-aria-components

/react-aria-components:Checkbox

/react-aria-components:CheckboxField

/react-aria-components:Radio

/react-aria-components:RadioField

/react-aria-components:Switch

/react-aria-components:SwitchField

/react-aria-components:TokenFieldValue

/react-aria-components:CheckboxProps

/react-aria-components:CheckboxFieldProps

/react-aria-components:RadioProps

/react-aria-components:RadioFieldProps

/react-aria-components:SwitchProps

/react-aria-components:SwitchFieldProps

@react-spectrum/ai

/@react-spectrum/ai:PromptFieldValue

/@react-spectrum/ai:PromptField

/@react-spectrum/ai:PromptTokenField

/@react-spectrum/ai:InsertTextMenuItem

/@react-spectrum/ai:InsertTokenMenuItem

/@react-spectrum/ai:PromptToken

/@react-spectrum/ai:TokenFieldValue

/@react-spectrum/ai:PromptFieldProps

/@react-spectrum/ai:PromptTokenFieldProps

/@react-spectrum/ai:PromptTokenProps

/@react-spectrum/ai:PromptFieldTokenValue

/@react-spectrum/ai:InsertTokenMenuItemProps

/@react-spectrum/ai:InsertTextMenuItemProps

/@react-spectrum/ai:TokenFieldValueOptions

@react-spectrum/s2

/@react-spectrum/s2:Avatar

/@react-spectrum/s2:Checkbox

/@react-spectrum/s2:Radio

/@react-spectrum/s2:Switch

/@react-spectrum/s2:AvatarProps

/@react-spectrum/s2:CheckboxProps

/@react-spectrum/s2:RadioProps

/@react-spectrum/s2:SwitchProps

Uh oh!

rspbot commented Aug 14, 2026

Agent Skills Changes

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

snowystinger commented Aug 3, 2026 •

edited

Loading