Covalent Beta 7 released!

Kyle Ledbetter
Covalent-UI
Published in
3 min readSep 15, 2017

Angular 4 virtual scroll, markdown text editor, sticky data table headers, animations & more come to Covalent in 1.0.0-beta.7

tl;dr: Virtual scroll wrapper for any element, Markdown text editor, Data table sticky headers & virtual scroll, Dynamic Form features, Animation utilities, Angular 4.3 & Material Beta 10 support (also, our last beta!)

Github / Docs & Demo / Changelog

Virtual Scroll

We’ve abstracted the virtual scroll to a wrapper component that can be used around any element!

Scrolls on Scrolls on Scrolls

Simply wrap with this syntax which is similar to ngFor:

   <td-virtual-scroll-container #virtualScroll [style.height.px]="400" [data]="data">
<ng-template let-row="row" let-last="last" tdVirtualScrollRow>
...
</ng-template>
</td-virtual-scroll-container>

Markdown Text Editor

Edit markdown in a simple text editor (aptly name Simple Markdown Editor). Combined with the Covalent Markdown Parser component, users can edit and preview markdown in real-time!

Markdown FTW

source: https://github.com/sparksuite/simplemde-markdown-editor

Data Table Sticky Headers, Column Widths & Column Templates

The Covalent Data Table was already powerful, but it’s been enhanced with some of our most requested features! Sticky headers are auto-enabled when a container height (or flex) is set. Various dynamic & responsive column widths are available now, as well as Angular templates for full control over columns. Virtual scroll now also works with Data Tables as well.

Dynamic Forms Features

A new file input has been added to the form element options. Flex percentage is now available on all form elements for full control over widths. Custom validation, error message, OnPush support, minLength & maxLength have also been added!

We’ve also added a handy new demo that generates JSON for you:

Animation Utilities

Harnessing the power of Angular Animations, we’ve packaged up several utility animations that can easily be imported & attached to any component & element.

The base utility animations are rotate, collapse and fade. We’ve also bundled “Attention seeker” animations inspired by Animate.css: bounce, flash, headshake, jello, and pulse.

Initial IE11 Support

While not the most exciting feature, IE11 support is important for enterprises for several reasons. With a mixture of polyfills, best practices & updates, Covalent now works well on IE11.

Read over our new IE11 doc for all that information. Please remember that IE11 support is NOT automatic. You still must adhere to these best practices, and other Angular components may have issues in IE11. Also, things such as unsupported IE11 date formats are outside of the control or support of Covalent.

The final Beta for Covalent

For those paying close attention, you’ll notice we named our beta releases after popular songs from recently departed artists. We’ve appropriately named our final beta “One Step Closer” to honor Chester Bennington of Linkin Park.

Rest in peace.

What’s after beta?

We’ll now move onto the Release Candidates, where we’ll focus on performance, accessibility, enhancements to existing features, and crushing bugs like mad.

Design patterns, templates and Stackblitz demos will also be a huge focus for the final phase of Covalent 1.0.

--

--

Kyle Ledbetter
Covalent-UI

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