Clarity: Compact clarity datagrid

[tihomir-varbanov]

[ ] bug
[x ] feature request
[ ] enhancement

Expected behavior

The clarity datagrid should support a compact mode which reduces the height of the rows, the header and the footer.

Actual behavior

In our application we receive a consistent feedback from users that hey expect greater density of the information that we present. They expect to see more items in datagrids in particular. Currently in the Clarity documentation, the row height in the datagrid demos is 35px. We expect it to be at most 30px in our application. Ideally the row height should be customizable.

Currently we use workarounds such as this one to reduce the row size.

clr-datagrid {
   .datagrid {
      .datagrid-table-wrapper {
          .datagrid-body {
             clr-dg-row {
               clr-dg-cell {
                  vertical-align: middle; // text should be aligned better
                  padding: 5px 12px 6px; // row height more compact for visual density patterns suggested
                  line-height: normal; // simple text fits naturally within the row

                  // iconography within a data cell does not align so well when text is located adjacent to icon
                  > [class*=" vsphere-icon-"], [class^=vsphere-icon-] {
                     vertical-align: middle;

                  }
               }
            }
         }
      }
   }
}

However this doesn't work well with other features of the datagrid like expandable rows for example - the text looks misaligned compared to the caret.

Environment details

• Angular version: 2.0.X

• Clarity version: 0.9.12

• OS and version:

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

[mathisscott]

@reddolan and @youdz
Does a compact styling for the datagrid make sense for Clarity?

[oliverhanappi]

@mathisscott Clarity already supports compact "feature poor" tables (https://vmware.github.io/clarity/documentation/tables#compact-tables), so I think it would be consistent to support a compact layout in the feature rich data grid as well.

[youdz]

Actually, tables and datagrids are absolutely not equivalent and diverge because of a simple reason: tables are static, read-only components while datagrids are dynamic components with a whole suite of actions for the user to take. Clarity has a very strict requirement* on click/touch targets being at least 36x36px, which @reddolan can elaborate on if needed. I believe one of the main reasons is that smaller targets than this provide frustrating experiences on tablets.

Because of this, providing a compact datagrid would lead to every single actionable item in there being at most 24px high, which is way smaller than our limit: filter button, expand caret, row actions ellipsis, pagination links...

[*] To be fair, the requirement wasn't strict initially, and became so halfway through. So older features haven't be updated to this standard yet, while new ones respect it. The point is that we are moving every action button to 36x36px even if there are not yet.

[mathisscott]

Following up with the a11y team, it turns out that they do not have a recommendation for minimum click target height.

We should implement a compact data grid following the sizing of the compact table. So rows will be 24px high. We should aim for the buttons inside the rows to be 24 x 24. If possible, we should be able to set this with a CSS classname on the data grid component.

Make sure that this works for all variations of the data grid.

Our recommendation should be to only use the compact datagrid when space inside of a container is limited — as in a datagrid inside of a card or inside a smaller panel in the content area.

I don't know if this is a customization that we will want to document on the Clarity website.

@reddolan what are your thoughts?

[reddolan]

@mathisscott We do document compact features on other components. It would be helpful to have this documented as well

[reddolan]

@mathisscott also wanted to confirm that our compact targets to be 24x24 on all other compact scenarios as a default

[mathisscott]

I believe that to be the case. File bugs/issues if you find ones that are not.

[github-actions[bot]]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.