Implements column width features

[mperrotti]

Closes https://github.com/github/primer/issues/1882

These changes allow consumers to control how the column widths are calculated.

To do:

• Support responsive values?
• Handle the sizing of the row action column

Merge checklist

• Added/updated tests
• Added/updated documentation
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

[changeset-bot]

🦋 Changeset detected

Latest commit: 7b3b553

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[mperrotti]

I didn't update DataTable.docs.json because I didn't see any of the other column props documented. @joshblack - do you have a follow-up issue to handle that? Or do we need to come up with a plan?

[mperrotti]

I'm not even sure we need to make these props responsive. Reviewers: how would you feel about leaving out the responsive value feature until we find we actually need it?

[joshblack]

Reviewers: how would you feel about leaving out the responsive value feature until we find we actually need it?

Definitely down for this 👍

[joshblack]

@mperrotti real quick, noticed the layout on safari is off for the new story example:

And this funkiness on Firefox:

[joshblack]

I didn't update DataTable.docs.json because I didn't see any of the other column props documented. @joshblack - do you have a follow-up issue to handle that? Or do we need to come up with a plan?

@mperrotti I have it as a task under: https://github.com/github/primer/issues/1813 to document the TS types for things like Column if that helps to track this work! (Will convert it to an issue when we start work on it). I figured we could do it towards the end since Column as a type may be changing shape depending on how sorting/pagination turns out

[mperrotti]

@joshblack - the Safari and FF layout bug was caused by a silly mistake in the @supports block. Should be back to normal now 😅

[joshblack]

Looks great! 🥳

[joshblack]

Just curious, for the TS error that's causing the builds to fail what's the best way to handle CSS Custom Properties in TS? 🤔 Do you typically just cast as React.CSSProperties or do you extend that type with the Custom Property name? (Or something else entirely lol)

[mperrotti]

Just curious, for the TS error that's causing the builds to fail what's the best way to handle CSS Custom Properties in TS? 🤔

In the past I've just cast it as React.CSSProperties. There might be a better way, but idk what it is 😅

[github-actions]

size-limit report 📦

Path	Size
dist/browser.esm.js	94.48 KB (0%)
dist/browser.umd.js	95.05 KB (0%)