0.11.8 Changelog

Breaking Changes

0 Changes


1 Bug Fix

New Components

1 Component


March 8, 2018

Sketch template

Light Theme
Dark Theme


  • Date Picker

    Clarity NG now provides a Date Picker Component. Date Picker can be enabled as shown below:

    <input type="date" clrDate/>

    The initial version of the Date Picker uses locale identifiers supported by Angular to display the dates according to the locale date format. It also supports features like keyboard navigation, navigating to the previous, current and next month. For more details please refer to the Date Picker documentation .

  • Optimize Clarity Icons in your application

    Before v0.11.8, users had to import the whole icons sets even if they needed to use only a few icons from those sets. Now with v0.11.8, users can import each icon shapes as individual modules and add them to the Clarity Icons API. Leveraging this new method of importing icons with Tree-shaking process, you can make a significant optimization to the size of Clarity Icons in your application. For example, if you need to use car, pin, and star icons in an application, you can import and add them in the following way:

    import { ClarityIcons } from "@clr/icons";
    import { ClrShapePin } from "@clr/icons/shapes/essential-shapes";
    import { ClrShapeStar } from "@clr/icons/shapes/social-shapes";
    import { ClrShapeCar } from "@clr/icons/shapes/travel-shapes";
        pin: ClrShapePin,
        star: ClrShapeStar,
        car: ClrShapeCar

    You can see that each shape modules have ClrShape prefix in the example above. An important thing to note here is that, to take advantage of this new method, you should only load Clarity Icons by importing it from "@clr/icons" and make sure that you are not loading it via a script tag or in some other manner.

Bug Fixes

  • Fixed an issue with the alerts pager component (#2046)

Other Changes

  • Added aria-labelledby support to clr-checkboxes (#2029)