Inset redesign #2204
Merged
Inset redesign #2204
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 PR redesigns the inset component by updating its spacing values to use new CSS token references, and it adjusts related documentation and examples to reflect the updated design kit specifications. Key changes include conversion of hard-coded spacing values to CSS variables in multiple component story files, removal of legacy inset usage and specification pages, and updates to code examples and documentation tables to align with the new token architecture.
Reviewed Changes
Copilot reviewed 33 out of 33 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| packages/lib/src/button/Button.stories.tsx | Updated inset spacing value from a fixed rem value to a CSS token. |
| packages/lib/src/badge/Badge.stories.tsx | Converted inset spacing value to a CSS variable for consistency. |
| packages/lib/src/action-icon/ActionIcon.stories.tsx | Replaced fixed spacing with a CSS token in the inset component. |
| packages/lib/src/accordion/Accordion.stories.tsx | Updated multiple inset spacing values to use CSS token references. |
| apps/website/screens/components/inset/usage/InsetUsagePage.tsx | Removed the outdated usage page content in favor of new design. |
| apps/website/screens/components/inset/specs/InsetSpecsPage.tsx | Removed the legacy specifications page content. |
| apps/website/screens/components/inset/overview/InsetOverviewPage.tsx | Added a new overview page with updated introduction and best practices. |
| apps/website/screens/components/inset/code/examples/* | Updated code examples to use CSS token references for spacing and sizing. |
| apps/website/screens/components/inset/code/InsetCodePage.tsx | Revised the documentation table to reflect changes in inset prop names and types. |
| apps/website/screens/components/inset/InsetPageLayout.tsx | Updated tab order and component usage for layout consistency. |
| apps/website/screens/components/container/* | Converted similar spacing and border values in container examples and documentation. |
| apps/website/pages/components/inset/* | Removed legacy pages and updated routing to the new overview and code pages. |
Comments suppressed due to low confidence (1)
apps/website/screens/components/inset/code/InsetCodePage.tsx:26
- Ensure that the prop names displayed in the documentation table match the actual API of the DxcInset component. For instance, the change from 'space' to 'bottom' (and the reordering of 'top', 'horizontal', and 'vertical') should be reviewed for consistency with the component implementation.
<td>bottom</td>
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR refactors the Inset component implementation and related documentation to align with the new design kit specifications and token architecture. Key changes include:
- Replacing hard-coded spacing values (e.g. "3rem", "1.5rem", "2rem") with the corresponding CSS custom property tokens.
- Removing outdated usage and specifications pages for the inset component and introducing an overview page.
- Updating code examples and documentation across various components (Badge, ActionIcon, Accordion, Container) to use the new token-based values.
Reviewed Changes
Copilot reviewed 34 out of 34 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| packages/lib/src/badge/Badge.stories.tsx | Updated inset spacing value to use CSS token. |
| packages/lib/src/action-icon/ActionIcon.stories.tsx | Replaced fixed spacing with a design token. |
| packages/lib/src/accordion/Accordion.stories.tsx | Updated multiple inset spacing values to use CSS tokens. |
| apps/website/screens/components/inset/usage/InsetUsagePage.tsx | Removed the usage page to match new design direction. |
| apps/website/screens/components/inset/specs/InsetSpecsPage.tsx | Removed the specifications page as part of the redesign. |
| apps/website/screens/components/inset/overview/InsetOverviewPage.tsx | Introduced a new overview page for the inset component. |
| apps/website/screens/components/inset/code/examples/customSides.ts | Updated inset and flex examples to use CSS token values. |
| apps/website/screens/components/inset/code/examples/basicUsage.ts | Updated inset code example with new token-based spacing. |
| apps/website/screens/components/inset/code/InsetCodePage.tsx | Revised the props table and documentation to reflect new token usage. |
| apps/website/screens/components/inset/InsetPageLayout.tsx | Updated tab ordering to match the new content structure. |
| apps/website/screens/components/flex/overview/FlexOverviewPage.tsx | Adjusted documentation list ordering for clarity. |
| apps/website/screens/components/container/overview/examples/defaultBoxModel.ts | Removed the default box model example. |
| apps/website/screens/components/container/overview/examples/alternateBoxModel.ts | Removed the alternate box model example. |
| apps/website/screens/components/container/code/examples/listbox.ts | Updated container example with new token-based values. |
| apps/website/screens/components/container/code/examples/basicUsage.ts | Updated container example to reference new tokens. |
| apps/website/screens/components/container/code/ContainerCodePage.tsx | Updated the props documentation for container with new token details. |
| apps/website/pages/components/inset/usage.tsx | Deleted the obsolete usage page. |
| apps/website/pages/components/inset/specifications.tsx | Deleted the obsolete specifications page. |
| apps/website/pages/components/inset/index.tsx | Updated the landing page to use the new overview page. |
| apps/website/pages/components/inset/code.tsx | Added a new page for inset code documentation. |
Mil4n0r
requested changes
Apr 1, 2025
Mil4n0r
approved these changes
Apr 2, 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 inset component following the new design kit specifications, already using the new token architecture (CSS variables). This PR also includes several documentation updates in the
DxcContainerthat weren't addressed in its PR.childrenprop from the<DxcContainer>is not mandatory anymore. This will allow users to build blocks without children in Halstack layouts.