Provide data table toolbar heights to match new row heights

[vsnichols]

Summary

The Cloud & Cognitive data table workstream is requesting additional data table toolbar heights in order to match the available row heights.

Currently there are 4 possible row heights for data tables (with a 5th height coming in Carbon 11):

• Compact 24px
• Short 32px
• Default 48px
• Tall 64px

However there are only two toolbar heights, 32px and 48px. The majority of row heights will have to be paired with a clashing toolbar. We are asking for development support to add additional toolbar heights, so that the toolbar height always matches the row height.

As-Is: 24px row height with 32px toolbar and 48px pagination bar

Proposed: All components are 24px

Note: this issue is not as high a priority as Provide pagination bar heights to match new data table row heights #8874. For MVP we could just add a 32px pagination height. The compact toolbar size (24px) is tricky as Carbon does not currently offer 24px search or buttons.

MVP option: 24px row height with 32px toolbar and 48px pagination bar

Justification

• We are rolling out the table settings feature more widely, which means that these alternative heights will begin to be more heavily used, and the visual inconsistencies will become more obvious.

• Today, if a user switches to the 24px row height, their pagination will still be 48px, and their toolbar will be 32px. It would be nice to have consistency across these elements.

Desired UX and success metrics

If a user switches row height, the table toolbar would switch to matching height.

"Must have" functionality

N/A

Specific timeline issues / requests

Ideally it would be great to roll this out with Carbon 11 as we introduce the new row heights. We would love to roll this update into the data table settings feature being worked on by the Cloud & Cognitive data table workstream.

Available extra resources

We can provide design support and potentially some dev support.

[emyarod]

cc @carbon-design-system/design just to confirm, do we want the table toolbars to match the table row sizes or are they fine the way they currently scale with the rows?

[jeanservaas]

I don't really see a problem with continuing to use the 32px toolbar with data tables that have 24px rows, especially since we don't offer those components at 24px.

Since there’s a lot of functionality in the toolbar, I really think the emphasis is OK. I have no problem with introducing a 24px pagination. Thought to me, this also seems like a good option.