Announcing Covalent: An Open-Source Angular 2.0 Material UI Platform by Teradata

Teradata Covalent

After months of planning and building, the Teradata UX team is extremely proud to announce Covalent, an open source UI platform built using Angular 2.0 and Material Design.

What is Covalent and why should I care ?

We make it easy for you to put together all the pieces

Angular 2.0 is brand new and has a bit of a learning curve.
Angular-Material 2 is even more under construction, has incomplete docs, and can be challenging to piece together into a fully functional app.

We’ve done all the work for you! Covalent includes:

• Angular 2.0 (we manage & include the ng2 dependencies for you)
• Angular-Material 2 (we also manage & include the material2 dependencies for you)
• Layouts (flexbox layouts from Angular-Material 1.x + 4 pre-made material layout options)
• Covalent ng2 Components (Stepper, Expansion Panels, File Upload, Loading Progress, Syntax Highlighting & Markdown Parsing)
• Covalent ng2 Pipes (Digits Conversion, Byte Conversion, Time Ago & Time Difference)
• Product style guide & reusable Material Design patterns (for cards, lists, etc)
• Covalent Quickstart (a ready-to-clone quickstart app to help you get started)
• Detailed Documentation (to help you get started in Covalent as well as Angular 2.0 and Angular-Material 2)

Why the name Covalent?

We follow the Atomic Design principles, applying them as Atomic Material Design web components. In Atomic Design, several atoms (such as buttons and inputs) form molecules (such as a search box). Our covalent bonds are these molecules we’re building on top of Angular-Material. Also, covalent bonds are liquid and conform to their container, just like our responsive layouts!

Flexbox Layout

Currently angular-material2 doesn’t have any type of layout system. Angular-material1 included a fantastic flexbox layout, so we ported that over to Covalent. Obviously if (when) material2 adds layouts we’ll support those.

Material Design Layout Options

4 Great Layout Options

A huge (YUGE) benefit of using Covalent is access to the 4 pre-packages Material Design Angular 2.0 layout components. These layouts are directly from Material Design specs & Google products, inspired by the Polymer Application Layout Templates.

Covalent Angular 2.0 Components

One of the most important Angular 2.0 features is components. True encapsulation in modular web components with native or emulated Shadow DOM CSS!

Teradata UX will need to extend Angular-Material for our enterprise products. When we do so, we will follow the official Material Design spec to the letter of the law. You get the benefit by gaining these in Covalent!

Here are a few:

Stepper

From the official spec: “Steppers convey progress through numbered steps.” We use Steppers for complex forms that have multiple…steps :)
Here’s the stepper in action:

Using the stepper is as simple as:

<td-steps>
 <td-step> … </td-step>
 <td-step> … </td-step>
</td-steps>

Expansion Panels

We’re going straight from the Material Design spec here. Every app needs some type of accordion expand/collapse UI component. Think of Expansion Panels as the Material Design immersive accordion.

Again, the beauty of web components is how simple these are to use:

<td-expansion-panel>
 …
</td-expansion-panel>

Media Query Service & Directive

The perfect weapon in your responsive design arsenal. Conditionally add attributes, CSS classes, inline styles and Angular 2.0 directives at responsive breakpoints!

<div tdMediaToggle=”sm” [mediaClasses]=”[‘classOne’, ‘classTwo’]” [mediaAttributes]=”{title: ‘tooltip’}” [mediaStyles]=”{color: ‘red’}”> … </div>

This snippet uses the TdMediaToggleDirective to make the two classes (classOne & classTwo), the tooltip and the inline style (color:red) all ONLY apply to the “sm” breakpoint (min-width: 600px) and (max-width: 959px)! You can tap into the power directly in your controller with the TdMediaService as well.

MOAR Components:

We’ve also got some great smaller components including linear/circular progress loaders, file upload input button, syntax highlighting & markdown parsing.

Loading (left) / File Upload Button (center) / Syntax Highlighting (right)

Dive in with Covalent Quickstart!

It’s this easy to get started using Covalent. Simply clone & get to work! (make sure you’ve installed the pre-reqs first)

git clone git@github.com:teradata/covalent-quickstart.git my-product
cd my-product
npm i
ng serve

and you get an Angular-Material 2.0 scaffold with several example views using all 4 of our layout options:

BONUS: Covalent Sketch 3.9+ Template

When we’re not designing in code, we :heart: Sketch for mockups. Sketch 3.9 (beta) offers a killer new feature “group resizing” which is the perfect complement for designing reusable responsive Covalent components.

Sketch 3.9 Group Resizing in action

• 4 Covalent Layouts (nav view, manage list, card over & nav list) x 4 formats (desktop, tablet landscape, table portrait & mobile)
• Material Design Components (built using scalable Sketch symbols)
• Design Patterns (tons of cards, lists, settings & forms)
• Material Design Typography & Iconography

NOTE: This template is for Sketch 3.9+ ONLY, you must use the Beta currently!

Download Sketch Template

What’s next?

To emphasize the data in Teradata, our product UIs have a common need for handling said data in the interface. To do so we’ll immediately need to build more reusable Angular 2.0 components such as:

• D3 v4.0 Component: v4 of D3.js is modular, so a perfect fit for ng2 components! We’ll also apply Material Design principles to these charts, what we’re calling “MD3”!
• Data Table Component: coming straight outta the MD data table spec
• Dynamic JSON Form Component: Our products need dynamically generated forms for extensible & pluggable products. JSON-driven forms (like formly) are the key.
• Your component here: We’re accepting feature requests!

Join the Teradata UX team!

Like what you see? Want to join in the fun? Hit us up and join the squad.

Teradata: Senior Frontend Engineer