[component]: Container - Githubissues

swisspost / design-system

The Swiss Post Design System - for a consistent and accessible user experience across the web platform.

https://design-system.post.ch

Apache License 2.0

126 stars 14 forks source link

[component]: Container #3900

Open alizedebray opened 2 weeks ago

alizedebray commented 2 weeks ago

Description

A container for the grid.

Design

https://www.figma.com/design/JIT5AdGYqv6bDRpfBPV8XR/Foundations-%26-Components-Next-Level?node-id=26-51

Tokens

[x] Tokens for this component are ready

Token proposal

grid-container-max-width
grid-padding-xl
grid-padding-lg
grid-padding-md
grid-padding-sm
grid-padding-xs
grid-gutter-xl
grid-gutter-lg
grid-gutter-md
grid-gutter-sm
grid-gutter-xs

Tasks

### 💻 Tasks
- [x] HTML/CSS implementation
- [x] Documentation in Storybook
- [x] Visual regression tests

Vandapanda commented 2 weeks ago

@alizedebray Added tokens. Please check with the Grid basics if we need everything or if we have dupes

alizedebray commented 1 week ago

@Vandapanda Can you update the margin tokens by padding tokens please?

grid-margin-xl → grid-padding-xl
grid-margin-lg → grid-padding-lg
grid-margin-md → grid-padding-md
grid-margin-sm → grid-padding-sm
grid-margin-xs → grid-padding-xs

The grid-padding-xl should also have a value of 40px instead of "auto" currently.

Thank you!