[DSR] Added Box component #724
Conversation
…o dsr/box-initial
📖 Storybook Preview |
📖 Storybook Preview |
| export enum BoxFlexDirection { | ||
| Row = 'flex-row', | ||
| RowReverse = 'flex-row-reverse', | ||
| Column = 'flex-col', | ||
| ColumnReverse = 'flex-col-reverse', | ||
| } |
There was a problem hiding this comment.
Checked against extension ✅
export enum FlexDirection {
Row = 'row',
RowReverse = 'row-reverse',
Column = 'column',
ColumnReverse = 'column-reverse',
}
| export enum BoxFlexWrap { | ||
| NoWrap = 'flex-nowrap', | ||
| Wrap = 'flex-wrap', | ||
| WrapReverse = 'flex-wrap-reverse', | ||
| } |
There was a problem hiding this comment.
Checked against extension ✅
export enum FlexWrap {
Wrap = 'wrap',
WrapReverse = 'wrap-reverse',
NoWrap = 'nowrap',
}
| /** | ||
| * Box - all spacing-related props | ||
| */ | ||
| export type BoxSpacing = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12; |
There was a problem hiding this comment.
In the extension, we support responsive props by allowing property values to be specified as arrays. This lets developers set different values for each breakpoint. Including null in the type definition enables skipping a specific breakpoint—for example, margin={[4, null, 8]} applies a margin of 4 at the first breakpoint, skips the second, and sets 8 at the third. However, this pattern does not have to be supported in the monorepo version.
https://github.com/MetaMask/metamask-extension/blob/main/ui/components/component-library/box/box.types.ts#L103-L117
export type SizeNumber =
| 0
| 1
| 2
| 3
| 4
| 5
| 6
| 7
| 8
| 9
| 10
| 11
| 12
| null;
| export enum BoxAlignItems { | ||
| Start = 'items-start', | ||
| Center = 'items-center', | ||
| End = 'items-end', | ||
| Stretch = 'items-stretch', | ||
| Baseline = 'items-baseline', | ||
| } |
There was a problem hiding this comment.
Checking against extension we are supporting each but using a different name. I think this is a reasonably breaking change
export enum AlignItems {
flexStart = 'flex-start',
flexEnd = 'flex-end',
center = 'center',
baseline = 'baseline',
stretch = 'stretch',
}
| export enum BoxJustifyContent { | ||
| Start = 'justify-start', | ||
| Center = 'justify-center', | ||
| End = 'justify-end', | ||
| Between = 'justify-between', | ||
| Around = 'justify-around', | ||
| Evenly = 'justify-evenly', | ||
| } |
There was a problem hiding this comment.
Checking against extension we are supporting each but using a different name. I think this is a reasonably breaking change
export enum JustifyContent {
flexStart = 'flex-start',
flexEnd = 'flex-end',
center = 'center',
spaceAround = 'space-around',
spaceBetween = 'space-between',
spaceEvenly = 'space-evenly',
}
Description
This PR adds the
Boxcomponent to the@metamask/design-system-reactpackageRelated issues
Fixes: #668
Manual testing steps
yarn storybookScreenshots/Recordings
Before
After
Screen.Recording.2025-06-05.at.1.38.53.PM.mov
Pre-merge author checklist
Pre-merge reviewer checklist