Clarity 3.0: Good things come in 3's
Clarity turned three and just released 3.0
Omne trium perfectum translated into English means the rule of three, which roughly means that everything that comes in threes is whole and complete. True to that rule, the Clarity Design System has released one of its biggest updates to date with more new features in this release than v1 & 2 combined; with new components, enhancements, accessibility improvements and the initial set of elements for our framework independent Clarity Core initiative.
The focus of this release was to deepen our commitment to accessibility and usability in the enhancement of our most utilized components Datagrid and Form Controls, while officially launching Clarity Core.
Clarity’s top 3 new component enhancements:
The Detail Pane
The Datagrid has a new pattern for viewing details of a specific record, called the Detail Pane. This is our recommended way to show more complex details over the existing expandable rows feature, because it provides more space for your content, has stronger accessibility semantics, and has a better overall user experience.
Datalist Form Control
Browsers natively support the HTML Datalist form control, which is a lightweight way to create an input field that has autocomplete from a list of options. While the Combobox is still in the works, the Datalist component can meet many of the typical autocomplete form control needs.
Range slider
In addition to the Datalist, we’ve also create a new range slider form control to allow you to easily define a slider control to set a value between two numbers. Not all browsers support a range slider, and those that do have a very different visual appearance, but Clarity’s range slider works in all browsers and is visually consistent with the rest of our form controls, a big task for a small component.
There’s much more in this release, like our volume 17 icons, making Aria live service public, Angular 9 integration and more; check out the full release here.
Introducing Clarity web components library
We introduced our Clarity Core initiative last year, and v3 marks the first beta release. We’ve built 6 fundamental elements that will be used to build other more complex components so that non-Angular frameworks can be aligned with Clarity in a highly efficient, streamlined integration. More details on the Clarity Core initiative here.
We’re working hard to bring parity to all our components regardless of your framework, that is fully accessible, open source and enterprise ready. If you are using a framework other than Angular to build your applications, try out the Clarity Core preview and help us build the elements you need by contributing! For anyone using Angular, you won’t need to work with Clarity Core at this time. Learn more about the release here.
New Design and Accessibility Improvements
Clarity continues to improve by addressing usability and improving design tools available. We’ve worked hard to minimize disruptions to align the UI and expected behaviors to ensure smoother upgrades.
Updated HSL color system
We’ve aligned our color palette to use HSL instead of HEX codes, so that the color progression in a particular color series is based on the same hue. This change also makes it easier to calculate compatible colors. Color variables are provided to easily use the color options.
Updated over 100 accessibility tickets
In the past 6 months, we solved over 100 accessibility needs that help every Clarity consumer meet quality accessibility WCAG 2.1 compliance requirements, while saving months of time, generally a 25% savings in accessibility remediation. Clarity is proud to be fully accessible with minor exceptions we are prioritizing.
Published a new VPAT
Review our updated VPAT for v2.2+ with minor exceptions, we expect to publish a VPAT for v3 soon in the same location as well.
How to update to Clarity v3
We’ve updated Clarity v3 to work with the recent Angular 9 release. We’ll continue to release according to our release strategy; all new features and enhancements will be available in v3+, and v1 and v2 will continue to be supported with bugfixes. To update, you can follow the basic steps below.
1. First, update to Angular 9. Ensure that all of your other dependencies are also able to update to Angular 9, and follow the Angular update guide.
2. Second, update Clarity. Use the Angular CLI update tooling to update Clarity and run any migration scripts. ng update @clr/angular@latest
3. Finally, review your application for breaking changes in Clarity. You can view the full list on our release notes.
As only the major update versions have breaking changes, you can expect to update to any patch or minor release within the v3 timeline.
What’s next
Now that v3 is out, we’re working on our next major milestone. We expect to remain on the same release cadence to follow shortly after the next Angular release. We plan to focus on three key areas for v4.
1. Clarity Website — We are improving the clarity and depth of our documentation, the structure of the site’s navigation, enhancing the quality and consistency of the demos, and insuring a scalable structure for the future.
2. Form Improvements — In addition to the form improvements in v3, we plan to work on additional enhancements. We’re improving and expanding support for more complex form layouts to help our enterprise customers complex needs and introduce additional form controls to allow for greater scalability for the majority of our customers use cases.
3. Clarity Core expansion— Our Clarity Core initiative will bring more foundational details to our framework independent future. The design and layout tokens will allow you to create custom application layouts and will be usable with just CSS/HTML. More details to come.
We’d love to hear from you, follow us on twitter and reach out to help us know what’s working well and what we can improve. Thanks for reading and being a part of the Clarity community helping to contribute and scale the most accessible, enterprise ready, open source design system available!
