Grid redesign #2203
Merged
Grid redesign #2203
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Contributor
There was a problem hiding this comment.
Pull Request Overview
This pull request implements a redesign of the grid component to align with the new design kit specifications and CSS variable token architecture, while also updating associated documentation and examples.
- Refactored grid type definitions to replace legacy spacing tokens with string-based CSS tokens.
- Updated component examples and story files to use new design token values (e.g., "var(--spacing-gap-s)", "var(--spacing-gap-ml)").
- Removed legacy usage and specifications pages in favor of streamlined documentation focusing on the new grid overview.
Reviewed Changes
Copilot reviewed 16 out of 16 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| packages/lib/src/grid/types.ts | Updated type definitions for grid-related props to use string tokens and adjust ordering of acceptable CSS values. |
| packages/lib/src/grid/Grid.stories.tsx | Modified gap values in grid stories to utilize CSS variable tokens. |
| apps/website/screens/components/grid/usage/GridUsagePage.tsx | Removed obsolete grid usage documentation page. |
| apps/website/screens/components/grid/overview/GridOverviewPage.tsx | Added a new grid overview documentation page with improved content and links. |
| apps/website/screens/components/grid/code/examples/layout.tsx | Updated code example gap values to use new CSS variable tokens. |
| apps/website/screens/components/grid/code/GridCodePage.tsx | Revised documentation table in code page to reflect updated prop types and ordering. |
| apps/website/screens/components/grid/GridPageLayout.tsx | Adjusted grid page heading text and tab order for clarity. |
| apps/website/screens/components/flex/... | Minor tweaks in flex documentation files to improve clarity and consistency. |
| apps/website/screens/common/QuickNavContainer.tsx | Modified gap value in the QuickNavContainer component to use a design token. |
| apps/website/pages/components/grid/* | Updated/removal of outdated pages in favor of the new grid overview and code pages. |
Mil4n0r
requested changes
Mar 31, 2025
apps/website/screens/components/grid/overview/GridOverviewPage.tsx
Outdated
Show resolved
Hide resolved
Mil4n0r
approved these changes
Apr 1, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Checklist
/libdirectory./websiteas needed.Description
Redesign of the grid component following the new design kit specifications, already using the new token architecture (CSS variables).