Skip to content

v18.0.0

Choose a tag to compare

View all tags
@github-actions github-actions released this 11 May 10:51
· 36 commits to main since this release
v18.0.0
917aa9e
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 (2026-05-11)

Bug Fixes

  • appfx-datagrid-filters: Fix appfx datagrid filters appearance (#2353) (464ad58)
  • appfx-datagrid: Fix action bar appearance (#2349) (8d163fe)
  • appfx-datagrid: Fix data grid details appearance (#2351) (256c7b4)
  • appfx-datagrid: remove dropdownMenuReposition directive (#2355) (d58e6ca)
  • appfx-datagrid: use ngIf control flow for showFooter, add back missingPageConfig (#2340) (ef2f0f2)
  • badge: remove obsolete vertical alignment investigation TODO (#2242) (881fb22)
  • 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: initialise observer on select all only (#2330) (2066804)
  • 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: Fix data grid selection (#2354) (77fefd6)
  • datagrid: forced refresh emit on pagination empty state (#2296) (9be55b8)
  • datagrid: import two-way-arrow icon in module (#2287) (b04b848)
  • 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: remove unused render constants and resolve CSS TODOs (#2235) (d2bb999)
  • 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)
  • date-picker: resolve TODOs and fix min-attribute test bug (#2250) (7869cc0)
  • 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: restore reactive disable/enable state (#2333) (2fbec03)
  • file-input: validate accept entries using suffix matching (#2014) (e22eccc)
  • forms: propagate only clr classes to control container (#2003) (68dc319)
  • forms: update validatation subtext logic (#2286) (40f6cb4)
  • header: remove obsolete header variants (#2180) (1e0a480)
  • icons: sync duplicated clr-icon / cds-icon SCSS selectors (#2269) (c036b0f)
  • 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 interactieve stories (#1974) (5458183)
  • links: remove static typography styles (#2100) (e82381d)
  • nav: color blue dash transition on hover and update table of contents (#2279) (bff0431)
  • nav: use Angular createComponent for nav close button icon (#2289) (3babb56), closes #2288
  • popover: add trigger element to open at point method (#2352) (46b47e7)
  • remove deprecated in v17 CSS tokens (#2294) (fa85651)
  • schematics: improve v18 migration reliability, logging, and test coverage (#2321) (b78579e), closes #2274
  • 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: active state indicator appearance (#2260) (efa55fd)
  • vertical-nav: revert group titles to 14px instead of 16px (#1970) (#1973) (f69c73c)
  • wizard: backdrop click not focusing title (#2209) (3af700e)

Features

  • accordion,stepper: separate components (#2207) (c9f56aa)
  • accordion: remove deprecated active-background-color CSS property (#2230) (a4b0f13)
  • accordion: remove heading enabled flag (#2182) (bef40f6)
  • add clarity addons (#2118) (backport to next) (#2134) (091c9b2)
  • add ng-update migration schematics for v18 (#2274) (ff35d87)
  • add secondary entrypoints for modules (#2107) (4e3d597)
  • appfx-datagrid: add loadingMoreItems input proxy to internal grid (#2332) (043a73c)
  • appfx-datagrid: expose toggleAll() function (#2344) (8b24832)
  • backport appfx to latest (#2222) (5be26d7)
  • badge: create angular component (#2018) (8b44ce2)
  • build: rename or remove Çlr exports (#2266) (0efcd3c)
  • bump @cds/core peer dependency and remove overrides (#2002) (4a422b2)
  • cds-theme: apply clarity colors to scrollbars (#2117) (52e6ea7)
  • change peerDependencies versions to above 21.1.0 (#2343) (f82736d)
  • combobox: add editable resolver and fix identity compatibility (#2310) (1ddd82f), closes #2211
  • combobox: add editable state (#2019) (165f6d7)
  • combobox: add identity function (#2211) (4d3df89)
  • combobox: select all functionality (#2156) (9094d0c)
  • datagrid-filters: improve filters and add preset filters support (#2299) (904eea9)
  • datagrid: add ability to unsort datagrid columns (#1617) (8adf788)
  • datagrid: expose margin and action-bar offset tokens (#2071) (4fca548)
  • datagrid: remove opened row detail anchor and use background color only (#2152) (ddcd547)
  • datagrid: simplify selection logic (#2203) (90a9bda)
  • drop IE11 and legacy Edge workarounds (#2228) (6e92967)
  • form: remove IE/legacy Edge range input styles (#2253) (9937a48)
  • form: rename ClrLabel to ClrControlLabel (#2023) (22066fe), closes #2021
  • forms: change error and success icons position (#2213) (e4b73dd)
  • forms: remove if control state service (#2121) (6d18a5f)
  • label: create angular component (#2021) (1938ca8)
  • migrate cds-icon, cds/core styles and drop cds/core dependency (#2101) (9c8cbc0)
  • ng: re-export secondary entry points from barrel to fix NG0201 DI token mismatch (#2280) (e5deaac)
  • popover: add point-based origin support for popovers, dropdowns, and signposts (#2267) (2167334)
  • popover: refactor to use angular cdk (#2062) (2891a81), closes #355
  • public API exports (tree models, datagrid Selection, persist settings) + schematics/tsconfig fixes (#2327) (0c1316f)
  • remove clr color based css properties and sass variables (#2015) (1fc7794)
  • remove deprecated baselineRem tokens (#1988) (1f38de3)
  • replace default density with regular (#2195) (4eefdc3)
  • schematics: v18 datagrid migration and migrate-v18 schematic (#2337) (6dcebb7)
  • scss: separate mixins from rule files (#2191) (4630693)
  • smart-popovers: change path from utils/popover to popover/common (#2098) (cb1b302)
  • stepper: update status icons (#2210) (8bebd7f)
  • styles: resolve TODOs in global styles, mixins, typography, and reboot (#2240) (a9c6714)
  • upgrade to Angular 20 (#1993) (8bc0c98)
  • upgrade to Angular 21 (#2204) (a0027c0)
  • wizard: add horizontal stepnav layout and rename internal CSS classes (#2291) (f39dd38), closes #1840
  • wizard: rename currentPageChanged output and remove resolved TODOs (#2249) (c011c6d)
  • wizard: rename misnamed CSS custom properties (#2229) (426f159)

BREAKING CHANGES

Angular version

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

Accordion & Stepper

  • 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).

  • accordion: --clr-accordion-active-background-color and --clr-collapsible-panel-active-background-color CSS custom properties have been removed. Use --clr-accordion-header-open-background-color or --clr-collapsible-panel-header-open-background-color instead (#2230).

Popover

  • 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.

  • popover: The popover system's "anchor" naming has been replaced with "origin" to align with Angular CDK terminology (#2267). ClrPopoverAnchor → ClrPopoverOrigin (selector [clrPopoverOrigin]). POPOVER_HOST_ANCHOR → POPOVER_HOST_ORIGIN. ClrPopoverService.anchorElementRef and anchorPoint are merged into a single origin property. focusAnchor() → focusOrigin(). getAnchorPosition() → getOriginPosition().

    <!-- Before -->
<button clrPopoverAnchor>Trigger</button>
<!-- After -->
<button clrPopoverOrigin>Trigger</button>
    // Before
popoverService.anchorElementRef = elementRef;
popoverService.anchorPoint = { x: 100, y: 200 };
popoverService.focusAnchor();
// After
popoverService.origin = elementRef;
popoverService.origin = { x: 100, y: 200 };
popoverService.focusOrigin();
    // Before
{ provide: POPOVER_HOST_ANCHOR, useExisting: ElementRef }
// After
{ provide: POPOVER_HOST_ORIGIN, useExisting: ElementRef }

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

Module entry points

  • secondary entrypoints: 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) (#2107).

    • 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.

  • build: All exports using the Ç (C-cedilla) prefix have been renamed (#2266):

    Old symbol (Ç prefix) New symbol Entry point
    ÇlrClrPopoverModuleNext ClrPopoverModuleNext @clr/angular/popover/common
    ÇlrClrPopoverCloseButton ClrPopoverCloseButton @clr/angular/popover/common
    ÇlrClrPopoverOpenCloseButton ClrPopoverOpenCloseButton @clr/angular/popover/common
    ÇlrAccordionWillyWonka AccordionWillyWonka @clr/angular/accordion
    ÇlrAccordionOompaLoompa AccordionOompaLoompa @clr/angular/accordion
    ÇlrStepperWillyWonka StepperWillyWonka @clr/angular/stepper
    ÇlrStepperOompaLoompa StepperOompaLoompa @clr/angular/stepper
    ÇlrTabsWillyWonka TabsWillyWonka @clr/angular/layout
    ÇlrActiveOompaLoompa ActiveOompaLoompa @clr/angular/layout
    ÇlrDatagridVirtualScrollDirective ClrDatagridVirtualScrollDirective @clr/angular/data
    ÇlrDatagridSelectionCellDirective ClrDatagridSelectionCellDirective @clr/angular/data
    ÇlrDatagridSingleSelectionValueAccessor ClrDatagridSingleSelectionValueAccessor @clr/angular/data
    ÇlrDatagridWillyWonka DatagridWillyWonka @clr/angular/data
    ÇlrActionableOompaLoompa ActionableOompaLoompa @clr/angular/data
    ÇlrExpandableOompaLoompa ExpandableOompaLoompa @clr/angular/data
    ÇlrWrappedCell WrappedCell @clr/angular/data
    ÇlrWrappedColumn WrappedColumn @clr/angular/data
    ÇlrWrappedRow WrappedRow @clr/angular/data
    ÇlrDatagridCellRenderer DatagridCellRenderer @clr/angular/data
    ÇlrDatagridHeaderRenderer DatagridHeaderRenderer @clr/angular/data
    ÇlrDatagridMainRenderer DatagridMainRenderer @clr/angular/data
    ÇlrDatagridRowRenderer DatagridRowRenderer @clr/angular/data
    ÇlrDatagridRowDetailRenderer DatagridRowDetailRenderer @clr/angular/data
    ÇlrDatagridDetailRegisterer DatagridDetailRegisterer @clr/angular/data

Icons & @cds/core

  • 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.
    • The @clr/icons package is no longer supported.

Datagrid

  • 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, clrDgItemsTrackBy is renamed to clrDgItemsIdentityFn to reduce confusion with clrDgItemsTrackBy on ClrDgItems level (#2007).

  • datagrid: The datagrid selection API has been unified (#2203):

    • 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 ("none" | "single" | "multi").
    • 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.
    <!-- Before: Single selection (implicit type) -->
<clr-datagrid [(clrDgSingleSelected)]="selectedUser">
<!-- After: Single selection (explicit type) -->
<clr-datagrid [(clrDgSelected)]="selectedUsers" clrDgSelectionType="single">

  • 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 Filters

  • datagrid-filters: EnumPropertyDefinition and UsersFilterComponent API changes in @clr/addons/datagrid-filters (#2299):

    Old API New API Notes
    EnumPropertyDefinition constructor param showKeyInParentheses enableSelectAll (default true) Controls "Select All" checkbox visibility
    UsersFilterComponent.formatUser() method (removed) Delegate to your DatagridFiltersUserService implementation
    UsersFilterComponent.userOperators property (removed) Use filterProperty.supportedOperators in templates instead 
    // Before
new EnumPropertyDefinition('status', statusOptions, { showKeyInParentheses: false });
// After
new EnumPropertyDefinition('status', statusOptions, { enableSelectAll: false });

Forms

  • form: ClrLabel is renamed to ClrControlLabel. ClrLabel now corresponds to the <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).

  • forms: Error and success icons in form controls have been repositioned. This is a visual breaking change — no code migration is needed, but custom CSS overrides targeting icon positioning may need adjustment (#2213).

Wizard

  • wizard: Wizard CSS custom properties have been renamed (#2229). Update any custom theme overrides:

    Before After
    --clr-wizard-stepnav-text--active --clr-wizard-stepnav-text-selected
    --clr-wizard-stepnav-item-border-color--active --clr-wizard-stepnav-item-complete-border-color
    --clr-wizard-stepnav-active-bgcolor --clr-wizard-stepnav-selected-bgcolor
    --clr-wizard-stepnav-link-hover-bg-color --clr-wizard-stepnav-hover-bgcolor
    --clr-wizard-stepnav-link-active-bg-color --clr-wizard-stepnav-active-bgcolor

  • wizard: The template output (clrWizardCurrentPageChanged) is now (clrWizardCurrentPageChange). The WizardNavigationService.currentPageChanged getter is now currentPageChange (#2249).

    <!-- Before -->
<clr-wizard (clrWizardCurrentPageChanged)="onPageChange($event)">
<!-- After -->
<clr-wizard (clrWizardCurrentPageChange)="onPageChange($event)">

  • wizard: All modal-inherited CSS classes inside the wizard template have been replaced with wizard-specific class names (#2291). Update any custom SCSS/CSS targeting these selectors inside clr-wizard:

    Old class New class
    modal-content-wrapper clr-wizard-content-wrapper
    modal-nav (removed — class no longer applied)
    modal-content clr-wizard-main-content
    modal-header--accessible clr-wizard-header
    modal-title-wrapper clr-wizard-page-title-wrapper
    modal-title clr-wizard-page-title
    modal-title-text clr-wizard-page-title-text
    modal-header-actions-wrapper clr-wizard-header-actions-wrapper
    modal-body-wrapper clr-wizard-body-wrapper
    modal-body clr-wizard-body
    modal-footer (removed — class no longer applied)

Styles & Density

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

  • header: The header styles header-4 through 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

  • styles: [cds-text*='heading'] attribute selector has been removed. Consumers should migrate to [cds-text*='headline'] which provides identical styling. $clr-altFont SCSS variable removed (was unused) (#2240).

    <!-- Before -->
<p cds-text="heading">Title</p>
<!-- After -->
<p cds-text="headline">Title</p>

  • 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).

IE11 / Legacy Edge

  • IE11/Edge: All IE11 and legacy (pre-Chromium) Edge workarounds have been removed (#2228):

    Removed Migration
    IEKeys enum Use standard KeyboardEvent.key string values
    normalizeKey() function Use event.key directly
    $clr-use-custom-properties SCSS variable Removed — CSS custom properties are always emitted

  • form: The range-track-style SCSS mixin has been removed from _mixins.forms.scss. Remove any @include range-track-style(...) calls from custom SCSS (#2253).

Deprecated v17 CSS tokens removed

All CSS custom properties and Sass variables deprecated in v17 have been removed (#2294). Key removals:

Accordion / Collapsible Panel: --clr-accordion-content-font-size, --clr-collapsible-panel-content-font-size → use generate-typography-token mixin

Datagrid: --clr-datagrid-placeholder-color/font-size/font-weight/line-height/letter-spacing → use --clr-datagrid-placeholder-typography; --clr-datagrid-row-hover-font-color, --clr-datagrid-action-popover-hover-color → removed (no replacement)

Dropdown: --clr-dropdown-bg-hover-color → --clr-dropdown-item-hover-bg-color; --clr-dropdown-selection-color → --clr-dropdown-item-selected-bg-color

Signpost: --clr-signpost-border-size → --clr-signpost-pointer-size; --clr-signpost-pointer-psuedo-border → --clr-signpost-pointer-pseudo-border (typo fixed)

Tree View: --clr-tree-link-hover-color → --clr-tree-node-link-hover-color; --clr-tree-link-active-color → --clr-tree-node-link-active-color; --clr-tree-link-selected-color → --clr-tree-node-link-selected-color; and caret link variants similarly renamed.

Stack View: --clr-stack-view-stack-block-changed-border-top-color → --clr-stack-view-block-changed-border-top-color; --clr-stack-view-color → --clr-stack-view-text-color; --clr-stack-view-bg-color → --clr-stack-view-background-color; and hover/active row variants renamed.

Tables: $clr-table--compact-rowHeight → $clr-table-compact-row-height; $clr-table--compact-verticalPadding → $clr-table-compact-vertical-padding

Header: $clr-header-bgColor → $clr-header-bg-color; $clr-search-icon-width → $clr-header-search-icon-size

Login: .trademark CSS class removed (no class needed); .subtitle → .hint

Migration Guide

Run the following command to automatically apply all v18 breaking changes across your codebase:

ng update @clr/angular

The migration schematics handle:

  • Import path updates — deep /src/ imports → secondary entry points (@clr/angular/accordion, etc.), @cds/core → @clr/angular/icon
  • Symbol renames — ClrLabel → ClrControlLabel, clrDgItemsTrackBy → clrDgItemsIdentityFn, AccordionPanelModel → CollapsiblePanelModel, and all 24 Ç-prefixed symbols
  • Template updates — output renames (clrWizardCurrentPageChanged → clrWizardCurrentPageChange), input renames (clrBadgeColor → clrColor, clrDgItemsTrackBy → clrDgItemsIdentityFn), cds-icon attribute binding style ([attr.shape] → [shape]), cds-text="heading" → cds-text="headline", header class variants, popover anchor directive (clrPopoverAnchor → clrPopoverOrigin)
  • CSS custom property renames — wizard stepnav properties, accordion/collapsible panel properties, range-track-style mixin calls

Items not covered by automatic migration:

  • Update custom SCSS targeting wizard modal-* classes to the new clr-wizard-* class names (see table above)
  • Update EnumPropertyDefinition constructor: showKeyInParentheses → enableSelectAll
  • Remove references to UsersFilterComponent.formatUser() — move formatting to your DatagridFiltersUserService implementation
  • Remove references to UsersFilterComponent.userOperators — use filterProperty.supportedOperators in templates
  • Remove all usages of the deprecated v17 CSS custom properties listed above
  • Remove usages of IEKeys and normalizeKey (removed; no replacement)
  • Remove @include range-track-style(...) SCSS mixin calls (removed)
Assets 2
Loading