Covalent 0.10 (last alpha) released

Kyle Ledbetter
Covalent-UI
Published in
4 min readJan 2, 2017
Notifications component is here!

With the final release in the alpha series, the Covalent Angular2 Material UI Platform is feature complete!

tl;dr — AOT, Notification menu, Dynamic Forms, Sticky Footers, Dialog updates, Datatable updates, Stepper updates, HTTP updates, Angular 2.4.1 & Angular-Material beta1!

Github / Docs & Demo / Changelog / Upgrade

Announcing: NGX-Charts Partnership!

They even have useful pie charts!

Covalent is now partnered with NGX-Charts, the amazing new Angular D3 Chart Framework. Swimlane has created a brilliant platform that’s easy to customize and extend. Teradata UX teams will collaborate on new charts, features and bugfixes.

AOT (Ahead-of-Time) Support

In addition to JIT (Just-inTime), Covalent now supports AOT in Angular2. AOT can improve performance by compiling at build time instead of runtime.

Notification Menu — demo

Almost every app needs a notifications dropdown menu in the toolbar. We’ve created a component to display the count and extended the material2 md-menu to create the perfect notifications menu. You can show the number of notifications or just the colored circle (warn/primary/accent).

Dynamic (JSON driven) Forms — demo

Upstreamed from our own needs at Teradata, Covalent now features form elements that are generated from a simple JSON object. Dynamic Forms supports text inputs, textareas, sliders, toggles, checkboxes, and select boxes.

Sticky Footers — demo

Whether you want to display copyright info or useful buttons, a sticky footer is often required in your app. Layouts now support footers, and manage-list/nav-list have inner footers as well.

Dialog Updates — docs

We’ve added some important a11y (accessibility) updates, allowing users to use their keyboard to interact with dialog action buttons. We’ve also exposed open/closeAll methods for devs to hook into.

Datatable Updates — docs

Select All now emits a click event. Nested objects are now supported for rows. Change detection efficiency has been improved (OnPush). Also, we’ve added a refresh() method to force change detection when needed.

Stepper Updates — docs

Support for ngFor & ngIf has been added to td-step to register/de-register steps automatically, an important feature for dynamic steps in Angular.

HTTP Updates — docs

URL path interceptors have been added, with wildcards for [a-zA-Z0–9-_] including or excluding /. For example /users/*/groups intercepts www.url.com/users/id-of-user/groups and www.url.com/users/id/groups.

Angular-Material Updates — demo

Initial chips, textareas, improved sliders, themed toggles & icons, dialog content elements (and height/width), better tooltip animations, improved sidenav layout positioning, and select boxes (finally)!

Bonus: Covalent Docs Angular2 Animations! — demo

That’s right, we’ve taken the first step towards material motion! The Covalent docs site now features Angular2 route animations. As they improve the animation platform and our expertise grows, look for new animation features to surface in Covalent.

What’s Next?

As we enter the Beta phase of Covalent, we’ll focus on browser support, optimizations & bugs. We will also focus on improving features in Covalent Electron and Covalent Data:

What do you think?

Let us know your thoughts!

--

--

Kyle Ledbetter
Covalent-UI

VP of Design at Credo AI — Former UX leader for Teradata, eBay, MicroStrategy and Sears Holdings.