@react-spectrum/s2 3.0.0-nightly-d87cc4422-250109 → 3.0.0-nightly-101d0772b-250111

package/src/Button.tsx

@@ -138,24 +138,6 @@ const button = style<ButtonRenderProps & ButtonStyleProps & {isStaticColor: bool
       isDisabled: 'GrayText'
     }
   },
-  backgroundImage: {
-    variant: {
-      premium: {
-        default: linearGradient('96deg', ['fuchsia-900', 0], ['indigo-900', 66], ['blue-900', 100]),
-        isHovered: linearGradient('96deg', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100]),
-        isPressed: linearGradient('96deg', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100]),
-        isFocusVisible: linearGradient('96deg', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100])
-      },
-      genai: {
-        default: linearGradient('96deg', ['red-900', 0], ['magenta-900', 33], ['indigo-900', 100]),
-        isHovered: linearGradient('96deg', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100]),
-        isPressed: linearGradient('96deg', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100]),
-        isFocusVisible: linearGradient('96deg', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100])
-      }
-    },
-    isDisabled: 'none',
-    forcedColors: 'none'
-  },
   backgroundColor: {
     fillStyle: {
       fill: {
@@ -296,6 +278,42 @@ const button = style<ButtonRenderProps & ButtonStyleProps & {isStaticColor: bool
   disableTapHighlight: true
 }, getAllowedOverrides());
 
+// Put the gradient background on a separate element from the button to work around a Safari
+// bug where transitions of custom properties cause layout flickering if any properties use rems. 🤣
+// https://bugs.webkit.org/show_bug.cgi?id=285622
+const gradient = style({
+  position: 'absolute',
+  inset: 0,
+  zIndex: -1,
+  transition: 'default',
+  borderRadius: '[inherit]',
+  backgroundImage: {
+    variant: {
+      premium: {
+        default: linearGradient('to bottom right', ['fuchsia-900', 0], ['indigo-900', 66], ['blue-900', 100]),
+        isHovered: linearGradient('to bottom right', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100]),
+        isPressed: linearGradient('to bottom right', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100]),
+        isFocusVisible: linearGradient('to bottom right', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100])
+      },
+      genai: {
+        default: linearGradient('to bottom right', ['red-900', 0], ['magenta-900', 33], ['indigo-900', 100]),
+        isHovered: linearGradient('to bottom right', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100]),
+        isPressed: linearGradient('to bottom right', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100]),
+        isFocusVisible: linearGradient('to bottom right', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100])
+      }
+    },
+    isDisabled: 'none',
+    forcedColors: 'none'
+  },
+  // Force gradient colors to remain static between light and dark theme.
+  colorScheme: {
+    variant: {
+      premium: 'light',
+      genai: 'light'
+    }
+  }
+});
+
 /**
  * Buttons allow users to perform an action.
  * They have multiple styles for various needs, and are ideal for calling attention to
@@ -350,65 +368,79 @@ export const Button = forwardRef(function Button(props: ButtonProps, ref: Focusa
         staticColor,
         isStaticColor: !!staticColor
       }, props.styles)}>
-      <Provider
-        values={[
-          [SkeletonContext, null],
-          [TextContext, {
-            styles: style({
-              paddingY: '--labelPadding',
-              order: 1,
-              opacity: {
-                default: 1,
-                isProgressVisible: 0
-              }
-            })({isProgressVisible}),
-            // @ts-ignore data-attributes allowed on all JSX elements, but adding to DOMProps has been problematic in the past
-            'data-rsp-slot': 'text'
-          }],
-          [IconContext, {
-            render: centerBaseline({slot: 'icon', styles: style({order: 0})}),
-            styles: style({
-              size: fontRelative(20),
-              marginStart: '--iconMargin',
-              flexShrink: 0,
-              opacity: {
-                default: 1,
-                isProgressVisible: 0
-              }
-            })({isProgressVisible})
-          }]
-        ]}>
-        {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}
-        {isPending &&
-          <div
-            className={style({
-              position: 'absolute',
-              top: '[50%]',
-              left: '[50%]',
-              transform: 'translate(-50%, -50%)',
-              opacity: {
-                default: 0,
-                isProgressVisible: 1
-              }
-            })({isProgressVisible, isPending})}>
-            <ProgressCircle
-              isIndeterminate
-              aria-label={stringFormatter.format('button.pending')}
-              size="S"
-              staticColor={staticColor}
-              styles={style({
-                size: {
+      {(renderProps) => (<>
+        {variant === 'genai' || variant === 'premium' 
+          ? (
+            <span
+              className={gradient({
+                ...renderProps,
+                // Retain hover styles when an overlay is open.
+                isHovered: renderProps.isHovered || overlayTriggerState?.isOpen || false,
+                isDisabled: renderProps.isDisabled || isProgressVisible,
+                variant
+              })} />
+             )
+          : null}
+        <Provider
+          values={[
+            [SkeletonContext, null],
+            [TextContext, {
+              styles: style({
+                paddingY: '--labelPadding',
+                order: 1,
+                opacity: {
+                  default: 1,
+                  isProgressVisible: 0
+                }
+              })({isProgressVisible}),
+              // @ts-ignore data-attributes allowed on all JSX elements, but adding to DOMProps has been problematic in the past
+              'data-rsp-slot': 'text'
+            }],
+            [IconContext, {
+              render: centerBaseline({slot: 'icon', styles: style({order: 0})}),
+              styles: style({
+                size: fontRelative(20),
+                marginStart: '--iconMargin',
+                flexShrink: 0,
+                opacity: {
+                  default: 1,
+                  isProgressVisible: 0
+                }
+              })({isProgressVisible})
+            }]
+          ]}>
+          {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}
+          {isPending &&
+            <div
+              className={style({
+                position: 'absolute',
+                top: '[50%]',
+                left: '[50%]',
+                transform: 'translate(-50%, -50%)',
+                opacity: {
+                  default: 0,
+                  isProgressVisible: 1
+                }
+              })({isProgressVisible, isPending})}>
+              <ProgressCircle
+                isIndeterminate
+                aria-label={stringFormatter.format('button.pending')}
+                size="S"
+                staticColor={staticColor}
+                styles={style({
                   size: {
-                    S: 14,
-                    M: 18,
-                    L: 20,
-                    XL: 24
+                    size: {
+                      S: 14,
+                      M: 18,
+                      L: 20,
+                      XL: 24
+                    }
                   }
-                }
-              })({size})} />
-          </div>
-        }
-      </Provider>
+                })({size})} />
+            </div>
+          }
+        </Provider>
+      </>)}
     </RACButton>
   );
 });

package/src/CardView.tsx

@@ -62,6 +62,7 @@ export interface CardViewProps<T> extends Omit<GridListProps<T>, 'layout' | 'key
   onLoadMore?: () => void,
   /** Spectrum-defined styles, returned by the `style()` macro. */
   styles?: StylesPropWithHeight,
