Grid.Column spans full width by default when using responsive API

[rezrah]

Summary

Fixes a bug where the default grid column does not span full width in responsive mode.

Now you can do this:

<Grid>
  <Grid.Column
    span={{
      large: 6
    }}
  ></Grid.Column>
  <Grid.Column
    span={{
      large: 6
    }}
  ></Grid.Column>
</Grid>

which will force columns to span all 12 columns by default, and only split in 50:50 at large breakpoints.

Screen.Recording.2023-04-27.at.15.22.36.mov

Steps to test:

1. Review the storybook example
2. Review the unit test

Contributor checklist:

• All new and existing CI checks pass
• Tests prove that the feature works and covers both happy and unhappy paths
• Any drop in coverage, breaking changes or regressions have been documented above
• New visual snapshots have been generated / updated for any UI changes
• All developer debugging and non-functional logging has been removed
• Related issues have been referenced in the PR description

Reviewer checklist:

• Check that pull request and proposed changes adhere to our contribution guidelines and code of conduct
• Check that tests prove the feature works and covers both happy and unhappy paths
• Check that there aren't other open Pull Requests for the same update/change

[changeset-bot]

🦋 Changeset detected

Latest commit: 37e02e9

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

This PR includes changesets to release 6 packages

Name	Type
@primer/react-brand	Patch
@primer/brand-primitives	Patch
@primer/brand-e2e	Patch
@primer/brand-fonts	Patch
@primer/brand-config	Patch
@primer/brand-storybook	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

[github-actions]

🔍 Design token changes found

View CSS variable changes

- --grid-column-bgColor-overlay: hsl(var(--base-color-scale-red-4-hsl) / 30%);
+ --brand-Grid-column-bgColor-overlay: hsl(var(--base-color-scale-red-4-hsl) / 30%);

- --grid-column-bgColor-overlay: hsl(var(--base-color-scale-pink-2-hsl) / 30%);
+ --brand-Grid-column-bgColor-overlay: hsl(var(--base-color-scale-pink-2-hsl) / 30%);

- --grid-column-bgColor-overlay: hsl(var(--base-color-scale-red-4-hsl) / 30%);
+ --brand-Grid-column-bgColor-overlay: hsl(var(--base-color-scale-red-4-hsl) / 30%);

- --grid-spacing-margin: var(--base-size-16);
+ --brand-Grid-spacing-margin: var(--base-size-16);

- --grid-spacing-column-gap: var(--base-size-16);
+ --brand-Grid-spacing-column-gap: var(--base-size-16);

- --grid-spacing-row: var(--base-size-16);
+ --brand-Grid-spacing-row: var(--base-size-16);

- --grid-spacing-margin: var(--base-size-40);
+ --brand-Grid-spacing-margin: var(--base-size-40);

- --grid-spacing-column-gap: var(--base-size-32);
+ --brand-Grid-spacing-column-gap: var(--base-size-32);

- --grid-spacing-row: var(--base-size-24);
+ --brand-Grid-spacing-row: var(--base-size-24);

- --grid-spacing-margin: var(--base-size-16);
+ --brand-Grid-spacing-margin: var(--base-size-16);

- --grid-spacing-column-gap: var(--base-size-48);
+ --brand-Grid-spacing-column-gap: var(--base-size-48);

[github-actions]

🟢 No visual differences found

Our visual comparison tests did not find any differences in the UI.

[josepmartins]

LGTM!

nit: do we need to add a description to the docs that the Column spans full width when there's no span?