Skip to content

0.16.0

Choose a tag to compare

View all tags
@github-actions github-actions released this 04 Nov 17:28
· 10 commits to development since this release
0.16.0
ceec273

Features

  • [Breaking] styles.css built with Tailwind CSS v4 — variant utilities (hover:, focus-visible:, disabled: …) move into @layer ui, so a host's unlayered CSS now always beats them and hover: applies only on devices that can hover; v4's preflight gives input / select / textarea a transparent background and no radius, and the stylesheet targets Safari 16.4+, Chrome 111+ and Firefox 128+ (#937) — see migration guide
  • [Breaking] DialFileManager removed — the legacy file manager, DialFoldersTree, DialDestinationFolderPopup, its provider, hooks, enums, column constants and the ./file-manager subpath are gone; import them from @epam/ai-dial-react-file-manager, which exports every one of these names (#940) — see migration guide
  • [Breaking] 34 unused 1.0 components and DialSchemaRenderer removed — DialSelect, DialPopup, DialGrid, DialCheckbox, LazyDialJsonEditor and the rest give way to their 2.0 counterparts, and monaco-editor / @monaco-editor/react are no longer optional peers (#979) — see migration guide
  • [Breaking] Legacy DialAnalyticsCard, DialAnalyticsBar, DialAnalyticsBarGroup, DialAnalyticsHistogram, DialAnalyticsErrorTag and the 1.0 DialSteps removed — use the 2.0 Analytics* components, a red filled Badge and Steps (#983) — see migration guide
  • [Breaking] CaptionText and ErrorText (2.0) no longer render role="alert" — helper text and validation errors stop interrupting screen readers; Input, Textarea, Select and the SchemaRenderer fields link their own error / caption through aria-describedby and set aria-invalid, Select gains ariaDescribedBy, and tests using getByRole('alert') need another query (#964) — see migration guide
  • [Breaking] Grid (2.0) empty state follows Patterns 2.0 — the shared NoDataContent card replaces the 100px icon, the defaults read "No items yet" / "No items found" with new filteredEmptyState*, emptyStateAction and emptyStateLive props, and the no-rows message is no longer announced by default; Select gains the same filteredEmptyState* props (#1004) — see migration guide
  • AnalyticsCard, AnalyticsBar, AnalyticsBarGroup and AnalyticsHistogram (2.0) added — the DIAL Admin analytics set rebuilt on the 2.0 Tooltip, Accordion and Spinner, with errors on a red Badge; compare-mode dividers line up across an equal-height row of cards (#978, #997)
  • Steps and LabelledText (2.0) added — same props as DialSteps / DialLabelledText, so migrating is a rename; Steps is an ordered list with aria-current="step" and announced statuses, and LabelledText truncates its value behind EllipsisTooltip (#977, #983)
  • StateScreen and ErrorBoundary (2.0) added — a whole screen for a state the app cannot work past (signed out, forbidden), and the crash screen built on it that catches a render error, focuses a retry button, resets on resetKeys and announces the crash through an assertive LiveRegion (#958, #1001)
  • LoginScreen (2.0) added — the full-page sign-in screen DIAL Chat and Models Garden each built by hand, with themed artwork, a focusable h1 and one link button per identity provider; Spinner gains fullScreen and focusRef for the matching loading screen (#998, #999)
  • FormSection and SelectedEntityCard (2.0) added — the titled section of a form or builder column, and the card of a field holding one selected model, agent or toolset; EntityIdentity gains showType, and its footer now sits right under the name (#975, #980)
  • LiveRegion (2.0) added — an always-mounted status / alert region, so the first message put into it is announced reliably; announce on CaptionText / ErrorText wraps them in one (#990)
  • ToggleChip (2.0) added — an aria-pressed chip that switches one option on and off independently, for a row of toggles such as a model's tools (#991)
  • ResizeHandle (2.0) added — a pointer- and keyboard-driven separator on a panel's inline-end edge, with role="separator", RTL mirroring, double-click reset and a short gradient segment that lights up on hover (#956, #959, #969)
  • Dropdown (2.0) — searchable adds a search field above the items that filters them (sub-menus included), highlights matches and announces noResultsLabel; maxVisibleItems caps the list at a number of rows (#946)
  • Dropdown (2.0) — overlayRole (DropdownOverlayRole.Menu / Dialog / None) with overlayAriaLabel / overlayAriaLabelledBy gives a renderOverlay panel that is not a menu valid ARIA, and returnFocus={false} opts out of returning focus to the trigger (#991)
  • ButtonDropdown and DropdownItem (2.0) — controlled open / defaultOpen / onOpenChange and controlled submenus (subMenuOpen / onSubMenuOpenChange) keep menu state across a responsive layout change; iconAfter={null} hides the chevron and dropdownProps forwards search and placement options (#1006)
  • Calendar (2.0) — time mode opens an hour/minute picker from a clock button (showTimePicker={false} restores the bare field), showTimezone labels the datetime popover's time field too, and renderTimeField / pickerButtonClassName let a host fit its own time control (#945, #954, #1000)
  • Accessibility hooks — ariaDescribedBy on Calendar and MarkdownEditor (plus invalid on MarkdownEditor), announce on StateScreen, closeAriaLabel on Notification and Step.disabled on Steps, so hosts no longer patch the DOM (#994)
  • Grid (2.0) — appearance={GridAppearance.Chat} draws the design's Chat table (borderless card, 12px cell padding, inset row dividers, rounded hover rows), and colorScheme={GridColorScheme.Dark} paints native controls such as the date-filter calendar dark (#932, #981, #982)
  • NoDataContent (2.0) — the Patterns 2.0 empty state: a themed placeholder-list illustration, new title and description styles and an action slot; Select's no-options state uses it too (#968)
  • Popup and ConfirmationPopup (2.0) — footer buttons split the row evenly on mobile, so a Cancel/Confirm pair renders 50/50 (#930, #947)
  • Tabs (2.0) — TabItem.status (TabStatus.Error / Warning) draws a coloured icon and adds the status to the tab's accessible name, with statusLabel for translations (#974)
  • Tag (2.0) — TagAppearance.Bordered, the 24px rimmed value chip of a form field that stays visible on a raised surface (#976)
  • Avatar (2.0) — color overrides the name-derived colour pair, with AVATAR_PALETTE, AvatarColor and AvatarColorClasses exported to pin a palette entry (#929)
  • Breadcrumbs (2.0) — BreadcrumbsSize.Tiny, a 16px trail for a dense header whose current page truncates last and whose focus ring is never clipped (#1003)
  • PasswordInput (2.0) — isToggleHidden drops the reveal toggle while the field stays editable (#973)
  • TransferQueue (2.0) — a row with a numeric percent shows a determinate progress ring instead of the spinner (#953)
  • ProgressBar and Notification (2.0) — ProgressBarRole.Meter renders role="meter" for a quota or capacity level, and NotificationSurface.Neutral draws any variant on the neutral sunken layer; the always-overwritten native role is no longer in ProgressBarProps (#991)
  • FileName (2.0) — icon replaces the type icon, e.g. to mark a special folder in a tree (#985)
  • BottomSheet (2.0) — the backdrop carries dial-kit-bottom-sheet-overlay (DIAL_KIT_CLASS.bottomSheetOverlay), so a host can lift the whole sheet without hashed-class selectors (#941)
  • Monospace type steps dial-code-semi-text, dial-tiny-code-text and dial-tiny-code-semi-text added (#991)

Fixes

  • Spinner (2.0) and DialLoader spin again (regression fix) — a duplicate theme key had dropped animate-spin-steps since 0.13.0; bg-info / bg-success also fall back to their 2.0 shades again (#938)
  • Dropdown (2.0) passes axe — aria-haspopup / aria-expanded / aria-controls move from the role-less wrapper onto the trigger (trigger-less trigger={[]} dropdowns included), aria-controls is set only while open, Floating UI's aria-hidden focus guards are gone, and Select's listbox no longer sits inside a menu (#967, #993, #996, #1007)
  • Grid (2.0) — hovered and selected rows drop the 0.15.0 outline and keep their fill alone, rightAligned / numericColumn cells right-align their text, and a row that isRowSelectable rejects shows a disabled selection control (#981, #984, #1002)
  • Popup and ConfirmationPopup (2.0) — the title is set in Heading 2 (dial-h2-text, was dial-h1-text), the size the design gives it; titleClassName still merges on top (#950, #982)
  • shadow-xs, shadow-sm, shadow-md and shadow-lg match the design's scale — sm and md become two-layer and xs glows evenly around a pressed button; no token is renamed (#952, #982)
  • TransferQueue (2.0) — the header no longer counts failed items, and closing asks for confirmation only while an item is still running (#952)
  • FolderPath (2.0) — a collapsed path shows the full path in a tooltip instead of a click menu of disabled items, and the leaf folder keeps its width longest (#948, #951)
  • Radio, Checkbox and Switch (2.0) show their hover state while the label text is hovered (#949)
  • Input, Select and the other .dial-kit-input fields draw the focus ring over the border, so an overflow container no longer clips it (#987)
  • EntityIdentity (2.0) draws its icon on a themable bg-entity-icon plate, so dark logos stay visible in a dark theme; Avatar gains imageClassName (#972)
  • StarterButton (2.0) is transparent at rest and fills only on hover and press, as designed (#991)
  • Primary solid buttons start their gradient at the border box, removing the sliver along each edge (#989)
  • MarkdownEditor (2.0) toolbar wraps on narrow cards instead of overflowing (#934)
  • mergeClasses treats the dial-*-text type scale as one conflict group — a caller's dial-small-text now replaces a component's default instead of losing on stylesheet order (#964)
  • The package no longer publishes .d.ts files for specs, tests and mocks (#939)

Other

Assets 2
Loading