+  /** Provides the ActionBar to render when cards are selected in the CardView. */
   renderActionBar?: (selectedKeys: 'all' | Set<Key>) => ReactElement
 }
 

package/src/CloseButton.tsx

@@ -65,6 +65,10 @@ const styles = style({
       isStaticColor: {
         default: baseColor('transparent-overlay-800'),
         isDisabled: 'transparent-overlay-400'
+      },
+      forcedColors: {
+        default: 'ButtonText',
+        isDisabled: 'GrayText'
       }
     }
   },

package/src/TableView.tsx

@@ -105,6 +105,7 @@ interface S2TableProps {
   loadingState?: LoadingState,
   /** Handler that is called when more items should be loaded, e.g. while scrolling near the bottom. */
   onLoadMore?: () => any,
+  /** Provides the ActionBar to display when rows are selected in the TableView. */
   renderActionBar?: (selectedKeys: 'all' | Set<Key>) => ReactElement
 }
 

package/src/Tabs.tsx

@@ -53,9 +53,11 @@ export interface TabsProps extends Omit<AriaTabsProps, 'className' | 'style' | '
    */
   density?: 'compact' | 'regular',
   /**
-   * If the tabs should only display icons and no text.
+   * Defines if the text within the tabs should be hidden and only the icon should be shown.
+   * The text is always visible when the item is collapsed into a picker.
+   * @default 'show'
    */
