mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
065c499753
* update ButtonIcon to TS lint updates fix lint issues add ref fix as prop test updates * box and icon updates for support * Update ui/components/component-library/text-field/README.mdx Co-authored-by: George Marshall <george.marshall@consensys.net> * fix disabled * update types for as * update readme * fix storybook * george changes to button icon * revert headerbase * box prop back to HTMLElementTagNameMap --------- Co-authored-by: George Marshall <george.marshall@consensys.net> Co-authored-by: legobeat <109787230+legobeat@users.noreply.github.com> |
||
|---|---|---|
| .. | ||
| box.d.ts | ||
| box.js | ||
| box.scss | ||
| box.stories.tsx | ||
| box.test.tsx | ||
| index.js | ||
| README.mdx | ||
import { Story, Canvas } from '@storybook/addon-docs';
import ActionableMessage from '../actionable-message';
import Box from '.';
# Box
Box is a utility component that can be used for layout or as a base for other UI components.
<Canvas>
<Story id="components-ui-box--default-story" />
</Canvas>
## Props
| Name | Description | Default |
| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
| children | The children of the Box component. If `function` type will render the child as the Box node instead of a child of the Box | - |
| className | Additional className of the Box component | - |
| margin | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values [1, 2, 'auto'] for responsive props | - |
| marginTop | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values for responsive props | - |
| marginBottom | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values for responsive props | - |
| marginRight | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values for responsive props | - |
| marginLeft | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values for responsive props | - |
| marginInline | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values for responsive props | - |
| marginInlineStart | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values for responsive props | - |
| marginInlineEnd | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values for responsive props | - |
| padding | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
| paddingTop | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
| paddingBottom | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
| paddingRight | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
| paddingLeft | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
| paddingInline | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
| paddingInlineStart | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
| paddingInlineEnd | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
| display | DISPLAY values or array of DISPLAY values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
| flexDirection | FLEX_DIRECTION values or array of FLEX_DIRECTION values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | FLEX_DIRECTION.ROW |
| flexWrap | FLEX_WRAP values or array of FLEX_WRAP values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
| alignItems | AlignItems values or array of AlignItems values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
| justifyContent | JustifyContent values or array of JustifyContent values from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
| gap | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
| textAlign | TEXT_ALIGN values or array of TEXT_ALIGN values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
| width | BLOCK_SIZES values or array of BLOCK_SIZES values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
| height | BLOCK_SIZES values or array of BLOCK_SIZES values for responsive props [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
| color | Color values or array of Color values for responsive props [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
| backgroundColor | BackgroundColor values or array of BackgroundColor values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
| borderColor | BorderColor values or array of BorderColor values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
| borderWidth | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
| borderRadius | BorderRadius values or array of BorderRadius values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
| borderStyle | BORDER_STYLE values or array of BORDER_STYLE values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
| as | The polymorphic `as` prop allows you to change the root HTML element of the Box component. Defaults to 'div' | 'div' |
## Usage
The following describes the props and example usage for this component.
### Margin
The margin props `margin`, `marginTop`, `marginRight`, `marginBottom`, `marginLeft`, `marginInline`, `marginInlineStart`, and `marginInlineEnd` can be used to set the margins of the `Box` component. All of the margin props accept [responsive props](#responsive-props) in the form of array props
Accepted props are: `0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto` or array of these values
<Canvas>
<Story id="components-ui-box--margin" />
</Canvas>
```jsx
<Box margin={4} />
<Box marginTop={4} />
<Box marginRight={4} />
<Box marginBottom={4} />
<Box marginLeft={'auto'} />
<Box marginInline={4} />
<Box marginInlineStart={4} />
<Box marginInlineEnd={4} />
// Responsive props
<Box margin={[4, 8]} />
<Box marginTop={[4, 8]} />
<Box marginRight={[4, 8]} />
<Box marginBottom={[4, 8]} />
<Box marginLeft={['auto', 8]} />
<Box marginInline={['auto', 8]} />
<Box marginInlineStart={['auto', 8]} />
<Box marginInlineEnd={['auto', 8]} />
```
### Padding
The padding props work very similarly to margin. The padding props `padding`, `paddingTop`, `paddingRight`, `paddingBottom`, `paddingLeft`, `paddingInline`, `paddingInlineStart`, and `paddingInlineEnd` can be used to set the paddings of the `Box` component. All of the padding props accept [responsive props](#responsive-props) in the form of array props
Accepted props are: `0, 1, 2, 4, 6, 8, 9, 10, 12` or array of these values
<Canvas>
<Story id="components-ui-box--padding" />
</Canvas>
```jsx
<Box padding={4} />
<Box paddingTop={4} />
<Box paddingRight={4} />
<Box paddingBottom={4} />
<Box paddingLeft={4} />
// Responsive props
<Box padding={[4, 8]} />
<Box paddingTop={[4, 8]} />
<Box paddingRight={[4, 8]} />
<Box paddingBottom={[4, 8]} />
<Box paddingLeft={[4, 8]} />
```
### Display
The `display` prop can be used to set the display of the `Box` component. All of the display props accept [responsive props](#responsive-props) in the form of array props.
Accepted props imported from the design system `DISPLAY` const are:
- `DISPLAY.BLOCK`
- `DISPLAY.FLEX`
- `DISPLAY.GRID`
- `DISPLAY.INLINE_BLOCK`
- `DISPLAY.INLINE_FLEX`
- `DISPLAY.INLINE_GRID`
- `DISPLAY.INLINE`
- `DISPLAY.LIST_ITEM`
- `DISPLAY.NONE`
or array of these values.
```jsx
import { DISPLAY } from '../../../helpers/constants/design-system';
import Box from '../ui/box';
<Box display={DISPLAY.BLOCK} />
<Box display={DISPLAY.FLEX} />
<Box display={DISPLAY.GRID} />
<Box display={DISPLAY.INLINE_BLOCK} />
<Box display={DISPLAY.INLINE_FLEX} />
<Box display={DISPLAY.INLINE} />
<Box display={DISPLAY.NONE} />
```
### Color
The `color` prop can be used to set the color of the content in Box component. The `color` prop accepts [responsive props](#responsive-props) in the form of array props. Defaults to `Color.textDefault`.
<Canvas>
<Story id="components-ui-box--color-story" />
</Canvas>
Example of importing `TextColor` object with `Box` component
```jsx
import { TextColor } from '../../../helpers/constants/design-system';
import Box from '../ui/box';
<Box color={TextColor.textDefault}>Text goes here</Box>;
```
### Background Color
Use the `backgroundColor` prop along with the `Color` or `BackgroundColor` object from `ui/helpers/constants/design-system.js` to change background color. The `backgroundColor` prop accepts [responsive props](#responsive-props) in the form of array props.
<Canvas>
<Story id="components-ui-box--background-color-story" />
</Canvas>
Example of importing `BackgroundColor` object with `Box` component
```jsx
import {
BackgroundColor,
TextColor,
} from '../../../helpers/constants/design-system';
import Box from '../ui/box';
<Box backgroundColor={BackgroundColor.backgroundDefault}>
<Typography color={TextColor.textDefault}>
BackgroundColor.backgroundDefault
</Typography>
</Box>;
```
### Border Color
Use the `borderColor` prop along with the `Color` or `BorderColor` object from `ui/helpers/constants/design-system.js` to change border color. The `borderColor` prop accepts [responsive props](#responsive-props) in the form of array props.
<Canvas>
<Story id="components-ui-box--border-color-story" />
</Canvas>
Example of importing `BorderColor` object with `Box` component
```jsx
import {
BackgroundColor,
BorderColor,
TextColor,
} from '../../../helpers/constants/design-system';
import Box from '../ui/box';
<Box
backgroundColor={BackgroundColor.backgroundDefault}
borderColor={BorderColor.borderDefault}
>
<Typography color={TextColor.textDefault}>
BorderColor.borderDefault
</Typography>
</Box>;
```
### Border Radius
Use the `borderRadius` prop along with the `BorderRadius` object from `ui/helpers/constants/design-system.js` to change border radius. The `borderRadius` prop accepts [responsive props](#responsive-props) in the form of array props.
<Canvas>
<Story id="components-ui-box--border-radius-story" />
</Canvas>
Example of importing `BorderRadius` object with `Box` component
```jsx
import { BorderRadius } from '../../../helpers/constants/design-system';
import Box from '../ui/box';
<Box borderRadius={BorderRadius.none}>BorderRadius.none 0px</Box>
<Box borderRadius={BorderRadius.XS}>BorderRadius.XS 2px</Box>
<Box borderRadius={BorderRadius.SM}>BorderRadius.SM 4px</Box>
<Box borderRadius={BorderRadius.MD}>BorderRadius.MD 6px</Box>
<Box borderRadius={BorderRadius.LG}>BorderRadius.LG 8px</Box>
<Box borderRadius={BorderRadius.XL}>BorderRadius.XL 12px</Box>
<Box borderRadius={BorderRadius.pill}>BorderRadius.pill 9999px</Box>
<Box borderRadius={BorderRadius.full}>BorderRadius.full 50%</Box>
```
### Responsive Props
The box component provides a responsive props api in the form of array props. Array props are inspired by [styled-systems array props](https://styled-system.com/guides/array-props). The responsive props follow a mobile first methodology with the first item in the array applying the style to the base level size e.g. `0px` and up. The second item overwrites the first items styles at the next breakpoint.
- All Box props accept the responsive props format
- To skip a breakpoint use `null` as the skipped item's value e.g. `<Box display={['display', null, ;flex']} />`
```
// the responsive props
<Box display={['block', 'flex']} />
// is equivalent to the css
.box {
display: block;
@media screen and (max-width: $breakpoint-sm) {
display: flex;
}
}
```
<Canvas>
<Story id="components-ui-box--responsive-props" />
</Canvas>
```jsx
import {
BorderColor,
BackgroundColor,
} from '../../../helpers/constants/design-system';
import Box from '../ui/box';
<Box
padding={[2, 4]}
gap={[2, 4]}
display={['flex']}
flexDirection={['column', 'row']}
borderColor={BorderColor.borderDefault}
>
<Box
padding={[4, 8]}
backgroundColor={BackgroundColor.backgroundAlternative}
borderColor={BorderColor.borderMuted}
>
responsive
</Box>
<Box
padding={[4, 8]}
backgroundColor={BackgroundColor.backgroundAlternative}
borderColor={BorderColor.borderMuted}
>
props
</Box>
<Box
padding={[4, 8]}
backgroundColor={BackgroundColor.backgroundAlternative}
borderColor={BorderColor.borderMuted}
>
example
</Box>
</Box>;
```
### As
The polymorphic `as` prop allows you to change the root HTML element of the Box component. Defaults to `'div'`
<Canvas>
<Story id="components-ui-box--as" />
</Canvas>
```jsx
import Box from '../../ui/box';
<Box>div(default)</Box>
<Box as="ul">ul</Box>
<Box as="li">li</Box>
<Box as="button">button</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="components-ui-box--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>
</>;
```