Version 0.9.0 adds virtualization and async loading support to ComboBox and Picker, updates Dialog sizes, and introduces important TypeScript changes for UNSAFE_className. This release also includes significant style macro updates.
Updates
- Combobox: Support for virtualization and async loading
- Dialog: Update sizes
- Picker: Support for virtualization and async loading
- Popover: Add
triggerRefprop - TableView: Support custom menus in columns
- Apply
position: relativeto Radio and Checkbox to prevent layout jumps
UNSAFE_className Typescript Error
Style macros passed to UNSAFE_className will now result in a TypeScript error. This is not allowed because UNSAFE_className is appended to the component's own styles, not merged. For example, if you pass a style macro class that sets a property but the component also has a class setting the same property, both will be applied and result in undefined behavior depending on the order the CSS was loaded on the page.
We strongly discourage using UNSAFE_className because it results in inconsistent UIs and hard to maintain code. Instead, use React Aria Components with the S2 style macro to create custom components. Safe style properties can be passed to the styles prop of an S2 component.
Style macro updates
We have made significant changes to the way our Style Macro generates class names in an effort to make them stable between versions. While we work to stabilize the style macro class names, we have added a postfix based on the version number so that class names don't conflict with any prior or future version.
We also made some changes to the available style macro values.
- Reduced the default spacing scale so it only goes up to 96px. Other values can be used via the
space()macro - Switched to rems for media queries. Since component sizes scale with rems, breakpoints need to match.
- Switch to px instead of rems for padding and absolute positioning. This avoids adding extra whitespace that causes additional text wrapping.
- Used rems and touch scaling for icon sizes, and added t-shirt size prop
- Added support for percentages and viewport relative units (e.g. vw)
- Added support for arbitrary aspect ratio values
- Added support for
calcand other math functions - Added support for css-wide keywords like
inherit - Colors no longer include default hover/press/focus states (e.g.
backgroundColor: 'accent'). Use thebaseColormacro instead. - The
controlvalue has been removed fromfontSize,borderRadius,width,height, and other sizing properties. Use explicit values for each t-shirt size instead. - Fixed spelling of
discinlistStyleType(wasdist)