v0.188.0

Minor Changes

• #1459 9ef6bb35 Thanks @tenphi! - The label property of Button, ItemButton, ItemAction, Action and InfoBadge is deprecated, and passing it logs a one-time warning in development. Use children for a button's visible text and aria-label for the accessible name of an icon-only control. label keeps working where it worked before, but ItemAction never applied it, so an icon-only ItemAction named only through label had no accessible name. Give it an aria-label (or a string tooltip). For AlertDialog actions and DialogForm's submitProps / cancelProps, set the text with children, as in actions={{ confirm: { children: 'Delete' } }}. A label passed there still wins over the default text. A dialog button given its own children and no label used to keep the default text as its accessible name (Submit, Ok, Cancel) while showing the consumer's text; its name now matches what it shows, so a test that queried such a button by the default name needs updating. A dialog button whose icon is a function (({ loading }) => …) now always shows the default text beside it; pass aria-label and a static icon for an icon-only button.

• #1459 9ef6bb35 Thanks @tenphi! - DataTable / ItemTable: a column's cellStyles now go through tasty instead of the cell's inline style. Tokens such as { color: '#surface-text-soft-2' }, units, presets and state maps now take effect where they used to be dropped silently, and the column's styles win over the table's default cell paint, column tints and the table-level cellStyles. On a dataType: 'number' column, a function-form cellStyles is now called per cell and merged over the tabular figures; before, the numeric default replaced it. Values are now read as tasty rather than CSS, so check CSS-shaped ones: a side property such as paddingLeft: 24 or marginTop: 8 becomes the full shorthand with the other sides at 0 (use the CSS longhand with a unit, paddingInlineStart: '24px', to set one side); a bare number takes a unit on tasty's own properties (lineHeight: 1.2 becomes 1.2px, pass '1.2' for a unitless value) but stays unitless, and so invalid, on plain CSS ones (borderRadius: 4, pass '4px' or use radius); a plain color name inside border or outline is dropped ('1px solid red', write '1px solid #red'); a React-style vendor key such as WebkitLineClamp is read as a sub-element and dropped, so quote the CSS name ('-webkit-line-clamp': 2, '-webkit-box-orient': 'vertical'); and textOverflow: 'ellipsis' also sets overflow: hidden and white-space: nowrap.

• #1459 9ef6bb35 Thanks @tenphi! - - Tabs.List accepts qa and qaVal, applied as data-qa / data-qaval on the role="tablist" element, so tests can select the tab list without relying on [data-element="TabList"].

  • Tabs no longer sets aria-controls on the selected tab when that tab has no panel (navigation-only tabs, or a tab without content next to tabs that have it). The attribute used to point at a tabpanel id that nothing on the page had.
  • Tabs keeps the active tab in view when the strip is mounted with a tab near its end active. The tab was scrolled into view before its actions (such as a menu trigger) were measured, so once every tab grew to its final width the active tab could end up past the edge of the strip or under a suffix button. The strip keeps following the active tab's size until the user interacts with the tab bar (wheel, pointer, touch or keyboard, which covers the scrollbar and the scroll arrows); after that a scrolled strip stays where the user left it.

• #1459 9ef6bb35 Thanks @tenphi! - ComboBox and SearchComboBox now skip their built-in key handling for a key whose onKeyDown handler calls e.preventDefault(), matching TagInput and CommandTextArea. A prevented ArrowDown no longer opens the popover, and a prevented Enter no longer selects an option, commits a custom value or calls onSubmit. A handler that called preventDefault() but still relied on the built-in handling for that key needs to drop the call.

  This changes one common pattern. On a ComboBox with allowsCustomValue inside a form, onKeyDown={(e) => { if (e.key === 'Enter') e.preventDefault(); }} used to stop the form submit while Enter still committed the typed value. It now stops both, and the value is committed only on blur. To keep committing on Enter, commit it in the handler: control selectedKey and call setSelectedKey(e.currentTarget.value.trim() || null) after e.preventDefault().

  onKeyDown on ComboBox and SearchComboBox is now typed with React Aria's keyboard event, the one it always received at runtime, so e.continuePropagation() type-checks. A handler annotated with React's KeyboardEvent still type-checks, but code that calls the prop itself (a wrapper forwarding a native <input> event to it) must now pass React Aria's event.

  TextInput, TextArea, PasswordInput and NumberInput now declare onKeyDown and onKeyUp in their own prop types, with the same signature as React Aria's keyboard handlers.

Patch Changes

• #1459 9ef6bb35 Thanks @tenphi! - The no-redundant-default-prop lint rule no longer flags disableActionsFocus={true} on Item as redundant. Its registry, like the Item docs, listed the default as true, while the component defaults to false. So the autofix removed a prop that was doing something, and the item's actions became focusable again.

• #1459 9ef6bb35 Thanks @tenphi! - ItemButton no longer renders navigationOptions (or the deprecated label) as an attribute on its element. Navigation still receives the options, but the element also got navigationOptions="[object Object]", and React warned about an unknown prop in development.

• #1459 9ef6bb35 Thanks @tenphi! - A Menu.SubMenuTrigger placed inside a Menu.Section now opens its submenu on hover and click, and its item shows the submenu arrow, as it does outside a section. Before, the item rendered as a plain item with no submenu.

• #1459 9ef6bb35 Thanks @tenphi! - A popover opened from inside a modern DialogForm (one given a form controller), such as a Picker or FilterPicker listbox or a menu, now closes on a click elsewhere in the dialog, instead of staying open until a click outside it. The form now opts out of popover dismissal for presses only, through the new data-popover-keep-on-press attribute, which Button and ItemButton honour like data-popover-keep without making a click in the subtree count as inside other popovers.

• #1459 9ef6bb35 Thanks @tenphi! - TagInput: the chips grid, the show-options and clear buttons, and the options listbox are now named after the field when it is named by aria-label or aria-labelledby instead of a visible label. With aria-labelledby they read the same elements ("Selected values" followed by the field's name, and the listbox the name alone, no longer "Options"); an aria-label is joined in ahead of those, in the input's own order, such as "Selected values, Region" or, with aria-labelledby as well, "Selected values, Region Primary key". Fields without a visible label, such as one per table row, no longer all expose the same generic names.