v0.184.0

Minor Changes

• #1425 86ea64d7 Thanks @tenphi! - Add tooltip to Checkbox: a tooltip shown on hover over the box and its inline label, standalone or inside a Checkbox.Group, and also while the checkbox is disabled — a place to say why an option is unavailable. It opens on keyboard focus too, and describes the input to screen readers. It takes a string or TooltipProvider props. It is separate from labelTooltip, the info badge next to a field label.

• #1424 f0824b25 Thanks @tenphi! - Dialog's Footer now draws a top border while the dialog's Content scrolls, and none while it fits. The footer carries a content-overflow modifier for as long as the body overflows, tracked through resizes and content changes, so the line separates the actions from a body that continues beneath them without cluttering a short dialog. Set border in the footer's own styles to keep the line always or never draw it. Content now renders data-id="Content", which is how the dialog finds its body.

• #1424 f0824b25 Thanks @tenphi! - DialogForm now renders its Submit and Cancel buttons in a pinned Footer beside the scrolling Content, instead of inside it. A long form scrolls its body while the actions stay visible; previously they scrolled away with the content and a dialog that needed pinned actions could not use DialogForm at all. The <form> now wraps both slots, so the buttons are still inside it and native submit is unchanged. The actions now sit as far below the last field as in any other dialog footer, 8px further than before.

  A Form placed directly in a Dialog now lays itself out as the dialog's slot column, so a hand-composed Dialog > Form > Content + Footer scrolls and pins without restating display: flex, flexGrow: 1, height: 'min 0' and gap: 0 on the form. This is the form's own state, so styles passed to the form still override it. A form nested deeper, or a plain <form> element, is left alone.

• #1425 86ea64d7 Thanks @tenphi! - Breaking: the info badge next to a field's label is now labelTooltip, not tooltip. This applies to every field component (TextInput, TextArea, CommandTextArea, NumberInput, PasswordInput, SearchInput, ColorInput, ComboBox, SearchComboBox, Select, Picker, FilterPicker, ListBox, FilterListBox, Checkbox, CheckboxGroup, Switch, RadioGroup, Slider and its variants, the date and time pickers, FileInput, ColorPicker, ColorSwatchGroup, TextInputMapper), to the legacy Field / Form.Item, and to FieldWrapper. tooltip now means only the control's own tooltip, as it does on Item and Button. Previously a component that is both a field and a trigger had one prop meaning two things: a labelled Select rendered its tooltip on the trigger and again as a label badge, and tooltip={true} on a labelled Picker or FilterPicker rendered an empty badge.

  Migrating: rename tooltip to labelTooltip wherever it described the label, whether on the field or on a legacy Field / Form.Item wrapping it. TypeScript flags the old spelling on every field except Select and Checkbox, where tooltip is valid as the control's own: the Select trigger's tooltip, and Checkbox's new hover tooltip over the box and its inline label. Search for Select and Checkbox elements with both label and tooltip by hand and move the prop to labelTooltip if the label badge is what it was for (on Select it previously rendered in both places). JS callers, as any and untyped spreads are not flagged either; in development, the first labelled field — other than Select and Checkbox — that still receives tooltip logs a one-time console warning naming labelTooltip. The trigger tooltips of Picker, FilterPicker and ColorPicker remain triggerTooltip.

• #1422 565dc93d Thanks @tenphi! - Let popover fields anchor to an element other than their own trigger. Select, Picker, FilterPicker, ColorPicker, ColorInput, DatePicker, DateRangePicker, DateRangeSeparatedPicker and PeriodPicker now accept targetRef, matching the prop DialogTrigger already had, so adjacent controls of different widths can line their popovers up with one shared container. The same components (except FilterPicker, which already had it) also accept placement, since anchoring to a wider container is only useful alongside control over the alignment. Both default to the current behaviour, so existing callers are unaffected.

• #1421 a8295d41 Thanks @tenphi! - Add a soft brand-purple Tag theme: <Tag theme="primary"> renders the pale card — tinted border, strong colored text — at the primary hue, alongside the existing default, danger, success, warning and note cards. Previously the brand hue was reachable only through theme="special", which is a solid fill, so designs calling for a soft purple chip had to borrow note one hue over. special is unchanged and still renders the solid fill.

Patch Changes

• #1426 17416c42 Thanks @tenphi! - Fix Menu items running their action twice from the keyboard: Enter or Space on a focused item called the menu's onAction, and the item's own onAction, twice — in a standalone Menu, a Menu.Section, a Menu.Trigger popover and a submenu alike (clicks were unaffected). Enter on a Menu.SubMenuTrigger now only opens the submenu, instead of also calling the parent menu's onAction with the trigger's key, and a click on a submenu trigger after opening it from the keyboard opens it straight away rather than after the hover delay.

• #1425 86ea64d7 Thanks @tenphi! - A Radio's tooltip now opens when the option takes keyboard focus, not only on hover, and the focused input is described by it, so screen readers announce it. It follows arrow-key navigation between options, and any aria-describedby the radio already had is kept alongside it.

• #1425 86ea64d7 Thanks @tenphi! - Fix tooltip props that were accepted but rendered nothing. A classic (type="radio") Radio now shows its tooltip, including on a disabled option. A button or tabs Radio now truncates a label it has no room for and shows the auto tooltip the docs describe (tooltip defaults to true); with a block description the label keeps its full width, as before. A button Radio also supports highlight now, and an icon-only one renders as a square icon button matching ItemButton instead of carrying an empty, padded label (32px instead of 44px at the default size). Both previously broke because the radio's hidden input was treated as part of the label. Tabs type="radio" and Layout.Header now truncate a title they have no room for and show it in a tooltip, instead of letting it spill out; Layout.Header renders its title text directly in the heading, without the inner <span> it used to wrap it in. labelRef on Item, ItemButton and Radio (button or classic) now points at the label element instead of leaking to the DOM as a labelref attribute, and accepts a callback ref as well as a ref object.

• #1425 86ea64d7 Thanks @tenphi! - Fix tooltips that were accepted but never showed, or showed and vanished. Items inside a Menu.Section, and every CommandMenu item, no longer get a second tooltip wrapped around their own: the two closed each other, so an object or tooltip={true} tooltip flashed and was gone, and the extra wrapper put a <div> inside the menu list. An editable Tab whose title is not a string now shows its tooltip. The Tabs picker (showTabPicker) shows each tab's tooltip on its entry. Button.Split shows the current action's tooltip on the action button, as it already did its icon and label (actionProps.tooltip overrides it). A disabled tooltip no longer opens unseen on hover and swallows Escape while the pointer rests on its trigger, which could keep a Dialog from closing while the pointer was over an item or tab with actions, or a button radio.