chore: Update spectrum tokens #7736

snowystinger · 2025-02-06T23:23:20Z

Closes

I noticed out chromatic stories all had powerset name changes due to mergeProps order being flipped, so I've reversed that for the moment so I can tell what actually changed in chromatic

I also finally cleaned up our Color Swatch Picker story so it's no longer flaky.

Can use a differ to check
https://www.unpkg.com/browse/@adobe/[email protected]/dist/json/variables.json
https://www.unpkg.com/browse/@adobe/[email protected]/dist/json/variables.json

Quick summary:

Checkbox control size changed
ColorWheel got it's own border token, we already have it in our implementation with the correct value, ignore this update
Actionbar got a min width, we may want to add it to our implementation
unsure what component-size-maximum-perspective-down is

✅ 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 · 2025-02-06T23:30:01Z

Build successful! 🎉

devongovett · 2025-02-07T16:43:51Z

packages/@react-spectrum/autocomplete/chromatic/SearchAutocomplete.stories.tsx

@@ -79,7 +79,7 @@ let items = [
 export const Template: StoryFn<SpectrumSearchAutocompleteProps<object>> = (args) => (
  <Grid columns={repeat(4, '1fr')} autoFlow="row" gap="size-200">
    {combinations.map(c => {
-      let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');
+      let key = Object.keys(c).reverse().map(k => shortName(k, c[k])).join(' ');


what caused this to change? You mentioned mergeProps, but what changed there? Seems like it could be potentially problematic for other usages too?

mergeProps now merges in the opposite direction https://github.com/adobe/react-spectrum/pull/7657/files which just results in the items being added into the object in the opposite order for this particular use case, the values in those keys remains the same

relying on the order of Object.keys isn't something one should do anyways, it just happened that we do it for labels in chromatic

it'd be better to sort them in some way, but we can handle that as a separate pr, I wanted to know if we were actually breaking anything in this PR

rspbot · 2025-02-10T20:52:24Z

Build successful! 🎉

rspbot · 2025-02-10T20:57:31Z

Build successful! 🎉

rspbot · 2025-02-10T20:57:32Z

## API Changes

react-aria-components

/react-aria-components:Breadcrumbs

 Breadcrumbs <T extends {}> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode | (T) => ReactNode
   className?: string
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   id?: string
   isDisabled?: boolean
   items?: Iterable<T>
   onAction?: (Key) => void
   style?: CSSProperties
 }

/react-aria-components:GridList

 GridList <T extends {}> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean | FocusStrategy
   children?: ReactNode | ({}) => ReactNode
   className?: string | ((GridListRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultSelectedKeys?: 'all' | Iterable<Key>
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   disabledBehavior?: DisabledBehavior
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   dragAndDropHooks?: DragAndDropHooks
   items?: Iterable<T>
   keyboardNavigationBehavior?: 'arrow' | 'tab' = 'arrow'
   layout?: 'stack' | 'grid' = 'stack'
   onAction?: (Key) => void
   onScroll?: (UIEvent<Element>) => void
   onSelectionChange?: (Selection) => void
   renderEmptyState?: (GridListRenderProps) => ReactNode
   selectedKeys?: 'all' | Iterable<Key>
   selectionBehavior?: SelectionBehavior
   selectionMode?: SelectionMode
   slot?: string | null
   style?: CSSProperties | ((GridListRenderProps & {
     defaultStyle: CSSProperties
 })) => CSSProperties | undefined
 }

/react-aria-components:Section

 Section <T extends {}> {
   aria-label?: string
   children?: ReactNode | ({}) => ReactElement
   className?: string
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   id?: Key
   items?: Iterable<T>
   style?: CSSProperties
   value?: {}

/react-aria-components:Collection

 Collection <T extends {}> {
   addIdAndValue?: boolean
   children?: ReactNode | ({}) => ReactNode
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   idScope?: Key
   items?: Iterable<{}>
 }

/react-aria-components:ListBox

 ListBox <T extends {}> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean | FocusStrategy
   children?: ReactNode | ({}) => ReactNode
   className?: string | ((ListBoxRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultSelectedKeys?: 'all' | Iterable<Key>
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   dragAndDropHooks?: DragAndDropHooks
   id?: string
   layout?: 'stack' | 'grid' = 'stack'
   onAction?: (Key) => void
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onScroll?: (UIEvent<Element>) => void
   onSelectionChange?: (Selection) => void
   orientation?: Orientation = 'vertical'
   renderEmptyState?: (ListBoxRenderProps) => ReactNode
   selectedKeys?: 'all' | Iterable<Key>
   selectionBehavior?: SelectionBehavior
   selectionMode?: SelectionMode
   shouldFocusWrap?: boolean
   slot?: string | null
   style?: CSSProperties | ((ListBoxRenderProps & {
     defaultStyle: CSSProperties
 })) => CSSProperties | undefined
 }

/react-aria-components:ListBoxSection

 ListBoxSection <T extends {}> {
   aria-label?: string
   children?: ReactNode | ({}) => ReactElement
   className?: string
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   id?: Key
   items?: Iterable<{}>
   style?: CSSProperties
   value?: {}

/react-aria-components:Menu

 Menu <T extends {}> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean | FocusStrategy
   children?: ReactNode | ({}) => ReactNode
   className?: string
   defaultSelectedKeys?: 'all' | Iterable<Key>
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   id?: string
   items?: Iterable<T>
   onClose?: () => void
   onScroll?: (UIEvent<Element>) => void
   onSelectionChange?: (Selection) => void
   selectedKeys?: 'all' | Iterable<Key>
   selectionMode?: SelectionMode
   shouldFocusWrap?: boolean
   slot?: string | null
   style?: CSSProperties
 }

/react-aria-components:MenuSection

 MenuSection <T extends {}> {
   aria-label?: string
   children?: ReactNode | ({}) => ReactElement
   className?: string
   defaultSelectedKeys?: 'all' | Iterable<Key>
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   id?: Key
   items?: Iterable<{}>
   selectedKeys?: 'all' | Iterable<Key>
   selectionMode?: SelectionMode
   style?: CSSProperties
   value?: {}
 }

/react-aria-components:Row

 Row <T extends {}> {
   children?: ReactNode | ({}) => ReactElement
   className?: string | ((RowRenderProps & {
     defaultClassName: string | undefined
 })) => string
   columns?: Iterable<{}>
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   download?: boolean | string
   href?: Href
   hrefLang?: string
   id?: Key
   onAction?: () => void
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   ping?: string
   referrerPolicy?: HTMLAttributeReferrerPolicy
   rel?: string
   routerOptions?: RouterOptions
   style?: CSSProperties | ((RowRenderProps & {
     defaultStyle: CSSProperties
 })) => CSSProperties | undefined
   target?: HTMLAttributeAnchorTarget
   textValue?: string
   value?: {}
 }

/react-aria-components:TableHeader

 TableHeader <T extends {}> {
   children?: ReactNode | ({}) => ReactElement
   className?: string | ((TableHeaderRenderProps & {
     defaultClassName: string | undefined
 })) => string
-  columns?: Iterable<{}>
-  dependencies?: ReadonlyArray<any>
+  columns?: Array<{}>
+  dependencies?: Array<any>
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   style?: CSSProperties | ((TableHeaderRenderProps & {
 })) => CSSProperties | undefined
 }

/react-aria-components:TableBody

 TableBody <T extends {}> {
   children?: ReactNode | ({}) => ReactNode
   className?: string | ((TableBodyRenderProps & {
     defaultClassName: string | undefined
 })) => string
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   disabledKeys?: Iterable<Key>
   items?: Iterable<{}>
   renderEmptyState?: (TableBodyRenderProps) => ReactNode
   style?: CSSProperties | ((TableBodyRenderProps & {
 })) => CSSProperties | undefined
 }

/react-aria-components:TabList

 TabList <T extends {}> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode | (T) => ReactNode
   className?: string | ((TabListRenderProps & {
     defaultClassName: string | undefined
 })) => string
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   items?: Iterable<T>
   style?: CSSProperties | ((TabListRenderProps & {
     defaultStyle: CSSProperties
 })) => CSSProperties | undefined

/react-aria-components:TagList

 TagList <T extends {}> {
   children?: ReactNode | (T) => ReactNode
   className?: string | ((TagListRenderProps & {
     defaultClassName: string | undefined
 })) => string
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   items?: Iterable<T>
   renderEmptyState?: (TagListRenderProps) => ReactNode
   style?: CSSProperties | ((TagListRenderProps & {
     defaultStyle: CSSProperties
 }

/react-aria-components:UNSTABLE_Tree

 UNSTABLE_Tree <T extends {}> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean | FocusStrategy
   children?: ReactNode | ({}) => ReactNode
   className?: string | ((TreeRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultExpandedKeys?: Iterable<Key>
   defaultSelectedKeys?: 'all' | Iterable<Key>
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   disabledBehavior?: DisabledBehavior = 'all'
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   expandedKeys?: Iterable<Key>
   items?: Iterable<T>
   onAction?: (Key) => void
   onExpandedChange?: (Set<Key>) => any
   onScroll?: (UIEvent<Element>) => void
   onSelectionChange?: (Selection) => void
   renderEmptyState?: (TreeEmptyStateRenderProps) => ReactNode
   selectedKeys?: 'all' | Iterable<Key>
   selectionBehavior?: SelectionBehavior
   selectionMode?: SelectionMode
   slot?: string | null
   style?: CSSProperties | ((TreeRenderProps & {
     defaultStyle: CSSProperties
 })) => CSSProperties | undefined
 }

/react-aria-components:BreadcrumbsProps

 BreadcrumbsProps <T> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode | (T) => ReactNode
   className?: string
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   id?: string
   isDisabled?: boolean
   items?: Iterable<T>
   onAction?: (Key) => void
   style?: CSSProperties
 }

/react-aria-components:GridListProps

 GridListProps <T> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean | FocusStrategy
   children?: ReactNode | (T) => ReactNode
   className?: string | ((GridListRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultSelectedKeys?: 'all' | Iterable<Key>
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   disabledBehavior?: DisabledBehavior
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   dragAndDropHooks?: DragAndDropHooks
   items?: Iterable<T>
   keyboardNavigationBehavior?: 'arrow' | 'tab' = 'arrow'
   layout?: 'stack' | 'grid' = 'stack'
   onAction?: (Key) => void
   onScroll?: (UIEvent<Element>) => void
   onSelectionChange?: (Selection) => void
   renderEmptyState?: (GridListRenderProps) => ReactNode
   selectedKeys?: 'all' | Iterable<Key>
   selectionBehavior?: SelectionBehavior
   selectionMode?: SelectionMode
   slot?: string | null
   style?: CSSProperties | ((GridListRenderProps & {
     defaultStyle: CSSProperties
 })) => CSSProperties | undefined
 }

/react-aria-components:SectionProps

 SectionProps <T> {
   aria-label?: string
   children?: ReactNode | (T) => ReactElement
   className?: string
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   id?: Key
   items?: Iterable<T>
   style?: CSSProperties
   value?: T

/react-aria-components:ListBoxProps

 ListBoxProps <T> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean | FocusStrategy
   children?: ReactNode | (T) => ReactNode
   className?: string | ((ListBoxRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultSelectedKeys?: 'all' | Iterable<Key>
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   dragAndDropHooks?: DragAndDropHooks
   id?: string
   layout?: 'stack' | 'grid' = 'stack'
   onAction?: (Key) => void
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onScroll?: (UIEvent<Element>) => void
   onSelectionChange?: (Selection) => void
   orientation?: Orientation = 'vertical'
   renderEmptyState?: (ListBoxRenderProps) => ReactNode
   selectedKeys?: 'all' | Iterable<Key>
   selectionBehavior?: SelectionBehavior
   selectionMode?: SelectionMode
   shouldFocusWrap?: boolean
   slot?: string | null
   style?: CSSProperties | ((ListBoxRenderProps & {
     defaultStyle: CSSProperties
 })) => CSSProperties | undefined
 }

/react-aria-components:ListBoxSectionProps

 ListBoxSectionProps <T> {
   aria-label?: string
   children?: ReactNode | (T) => ReactElement
   className?: string
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   id?: Key
   items?: Iterable<T>
   style?: CSSProperties
   value?: T

/react-aria-components:MenuProps

 MenuProps <T> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean | FocusStrategy
   children?: ReactNode | (T) => ReactNode
   className?: string
   defaultSelectedKeys?: 'all' | Iterable<Key>
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   id?: string
   items?: Iterable<T>
   onClose?: () => void
   onScroll?: (UIEvent<Element>) => void
   onSelectionChange?: (Selection) => void
   selectedKeys?: 'all' | Iterable<Key>
   selectionMode?: SelectionMode
   shouldFocusWrap?: boolean
   slot?: string | null
   style?: CSSProperties
 }

/react-aria-components:MenuSectionProps

 MenuSectionProps <T> {
   aria-label?: string
   children?: ReactNode | (T) => ReactElement
   className?: string
   defaultSelectedKeys?: 'all' | Iterable<Key>
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   id?: Key
   items?: Iterable<T>
   selectedKeys?: 'all' | Iterable<Key>
   selectionMode?: SelectionMode
   style?: CSSProperties
   value?: T
 }

/react-aria-components:TableHeaderProps

 TableHeaderProps <T> {
   children?: ReactNode | (T) => ReactElement
   className?: string | ((TableHeaderRenderProps & {
     defaultClassName: string | undefined
 })) => string
-  columns?: Iterable<T>
-  dependencies?: ReadonlyArray<any>
+  columns?: Array<T>
+  dependencies?: Array<any>
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   style?: CSSProperties | ((TableHeaderRenderProps & {
 })) => CSSProperties | undefined
 }

/react-aria-components:TableBodyProps

 TableBodyProps <T> {
   children?: ReactNode | (T) => ReactNode
   className?: string | ((TableBodyRenderProps & {
     defaultClassName: string | undefined
 })) => string
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   disabledKeys?: Iterable<Key>
   items?: Iterable<T>
   renderEmptyState?: (TableBodyRenderProps) => ReactNode
   style?: CSSProperties | ((TableBodyRenderProps & {
 })) => CSSProperties | undefined
 }

/react-aria-components:RowProps

 RowProps <T> {
   children?: ReactNode | (T) => ReactElement
   className?: string | ((RowRenderProps & {
     defaultClassName: string | undefined
 })) => string
   columns?: Iterable<T>
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   download?: boolean | string
   href?: Href
   hrefLang?: string
   id?: Key
   onAction?: () => void
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   ping?: string
   referrerPolicy?: HTMLAttributeReferrerPolicy
   rel?: string
   routerOptions?: RouterOptions
   style?: CSSProperties | ((RowRenderProps & {
     defaultStyle: CSSProperties
 })) => CSSProperties | undefined
   target?: HTMLAttributeAnchorTarget
   textValue?: string
   value?: T
 }

/react-aria-components:TabListProps

 TabListProps <T> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode | (T) => ReactNode
   className?: string | ((TabListRenderProps & {
     defaultClassName: string | undefined
 })) => string
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   items?: Iterable<T>
   style?: CSSProperties | ((TabListRenderProps & {
     defaultStyle: CSSProperties
 })) => CSSProperties | undefined

/react-aria-components:TagListProps

 TagListProps <T> {
   children?: ReactNode | (T) => ReactNode
   className?: string | ((TagListRenderProps & {
     defaultClassName: string | undefined
 })) => string
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   items?: Iterable<T>
   renderEmptyState?: (TagListRenderProps) => ReactNode
   style?: CSSProperties | ((TagListRenderProps & {
     defaultStyle: CSSProperties
 }

/react-aria-components:TreeProps

 TreeProps <T> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean | FocusStrategy
   children?: ReactNode | (T) => ReactNode
   className?: string | ((TreeRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultExpandedKeys?: Iterable<Key>
   defaultSelectedKeys?: 'all' | Iterable<Key>
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   disabledBehavior?: DisabledBehavior = 'all'
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   expandedKeys?: Iterable<Key>
   items?: Iterable<T>
   onAction?: (Key) => void
   onExpandedChange?: (Set<Key>) => any
   onScroll?: (UIEvent<Element>) => void
   onSelectionChange?: (Selection) => void
   renderEmptyState?: (TreeEmptyStateRenderProps) => ReactNode
   selectedKeys?: 'all' | Iterable<Key>
   selectionBehavior?: SelectionBehavior
   selectionMode?: SelectionMode
   slot?: string | null
   style?: CSSProperties | ((TreeRenderProps & {
     defaultStyle: CSSProperties
 })) => CSSProperties | undefined
 }

@react-aria/collections

/@react-aria/collections:Collection

 Collection <T extends {}> {
   addIdAndValue?: boolean
   children?: ReactNode | ({}) => ReactNode
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   idScope?: Key
   items?: Iterable<{}>
 }

/@react-aria/collections:CollectionProps

 CollectionProps <T> {
   addIdAndValue?: boolean
   children?: ReactNode | (T) => ReactNode
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   idScope?: Key
   items?: Iterable<T>
 }

/@react-aria/collections:CachedChildrenOptions

 CachedChildrenOptions <T> {
   addIdAndValue?: boolean
   children?: ReactNode | (T) => ReactNode
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   idScope?: Key
   items?: Iterable<T>
 }

@react-spectrum/s2

/@react-spectrum/s2:Breadcrumbs

 Breadcrumbs <T extends {}> {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   id?: string
   isDisabled?: boolean
   onAction?: (Key) => void
   size?: 'M' | 'L' = 'M'
   styles?: StylesProp
 }

/@react-spectrum/s2:CardView

 CardView <T extends {}> {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean | FocusStrategy
   children?: ReactNode | (T) => ReactNode
   defaultSelectedKeys?: 'all' | Iterable<Key>
   density?: 'compact' | 'regular' | 'spacious' = 'regular'
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   disabledBehavior?: DisabledBehavior
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   dragAndDropHooks?: DragAndDropHooks
   items?: Iterable<T>
   layout?: 'grid' | 'waterfall' = 'grid'
   loadingState?: LoadingState
   onAction?: (Key) => void
   onLoadMore?: () => void
   onScroll?: (UIEvent<Element>) => void
   onSelectionChange?: (Selection) => void
   renderActionBar?: ('all' | Set<Key>) => ReactElement
   renderEmptyState?: (GridListRenderProps) => ReactNode
   selectedKeys?: 'all' | Iterable<Key>
   selectionMode?: SelectionMode
   selectionStyle?: 'checkbox' | 'highlight' = 'checkbox'
   size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
   slot?: string | null
   styles?: StylesPropWithHeight
   variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet' = 'primary'
 }

/@react-spectrum/s2:ComboBoxSection

 ComboBoxSection <T extends {}> {
   aria-label?: string
   children?: ReactNode | ({}) => ReactElement
   className?: string
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   id?: Key
   items?: Iterable<{}>
   style?: CSSProperties
   value?: {}

/@react-spectrum/s2:MenuSection

 MenuSection <T extends {}> {
   aria-label?: string
   children?: ReactNode | ({}) => ReactElement
   className?: string
   defaultSelectedKeys?: 'all' | Iterable<Key>
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   id?: Key
   items?: Iterable<{}>
   selectedKeys?: 'all' | Iterable<Key>
   selectionMode?: SelectionMode
   style?: CSSProperties
   value?: {}
 }

/@react-spectrum/s2:PickerSection

 PickerSection <T extends {}> {
   aria-label?: string
   children?: ReactNode | ({}) => ReactElement
   className?: string
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   id?: Key
   items?: Iterable<{}>
   style?: CSSProperties
   value?: {}

/@react-spectrum/s2:TableHeader

 TableHeader <T extends {}> {
   children?: ReactNode | (T) => ReactElement
-  columns?: Iterable<T>
+  columns?: Array<T>
 }

/@react-spectrum/s2:TabList

 TabList <T extends {}> {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   children?: ReactNode | (T) => ReactNode
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   items?: Iterable<T>
   styles?: StylesProp
 }

/@react-spectrum/s2:TreeView

 TreeView {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean | FocusStrategy
   children?: ReactNode | (T) => ReactNode
   defaultExpandedKeys?: Iterable<Key>
   defaultSelectedKeys?: 'all' | Iterable<Key>
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   disabledBehavior?: DisabledBehavior = 'all'
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   expandedKeys?: Iterable<Key>
   isDetached?: boolean
   isEmphasized?: boolean
   items?: Iterable<T>
   onAction?: (Key) => void
   onExpandedChange?: (Set<Key>) => any
   onSelectionChange?: (Selection) => void
   renderEmptyState?: (TreeEmptyStateRenderProps) => ReactNode
   selectedKeys?: 'all' | Iterable<Key>
   selectionMode?: SelectionMode
   slot?: string | null
   styles?: StylesPropWithHeight
 }

/@react-spectrum/s2:Collection

 Collection <T extends {}> {
   addIdAndValue?: boolean
   children?: ReactNode | ({}) => ReactNode
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   idScope?: Key
   items?: Iterable<{}>
 }

/@react-spectrum/s2:BreadcrumbsProps

 BreadcrumbsProps <T> {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   id?: string
   isDisabled?: boolean
   onAction?: (Key) => void
   size?: 'M' | 'L' = 'M'
   styles?: StylesProp
 }

/@react-spectrum/s2:CardViewProps

 CardViewProps <T> {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean | FocusStrategy
   children?: ReactNode | (T) => ReactNode
   defaultSelectedKeys?: 'all' | Iterable<Key>
   density?: 'compact' | 'regular' | 'spacious' = 'regular'
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   disabledBehavior?: DisabledBehavior
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   dragAndDropHooks?: DragAndDropHooks
   items?: Iterable<T>
   layout?: 'grid' | 'waterfall' = 'grid'
   loadingState?: LoadingState
   onAction?: (Key) => void
   onLoadMore?: () => void
   onScroll?: (UIEvent<Element>) => void
   onSelectionChange?: (Selection) => void
   renderActionBar?: ('all' | Set<Key>) => ReactElement
   renderEmptyState?: (GridListRenderProps) => ReactNode
   selectedKeys?: 'all' | Iterable<Key>
   selectionMode?: SelectionMode
   selectionStyle?: 'checkbox' | 'highlight' = 'checkbox'
   size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
   slot?: string | null
   styles?: StylesPropWithHeight
   variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet' = 'primary'
 }

/@react-spectrum/s2:ComboBoxSectionProps

 ComboBoxSectionProps <T extends {}> {
   aria-label?: string
   children?: ReactNode | ({}) => ReactElement
   className?: string
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   id?: Key
   items?: Iterable<{}>
   style?: CSSProperties
   value?: {}

/@react-spectrum/s2:MenuSectionProps

 MenuSectionProps <T extends {}> {
   aria-label?: string
   children?: ReactNode | ({}) => ReactElement
   className?: string
   defaultSelectedKeys?: 'all' | Iterable<Key>
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   id?: Key
   items?: Iterable<{}>
   selectedKeys?: 'all' | Iterable<Key>
   selectionMode?: SelectionMode
   style?: CSSProperties
   value?: {}
 }

/@react-spectrum/s2:PickerSectionProps

 PickerSectionProps <T extends {}> {
   aria-label?: string
   children?: ReactNode | ({}) => ReactElement
   className?: string
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   id?: Key
   items?: Iterable<{}>
   style?: CSSProperties
   value?: {}

/@react-spectrum/s2:TableHeaderProps

 TableHeaderProps <T> {
   children?: ReactNode | (T) => ReactElement
-  columns?: Iterable<T>
+  columns?: Array<T>
 }

/@react-spectrum/s2:TabListProps

 TabListProps <T> {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   children?: ReactNode | (T) => ReactNode
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   items?: Iterable<T>
   styles?: StylesProp
 }

/@react-spectrum/s2:TreeViewProps

 TreeViewProps {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean | FocusStrategy
   children?: ReactNode | (T) => ReactNode
   defaultExpandedKeys?: Iterable<Key>
   defaultSelectedKeys?: 'all' | Iterable<Key>
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   disabledBehavior?: DisabledBehavior = 'all'
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   expandedKeys?: Iterable<Key>
   isDetached?: boolean
   isEmphasized?: boolean
   items?: Iterable<T>
   onAction?: (Key) => void
   onExpandedChange?: (Set<Key>) => any
   onSelectionChange?: (Selection) => void
   renderEmptyState?: (TreeEmptyStateRenderProps) => ReactNode
   selectedKeys?: 'all' | Iterable<Key>
   selectionMode?: SelectionMode
   slot?: string | null
   styles?: StylesPropWithHeight
 }

@react-stately/toast

/@react-stately/toast:ToastQueue

 ToastQueue <T> {
   add: (T, ToastOptions) => void
   close: (string) => void
   constructor: (ToastStateProps) => void
   pauseAll: () => void
+  remove: (string) => void
   resumeAll: () => void
   subscribe: (() => void) => void
   visibleToasts: Array<QueuedToast<T>>
 }

/@react-stately/toast:ToastState

 ToastState <T> {
   add: (T, ToastOptions) => string
   close: (string) => void
   pauseAll: () => void
+  remove: (string) => void
   resumeAll: () => void
   visibleToasts: Array<QueuedToast<T>>
 }

/@react-stately/toast:QueuedToast

 QueuedToast <T> {
+  animation?: 'entering' | 'queued' | 'exiting' | null
   content: T
   key: string
   onClose?: () => void
   priority?: number
   timer?: Timer
 }

/@react-stately/toast:ToastStateProps

 ToastStateProps {
+  hasExitAnimation?: boolean
   maxVisibleToasts?: number
-  wrapUpdate?: (() => R) => R
 }

snowystinger added 5 commits February 7, 2025 07:18

chore: update spectrum tokens

d19623e

fix chromatic stories label ordering

8413761

fix remaining stories

f19f6e6

fix flaky story

d769b21

update remaining instance of tokens

3847064

yihuiliao previously approved these changes Feb 7, 2025

View reviewed changes

devongovett reviewed Feb 7, 2025

View reviewed changes

reidbarber previously approved these changes Feb 7, 2025

View reviewed changes

snowystinger added 2 commits February 11, 2025 07:24

Revert chromatic changes and mergeProps order

c0eeb88

fix lint

1d2f54a

snowystinger dismissed stale reviews from reidbarber and yihuiliao via 1d2f54a February 10, 2025 20:41

stabilize colorswatchpicker again

b8890c4

snowystinger enabled auto-merge February 10, 2025 20:55

reidbarber approved these changes Feb 10, 2025

View reviewed changes

yihuiliao approved these changes Feb 10, 2025

View reviewed changes

snowystinger added this pull request to the merge queue Feb 10, 2025

Merged via the queue into main with commit e8de3f8 Feb 10, 2025
32 checks passed

snowystinger deleted the update-spectrum-tokens branch February 10, 2025 23:13

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: Update spectrum tokens #7736

chore: Update spectrum tokens #7736

snowystinger commented Feb 6, 2025

rspbot commented Feb 6, 2025

devongovett Feb 7, 2025

snowystinger Feb 7, 2025

rspbot commented Feb 10, 2025

rspbot commented Feb 10, 2025

rspbot commented Feb 10, 2025

chore: Update spectrum tokens #7736

chore: Update spectrum tokens #7736

Conversation

snowystinger commented Feb 6, 2025

✅ Pull Request Checklist:

📝 Test Instructions:

🧢 Your Project:

rspbot commented Feb 6, 2025

devongovett Feb 7, 2025

Choose a reason for hiding this comment

snowystinger Feb 7, 2025

Choose a reason for hiding this comment

rspbot commented Feb 10, 2025

rspbot commented Feb 10, 2025

rspbot commented Feb 10, 2025

react-aria-components

/react-aria-components:Breadcrumbs

/react-aria-components:GridList

/react-aria-components:Section

/react-aria-components:Collection

/react-aria-components:ListBox

/react-aria-components:ListBoxSection

/react-aria-components:Menu

/react-aria-components:MenuSection

/react-aria-components:Row

/react-aria-components:TableHeader

/react-aria-components:TableBody

/react-aria-components:TabList

/react-aria-components:TagList

/react-aria-components:UNSTABLE_Tree

/react-aria-components:BreadcrumbsProps

/react-aria-components:GridListProps

/react-aria-components:SectionProps

/react-aria-components:ListBoxProps

/react-aria-components:ListBoxSectionProps

/react-aria-components:MenuProps

/react-aria-components:MenuSectionProps

/react-aria-components:TableHeaderProps

/react-aria-components:TableBodyProps

/react-aria-components:RowProps

/react-aria-components:TabListProps

/react-aria-components:TagListProps

/react-aria-components:TreeProps

@react-aria/collections

/@react-aria/collections:Collection

/@react-aria/collections:CollectionProps

/@react-aria/collections:CachedChildrenOptions

@react-spectrum/s2

/@react-spectrum/s2:Breadcrumbs

/@react-spectrum/s2:CardView

/@react-spectrum/s2:ComboBoxSection

/@react-spectrum/s2:MenuSection

/@react-spectrum/s2:PickerSection

/@react-spectrum/s2:TableHeader

/@react-spectrum/s2:TabList

/@react-spectrum/s2:TreeView

/@react-spectrum/s2:Collection

/@react-spectrum/s2:BreadcrumbsProps

/@react-spectrum/s2:CardViewProps

/@react-spectrum/s2:ComboBoxSectionProps

/@react-spectrum/s2:MenuSectionProps

/@react-spectrum/s2:PickerSectionProps

/@react-spectrum/s2:TableHeaderProps

/@react-spectrum/s2:TabListProps

/@react-spectrum/s2:TreeViewProps

@react-stately/toast

/@react-stately/toast:ToastQueue

/@react-stately/toast:ToastState

/@react-stately/toast:QueuedToast

/@react-stately/toast:ToastStateProps