mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
add width docs to box component (#17007)
* add width docs to box component
This commit is contained in:
Garrett Bear
GitHub
parent
56a3afaace
commit
e236792a90
@ -289,3 +289,95 @@ import Box from '../../ui/box';
|
|||||||
<Box as="button">button</Box>
|
<Box as="button">button</Box>
|
||||||
<Box as="header">header</Box>
|
<Box as="header">header</Box>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### Width
|
||||||
|
|
||||||
|
Use the `width` prop to pass a singular `BLOCK_SIZES` or for a responsive width pass an array up to 4 `BLOCK_SIZES`
|
||||||
|
|
||||||
|
Responsive widths go from smallest to largest screen sizes
|
||||||
|
|
||||||
|
Example: [BLOCK_SIZES.HALF, BLOCK_SIZES.THREE_FOURTHS, BLOCK_SIZES.ONE_FIFTH, BLOCK_SIZES.THREE_SIXTHS]
|
||||||
|
|
||||||
|
- BLOCK_SIZES.HALF is the default width for `base screen size (0px)` and up
|
||||||
|
- BLOCK_SIZES.THREE_FOURTHS is the width for `small screen size (576px) ` and up
|
||||||
|
- BLOCK_SIZES.ONE_FIFTH is the width for `medium screen size (768px)` and up
|
||||||
|
- BLOCK_SIZES.THREE_SIXTHS is the width for `large screen size (1280px)` and up
|
||||||
|
|
||||||
|
<Canvas>
|
||||||
|
<Story id="ui-components-ui-box-box-stories-js--width" />
|
||||||
|
</Canvas>
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
import {
|
||||||
|
BLOCK_SIZES,
|
||||||
|
DISPLAY,
|
||||||
|
FLEX_WRAP,
|
||||||
|
} from '../../../helpers/constants/design-system';
|
||||||
|
import Box from '../../ui/box';
|
||||||
|
|
||||||
|
<>
|
||||||
|
<p>Static widths</p>
|
||||||
|
|
||||||
|
<Box display={DISPLAY.FLEX}>
|
||||||
|
<Box width={BLOCK_SIZES.FULL}>BLOCK_SIZES.FULL</Box>
|
||||||
|
<Box width={BLOCK_SIZES.HALF}>BLOCK_SIZES.HALF</Box>
|
||||||
|
<Box width={BLOCK_SIZES.HALF}>BLOCK_SIZES.HALF</Box>
|
||||||
|
<Box width={BLOCK_SIZES.ONE_THIRD}>BLOCK_SIZES.ONE_THIRD</Box>
|
||||||
|
<Box width={BLOCK_SIZES.ONE_THIRD}>BLOCK_SIZES.ONE_THIRD</Box>
|
||||||
|
<Box width={BLOCK_SIZES.ONE_THIRD}>BLOCK_SIZES.ONE_THIRD</Box>
|
||||||
|
<Box width={BLOCK_SIZES.ONE_FOURTH}>BLOCK_SIZES.ONE_FOURTH</Box>
|
||||||
|
<Box width={BLOCK_SIZES.ONE_FOURTH}>BLOCK_SIZES.ONE_FOURTH</Box>
|
||||||
|
<Box width={BLOCK_SIZES.ONE_FOURTH}>BLOCK_SIZES.ONE_FOURTH</Box>
|
||||||
|
<Box width={BLOCK_SIZES.ONE_FOURTH}>BLOCK_SIZES.ONE_FOURTH</Box>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<p>Responsive widths</p>
|
||||||
|
|
||||||
|
<Box display={DISPLAY.FLEX} flexWrap={FLEX_WRAP.WRAP}>
|
||||||
|
<Box
|
||||||
|
width={[
|
||||||
|
BLOCK_SIZES.FULL,
|
||||||
|
BLOCK_SIZES.HALF,
|
||||||
|
BLOCK_SIZES.ONE_THIRD,
|
||||||
|
BLOCK_SIZES.ONE_FOURTH,
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
BLOCK_SIZES.FULL, BLOCK_SIZES.HALF, BLOCK_SIZES.ONE_THIRD,
|
||||||
|
BLOCK_SIZES.ONE_FOURTH,
|
||||||
|
</Box>
|
||||||
|
<Box
|
||||||
|
width={[
|
||||||
|
BLOCK_SIZES.FULL,
|
||||||
|
BLOCK_SIZES.HALF,
|
||||||
|
BLOCK_SIZES.ONE_THIRD,
|
||||||
|
BLOCK_SIZES.ONE_FOURTH,
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
BLOCK_SIZES.FULL, BLOCK_SIZES.HALF, BLOCK_SIZES.ONE_THIRD,
|
||||||
|
BLOCK_SIZES.ONE_FOURTH,
|
||||||
|
</Box>
|
||||||
|
<Box
|
||||||
|
width={[
|
||||||
|
BLOCK_SIZES.FULL,
|
||||||
|
BLOCK_SIZES.HALF,
|
||||||
|
BLOCK_SIZES.ONE_THIRD,
|
||||||
|
BLOCK_SIZES.ONE_FOURTH,
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
BLOCK_SIZES.FULL, BLOCK_SIZES.HALF, BLOCK_SIZES.ONE_THIRD,
|
||||||
|
BLOCK_SIZES.ONE_FOURTH,
|
||||||
|
</Box>
|
||||||
|
<Box
|
||||||
|
width={[
|
||||||
|
BLOCK_SIZES.FULL,
|
||||||
|
BLOCK_SIZES.HALF,
|
||||||
|
BLOCK_SIZES.ONE_THIRD,
|
||||||
|
BLOCK_SIZES.ONE_FOURTH,
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
BLOCK_SIZES.FULL, BLOCK_SIZES.HALF, BLOCK_SIZES.ONE_THIRD,
|
||||||
|
BLOCK_SIZES.ONE_FOURTH,
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</>;
|
||||||
|
```
|
||||||
|
|||||||
@ -230,26 +230,11 @@ $attributesToApplyExtraProperties: margin;
|
|||||||
&--width-full {
|
&--width-full {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
// breakpoint classes
|
|
||||||
@each $breakpoint, $min-width in $screen-sizes-map {
|
|
||||||
@media screen and (min-width: $min-width) {
|
|
||||||
&--#{$breakpoint}\:width-full {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&--height-full {
|
&--height-full {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
// breakpoint classes
|
|
||||||
@each $breakpoint, $min-width in $screen-sizes-map {
|
|
||||||
@media screen and (min-width: $min-width) {
|
|
||||||
&--#{$breakpoint}\:height-full {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@each $fraction, $value in design-system.$fractions {
|
@each $fraction, $value in design-system.$fractions {
|
||||||
&--width-#{$fraction} {
|
&--width-#{$fraction} {
|
||||||
@ -274,6 +259,24 @@ $attributesToApplyExtraProperties: margin;
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// breakpoint classes
|
||||||
|
@each $breakpoint, $min-width in $screen-sizes-map {
|
||||||
|
@media screen and (min-width: $min-width) {
|
||||||
|
&--#{$breakpoint}\:width-full {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// breakpoint classes
|
||||||
|
@each $breakpoint, $min-width in $screen-sizes-map {
|
||||||
|
@media screen and (min-width: $min-width) {
|
||||||
|
&--#{$breakpoint}\:height-full {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&--height-screen {
|
&--height-screen {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -67,7 +67,7 @@ export default {
|
|||||||
},
|
},
|
||||||
width: {
|
width: {
|
||||||
options: Object.values(BLOCK_SIZES),
|
options: Object.values(BLOCK_SIZES),
|
||||||
control: 'select',
|
control: 'multi-select',
|
||||||
table: { category: 'display' },
|
table: { category: 'display' },
|
||||||
},
|
},
|
||||||
height: {
|
height: {
|
||||||
@ -712,3 +712,275 @@ export const As = (args) => {
|
|||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const Width = (args) => {
|
||||||
|
const getColumns = () => {
|
||||||
|
const content = [];
|
||||||
|
for (let i = 0; i < 12; i++) {
|
||||||
|
content.push(
|
||||||
|
<Box
|
||||||
|
key={i}
|
||||||
|
backgroundColor={
|
||||||
|
i % 2 === 0 ? COLORS.ERROR_MUTED : COLORS.WARNING_MUTED
|
||||||
|
}
|
||||||
|
width={BLOCK_SIZES.ONE_TWELFTH}
|
||||||
|
></Box>,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return content;
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<p>
|
||||||
|
<b>Working demo</b>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<Box
|
||||||
|
borderColor={COLORS.BORDER_MUTED}
|
||||||
|
borderWidth={6}
|
||||||
|
marginBottom={6}
|
||||||
|
display={DISPLAY.FLEX}
|
||||||
|
alignItems={ALIGN_ITEMS.CENTER}
|
||||||
|
justifyContent={JUSTIFY_CONTENT.CENTER}
|
||||||
|
{...args}
|
||||||
|
>
|
||||||
|
{args.width.map((item, i) => {
|
||||||
|
return `${item} ${args.width.length === i + 1 ? '' : ', '}`;
|
||||||
|
})}
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<b>Static widths</b>
|
||||||
|
</p>
|
||||||
|
<Box
|
||||||
|
display={DISPLAY.FLEX}
|
||||||
|
borderColor={COLORS.BACKGROUND_ALTERNATIVE}
|
||||||
|
style={{
|
||||||
|
height: '100vh',
|
||||||
|
position: 'relative',
|
||||||
|
}}
|
||||||
|
marginBottom={6}
|
||||||
|
>
|
||||||
|
{getColumns()}
|
||||||
|
|
||||||
|
<Box
|
||||||
|
width={BLOCK_SIZES.FULL}
|
||||||
|
display={DISPLAY.FLEX}
|
||||||
|
flexWrap={FLEX_WRAP.WRAP}
|
||||||
|
style={{
|
||||||
|
position: 'absolute',
|
||||||
|
top: 0,
|
||||||
|
bottom: 0,
|
||||||
|
left: 0,
|
||||||
|
right: 0,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Box
|
||||||
|
borderColor={COLORS.BORDER_MUTED}
|
||||||
|
borderWidth={6}
|
||||||
|
marginBottom={6}
|
||||||
|
width={BLOCK_SIZES.FULL}
|
||||||
|
display={DISPLAY.FLEX}
|
||||||
|
alignItems={ALIGN_ITEMS.CENTER}
|
||||||
|
justifyContent={JUSTIFY_CONTENT.CENTER}
|
||||||
|
>
|
||||||
|
BLOCK_SIZES.FULL
|
||||||
|
</Box>
|
||||||
|
<Box
|
||||||
|
borderColor={COLORS.BORDER_MUTED}
|
||||||
|
borderWidth={6}
|
||||||
|
marginBottom={6}
|
||||||
|
width={BLOCK_SIZES.HALF}
|
||||||
|
display={DISPLAY.FLEX}
|
||||||
|
alignItems={ALIGN_ITEMS.CENTER}
|
||||||
|
justifyContent={JUSTIFY_CONTENT.CENTER}
|
||||||
|
>
|
||||||
|
BLOCK_SIZES.HALF
|
||||||
|
</Box>
|
||||||
|
<Box
|
||||||
|
borderColor={COLORS.BORDER_MUTED}
|
||||||
|
borderWidth={6}
|
||||||
|
marginBottom={6}
|
||||||
|
width={BLOCK_SIZES.HALF}
|
||||||
|
display={DISPLAY.FLEX}
|
||||||
|
alignItems={ALIGN_ITEMS.CENTER}
|
||||||
|
justifyContent={JUSTIFY_CONTENT.CENTER}
|
||||||
|
>
|
||||||
|
BLOCK_SIZES.HALF
|
||||||
|
</Box>
|
||||||
|
<Box
|
||||||
|
borderColor={COLORS.BORDER_MUTED}
|
||||||
|
borderWidth={6}
|
||||||
|
marginBottom={6}
|
||||||
|
width={BLOCK_SIZES.ONE_THIRD}
|
||||||
|
display={DISPLAY.FLEX}
|
||||||
|
alignItems={ALIGN_ITEMS.CENTER}
|
||||||
|
justifyContent={JUSTIFY_CONTENT.CENTER}
|
||||||
|
>
|
||||||
|
BLOCK_SIZES.ONE_THIRD
|
||||||
|
</Box>
|
||||||
|
<Box
|
||||||
|
borderColor={COLORS.BORDER_MUTED}
|
||||||
|
borderWidth={6}
|
||||||
|
marginBottom={6}
|
||||||
|
width={BLOCK_SIZES.ONE_THIRD}
|
||||||
|
display={DISPLAY.FLEX}
|
||||||
|
alignItems={ALIGN_ITEMS.CENTER}
|
||||||
|
justifyContent={JUSTIFY_CONTENT.CENTER}
|
||||||
|
>
|
||||||
|
BLOCK_SIZES.ONE_THIRD
|
||||||
|
</Box>
|
||||||
|
<Box
|
||||||
|
borderColor={COLORS.BORDER_MUTED}
|
||||||
|
borderWidth={6}
|
||||||
|
marginBottom={6}
|
||||||
|
width={BLOCK_SIZES.ONE_THIRD}
|
||||||
|
display={DISPLAY.FLEX}
|
||||||
|
alignItems={ALIGN_ITEMS.CENTER}
|
||||||
|
justifyContent={JUSTIFY_CONTENT.CENTER}
|
||||||
|
>
|
||||||
|
BLOCK_SIZES.ONE_THIRD
|
||||||
|
</Box>
|
||||||
|
<Box
|
||||||
|
borderColor={COLORS.BORDER_MUTED}
|
||||||
|
borderWidth={6}
|
||||||
|
width={BLOCK_SIZES.ONE_FOURTH}
|
||||||
|
display={DISPLAY.FLEX}
|
||||||
|
alignItems={ALIGN_ITEMS.CENTER}
|
||||||
|
justifyContent={JUSTIFY_CONTENT.CENTER}
|
||||||
|
>
|
||||||
|
BLOCK_SIZES.ONE_FOURTH
|
||||||
|
</Box>
|
||||||
|
<Box
|
||||||
|
borderColor={COLORS.BORDER_MUTED}
|
||||||
|
borderWidth={6}
|
||||||
|
width={BLOCK_SIZES.ONE_FOURTH}
|
||||||
|
display={DISPLAY.FLEX}
|
||||||
|
alignItems={ALIGN_ITEMS.CENTER}
|
||||||
|
justifyContent={JUSTIFY_CONTENT.CENTER}
|
||||||
|
>
|
||||||
|
BLOCK_SIZES.ONE_FOURTH
|
||||||
|
</Box>
|
||||||
|
<Box
|
||||||
|
borderColor={COLORS.BORDER_MUTED}
|
||||||
|
borderWidth={6}
|
||||||
|
width={BLOCK_SIZES.ONE_FOURTH}
|
||||||
|
display={DISPLAY.FLEX}
|
||||||
|
alignItems={ALIGN_ITEMS.CENTER}
|
||||||
|
justifyContent={JUSTIFY_CONTENT.CENTER}
|
||||||
|
>
|
||||||
|
BLOCK_SIZES.ONE_FOURTH
|
||||||
|
</Box>
|
||||||
|
<Box
|
||||||
|
borderColor={COLORS.BORDER_MUTED}
|
||||||
|
borderWidth={6}
|
||||||
|
width={BLOCK_SIZES.ONE_FOURTH}
|
||||||
|
display={DISPLAY.FLEX}
|
||||||
|
alignItems={ALIGN_ITEMS.CENTER}
|
||||||
|
justifyContent={JUSTIFY_CONTENT.CENTER}
|
||||||
|
>
|
||||||
|
BLOCK_SIZES.ONE_FOURTH
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
<p>
|
||||||
|
<b>Responsive widths</b>
|
||||||
|
</p>
|
||||||
|
<Box
|
||||||
|
display={DISPLAY.FLEX}
|
||||||
|
borderColor={COLORS.BACKGROUND_ALTERNATIVE}
|
||||||
|
style={{ height: '100vh', position: 'relative', textAlign: 'center' }}
|
||||||
|
>
|
||||||
|
{getColumns()}
|
||||||
|
|
||||||
|
<Box
|
||||||
|
width={BLOCK_SIZES.FULL}
|
||||||
|
display={DISPLAY.FLEX}
|
||||||
|
flexWrap={FLEX_WRAP.WRAP}
|
||||||
|
style={{
|
||||||
|
position: 'absolute',
|
||||||
|
top: 0,
|
||||||
|
bottom: 0,
|
||||||
|
left: 0,
|
||||||
|
right: 0,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Box
|
||||||
|
borderColor={COLORS.BORDER_MUTED}
|
||||||
|
borderWidth={6}
|
||||||
|
width={[
|
||||||
|
BLOCK_SIZES.FULL,
|
||||||
|
BLOCK_SIZES.HALF,
|
||||||
|
BLOCK_SIZES.ONE_THIRD,
|
||||||
|
BLOCK_SIZES.ONE_FOURTH,
|
||||||
|
]}
|
||||||
|
display={DISPLAY.FLEX}
|
||||||
|
alignItems={ALIGN_ITEMS.CENTER}
|
||||||
|
justifyContent={JUSTIFY_CONTENT.CENTER}
|
||||||
|
>
|
||||||
|
BLOCK_SIZES.FULL, BLOCK_SIZES.HALF, BLOCK_SIZES.ONE_THIRD,
|
||||||
|
BLOCK_SIZES.ONE_FOURTH,
|
||||||
|
</Box>
|
||||||
|
<Box
|
||||||
|
borderColor={COLORS.BORDER_MUTED}
|
||||||
|
borderWidth={6}
|
||||||
|
width={[
|
||||||
|
BLOCK_SIZES.FULL,
|
||||||
|
BLOCK_SIZES.HALF,
|
||||||
|
BLOCK_SIZES.ONE_THIRD,
|
||||||
|
BLOCK_SIZES.ONE_FOURTH,
|
||||||
|
]}
|
||||||
|
display={DISPLAY.FLEX}
|
||||||
|
alignItems={ALIGN_ITEMS.CENTER}
|
||||||
|
justifyContent={JUSTIFY_CONTENT.CENTER}
|
||||||
|
>
|
||||||
|
BLOCK_SIZES.FULL, BLOCK_SIZES.HALF, BLOCK_SIZES.ONE_THIRD,
|
||||||
|
BLOCK_SIZES.ONE_FOURTH,
|
||||||
|
</Box>
|
||||||
|
<Box
|
||||||
|
borderColor={COLORS.BORDER_MUTED}
|
||||||
|
borderWidth={6}
|
||||||
|
width={[
|
||||||
|
BLOCK_SIZES.FULL,
|
||||||
|
BLOCK_SIZES.HALF,
|
||||||
|
BLOCK_SIZES.ONE_THIRD,
|
||||||
|
BLOCK_SIZES.ONE_FOURTH,
|
||||||
|
]}
|
||||||
|
display={DISPLAY.FLEX}
|
||||||
|
alignItems={ALIGN_ITEMS.CENTER}
|
||||||
|
justifyContent={JUSTIFY_CONTENT.CENTER}
|
||||||
|
>
|
||||||
|
BLOCK_SIZES.FULL, BLOCK_SIZES.HALF, BLOCK_SIZES.ONE_THIRD,
|
||||||
|
BLOCK_SIZES.ONE_FOURTH,
|
||||||
|
</Box>
|
||||||
|
<Box
|
||||||
|
borderColor={COLORS.BORDER_MUTED}
|
||||||
|
borderWidth={6}
|
||||||
|
width={[
|
||||||
|
BLOCK_SIZES.FULL,
|
||||||
|
BLOCK_SIZES.HALF,
|
||||||
|
BLOCK_SIZES.ONE_THIRD,
|
||||||
|
BLOCK_SIZES.ONE_FOURTH,
|
||||||
|
]}
|
||||||
|
display={DISPLAY.FLEX}
|
||||||
|
alignItems={ALIGN_ITEMS.CENTER}
|
||||||
|
justifyContent={JUSTIFY_CONTENT.CENTER}
|
||||||
|
>
|
||||||
|
BLOCK_SIZES.FULL, BLOCK_SIZES.HALF, BLOCK_SIZES.ONE_THIRD,
|
||||||
|
BLOCK_SIZES.ONE_FOURTH,
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
Width.args = {
|
||||||
|
width: [
|
||||||
|
BLOCK_SIZES.HALF,
|
||||||
|
BLOCK_SIZES.ONE_FIFTH,
|
||||||
|
BLOCK_SIZES.THREE_FOURTHS,
|
||||||
|
BLOCK_SIZES.ONE_FOURTH,
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user