Clarity 5.0: Jump Start with Core Web Components
With each turn of the year comes fresh expectations and a resolve to do things better. This has been no exception for the Clarity team. We are excited to start the year with a release of Clarity 5.0, jam-packed with features and tools to help you build your world-class application.
Full Throttle with Clarity Core
If you have been following our journey, you are no stranger to our investment in web components as we broaden our support for using Clarity in whatever front-end framework (or no framework). As of version 5.0, we are thrilled to provide over 25 high-quality components that are ready for production today. Since 4.0 we have added the accordion, circular progress, and divider components to our list and fine-combed through all of our components to ensure your application can be accessible. We have no known accessibility issues in Clarity Core that we aren’t addressing. You can expect continued additions to this growing family of components in the coming months.
By the way, if you have been using Clarity and are wondering how you might include our web components in your application today, read the article Level Up Your Application by Adopting Clarity Core.
Besides these components, here are some things that have kept us busy and now come packaged in Clarity 5.0.
Fresh Face: An Improved Website
After listening to the Clarity community over the past four years, we took some time to improve our documentation. With version 5.0, we are adding a few things that will fill in those gaps. A search function was a significant missing piece we added — crucial for providing a way to find content on the site. We also added docs for the new Clarity Core components with clearly defined demos, code snippets, and API sections. We hope that this will make it easier to locate both the design guidelines and code examples for the component. We also added a feedback mechanism and can’t wait to hear what’s working (or not working) to continue building useful documentation.
Firm Foundation: Robust System for Easier Customization
We observed Clarity being consumed in various contexts and noticed common pain points when trying to customize it. We applied our learning to build firmer foundational pieces (called design tokens) for the design system. Leveraging CSS custom properties, we abstracted our common values for theming, typography, and spacing — resulting in easier systematic changes and making it harder to mess up by accident. This means that you can override a small set of values in a single document and expect your changes to propagate throughout your application. We use our design tokens throughout the system, adding support for dark theme and improving our color palette.
Leaner and Stronger: Performance Improvements
We recognize that people worldwide may be accessing your product with varying hardware specs and internet speed. We are passionate about performance and aim to minimize the payload of our components. We made several changes in our codebase to make including Clarity as lean and performant as possible.
First Child: Clarity Angular
We started out Clarity by building Angular components. This was a strategic and intentional investment to support the dozens of VMware products that were mostly already in Angular. Today we continue to support those who are using Clarity Angular, keeping up to date with every major release of Angular and fixing critical bugs found along the way. Going forward, no new components will be added to Clarity Angular. The good news is adding a new Clarity Core web component is easy and seamless no matter what version of Clarity Angular is currently in use.
Support Strategy
The beauty and the challenge of being in the front end landscape is that things develop and change quickly. Since our initial release, we have made many changes in our components as under-supported or new use cases were brought to our attention. We try our best to make changes that are backwards compatible, but that wasn’t always possible. Instead of a next major release approximately every 6 months, we are committed to longer a major release cycle to minimize frequency of major upgrades.
We get a lot of questions like “Is this feature available in version x?” and “Will this bug fix be back-ported to version y?” We have added a page that details our support policies on the website and will be soon adding a page with a roadmap. In it, you will find answers to those questions as well as information about browsers and assistive technologies that Clarity is guaranteed to work in.
What’s next?
The Clarity team will have both existing users and first-time adopters in mind as we look at where to focus next. We are working on tools to make it easier for our existing users to integrate the Core web components into your products. We are also working on new components — generic pagination, overlays, dropdowns, and more — as well as utilities like a motion system (for animating components). We haven’t lost sight of the more complex enterprise-specific components like the datagrid, either.
We hope to delight you with another release soon. Until then, give 5.0 a try! We look forward to hearing your feedback.