fix: Disallow invalid number of columns for narrow and medium Grids

[RubenSibon]

Describe the pull request

There is a undesirable feature in Grid that allows setting a higher number of columns than is possible for that specific breakpoint.

What

Do not allow developers to set an invalid number of columns per media breakpoint on a Grid.Cell in a Grid via TypeScript.

Why

It restricts the freedom of developers to write invalid code.

How

Added separate GridNarrowColumnNumber and GridMediumColumnNumber types.

Checklist

Before submitting your pull request, please ensure you have done the following. Check each checkmark if you have done so or if it wasn't necessary:

• Add or update unit tests
• Add or update documentation
• Add or update stories
• Add or update exports in index.* files
• Start the PR title with a Conventional Commit prefix, as explained here.

Additional notes

• Documentation or stories do not need to be updated because8 they already state the valid number of columns per breakpoint.
• I couldn't think of a way to use unit tests to test this.

[VincentSmedinga]

The CSS classes we render from these props can receive the same treatment. Although, the last time I tried, I ran into a gotcha that I can’t remember now. Please perform sufficient visual tests on different window widths with high and low values, single and triplets, etc.

[VincentSmedinga]

Oh, and please do the same for SpotlightGrid after #1629 has been merged Breakout.

[RubenSibon]

See: https://css-tricks.com/preventing-a-grid-blowout/

[VincentSmedinga]

This has overlap: 1 | 2 | 3 | 4 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | …

We discussed Pick<>, but that’s for object types, not literals.

This may be an option:

type Subset<T, U> = T extends U ? T : never

export type GridColumnNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12

export type GridColumnNumbers = {
  narrow: Subset<GridColumnNumber, 1 | 2 | 3 | 4>
  medium: Subset<GridColumnNumber, 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8>
  wide: GridColumnNumber
}

Types that accept all three variations can keep using GridColumnNumber.

[VincentSmedinga]

This is an alternative. The definition is more complex, but usage is simpler.

type Range<N extends number, Result extends Array<unknown> = []> = Result['length'] extends N
  ? Result[number]
  : Range<N, [...Result, Result['length']]>

export type GridColumnNumber = Range<12>

export type GridColumnNumbers = {
  narrow: Range<4>
  medium: Range<8>
  wide: Range<12>
}

[VincentSmedinga]

Subset seems best?

[RubenSibon]

Well, I like how simple it is to use Range even if the definition is more complex.

I did something similar in the experimental branch:

design-system/packages/react/src/Grid/Grid.tsx

Line 12 in 9cad4c4

type Enumerate<N extends number, Acc extends number[] = []> = Acc['length'] extends N

[RubenSibon]

In the end we chose the KISS solution. :-)