0.4.1 Changelog

Breaking Changes

0 Changes


1 Bug Fix


Sep 7, 2016

Sketch template

Light Theme


  • Add a medium spinner size

    Clarity Spinners now support 3 sizes:

    • .spinner-sm
    • .spinner-md
    • .spinner-lg

    .spinner-inline is always a small sized spinner and can be used with text.

  • Allow forms to use a grid layout

    Clarity Forms can now be used within Grids by extending the .row class on a .form-group and wrapping the form fields in column classes.

  • Add inputs/outputs to tabs and remove unnecessary wrapper elements

    While the markup hasn't changed for the tabs, the final rendered HTML looks a bit different with this release. Most notable changes are:

    • Moved most of the attributes to <clr-tab-link></clr-tab-link> and <clr-tab-content></clr-tab-content> tags from their children.
    • .active class applied to the active <clr-tab-link></clr-tab-link> and <clr-tab-content></clr-tab-content> tags.
    • Ability to assign custom id's to <clr-tab-link></clr-tab-link> and <clr-tab-content></clr-tab-content> tags
    • Removed <li></li> tags in the tab links
    This is a simplified version of what the markup renders to in the browser:
    Until 0.4.0:
        <ul class="nav" role="tablist">
                <li class="nav-item" role="presentation">
                <a class="nav-link active" href="#"
                    role="tab" id="clr-tabs-0-tab-0"
                    aria-selected="true" aria-controls="clr-tabs-0-content-0">
            <section role="tabpanel" id="clr-tabs-0-content-0" aria-hidden="false" aria-labelledby="clr-tabs-0-tab-0">
    In 0.4.1:
        <ul class="nav" role="tablist">
            <clr-tab-link class="nav-item
            active" role="presentation"
            id="link1" aria-selected="true"
                <a class="nav-link" href="#" role="tab">
        <clr-tab-content role="tabpanel"
            id="content1" aria-hidden="false"

Bug Fixes

  • Refactor toggles to use baselineRem and fix vertical alignment issues

Other Changes

  • Upgrade to BS4 Alpha 4
  • Add grid flex items vertical and horizontal alignment demos to the website
  • Revisit color for selected state