Skip to content

v18.0.0-beta.1

Pre-release
Pre-release

Choose a tag to compare

View all tags
@github-actions github-actions released this 26 Feb 08:39
v18.0.0-beta.1
90a9bda
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.

18.0.0-beta.1 (2026-02-26)

Bug Fixes

  • badge: rename color input from clrBadgeColor to clrColor (#2022) (2aba72c), closes #2018
  • button-group: overflow button with lower padding on btn-icon group (#2094) (90863c5)
  • button-group: reduce dropdown-toggle paddings and set correct border-radius (#2091) (eff00cc)
  • button-group: remove content wrapper (backport to next) (#1999) (4a34329), closes #1860
  • buttons: warning active state (#2171) (7a619e2)
  • card: add back margin-bottom on inside alerts (#2026) (ff7fa1e), closes #1896
  • cds-theme: set matching color-scheme in light or dark theme (#2113) (c6665b1)
  • combobox: validate only self on blur, don't trigger blur on option click (#2095) (c352604)
  • datagrid: adjust spinner backdrop position (#2068) (2a03f33)
  • datagrid: custom single and multi-selection on datagrid level (#2075) (46eb23c)
  • datagrid: detail pane margin to use new margin tokens (#2077) (54181cf), closes #2071
  • datagrid: disable grid classes for page size label (#2063) (backport to next) (#2065) (7962cb0)
  • datagrid: pre-checked single selection (#2057) (8c74335)
  • datagrid: pre-select before data is loaded (#2081) (backport to next) (#2082) (6d9a62a)
  • datagrid: remove overflow from column separator and select sr label (#2053) (2cb55c4)
  • datagrid: rename clrDgItemsTrackBy to clrDgItemsIdentityFn (#2007) (1059c39)
  • datagrid: resizing columns in expanded rows not updating row details (#1981) (cde6fff), closes #1622
  • datagrid: selection with shift to emit correct value (#2086) (backport to next) (#2088) (5a86ef1)
  • datagrid: set compact values for control labels in selection mode (#1979) (63b5eff)
  • datagrid: set overflow on datagrid-rows instead of table on detail opened (#2112) (a71323d)
  • datagrid: single action overflow popup position (backport to next) (#2078) (a221982)
  • datagrid: use compact tokens for spinner calculations (#2073) (0bb0867), closes #2072
  • datagrid: use custom value accessor for single selection (#2083) (backport to next) (#2084) (d0ea947)
  • datagrid: virtual scroll header not scrolling (#1969) (0387b51)
  • datagrid: virtual scroll missing last row bottom border (#2102) (16e92ff)
  • datagrid: virtual scroll row height calculation (#2052) (e87a269)
  • datagrid: virtual scroll subscriptions not initialized on after view init (#1986) (2559fbb)
  • datalist: caret click should open the list (#2151) (60e1216)
  • density, theme: styles doesn't apply on element level (#1968) (034f5b6)
  • density: cds-icon size component overrides (#1984) (cca0dfa)
  • dropdown, combobox: remove min-height, add multi-line stories (backport to next) (#2001) (dcd75aa), closes #2000
  • dropdown: justify dropdown-item content to start (#2090) (ebd544d), closes #1996 #1998 #2000 #2087
  • dropdown: revert strict height and content wrapping (backport to next) (#1997) (91e2336), closes #1860 #39
  • file-input: disabled state on element (#2109) (468106e)
  • file-input: validate accept entries using suffix matching (#2014) (e22eccc)
  • forms: propagate only clr classes to control container (#2003) (68dc319)
  • header: remove obsolete header variants (#2180) (1e0a480)
  • label: hover and active state badge color (#2192) (c8882d1), closes #2163
  • label: remove obsolete font-color tokens (#2111) (a6dca7a)
  • links: increase active state specificity and interactive stories (#1974) (5458183)
  • links: remove static typography styles (#2100) (e82381d)
  • stack-view: stack block heading role and aria level (#2179) (89874cf)
  • timeline: remove state icons styles from content inside body (#2114) (1742584)
  • tree: revert flex layout on treenode-links (#1971) (e940486)
  • ui: allow styles to work under shadow dom (#2085) (backport to next) (#2089) (9babfe2)
  • vertical-nav: revert group titles to 14px instead of 16px (#1970) (#1973) (f69c73c)

Features

BREAKING CHANGES

  • Upgrades minimum supported version to Angular 21 (#2204)

  • accordion,stepper: The Accordion and Stepper components have been decoupled via a new CollapsiblePanel base abstraction. (#2207)

    • ClrStepperPanel no longer extends ClrAccordionPanel; both now extend CollapsiblePanel.
    • AccordionPanelModel, AccordionStatus, and panelAnimation are removed from @clr/angular/accordion. Use their CollapsiblePanelModel / StepperPanelStatus / collapsiblePanelAnimation replacements from @clr/angular/collapsible-panel and @clr/angular/stepper.
    • AccordionModel and AccordionService remain in @clr/angular/accordion but now extend CollapsiblePanelGroupModel and CollapsiblePanelService respectively.
    • AccordionStrategy remains in @clr/angular/accordion — it is accordion-specific (single-panel-at-a-time behavior).
    • getAccordionContentId() and getAccordionHeaderId() on ClrAccordionPanel are renamed to getContentId() and getHeaderId().
    • AccordionStatus property on ClrStepperPanel is renamed to PanelStatus; accordionDescription is renamed to stepDescription.
    • CSS custom property --clr-accordion-step-title-min-width is removed.

  • accordion: clrAccordionPanelHeadingEnabled feature flag is removed. All heading values must have explicit content assigned through clrAccordionPanelHeadingLevel input. (#2182)

  • popover: All popovers now use Angular CDK overlay. (#2062)

    • Affected components: Dropdown, Signpost, Tooltip, Datagrid Filters, Datagrid row overflow actions, Datagrid manage columns.
    • Selectors like .clr-dropdown .clr-dropdown-menu will stop working due to the popovers being rendered in the <body> now while the triggers stay in their initial position in the DOM.
    • Removed services: ClrPopoverEventsService, ClrPopoverPositionService, ClrPopoverToggleService (work is handled by CdkOverlay and ClrPopoverService).
    • Removed enums: ClrAlignment, ClrAxis, ClrPopoverPositions, ClrSide, ClrViewportViolation.
    • Removed interfaces: ClrPopoverContentOffset, PopoverOptions, ClrPopoverPositionsInterface, ClrPopoverPosition, ClrVisibilityCoords, Position.
    • Removed classes: AbstractPopover, Popover (work is handled by ClrPopoverContent directive).
    • Removed functions: nudgeContent, flipSidesAndNudgeContent, alignHorizontal, alignVertical, testVisibility.

  • Secondary entrypoints for modules (#2107)

    • Deep imports using the /src/ path (e.g., @clr/angular/src/accordion) are no longer supported and must be changed to the package entry point (e.g., @clr/angular/accordion).
    • The Stepper component is no longer exported under the accordion path; imports must change from @clr/angular/src/accordion/stepper to @clr/angular/stepper.
    • ClrIfOpen directive has been moved from @clr/angular/utils to @clr/angular/popover/common.
    • FocusService (Forms module) is renamed to FormsFocusService and imported through @clr/angular/forms/common.

  • smart-popovers: Smart popovers are moved from @clr/angular/utils/popover to @clr/angular/popover/common. (#2098)

  • Migrate cds-icon, cds/core styles and drop cds/core dependency (#2101)

    • @clr/angular drops the dependency on @cds/core. Supported features are migrated to @clr/angular (includes cds-icon, CSS tokens, CSS utilities: cds-layout, cds-list, cds-text, cds-divider).
    • @clr/ui now includes all the necessary styles; style imports from @cds/core can be removed.
    • @cds/core dependency should be removed and icon imports should be changed from @cds/core/icon to @clr/angular.
    • cds-icon is now an Angular component and all [attr.] bindings should be changed to normal Angular bindings (e.g., [attr.shape]="shape" → [shape]="shape").
    • Deprecated --cds-global-typography-* tokens are removed; replace with --cds-alias-typography-*.
    • ClrIconModule is now deprecated; replace with standalone ClrIcon.

  • DROP DEPENDENCY ON @clr/icons package, this package is deprecated and not supported from a long time ago

  • density: Default density theme is now replaced with Regular. There are now only two density themes: default and compact. (#2195)

  • header: The header styles from header-4 to header-8 have been removed as obsolete. (#2180)

    • header-4 → header-3
    • header-5 → header-3
    • header-6 → header-1
    • header-7 → header-2
    • header-8 → use your own style override, or choose one of the supported styles above.

  • datagrid: Datagrid columns now have an UNSORTED state which activates on the third click on a sortable column. It can be disabled per column through clrDgDisableUnsort input. Unsorted sortable columns have a visible two-way-arrows icon. (#1617)

  • datagrid: On ClrDatagrid level, rename clrDgItemsTrackBy to clrDgItemsIdentityFn to reduce confusion with clrDgItemsTrackBy on ClrDgItems level. (#2007)

  • datagrid: Removal of the opened row detail anchor; background color is now used to identify the open detail row. This is a visual style change that may affect visual regression tests. (#2152)

  • datagrid: unification of selection api. (#2203)

Migration Guide

Old New Entry Point
[(clrDgSingleSelected)]="item" [(clrDgSelected)]="items" clrDgSelectionType="single" (wrap item in array) @clr/angular/data/datagrid
(clrDgSingleSelectedChange) (clrDgSelectedChange) (emits T[], use $event[0] for the single item) @clr/angular/data/datagrid
Implicit selection type via input used Explicit clrDgSelectionType="none" | "single" | "multi" @clr/angular/data/datagrid
SelectionType (from @clr/addons/datagrid) SelectionType (from @clr/angular/data/datagrid) @clr/angular/data/datagrid
SelectionType.None = 0 / Single = 1 / Multi = 2 SelectionType.None = 'none' / Single = 'single' / Multi = 'multi' @clr/angular/data/datagrid
selection.currentSingle = item selection.current = [item] Internal / Selection provider
selection.change → Observable<T | T[]> selection.change → Observable<T[]> Internal / Selection provider

Example migration

<!-- Before: Single selection (implicit type) -->
<clr-datagrid [(clrDgSingleSelected)]="selectedUser">

<!-- After: Single selection (explicit type) -->
<clr-datagrid [(clrDgSelected)]="selectedUsers" clrDgSelectionType="single">
<!-- Before: Multi selection (implicit type) -->
<clr-datagrid [(clrDgSelected)]="selectedUsers">

<!-- After: Multi selection (explicit type) -->
<clr-datagrid [(clrDgSelected)]="selectedUsers" clrDgSelectionType="multi">
// Before
selectedUser: User;

// After
selectedUsers: User[] = [];

// To access the single selected item:
get selectedUser(): User {
  return this.selectedUsers[0];
}

The datagrid selection API has been unified.

  • clrDgSingleSelected input and clrDgSingleSelectedChange output have been removed — use clrDgSelected with clrDgSelectionType="single" instead, wrapping the selected item in an array.
  • A new clrDgSelectionType input is now required to explicitly set the selection mode (previously determined implicitly by which input was used).
  • SelectionType enum values changed from numeric (0, 1, 2) to string literals ('none', 'single', 'multi').
  • The addons SelectionType enum has been removed — import from @clr/angular/data/datagrid.
  • selection.change Observable now always emits T[] (previously T | T[] for single selection).
  • selection.currentSingle setter has been removed — use selection.current = [item] instead.

  • form: Rename ClrLabel to ClrControlLabel. ClrLabel now corresponds to the <clr-label> angular component. (#2023)

  • forms: Only clr-* classes are propagated to the control container. Other custom classes are no longer propagated on the container. (#2003)

  • forms: IfControlStateService has been removed. (#2121)

  • Remove all deprecated clr color based CSS and Sass properties/variables in favor of --cds-* tokens. (#2015) This includes:

    • --clr-color-*
    • $clr-action-*, $clr-green-*, $clr-yellow-*, $clr-red-*
    • $clr-global-color-*, $clr-danger-*, $clr-warning-*, $clr-success-*
    • $clr-blue, $clr-white, $clr-near-white, $clr-light-gray
    • $clr-lighter-midtone-gray, $clr-light-midtone-gray, $clr-dark-midtone-gray
    • $clr-gray, $clr-dark-gray, $clr-near-black, $clr-black

  • Remove all deprecated baselineRem Sass tokens. (#1988)

  • Bump @cds/core peer dependency to 6.16.1 (transitional — superseded by cds/core migration in #2101). (#2002)

Assets 2
Loading