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' },
...
},
...
});
Using Angular's new animation system in Modal and Stackview.
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>
Use the .spinner-inverse
class to generate spinners for dark backgrounds:
<span class="spinner spinner-inverse">
Loading...
</span>
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.
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>
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 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>
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.
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.
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">×</span>
</button>
</div>
...to...
<div class="alert alert-danger alert-sm">
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<div class="alert-item">
<span>Alert in a card.</span>
</div>
</div>
Changes:
.close
button on the top before the
.alert-item
.alert-icon
markup from .alert-item
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>