datagrid - Clarity Design System Datagrid - Is it possible to isolate and use only the Datagrid component?

Question

We would like to work with the datagrid but we have an issue with the buttons in all our site. Once Clarity is installed it is not possible anymore to make small square buttons. In a kind of way the minimum width of every buttons seems to be overidden by something in your system.

Is there a way to seperate distinct components of the Clarity Design System ? Or maybe exclude some of them ? Are you aware of this issue with button minimum width ? Do you know a way to prevent this behavior ?

Many thanks.

Answer 1

The styles for Clarity are bundled as a single unit, so you would have to build the styles yourself and only build the pieces needed for the Datagrid. Some details can be found near the bottom of the themes documentation about custom themes https://vmware.github.io/clarity/documentation/v0.11/themes. You'd have to go further by trying to remove everything else. Then you could just import the ClrDatagridModule from @clr/angular into your Angular application.

However, I cannot guarantee that you'll be able to avoid the button issue because the datagrid has buttons and we don't recommend building just isolated pieces of Clarity (we don't know how well it will work in practice).

You can always overwrite any CSS with your own to reset something like the buttons min-width property. We set some values like that to ensure that things are properly accessible for users, so I'm not sure exactly what your limitation is but probably the best thing to do is just override the Clarity styles when necessary.

Answer 2

Thanks for your help.

I managed to neutralize the button behavior by adding the following code to my css file.

.btn {
  min-width: unset;
  min-height: unset;
}