Clarity v4: How Clarity expanded and improved

Clarity has a history of growing and becoming more diverse with each major release. Clarity v4 is no exception, as we have continued to iterate and enhance the ability to build accessible enterprise products!

Clarity Core, improved by 14 form components

Late last year, Clarity promised to move towards a framework-independent design system based on web components. We’ve honored that promise by creating 14 new components for the web, which we call Clarity Core.

After working with hundreds of real world scenarios utilizing Clarity Core, we were faced with the reality of the foundational need for forms to be integrated into any application that supports a rich interactive experience between users and data. The result was 14 new components that help build your own customizable forms.

Read more about implementing clear and concise forms that have strong response rates, using several of our new form controls such as:

• Input groups
• Time picker
• Search input
• File input
• And others!

Example showcasing new Clarity form components

Added support for React

React is by far the most popular framework among Clarity users. We recognized this when we acknowledged one of the most frequently requested features was React wrappers. Our community is important to us, so we dedicated a large slice of v4 to React wrappers in order to support more people and more teams building more products.

We enhanced the developer experience by adding the @clr/react library of React wrappers to support React applications.

React can work with web components, but typically it requires a bit of work on the applications to integrate them correctly. Our library provides a lightweight integration that bypasses the work for developers to integrate. To learn more please view the Core React Documentation.

Added combobox to Angular

Clarity Angular is built to work with the popular Angular framework, and we remain committed to supporting a great developer experience in Angular.

Combobox

One of the most frequently requested components that came from our community was the combobox. After careful auditing for accessibility, we created a highly useable and customizable combobox. Additional documentation can get you started in using this new component.

Beyond Combobox, we’ve had a number of other improvements, fixes, and enhancements that you can read about in our v4 release notes.

Clarity Angular combobox

Getting started with v4

Angular

If you are using the awesome Angular CLI, it is the easiest way to update your application and use Clarity v4.

ng update @clr/angular

You can also upgrade manually with NPM or Yarn:

npm install @clr/angular @clr/icons @clr/ui
yarn upgrade @clr/angular @clr/icons @clr/ui

Core

To upgrade to the latest version of Core, use one of the following commands for NPM or Yarn.

npm update @clr/core
yarn upgrade @clr/core

Need help?

Inevitably, we all need help from time to time. Clarity recognizes that and we have a lot of different avenues to make sure your experience using Clarity is frictionless.

• Start a discussion on Github Discussions (a new support channel!)
• Reach out on Twitter (@VMwareClarity)
• Report bugs using GitHub Issues

Additionally, when determining if there is a usage question or an issue with one of the components, we recommend isolating the use case and identifying the steps that demonstrate the problem encountered. To that end, we provide versioned StackBlitz applications that will help both with determining if there is a question or an issue as well as giving us code that we can use to triage and investigate.

What’s next?

Clarity is far from being finished, we constantly iterate and improve. We have a lot of work ahead of us. What we have identified on our roadmap looks like this:

• Refreshed and enhanced website. We have been working hard on a refresh of our website. We’ve changed the design, updated and expanding our content, and are adding more demos and samples for everyone to use.
• More web components. Our next round of web components are underway, such as: Accordion, Vertical Nav and Dropdowns.
• Alignment between Angular and Core. We’re working on how to bring the API and behaviors of our existing Angular components in line with the API and behaviors of the Core component, which will help standardize Clarity across frameworks and also support future enhancements.
• Migration and update support. For applications already using Clarity Angular, we are already working on improving our tooling and automation to better support automatic updates for projects during major release cycles for minimal disruption.

In closing

As an open source project, Clarity values the community that makes us whole. The community engagement we receive is what helps us align with your needs while we continue to grow our offerings. Don’t see something on our product roadmap that you’re looking for? Lets us know.