[Feature Request]: Responsive Data Table Description Widths

[KevinCamelo]

Summary

Currently, the description within the data table header wraps the full width of the data table container. The data table description should responsively resize to provide a comfortable line-length.

As-Is Example #1	As-Is Example #2

Justification

In design reviews on Cloud, we often ask teams teams for text to not take up more than 50% of the container width. However, the implementation of this suggestion can be troublesome especially as tables get narrower on smaller viewports.

Since each developer may implement comfortable line lengths in different ways (line breaks, changing the max-width via CSS overrides), this can cause style discrepancies across our series of products. It would be great for the base carbon component to have responsive widths for data table descriptions.

Desired UX and success metrics

As noted in the IBM Design Language website, comfortable reading suggests a line length between 32 and 80 characters.

Thus, the data table description should:

• Responsively adapt its width across different breakpoints.
• Preserve openness in typography
• Maintain a comfortable line length (32 - 80 characters in length)

Required functionality

• Updated guidance on the Carbon Design System website that addresses Data Table description line lengths
• A coded component that scales it's description based on the width of the data table's parent container

Specific timeline issues / requests

This is not a pressing issue, however; it would be great for official guidance to be made regarding line lengths in the data table description.

If this enhancement makes it through to the coded component, this would ensure consistency in our data table description line lengths across IBM.

Available extra resources

https://ibm-cloudplatform.slack.com/archives/C0M053VPT/p1651859062603919

Code of Conduct

• I agree to follow this project's Code of Conduct

[tay1orjones]

Thanks for bringing this up @KevinCamelo! Theres lots of ways to cap line length. A max-width using ch units seems like a reasonable option.

It would be good to analyze Plex renderings at that weight and size to determine a good ch value that is within the bounds of acceptable line-length without being unnecessarily short/long. ~65ch is a good spot to start probably, but Plex might do better keeping under 80 chars with 70ch or something.

@carbon-design-system/design do you have some opinions on if we should just shoot for <=80 characters on all breakpoints, or would it be best to change the max per breakpoint?

[laurenmrice]

@tay1orjones We can adjust these if they need to be tweaked after it gets up in a PR.

• max, xlg, and lg breakpoints: We can shoot for ~80ch.
• md breakpoint: We can try out ~50ch, 80 seems to be too lengthy especially if the data table contains a toolbar with buttons, icon actions,etc.
• sm breakpoint: We can go 100%.

[shixiedesign]

Hey I just noticed this issue too. What Lauren suggests look good. I'm also expecting there to be a margin or padding right to the content (title and description) so content doesn't push up against the edge:

[KevinCamelo]

Thank you for helping get this through @laurenmrice @tay1orjones!