Clarity 2.0 is now available!

Photo by Jason Leung from Unsplash.

We are proud to announce Clarity 2.0 is now available, which includes a number of new features, bug fixes, and support for Angular 8. This is our second major release with our new release and support cycle, which mirrors the Angular release cycle.

We’ve got details about the new features and improvements, instructions how to update, and future plans below!

New Features and Improvements

We’ve been working hard on a number of great new components and patterns, and also have some great contributions from external contributors.

Accordion and Stepper Components

Our two largest new features are the Accordion and Stepper components, which are designed to help you group content into meaningful steps.

Accordion for hosting simple content in groups that can be collapsed.

The Accordion is a generic group container with each of the panels being collapsable. It has a number of configurations, such as allowing only one panel to be open, conditionally preventing a panel from opening, and keep track of the state of if a panel is open or not.

Stepper is an accordion with a form flow baked into the steps.

The Stepper is a richer version of the Accordion for when you need to display a complex form with different groups. In fact, it requires using Angular template driven or reactive forms, and works seamlessly with our form components. If you have invalid inputs, the Stepper will indicate an error state.

Stepper has support for invalid states to show when a step is invalid.

Clarity already has a Wizard, which is a modal experience for having a user work through a series of steps, and this remains an option for when you need to have an overlay experience.

See the documentation for Accordion at https://clarity.design/documentation/accordion and Stepper at https://clarity.design/documentation/stepper.

Vertical Tabs

We’ve introduced a new vertical tabs layout option for laying out content with the tabs on the side of the tab area instead of above. This can work well in some scenarios where the tabs list is long but you want to display it fully.

Vertical tabs option shows tabs to the side and content to the right.

This is easy to take advantage of by simply adding the correct markup to your tabs. You just wrap your tabs with an element that has the tabs-vertical class applied to change the layout mode.

See the documentation at https://clarity.design/documentation/tabs.

Numeric Filter in Datagrid

Clarity has supported the ability to add custom filters for a Datagrid column, but only a string filter was built into Clarity by default. We’re now adding support for built in numeric filtering that you can use to define a minimum or maximum value to filter your list.

For example, if you have a Datagrid column that contains a number (such as a product price), you can now filter by numbers that are a minimum value, a maximum value, or both.

The built-in Numeric Filter allows users to easily set minimum and/or maximum values to filter a column.

As Clarity continues to grow its open source community, fixes, improvements, and even new features are being made by community members. For example, this new feature is contributed by Alex Mellnik and we are very appreciative of his efforts!

See the documentation at https://clarity.design/documentation/datagrid/built-in-filters.

Angular 8 support

Clarity v2.0 was updated to support Angular 8. That means you’ll get all of the improvements and benefits of Angular 8 in your applications, such as differential loading.

Improved Accessibility

Supporting accessibility is a top-most goal for Clarity. We continue to invest heavily in ensuring Clarity continues to be the platform to build accessible applications for everyone. As our work continues, our goal is to support WCAG 2.1 AA, and this release brings us a number of improvements.

We’re also working on updating documentation as appropriate with notes about cases where applications will need to handle accessibility on their side or where it is possible to break accessibility with incorrect component usage.

Deprecations and Removals

We have a few deprecations to announce in v2, which are slated to be removed in 3.0 unless otherwise noted.

• The clrRowSelection feature of the Datagrid has been deprecated due to accessibility concerns around having an entire row being selectable and assistive technologies not being able to handle it properly. The recommendation is to continue to remove this property, and checkbox or radio selection will continue to work as expected.
• The clrDgColumnToggleTitle and clrDgColumnToggleButton approach for customizing the language strings of the datagrid is deprecated in favor of using the common strings solution that was added more recently. This will make it easier to translate and make translations consistent. If you add the language strings to your common strings service, you can simply remove these components from your Datagrids.

As part of each major release, we try to remove any deprecations that were slated for this milestone. These will include the following.

• The old form styles .row and .col type classes were fully removed. Use the updated .clr-row and .clr-col variations found in the documentation.
• The old form styles have been fully removed. You should update your forms to the new layouts and components.
• We’ve fully removed any remnants of old Bootstrap CSS that was part of our build process for a while. This should not affect most projects unless you had custom build tools and depended upon it for some reason.

How to Update

If you are using Angular, you need to make sure to update Angular first, then Clarity using the ng update command.

ng update @clr/angular

If you aren’t using the Angular CLI, you’ll need to update Clarity using NPM like the following.

npm install @clr/angular@latest @clr/ui@latest @clr/icons@latest

If you have custom translations, please note there are new translation strings that you will need to add to your translation service. You can see the whole list of strings in our documentation about internationalization.

Support Policy for v2

Clarity 2 will be supported for the next 18 months, just like Angular 8. It will be in active development for the next 6 months, which means it will get new features as well as bugfixes until we reach Clarity 3.0. Then it will go into maintenance mode for the following 12 months for bugfixes and security patches.

This is part of our normal support policy, which you can read in full here.

Marching Forward

Photo by salvatore ventura on Unsplash.

Clarity continues to advance forward, and in the coming 6 months we are working on a number of additional major features and improvements. Any non-breaking changes that are completed are expected to ship as part of 2.x release branch, and any breaking changes will be deferred until Clarity 3.0, which is expected near the end of this year.

We’re excited about what is coming up, and here is a preview of the major focus areas and features we are expecting to bring to life.

• Accessibility - There are some additional minor accessibility gaps we’d like to close, and it is currently a major focus that is in progress. We’re planning to back-port every fix to 1.x and 2.x versions unless there is a breaking change.
• Combobox - The Combobox is in active development and we expect it to arrive in the coming months, potentially before 3.0 is shipped. This is a more intelligent select box with search and filtering built in.
• Detail Pane - The Datagrid has an expandable row feature for showing more content inline for a Datagrid row, but the detail pane is a new pattern that allows a pane to open to the side for showing more details about a record.
• Theming - We have been working on several theming improvements slowly over the past few releases, and we plan to continue in order to make it easier to build custom themes.

You can learn more about Clarity on our website https://clarity.design and through our GitHub project https://github.com/vmware/clarity. You can reach out to us through Twitter @VMwareClarity, or ask questions on StackOverflow using the vmware-clarity tag!

Thank you for being part of the community around Clarity and ask that you let us know how you’re using Clarity and how we can keep improving it!