Covalent 1.0.0 beta.1 released

Kyle Ledbetter
Published in
4 min readJan 30, 2017

Our first beta! The Teradata UX team is proud to announce the immediate availability of Covalent 1.0.0-beta.1 to the Angular community!

tl;dr: Massive new Layout features, all-new Navigation Drawer component, completely reworked Syntax Highlighting & Markdown components, improved Loaders, new List & Navigation Drawer design patterns, pre-built themes & inline files for Plunker, updated Sketch template and tons of fixes!

Github / Docs & Demo / Changelog / Upgrade / Quickstart

Covalent truly takes hold at Teradata

As we close the Alpha phase it’s a great time to give an update of the rollout of Covalent at Teradata. What started in AngularJS Material v1 with 2 developers on 1 product has blossomed into a core Covalent team of 7 developers fostering the rollout across all Teradata products & teams. It’s a fair assumption that we’re second only to Google in usage & proficiency of Angular Material.

A sample of the new product suite built on Covalent

The Best Angular Material Quickstart

Covalent is being exercised on a multitude of enterprise applications at Teradata and at this stage can support anything you can imagine. From a simple responsive landing page, complex dashboard, email app, even a complex IDE editor, the Covalent Quickstart is your easiest and most complete production-ready Angular Material app.

View Quickstart / View Templates

Covalent Quickstart & Templates

Layout Updates

Covalent Layouts now tap into the inputs of the Angular Material sidenav such as opened and mode (over/push/side). We’ve also layered the Covalent mediaQuery services so you can toggle these parameters with complex breakpoints.

Changing open state & modes at different breakpoints

View Demo & Docs

New Navigation Drawer Component & Pattern

Accompanying the new Layout features is an all new component which easily gives you a navigation drawer that’s precisely to Material Design spec, including toolbar color, background image and user toggle.

View Demo & Pattern

Syntax Highlighting Updates

The Highlight component has been updated to support loading a file instead of just embedded content. Themes have been overhauled as well, as the default theme mimics VS Code’s dark theme, and all other Highlight.js themes can be used as well.

View Demo & Docs

Markdown Updates

Markdown has been simplified and improved similarly to Highlight. You can now embed markdown file instead of inline snippets, and <pre><code> are no longer required.

# Heading (H1)
## Heading 2 (H2)
### Heading 3 (H3)

* One
* Two
* Three

View Demo & Docs

Loading Updates

Loading now harnesses the power of Angular-Material portal & overlay services, delivering a smoother fullscreen loading mask. Colors are now also supported for primary/accent/warn.

Loading… (gotcha?)

View Demo & Docs

Management List (data list) Design Pattern

Lists are much more friendly to responsive design than data-tables, but you still need “columns”, sorting, search, paging, etc. At Teradata we use md-list for all manage/administrative views for CRUD. We will soon develop a data-list component following this design pattern:

View Demo & Pattern

NGX Charts Demo & Docs

Now that Teradata UX has selected NGX Charts as our D3 framework of choice for all products, we will begin customizing & extending it as well as contributing. Step one is documenting NGX Charts within Covalent.

A match made in heaven

View Demo & Docs

Plunker Template

Covalent now supports inline files to make it easier to use within services like Plunker! We’ve added a default template for issues which will be a huge boost in support.

Updated Sketch Template

The exhaustive Covalent Sketch Template, which mirrors all components & patterns, has received a huge update with everything in beta.1:

View Template / Download Template

Covalent Electron Update

As we prepare for a new class of enterprise hybrid desktop apps at Teradata, the UX team is rapidly adding features to Covalent Electron. Many features will support IDEs & text editors. Look for much more here very soon!

Build your own desktop IDE with Angular & Electron!

Whew! What a release! What’s next?

As we move into the Beta phase, we’ll focus on bugfixes, polishing processes, MOAR unit testing, improved information architecture & documentation, i18n support and NGX-Charts.

Thanks so much to all beta.1 contributors & supporters! Speaking of supporters, here’s a shot of Oliver Ratzesberger our Chief Product Officer & #1 Covalent fan presenting Teradata benchmarks on a Covalent dashboard:



Kyle Ledbetter

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