Fix: update box and height to use responsive sizes properly#245
Conversation
There was a problem hiding this comment.
Pull request overview
This PR updates layout sizing so that Box and Stack correctly honor responsive height and width base values, and updates the changelog to reflect recent responsive sizing fixes.
Changes:
- Update
Boxto derive its basewidth/heightfromwidthResponsive.base/heightResponsive.basewhen explicitwidth/heightprops are not provided. - Update
Stackto derive its basewidth/heightfromwidthResponsive.base/heightResponsive.basesimilarly, ensuring CSS variables and full-size flags stay in sync. - Adjust the unreleased changelog entries describing responsive sizing corrections across
EqualGrid,Box, andStack.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
src/particles/box/component.tsx |
Computes height and width using nullish coalescing with heightResponsive.base / widthResponsive.base, so the base responsive size is respected by the Box layout and CSS variables. |
src/layouts/stack/component.tsx |
Aligns Stack’s base height/width with heightResponsive.base / widthResponsive.base, keeping the base CSS variables consistent with responsive sizing behavior. |
CHANGELOG.md |
Updates unreleased notes to describe responsive sizing fixes, though one entry currently uses a prop name that doesn’t match the actual EqualGrid API. |
| - [MINOR] Correction for using `sizeResponsive.base` size in `EqualGrid` | ||
| - [MINOR] Correction for using `heightResponsive.base`, `widthResponsive.base` size in `EqualGrid`, `Box` and `Stack` |
There was a problem hiding this comment.
This changelog entry refers to sizeResponsive.base in EqualGrid, but the component API uses childSizeResponsive.base (see src/layouts/equalGrid/component.tsx:19-25). To avoid confusion for consumers, consider updating the wording to match the actual prop names and to only mention heightResponsive.base / widthResponsive.base for components that actually expose those props (Box and Stack, not EqualGrid).
| - [MINOR] Correction for using `sizeResponsive.base` size in `EqualGrid` | |
| - [MINOR] Correction for using `heightResponsive.base`, `widthResponsive.base` size in `EqualGrid`, `Box` and `Stack` | |
| - [MINOR] Correction for using `childSizeResponsive.base` size in `EqualGrid` | |
| - [MINOR] Correction for using `heightResponsive.base`, `widthResponsive.base` size in `Box` and `Stack` |
Description
Screenshots:
Checklist: