mi6
Create an ICDS AG Grid theme
Summary
Create a CSS file which developers can import containing the styles to make the appearance of an AG Grid data table match the ICDS look and feel.
💬 Description
The outcome of the third-party data table library investigation was to use AG Grid as the library we recommend to customers wanting more advanced features than those provided by the ICDS data table.
We want people to have a way to quickly and easily style AG Grid data tables to look like ICDS data tables, so this ticket is to create a CSS file containing styles to do this, which developers can then import into their apps (a bit like the normalize.css file we currently have); they can then apply the classname we choose for our theme to their AG Grid.
Use the Figma designs for the ICDS data table component to get an understanding of how AG Grids should be styled.
Note: There are some features which AG Grids have which ICDS data tables do not (i.e. there are no designs for the equivalent features in Figma); therefore, it would be worth working with a designer to determine how these should be styled (and maybe create tickets if necessary e.g. if it requires a bit more investigation to determine how a certain feature should be styled).
💰 User value
This will allow customers to make the appearance of their data table match the ICDS look and feel really easily. It will prevent duplication of effort as a lot of teams may want to style AG Grids in this way.
📚 User Stories
As an ICDS user I need to be able to style an AG Grid data table with an ICDS look and feel So that it matches the appearance of other components in my app.
✏ Designs
The Figma file containing the ICDS data table designs is called "ICDS 2.1 - Data tables". This seems to be the most up-to-date file but might be worth double-checking with a designer.
Additional info
Please see the research page created internally for #2062 if you would like to see more of the context / reasoning behind this ticket.
AG Grid has some ready-built themes. It would be worth looking at whether we can build on one of these rather than creating a theme from scratch as some of these themes may already have a similar appearance to the ICDS data table.
mi6/ic-design-system#1130 has been created for adding the guidance about this to the website.