Welcome to Clarity 2.0! We've worked hard to get to this major milestone, and are excited about the future of Clarity! All new features, additions, deprecations and bug-fixes are listed below for an easy summarization of what changed between 1.0 and 2.0.
This is the second release to follow the support policy. It follows the Angular LTS support policy as is outlined in the blog post here.
There are a few things Clarity consumers should take note of:
To get this update, run ng update @clr/angular
. You can use this with any
Angular CLI project, even if you've already started to work on it. You may need to run
ng update @angular/core @angular/cli
first to update to Angular 8.
The addition of vertical tabs now allows consumers to specify clrLayout
="vertical"
on a clr-tabs container
. Please refer to the updated
documentation for more info.
Accordions are designed for use in the main content area. They allow generic content to be collapsed. Users are able to expand to show more detail. For more details and code examples check out the documentation page here.
A stepper structures multi-step processes into 2 or more expanding panels that break up complex workflows. Under the hood, the stepper is a specialized Accordion. To understand the difference and see examples of code in use check out the documentation here.
Jumpstart your Clarity design with one of the Figma libraries available here:
UI Library - Light ({{sketchVersion}}) UI Library - Dark ({{sketchVersion}}) Icon Library ({{sketchVersion}})Dropdown components now support keyboard interactions as part of these accessibility improvements. The documentation has been updated with a new accessibility section containing the details.
We've cleaned up a lot of variables and simplified the CSS theming to make it easier to work with. Custom themes may need to review their themes for any referenced maps and some new variables were added to capture some missing configurations.
Datagird columns can now implement a dedicated numeric filter for for numeric values. For details and code examples check out the updated documentation.
clr-control-error
(#3305)
ClrDgColumnToggle
component (#3312) in favor of using the ClrCommonStrings
for internationalization.