-  isIconOnly?: boolean
+  labelBehavior?: 'show' | 'hide'
 }
 
 export interface TabProps extends Omit<AriaTabProps, 'children' | 'style' | 'className'>, StyleProps {
@@ -96,7 +98,7 @@ export const Tabs = forwardRef(function Tabs(props: TabsProps, ref: DOMRef<HTMLD
     isDisabled,
     disabledKeys,
     orientation = 'horizontal',
-    isIconOnly = false
+    labelBehavior = 'show'
   } = props;
   let domRef = useDOMRef(ref);
   let [value, setValue] = useControlledState(props.selectedKey, props.defaultSelectedKey ?? null!, props.onSelectionChange);
@@ -112,7 +114,7 @@ export const Tabs = forwardRef(function Tabs(props: TabsProps, ref: DOMRef<HTMLD
           disabledKeys,
           selectedKey: value,
           onSelectionChange: setValue,
-          isIconOnly,
+          labelBehavior,
           onFocus: () => pickerRef.current?.focus(),
           pickerRef
         }]
@@ -141,10 +143,12 @@ const tablist = style({
           compact: 24,
           regular: 32
         },
-        isIconOnly: {
-          density: {
-            compact: 16,
-            regular: 24
+        labelBehavior: {
+          hide: {
+            density: {
+              compact: 16,
+              regular: 24
+            }
           }
         }
       }
@@ -170,7 +174,7 @@ const tablist = style({
 });
 
 export function TabList<T extends object>(props: TabListProps<T>) {
-  let {density, isDisabled, disabledKeys, orientation, isIconOnly, onFocus} = useContext(InternalTabsContext) ?? {};
+  let {density, isDisabled, disabledKeys, orientation, labelBehavior, onFocus} = useContext(InternalTabsContext) ?? {};
   let {showItems} = useContext(CollapseContext) ?? {};
   let state = useContext(TabListStateContext);
   let [selectedTab, setSelectedTab] = useState<HTMLElement | undefined>(undefined);
@@ -208,7 +212,7 @@ export function TabList<T extends object>(props: TabListProps<T>) {
       <RACTabList
         {...props}
         ref={tablistRef}
-        className={renderProps => tablist({...renderProps, isIconOnly, density})} />
+        className={renderProps => tablist({...renderProps, labelBehavior, density})} />
       {orientation === 'horizontal' &&
         <TabLine showItems={showItems} disabledKeys={disabledKeys} isDisabled={isDisabled} selectedTab={selectedTab} orientation={orientation} density={density} />}
     </div>
@@ -255,7 +259,7 @@ const selectedIndicator = style({
   transitionTimingFunction: 'in-out'
 });
 
-function TabLine(props: TabLineProps & {isIconOnly?: boolean}) {
+function TabLine(props: TabLineProps) {
   let {
     disabledKeys,
     isDisabled: isTabsDisabled,
@@ -342,7 +346,9 @@ const tab = style({
   flexShrink: 0,
   transition: 'default',
   paddingX: {
-    isIconOnly: size(6)
+    labelBehavior: {
+      hide: size(6)
+    }
   }
 }, getAllowedOverrides());
 
@@ -356,7 +362,7 @@ const icon = style({
 });
 
 export function Tab(props: TabProps) {
-  let {density, isIconOnly} = useContext(InternalTabsContext) ?? {};
+  let {density, labelBehavior} = useContext(InternalTabsContext) ?? {};
 
   return (
     <RACTab
@@ -364,7 +370,7 @@ export function Tab(props: TabProps) {
       // @ts-ignore
       originalProps={props}
       style={props.UNSAFE_style}
-      className={renderProps => (props.UNSAFE_className || '') + tab({...renderProps, density, isIconOnly}, props.styles)}>
+      className={renderProps => (props.UNSAFE_className || '') + tab({...renderProps, density, labelBehavior}, props.styles)}>
       {({
           // @ts-ignore
           isMenu
@@ -380,9 +386,11 @@ export function Tab(props: TabProps) {
                     style({
                       order: 1,
                       display: {
-                        isIconOnly: 'none'
+                        labelBehavior: {
+                          hide: 'none'
+                        }
                       }
-                    })({isIconOnly})
+                    })({labelBehavior})
                 }],
                 [IconContext, {
                   render: centerBaseline({slot: 'icon', styles: style({order: 0})}),
@@ -479,7 +487,7 @@ let HiddenTabs = function (props: {
 let TabsMenu = (props: {items: Array<Node<any>>, onSelectionChange: TabsProps['onSelectionChange']}) => {
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
   let {items} = props;
-  let {density, onSelectionChange, selectedKey, isDisabled, disabledKeys, pickerRef, isIconOnly} = useContext(InternalTabsContext);
+  let {density, onSelectionChange, selectedKey, isDisabled, disabledKeys, pickerRef, labelBehavior} = useContext(InternalTabsContext);
   let state = useContext(TabListStateContext);
   let allKeysDisabled = useMemo(() => {
     return isAllTabsDisabled(state?.collection, disabledKeys ? new Set(disabledKeys) : new Set());
@@ -501,7 +509,7 @@ let TabsMenu = (props: {items: Array<Node<any>>, onSelectionChange: TabsProps['o
           ref={pickerRef ? pickerRef : undefined}
           isDisabled={isDisabled || allKeysDisabled}
           density={density!}
-          isIconOnly={isIconOnly}
+          labelBehavior={labelBehavior}
           items={items}
           disabledKeys={disabledKeys}
           selectedKey={selectedKey}

package/src/TabsPicker.tsx

@@ -88,8 +88,9 @@ export interface PickerProps<T extends object> extends
     density: 'compact' | 'regular',
     /**
      * If the tab picker should only display icon and no text for the button label.
+     * @default 'show
      */
-    isIconOnly?: boolean
+    labelBehavior?: 'show' | 'hide'
 }
 
 export const PickerContext = createContext<ContextValue<Partial<PickerProps<any>>, FocusableRefValue<HTMLButtonElement>>>(null);
@@ -162,7 +163,9 @@ const iconCenterWrapper = style({
   display: 'flex',
   gridArea: 'icon',
   paddingStart: {
-    isIconOnly: size(6)
+    labelBehavior: {
+      hide: size(6)
+    }
   }
 });
 
@@ -181,7 +184,7 @@ function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLB
     items,
     placeholder = stringFormatter.format('picker.placeholder'),
     density,
-    isIconOnly,
+    labelBehavior = 'show',
     ...pickerProps
   } = props;
   let isQuiet = true;
@@ -217,7 +220,7 @@ function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLB
                       [IconContext, {
                         slots: {
                           icon: {
-                            render: centerBaseline({slot: 'icon', styles: iconCenterWrapper({isIconOnly})}),
+                            render: centerBaseline({slot: 'icon', styles: iconCenterWrapper({labelBehavior})}),
                             styles: icon
                           }
                         }
@@ -228,11 +231,13 @@ function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLB
                           [DEFAULT_SLOT]: {styles: style({
                             display: {
                               default: 'block',
-                              isIconOnly: 'none'
+                              labelBehavior: {
+                                hide: 'none'
+                              }
                             },
                             flexGrow: 1,
                             truncate: true
-                          })({isIconOnly})}
+                          })({labelBehavior})}
                         }
                       }],
                       [InsideSelectValueContext, true]

package/style/dist/spectrum-theme.cjs

@@ -492,7 +492,24 @@ function $7dddb03c6ef7d79c$export$9b476054b78b89cd(a, b, percent) {
     return `[color-mix(in srgb, ${$7dddb03c6ef7d79c$var$parseColor(a)}, ${$7dddb03c6ef7d79c$var$parseColor(b)} ${percent}%)]`;
 }
 function $7dddb03c6ef7d79c$export$46def8197cf4dd4c(angle, ...tokens) {
-    return `linear-gradient(${angle}, ${tokens.map(([color, stop])=>`${$7dddb03c6ef7d79c$var$parseColor(color)} ${stop}%`)})`;
+    // Generate @property rules for each gradient stop color. This allows the gradient to be animated.
+    let propertyDefinitions = [];
+    for(let i = 0; i < tokens.length; i++)propertyDefinitions.push(`@property --g${i} {
+  syntax: '<color>';
+  initial-value: #0000;
+  inherits: false;
+}`);
+    if (this && typeof this.addAsset === 'function') this.addAsset({
+        type: 'css',
+        content: propertyDefinitions.join('\n\n')
+    });
+    return [
+        {
+            type: 'linear-gradient',
+            angle: angle,
+            stops: tokens
+        }
+    ];
 }
 function $7dddb03c6ef7d79c$var$generateSpacing(px) {
     let res = {};
@@ -671,8 +688,10 @@ let $7dddb03c6ef7d79c$var$gridTrackSize = (value)=>{
     return value in $7dddb03c6ef7d79c$var$baseSpacing ? $7dddb03c6ef7d79c$var$baseSpacing[value] : value;
 };
 const $7dddb03c6ef7d79c$var$transitionProperty = {
-    default: 'color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter',
-    colors: 'color, background-color, border-color, text-decoration-color, fill, stroke',
+    // var(--gp) is generated by the backgroundImage property when setting a gradient.
+    // It includes a list of all of the custom properties used for each color stop.
+    default: 'color, background-color, var(--gp), border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter',
+    colors: 'color, background-color, var(--gp), border-color, text-decoration-color, fill, stroke',
     opacity: 'opacity',
     shadow: 'box-shadow',
     transform: 'transform, translate, scale, rotate',
@@ -1343,7 +1362,26 @@ const $7dddb03c6ef7d79c$export$1d567c320f4763bc = (0, $b3643cb9d2948e30$exports.
             'dark',
             'light dark'
         ],
-        backgroundImage: (0, $b3643cb9d2948e30$exports.createArbitraryProperty)(),
+        backgroundImage: (0, $b3643cb9d2948e30$exports.createArbitraryProperty)((value, property)=>{
+            if (typeof value === 'string') return {
+                [property]: value
+            };
+            else if (Array.isArray(value) && value[0]?.type === 'linear-gradient') {
+                let values = {
+                    [property]: `linear-gradient(${value[0].angle}, ${value[0].stops.map(([, stop], i)=>`var(--g${i}) ${stop}%`)})`
+                };
+                // Create a CSS var for each color stop so the gradient can be transitioned.
+                // These are registered via @property in the `linearGradient` macro.
+                let properties = [];
+                value[0].stops.forEach(([color], i)=>{
+                    properties.push(`--g${i}`);
+                    values[`--g${i}`] = $7dddb03c6ef7d79c$var$parseColor(color);
+                });
+                // This is used by transition-property so we automatically transition all of the color stops.
+                values['--gp'] = properties.join(', ');
+                return values;
+            } else throw new Error('Unexpected backgroundImage value: ' + JSON.stringify(value));
+        }),
         // TODO: do we need separate x and y properties?
         backgroundPosition: [
             'bottom',