Support responsive column widths

[SiAdcock]

What is the purpose of this change?

It should be possible to specify the width of a column at various breakpoints, rather than the width being static across viewport widths.

It should also be possible to completely hide a column at certain breakpoints.

Fixes #701

What does this change?

• Extend width API to accept an array of widths
• A zero-width column should be hidden from the page

Screenshots

Responsive widths

<Columns>
	<Column width={[1 / 2, 1 / 4]}>
		<p>50% at mobile, 25% above tablet</p>
	</Column>
	<Column width={[1 / 2, 3 / 4]}>
		<p>50% width at mobile, 75% above tablet</p>
	</Column>
</Columns>

Responsive hiding

<Columns>
	<Column width={[0, 1 / 4]}>
		<p>Not visible at mobile, 25% above tablet</p>
	</Column>
	<Column width={[1, 3 / 4]}>
		<p>100% at mobile, 75% above tablet</p>
	</Column>
</Columns>

Checklist

Accessibility

• Tested with screen reader
• Navigable with keyboard
• Colour contrast passed
• The component doesn't use only colour to convey meaning

Cross browser and device testing

• Tested with touch screen device

Responsiveness

• Tested at all breakpoints
• Tested with with long text
• Stretched to fill a wide container

Documentation

• Full API surface area is documented in the README
• Examples in Storybook

[tomrf1]

looks great!

[jamie-lynch]

I don't quite follow this change. Would you mind explaining what the difference is?

[SiAdcock]

Oh yes, I was messing around with something, but I didn't need it in the end. I'll restore the old way. Thanks for asking!

[sndrs]

if width no longer has a default value of 0, is this a breaking change?

[jamie-lynch]

If you were relying on the default before then I think you still get the same behaviour (due to these changes) but if you're explicitly passing 0 you will now get different behaviour so maybe it's a breaking change? Also, if you pass an empty array I don't think it's applying any styling. Maybe that should be the same as not passing a width?

[SiAdcock]

@jamie-lynch is correct, if you were explicitly passing width={0} before, the behaviour would have been the same as if you didn't pass a width (i.e. the column's width would be the remainder of container width shared between all zero-width columns). This behaviour was not documented. Arguably the behaviour is bizarre and unexpected, even a bug.

The new behaviour is to hide a column that has a 0 width. I think this is more intuitive.

Although this is technically a breaking change, I'm inclined not to treat it as such from a semver / release perspective. Nobody is currently relying on this behaviour. Let's close this loophole before people start relying on it.

[SiAdcock]

Good catch with the empty array 🙏

I've updated the logic to treat an empty array the same as passing not passing a width. I hope that makes sense!