0.7.0 Changelog

This build introduces breaking change. Please read below.

Breaking Changes

2 Changes


0 Bug Fixes

New Components

1 Component


Nov 11, 2016

Sketch template

Light Theme


  • New component: Datagrid

    Clarity NG now provides a Datagrid Angular component. It comes with a first set of features, including sorting, filtering, pagination and multi-selection. It supports pre-loaded data as well as server-driven data, where only the currently displayed items are loaded in the browser. We have a list of features we plan to add in future versions, but we welcome any feedback or request to add to that list or change its priorities.

    Clarity's Datagrid uses a declarative interface, so you can use it as you would use an HTML table, directly in your templates. Here is a basic example with simple objects:

        <clr-dg-column [clrDgField]="'id'">User ID</clr-dg-column>
        <clr-dg-column [clrDgField]="'name'">Name</clr-dg-column>
        <clr-dg-column [clrDgField]="'creation'">Creation date</clr-dg-column>
        <clr-dg-row *clrDgItems="let user of users">
            <clr-dg-cell>{{ user.id }}</clr-dg-cell>
            <clr-dg-cell>{{ user.name }}</clr-dg-cell>
            <clr-dg-cell>{{ user.creation | date }}</clr-dg-cell>
            {{ pagination.firstItem + 1 }} - {{ pagination.lastItem + 1 }}
            of {{ pagination.totalItems }}
            <clr-dg-pagination #pagination [clrDgPageSize]="10"></clr-dg-pagination>

    We will have full documentation coming soon for more advanced examples.

  • Replace Font Awesome with Clarity Icons

    Clarity UI now depends on Clarity Icons instead of Font Awesome for iconography.

    Breaking Change

    Dropdowns Toggles now have an updated markup:

    <button class="dropdown-toggle btn btn-outline-primary">
        <clr-icon shape="caret" class="icon-orient-down"></clr-icon>

    Note: Clarity recommends that you use a button for the toggle. The button can contain either text or an icon.


    Existing support for font icons in Clarity components is now being deprecated and will be removed in 0.8.0. Clarity recommends using Clarity Icons.

    Use the following markup for using Clarity Icons in Branding, Header Nav and Header Actions:

    <header class="header-6">
        <div class="branding">
            <a href="javascript://" class="nav-link">
                <clr-icon shape="vm-bug"></clr-icon>
                <span class="title">Project Clarity</span>
        <div class="header-nav">
            <a href="javascript://" class="nav-link nav-icon">
                <clr-icon shape="cloud"></clr-icon>
            <a href="javascript://" class="active nav-link nav-icon">
                <clr-icon shape="folder"></clr-icon>
        <form class="search">
            <label for="search_input">
                <input id="search_input" type="text" placeholder="Search for keywords...">
        <div class="header-actions">
            <div class="dropdown bottom-right">
                <button class="dropdown-toggle nav-icon">
                    <clr-icon shape="user"></clr-icon>
                    <clr-icon shape="caret" class="icon-orient-down"></clr-icon>
                <div class="dropdown-menu">
                    <a href="javascript://" class="dropdown-item">About</a>
                    <a href="javascript://" class="dropdown-item">Preferences</a>
                    <a href="javascript://" class="dropdown-item">Logout</a>
  • Refactor Angular Dropdown Component

    The Angular Dropdowns component now uses attribute directives for dropdown toggles and menu items

    Breaking Change

    1. clrDropdownToggle should be used to indicate a dropdown toggle used in the angular dropdown component
    2. clrDropdownItem should be used to indicate a dropdown item in the angular dropdown component
    <clr-dropdown [clrMenuPosition]="'bottom-right'">
        <button class="btn btn-outline-primary" clrDropdownToggle>
            <clr-icon shape="caret" class="icon-orient-down"></clr-icon>
        <div class="dropdown-menu">
            <label class="dropdown-header">Dropdown header</label>
            <a href="javascript://" clrDropdownItem>Action 1</a>
            <a href="javascript://" clrDropdownItem>Action 2</a>
            <a href="javascript://" class="disabled" clrDropdownItem>Disabled Action</a>
            <div class="dropdown-divider"></div>
            <a href="javascript://" clrDropdownItem>Link 1</a>
            <a href="javascript://" clrDropdownItem>Link 2</a>