Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat!: Use spacing tokens in Grid component #1089

Merged
merged 20 commits into from
Feb 29, 2024

Conversation

VincentSmedinga
Copy link
Contributor

@VincentSmedinga VincentSmedinga commented Feb 21, 2024

This makes the Grid component use the new Space tokens, which were, in their turn, based on the Grid gap token.

  • Uses Sass to generate classes for gap and padding. I intended to use shorter, local variable names, but prefixing with amsterdam is required.
  • Introduces a .amsterdam-grid--gap--medium class that wasn’t previously there as the base component includes the medium gap class.
  • The compact grid gap token is no longer needed; it now uses the token from compact mode if it’s loaded. The padding one is because its value is different.
  • Replaces ‘white space’ with ‘gap’ in the docs; it is more specific and matches nicely with the prop name.

The change is breaking because:

  1. the amsterdam-grid-gap token is now amsterdam-grid-gap-md
  2. the large vertical padding of the grid is now 1.5 (instead of 2) times as wide as the regular gap width to match the space token naming

@github-actions github-actions bot temporarily deployed to demo-DES-612-use-gap-in-grid February 21, 2024 16:18 Destroyed
@github-actions github-actions bot temporarily deployed to demo-DES-612-use-gap-in-grid February 21, 2024 16:24 Destroyed
@github-actions github-actions bot temporarily deployed to demo-DES-612-use-gap-in-grid February 23, 2024 12:13 Destroyed
# Conflicts:
#	storybook/src/components/Grid/Grid.docs.mdx
@github-actions github-actions bot temporarily deployed to demo-DES-612-use-gap-in-grid February 27, 2024 11:28 Destroyed
@github-actions github-actions bot temporarily deployed to demo-DES-612-use-gap-in-grid February 27, 2024 13:37 Destroyed
@github-actions github-actions bot temporarily deployed to demo-DES-612-use-gap-in-grid February 27, 2024 21:18 Destroyed
@github-actions github-actions bot temporarily deployed to demo-DES-612-use-gap-in-grid February 27, 2024 21:25 Destroyed
@github-actions github-actions bot temporarily deployed to demo-DES-612-use-gap-in-grid February 28, 2024 08:54 Destroyed
@github-actions github-actions bot temporarily deployed to demo-DES-612-use-gap-in-grid February 28, 2024 10:17 Destroyed
@github-actions github-actions bot temporarily deployed to demo-DES-612-use-gap-in-grid February 28, 2024 10:19 Destroyed
@github-actions github-actions bot temporarily deployed to demo-DES-612-use-gap-in-grid February 28, 2024 12:50 Destroyed
@github-actions github-actions bot temporarily deployed to demo-DES-612-use-gap-in-grid February 29, 2024 08:44 Destroyed
@VincentSmedinga VincentSmedinga merged commit b55f0a3 into develop Feb 29, 2024
4 checks passed
@VincentSmedinga VincentSmedinga deleted the feature/DES-612-use-gap-in-grid branch February 29, 2024 08:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

Successfully merging this pull request may close these issues.

3 participants