Changelogs for components, icons, mcp, and tokens. These, and other releases, can also be found on the Pluma repository
description rendering and child title/description composition components, with React and Ember codemods for migrating existing Banner children/yields into descriptions.2415d3b: Fix polymorphic type checking for as prop — JSX.IntrinsicElements → React.JSX.IntrinsicElements
The global JSX namespace doesn't exist in TS 5.x with jsx: "react-jsx". The emitted .d.ts referenced bare JSX.IntrinsicElements, which resolved to nothing in consumers, causing the conditional type to fall through and silently accept any prop when as was used (e.g. <Box as="div" garbage="hello" /> compiled without error).
$extensions.mode resolve to the referenced token's value for the same mode. The tokens build now emits Cobalt UI's internal {token#mode} reference format for generated mode aliases, matching the format Cobalt's Figma collection parser uses for mode-specific variable references, and the components theme build strips that suffix when converting original aliases back to CSS variables.DataTable showing a stray bottom border on the last visible row when virtualization is enabled and there are no more rows to scroll to. The virtualizer's end placeholder row now signals its empty state via a data-pluma-table-end-placeholder attribute, which TableTd uses to suppress the preceding row's bottom border.SegmentedControl icon shifting horizontally when the selected option changes. The icon and label now share the same fixed position across both the active (bold) and inactive (regular) states.label prop to DataTableHeaderColumnsMenu. When provided, the trigger button displays visible text alongside the icon instead of rendering as icon-only.date prop to accept null | undefined (renders — fallback). Treat 0 as missing. Auto-detect epoch seconds vs milliseconds for numeric inputs (values below 10_000_000_000 are converted to ms).4ade8ba: Button: add unsafe_withMigratedButtonVariants flag (also configurable
via PlumaProvider's componentConfig.PlumaButton). When set, button
variants render as if the upcoming major release that removes the
secondary variant has already shipped:
secondary renders with current tertiary stylestertiary renders with current subtle stylesIntended to be enabled together with running the
codemods/button-variant-rename codemod. With the flag on, the codemod
can be applied safely before the breaking-change major release — your
app looks the same before and after the rename. When the major
eventually ships, drop the flag.
This flag supersedes unsafe_withSoftDeprecatedSecondaryVariant: when
both are set (or just the new one), the secondary → tertiary mapping
is still applied.
4ade8ba: Add codemods (codemods/button-variant-rename/) that consumers can run
ahead of the upcoming Button variant renames: tertiary → secondary and
subtle → tertiary. Separate transforms ship for React (.tsx/.jsx)
and Ember (.gts/.gjs/.hbs); see the codemod README for instructions
on running it directly from this repo without publishing an npm package.
Pair this with the new unsafe_withMigratedButtonVariants flag (see
separate changeset) so the renamed source renders identically to the
pre-codemod look. When the major release that drops secondary ships,
drop the flag — your app keeps rendering the same.
c862593: Add Coin component — a shaped container (circle or rounded square) of fixed size that frames an Icon, Image, or short text content, with optional status indicator and label-token colorVariant. Coin propagates size, shape, imageFit, and color to descendants via context, so child Icon and Image components auto-size and Images can fill the coin edge-to-edge when imageFit="cover".
Deprecates LabelIcon (use <Coin><Icon /></Coin> instead) and Avatar's icon/iconSize props (compose with Coin for non-user-avatar use cases). Both will be removed in a future major version.
icon prop still suppresses the initials fallback as before.icon and iconSize props to AvatarconfirmationPhrase option to ConfirmationModal. When set, a text field appears requiring the user to type the exact phrase before the confirm button becomes enabled.SegmentedControl indicator briefly animating in from the default position on initial render. The first position update now uses an inline transition-duration: 0ms override instead of relying on the parent's :has()-driven CSS variable, whose cascade can fail to reach the indicator before style.transform is mutated.react/utils/* subpaths. The types field pointed to dist-react/react/public-utils/ but files are at dist-react/public-utils/.ed0c209: Adds Banner design an a11y docs
418c70f: Add early return with dev warning when icon name is undefined
76ab318: fix: replace raw palette refs with semantic tokens for dark mode compatibility
Components were referencing palette primitives directly instead of semantic color tokens, which breaks on dark themes since palette values don't change between modes.
palette['grey-100'] → color['border-minimal']palette['grey-100'] → color['surface-subtle']palette['grey-100'] → color['surface-subtle']palette['grey-100'] → color['surface-subtle']dataTableSelectedRowBackgroundColor and dataTableNestedSelectedRowBackgroundColor component vars with current palette values as fallbacksicon-white color token, and fix up tokens in Button and Snackbarvalue is an empty string.text-wrap: pretty to heading components to improve text wrapping and avoid orphaned words on the last line.3eacb12: Drawer: Add lg, xl, and xxl sizes and subtitle prop
5b419db: Remove legacy pseudo-element fade styles from Scrollable
Removes the fadeLeft, fadeRight, fadeTop, and fadeBottom pseudo-element
classes from the Scrollable component. These used sticky ::before/::after
elements with white-to-transparent gradients which didn't work well on
non-white backgrounds.
The withEdgeIndicators prop (using mask-image) is now the only approach.
The Select multi-value component has been migrated to use maskFadeRight.
color prop passing and adjust sizingwithEdgeIndicators pseudo-element approach with CSS mask-image classes. This fixes edge fade indicators for horizontal flex layouts and simplifies the implementation. The fade size can be overridden via the scrollable.vars.fadeSize CSS variable.a99dbc4: Add onLoadMore and onSearch support to DataTableHeaderColumnsMenu
3ca22c5: Expose state prop to ModalPrimitive
secondary button variantstyle to be passed in as an arg to TextFieldradius-4 to radius-6.KeyboardShortcut component that displays keyboard shortcuts with platform-aware formatting, powered by @tanstack/react-hotkeys. Supports isInverted prop for dark variant.withArrow prop to Tooltip component. When set to false, the arrow indicator on the tooltip content is hidden. Defaults to true to preserve existing behavior.9631f8c: fix(DataTable): stabilize config objects to prevent infinite re-renders
Add use*Config hook wrappers (usePaginationConfig, useSortingConfig, useSearchConfig, useFiltersConfig, useEmptyStateConfig) alongside the existing get*Config functions. The hooks memoize the result using the actual prop dependencies, keeping the plain functions intact for ember usage.
The get*Config functions return new objects every render. When used directly as contextValue useMemo dependencies, every render produced a new context, forcing DataTableTable to re-render infinitely.
102419f: fix(DataTable): fix infinite re-render loop in DataTableTable
table.getFlatHeaders() returns a new array reference on every render. Using it directly as a useLayoutEffect dependency caused setColumnSizing() to fire every render, which triggered a TanStack Table state update, causing another render — resulting in an infinite loop. This was triggered when consumers passed unstable prop references (e.g. inline filters or bulkActions objects).
Fixed by deriving a stable string key from header IDs to use as the effect dependency instead of the array reference.
6d7d6d0: fix(TextArea): pass onKeyDown and rows props to inner TextAreaInput
The React TextArea component accepted onKeyDown and rows in its type definition but silently dropped them — they were never forwarded to the inner TextAreaInput. This caused onKeyDown handlers to never fire and rows (without minRows) to have no effect.
isClearable to Select componentJsonField input*px format, when specifying widths in the data tableisAlwaysShown option to filters9cb19c7: Ensure the unix timestamp input adheres to any minDate/maxDate validations in the Datepicker when using withTime
Adjust PlumaModal test helper dialog getter to use queryByRole instead of getByRole to prevent test timeouts when checking modal state
onConfirm and onCancel callbacks to the ConfirmationModal6042268: DatePicker component withTime prop
withTime prop: Enable time selection in DatePicker componentreference prop: Allows for DST labels to be calculated correctly based on a reference date (either before or after DST)withTime={true}, component returns ZonedDateTime instances instead of CalendarDatetime-zone.ts for managing time selection stateSELECTABLE_TIME_ZONES and getSelectableTimeZones() from date-picker utilswithTime cannot be used together with isRange (mutually exclusive as seen in Figma)isActive stateisOpen and close function to the PopoverPrimitiveisActive prop to Button componentlabel prop to the Divider componentPopoverTriggerButton componentedgeThreshold and overflow=hidden option to Scrollable componentwithEdgeIndicators option to the Scrollable componentAvatar from shrinking in flexbox layoutssize option to LabelIconv2 sizing for icons, moving on from fly sizingisDraggable option to popover and popover primitive to make them draggableminRows and maxRows to the <TextArea /> componentisActive prop to <Blanket /> componentdirection prop to the <Divider /> componentname through inputstype="button" to Tabs when rendered as button elementsdescription option to the Select component<DropdownMenuFooter /> componentisPulsing to the StatusIndicator componentText props in the ember Truncate componentStatusIndicator componentScrollable componentisExternalTruncated componentisLoading and autoLoading to banner actionnull as a value for the TextField icon proppromotion variant to EmptyStatewithPadding property to panel sectionFilters componentsize and isInline props to the Image componentCloseButton componentalign meta option for data table configurationisDisabled prop to Tag componentDescription component to PanelProgressCircle componentvariant support for banner actions and added isOutlined prop for bannersPlainButton componentsize option to option cardtooltip prop to the DropdownMenuItemshouldCloseOnClick to DropdownMenu<Image /> componentdescription option to DropdownMenuItem componentminDate, maxDate, isDateDisabled to DatePicker componentonClick to breadcrumb itemsisLoading prop to <Page::Body /> component<PopoverPrimitive::Item/> component for creating navigable items inside popoversYield internal utility for react0 to autoCloseTimeout in the snackbar should prevent it from closing automatically<Banner /> to cautionerror and success variants to the snackbarstatusIndicatorColor option to <Avatar />shouldSubmitOnEnter to the TextArea component<Form /> componentwithOverlay option to disable overlays for drawersshouldAnimate option to disable animation<Avatar /> componentshape prop to <LabelIcon /> component<Drawer /> component<PlumaModalPrimitive /> componentautofocus attribute to TextField componenttruncate property to text componentsisError and replaced it with isDanger for the <Button /> component<FormLayout /> component<SkeletonShape /> component<SkeletonText /> componentsize option to <Modal /> componentonClick property for link component<ProgressBar /> component<Divider /> component<Select /> component when mixing keyboard and mouse navigationpageHeaderTitleText class<Select /> component<Select /> component<Search /> componentisLoading prop to <PlumaPage /><PlumaPage/> component
<PlumaPageHeader /> to <PlumaPage::Header /><PlumaPageHeader::Title /> to <PlumaPage::Header::Title /><PlumaPageHeader::Description /> to <PlumaPage::Header::Description /><PlumaPageHeader::Actions /> to <PlumaPage::Header::Actions /><PlumaPageHeader::Breadcrumbs /> to <PlumaPage::Breadcrumbs />onPageSizeChange and pageSizes options to the Pagination component. Together these render a Select component to switch the size of the pages the user paginates through.52f49d1: Update tokens and components to match post-brand-refresh Figma state.
This change introduces a few breaking changes. It modifies existing styles and changes the available props or variants on some components.
index.js