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

Kyle Ledbetter
Jul 19, 2016 · 5 min read
Image for post
Image for post
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.

Image for post
Image for post

What is Covalent and why should I care ?

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)

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!

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.

Image for post
Image for post
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!

Image for post
Image for post

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:

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:

Image for post
Image for post

Using the stepper is as simple as:

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

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.

Image for post
Image for post

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

<td-expansion-panel>

</td-expansion-panel>

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.

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

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
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:

Image for post
Image for post

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.

Image for post
Image for post
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

Image for post
Image for post

Covalent-UI

Teradata open-source UI Platform built on Angular +…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store