0.3.0 Changelog


This build introduces breaking change. Please read below.

Breaking Changes

8 Changes

Bugs

3 Bug Fixes

Released

Jul 20, 2016

Sketch template

Light Theme

Highlights

  • Simpler imports

    Now you can import all of our components from clarity-angular:

    
    import { DROPDOWN_DIRECTIVES } from 'clarity-angular';
    import { Modal } from 'clarity-angular';
    ...
    

    If you are using system.js, you also need to add the package config for the above import statements to work:

    
    System.config({
        packages: {
            'clarity-angular' : { main: 'index.js', defaultExtension: 'js' },
            ...
        },
        ...
    });
    
  • Upgrade to Angular 2 RC4

    Using Angular's new animation system in Modal and Stackview.

  • Taking actions on alerts

    Alerts can now support alert actions. Actions can be dropdowns or links.

    Dropdowns as alert actions:

    
    <div class="alert alert-danger">
        <div class="alert-item">
            <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
            <div class="alert-actions">
                <div class="alert-action dropdown bottom-right">
                    <a class="dropdown-toggle">Actions</a>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="javascript://">Shutdown</a>
                        <a class="dropdown-item" href="javascript://">Suspend</a>
                        <a class="dropdown-item" href="javascript://">Reboot</a>
                        <a class="dropdown-item" href="javascript://">Delete</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    

    Links as alert actions:

    
    <div class="alert alert-info">
        <button type="button" class="close" aria-label="Close">
            <span aria-hidden="true">×</span>
        </button>
        <div class="alert-item">
            <span class="alert-text">
                ...
            </span>
            <div class="alert-actions">
                <a href="javascript://" class="alert-action">Acknowledge</a>
                <a href="javascript://" class="alert-action">Reset to green</a>
            </div>
        </div>
    </div>
    
  • Inverse Spinners

    Use the .spinner-inverse class to generate spinners for dark backgrounds:

    
    <span class="spinner spinner-inverse">
        Loading...
    </span>
    

Breaking Changes

  • Angular RC4

    In order to use Clarity 0.3.0 components, your web application must also be on Angular version RC4. Here are sample version numbers you could use in your package.json:

    
    "dependencies": {
        "@angular/common": "2.0.0-rc.4",
        "@angular/compiler": "2.0.0-rc.4",
        "@angular/core": "2.0.0-rc.4",
        "@angular/http": "2.0.0-rc.4",
        "@angular/platform-browser": "2.0.0-rc.4",
        "@angular/platform-browser-dynamic": "2.0.0-rc.4",
        "@angular/router": "3.0.0-beta.1",
        "@angular/upgrade": "2.0.0-rc.4",
        ...
    }
    

    Refer to Angular's changelog for a complete list of breaking changes that may impact your application.

  • Modal and Stack View

    Because Angular animations are built on top of the Web Animations API, your application must include web-animations.min.js polyfill for the animation to work on browsers that do not support it. You can add the polyfill by installing it on your app...

    
    "dependencies": {
        ...
        "web-animations-js": "^2.2.1",
        ...
    }
    

    ...and including it in your application. A sample dev version of your index.html might include something like:

    
    <script src="node_modules/web-animations-js/web-animations.min.js"></script>
    
  • Form Validation

    The markup for validating forms has changed from...

    
    <div class="validated-input invalid">
        <input type="text" style="width:300px"/>
        <div aria-hidden="true" class="tooltip tooltip-md">This field is required.</div>
    </div>
    

    ...to...

    
        <div class="tooltip tooltip-validation invalid">
            <input type="text" style="width:300px"/>
            <span class="tooltip-content">This field is required.</span>
        </div>
            
  • Login Form Refactor

    Login forms now have to be wrapped with a .login-wrapper. This was done to support login backgrounds and fix an IE 10/11 vertical alignment issue.

    
    <div class="login-wrapper">
        <div class="login">
            ...
        </div>
    </div>
    
  • Login Validation Refactor

    The login form validation markup has changed from...

    
    <div class="error active">
        <span class="alert-icon icon-danger-white"></span>
        Invalid user name or password
    </div>
    

    ...to...

    
    <div class="error active">
        Invalid user name or password
    </div>
    

    The need to explicitly use the icon markup was removed.

  • Layout Refactor

    Clarity layout has changed from...

    
    <div class="main-nav">
        <header class="header"></header>
        <nav class="sub-nav"></nav>
    </div>
    <div class="main-container">
        <div class="content-area"></div>
        <div class="side-nav"></div>
    </div>
    

    ...to...

    
    <div class="main-container">
        <header class="header"></header>
        <nav class="sub-nav"></nav>
        <div class="content-container">
            <div class="content-area"></div>
            <div class="side-nav"></div>
        </div>
    </div>
    

    This refactor gives us the ability to add other elements like app level alerts or footers to the .main-container which is now a vertical flexbox. Additional sections can also be added to the .content-container (a horizontal flexbox) which contains the .sidenav and the .content-area after this change.

  • Alerts

    Alert markup has changed from...

    
    <div class="alert alert-danger alert-sm">
        <div class="alert-item">
            <span class="alert-icon icon-danger"></span>
            <span class="alert-text">Alert in a card.</span>
        </div>
        <button type="button" class="close" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    

    ...to...

    
    <div class="alert alert-danger alert-sm">
        <button type="button" class="close" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
        <div class="alert-item">
            <span>Alert in a card.</span>
        </div>
    </div>
    

    Changes:

    1. Move the .close button on the top before the .alert-item
    2. Remove the .alert-icon markup from .alert-item
  • Header

    Header branding area markup has change from...

    
    <div class="branding">
        <a><img src="img/vmw-logo.svg" class="logo"></a>
        <span class="title">Clarity Demo</span>
    </div>
    

    ...to...

    
    <div class="branding">
        <a href="#">
            <span class="clr-icon clr-vmw-logo"></span>
            <span class="title">Clarity Demo</span>
        </a>
    </div>
    

    Header Search markup has changed from...

    
    <div class="search-box">
        <span class="nav-icon fa fa-search"></span>
        <input type="text" placeholder="Search for VMs...">
    </div>
    

    ...to...

    
    <form class="search-box">
        <span class="nav-icon fa fa-search"></span>
        <input type="text" placeholder="Search for VMs...">
    </form>
    

Bug Fixes

  • Fix master build's warning message
  • Update the Clarity grid rows with the correct margins
  • Multiple scroll bars appear when screen is resized in the new layout

Other Changes

  • Update typography documentation
  • Icons - Implementation: HTML/CSS
  • Define default illustration for the background of the login form
  • Finalize the list component
  • Support product logo as a div/span svg background
  • Implement the popover/tooltip component
  • Update clarity seed to use 0.3.0
  • Update build info (CONTRIBUTING.md, peer dependency versions, etc) to current