0.4.1 Changelog


Breaking Changes

0 Changes

Bugs

1 Bug Fix

Released

Sep 7, 2016

Sketch template

Light Theme

Highlights

  • 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:
    
    <clr-tabs>
        <ul class="nav" role="tablist">
            <clr-tab-link>
                <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">
                    ...
                </a>
                </li>
            </clr-tab-link>
            ...
        </ul>
        <clr-tab-content>
            <section role="tabpanel" id="clr-tabs-0-content-0" aria-hidden="false" aria-labelledby="clr-tabs-0-tab-0">
            ...
            </section>
        </clr-tab-content>
        ...
    </clr-tabs>
    
    In 0.4.1:
    
    <clr-tabs>
        <ul class="nav" role="tablist">
            <clr-tab-link class="nav-item
            active" role="presentation"
            id="link1" aria-selected="true"
            aria-controls="content1">
                <a class="nav-link" href="#" role="tab">
                ...
                </a>
            </clr-tab-link>
        </ul>
        <clr-tab-content role="tabpanel"
            id="content1" aria-hidden="false"
            aria-labelledby="link1"
            data-hidden="false"
            class="active">
            <section>
            ...
            </section>
        </clr-tab-content>
    </clr-tabs>
    

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