0.12.0 Changelog

This build introduces breaking change. Please read below.

Breaking Changes

3 Changes


2 Bug Fixes


June 14, 2018

Sketch template

Light Theme
Dark Theme


  • Angular 6 support

    Clarity has updated to run with Angular 6 and Rxjs 6 without the need for the rxjs-compat layer. The 0.12 release is only certified to work with Angular 6 and above.

  • Support for Angular CLI ng add

    Clarity can now be installed using Angular CLI v6+ by simply running the following: ng add @clr/angular. You can use this with any Angular CLI project, even if you've already started to work on it.

  • Redesigned Forms

    Forms have been redesigned for better usability and developer experience. Currently they are only fully supported in @clr/ui, but new Angular components will be arriving during 0.12 for important form controls like inputs, passwords, and selects.

  • New Spinner Button

    A new type of button is now available, that allows you to set the button to a spinner while an asynchronous event occurs (such as saving or loading). You can read more about the details here 1488 and updated documentation can be found here under the Loading Buttons section.

  • Refreshed Grid

    Our previous grid had some limitations and was based off Bootstrap 4.0.0-alpha.5. The new grid comes prefixed with clr- so it doesn't conflict with other grid libraries and gives us better control. Another advantage is it will allow us to solve a number of issues with popover clipping (due to position: relative) with the old grid. Refer to our documentation for more details.

  • Input and form control validation components

    Angular input form control, which has built in validation support for template-driven or reactive forms. This is the first of the upcoming Angular form controls.

  • Shape deprecations in Clarity Icons

    Clarity Icons v0.12 has deprecated some icons in their respective sets and moved to other sets:

    • wand has been moved to "essential-shapes" from "media-shapes"
    • angle-double has been moved to "core-shapes" from "essential-shapes"
    • calendar and event have been moved to "core-shapes" from "social-shapes"
    • bar-chart and line-chart have been moved to "chart-shapes" from "technology-shapes"


To move forward, this release comes with a number of deprecations that will be removed in future versions of Clarity. You should not use these features in new development, and plan for rewriting where necessary.

  • Code Highlight will be removed, so if you happen to use it you may copy our implementation into your codebase or find an alternative that suits your needs.
  • Wizard Ghost Pages will be removed, which this is an undocumented feature that we're removing.

We also revamped our internal build tooling to better align with Angular's tools. Some of the early betas were published just to test functionality, and this was the first real beta.

Bug Fixes

  • Updated paths for theme SCSS files so developers can again use custom themes. Apps must now add --include-path=node_modules to their SCSS build step to correctly build a custom theme. See Themes documentation for more details. (#2336)
  • Fixed an issue where the Date Picker Output was not emitted when the user modified the Date Input manually.(#2334)