What is Clarity?
Clarity is the name of the new design framework that VMware has built to replace all other user interfaces (UIs). It has been created based on HTML/CSS and Angular, but more importantly, it comes with a UI toolkit and UX guides to get you started.
How to Use Clarity?
We have three approaches for utilizing Clarity—UX guidelines, UX guidelines coupled with our HTML/CSS framework, or UX guidelines with HTML/CSS framework and our Angular implementation. The main focus is to build workflows and interactions, which will take a lot of the UX and UI basics off developers’ shoulders.
This arrangement mostly works similar to bootstrap where the components are loaded where you use a random program to start assembling those components.
Clarity UI has got most attention around its Angular component and implementation in NodeJS. Its installation takes place using NPM, forming a NodeJS/Angular perspective with advanced components, which are really easy to consume.
Clarity has supported the ability to add custom filters for a data grid column. However, by default, only a string filter was built into Clarity.
New support would be given for built-in numeric filtering that you can use to define a minimum or maximum value to filter your list. The clr-input-container component is a wrapper component that wires up layout accessibility and validation logic for the input. Typically, we would be able to access it, but the clr-input-container will generate this code automatically.
The recent version of Clarity, which is v2.0, is updated to support Angular 8. The advantage is that you would have differential loading, improved accessibility, deprecations, and removals as compared to the earlier version on Angular.
The benefit of working with a design system like Clarity is that it adds a consistent modern user experience for your application or website, freeing up time for your team to focus on other complexities of the application. It is a robust framework that allows you to quickly create a complete interface.
