mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
124 lines
4.8 KiB
Plaintext
124 lines
4.8 KiB
Plaintext
import { Story, Canvas, ArgsTable } 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="ui-components-ui-box-box-stories-js--default-story" />
|
|
</Canvas>
|
|
|
|
## Component API
|
|
|
|
| Name | Description | Default |
|
|
| --------------- | ----------------------------------- | ------------------ |
|
|
| children | node func | - |
|
|
| flexDirection | Object.values(FLEX_DIRECTION) | FLEX_DIRECTION.ROW |
|
|
| flexWrap | Object.values(FLEX_WRAP) | - |
|
|
| gap | 1,2,4,6,8 | - |
|
|
| margin | 1,2,4,6,8 or array of numbers [1,2] | - |
|
|
| marginTop | 1,2,4,6,8 | - |
|
|
| marginBottom | 1,2,4,6,8 | - |
|
|
| marginRight | 1,2,4,6,8 | - |
|
|
| marginLeft | 1,2,4,6,8 | - |
|
|
| padding | 1,2,4,6,8 or array of numbers [1,2] | - |
|
|
| paddingTop | 1,2,4,6,8 | - |
|
|
| paddingBottom | 1,2,4,6,8 | - |
|
|
| paddingRight | 1,2,4,6,8 | - |
|
|
| paddingLeft | 1,2,4,6,8 | - |
|
|
| borderColor | Object.values(COLORS) | - |
|
|
| borderWidth | number | - |
|
|
| borderRadius | Object.values(SIZES) | - |
|
|
| borderStyle | Object.values(BORDER_STYLE) | - |
|
|
| alignItems | Object.values(ALIGN_ITEMS) | - |
|
|
| justifyContent | Object.values(JUSTIFY_CONTENT) | - |
|
|
| textAlign | Object.values(TEXT_ALIGN) | - |
|
|
| display | Object.values(DISPLAY) | - |
|
|
| width | Object.values(BLOCK_SIZES) | - |
|
|
| height | Object.values(BLOCK_SIZES) | - |
|
|
| backgroundColor | Object.values(COLORS) | - |
|
|
| className | string | |
|
|
|
|
## Usage
|
|
|
|
The following describes the props and example usage for this component.
|
|
|
|
### Background Color
|
|
|
|
Use the `backgroundColor` prop along with the `COLORS` object from `ui/helpers/constants/design-system.js` to change background color.
|
|
|
|
<Canvas>
|
|
<Story id="ui-components-ui-box-box-stories-js--background-color" />
|
|
</Canvas>
|
|
|
|
**NOTE**: The `<Box/>` and `<Typography/>` color combinations above follow our design system color rules and should cover most general UI applications. Click "Show code" to see the code example. Do not use the [deprecated colors](#deprecated-colors)
|
|
|
|
Example of importing `COLORS` object with `Box` component
|
|
|
|
```jsx
|
|
import { COLORS } from '../../../helpers/constants/design-system';
|
|
import Box from '../ui/box';
|
|
|
|
<Box backgroundColor={COLORS.BACKGROUND_DEFAULT}>
|
|
<Typography color={COLORS.TEXT_DEFAULT}>COLORS.BACKGROUND_DEFAULT</Typography>
|
|
</Box>;
|
|
```
|
|
|
|
### Border Color
|
|
|
|
Use the `borderColor` prop along with the `COLORS` object from `ui/helpers/constants/design-system.js` to change border color
|
|
|
|
<Canvas>
|
|
<Story id="ui-components-ui-box-box-stories-js--border-color" />
|
|
</Canvas>
|
|
|
|
**NOTE**: The `<Box/>` and `<Typography/>` color combinations above follow our design system color rules and should cover most general UI applications. Click "Show code" to see the code example. Do not use the [deprecated colors](#deprecated-colors)
|
|
|
|
Example of importing `COLORS` object with `Box` component
|
|
|
|
```jsx
|
|
import { COLORS } from '../../../helpers/constants/design-system';
|
|
import Box from '../ui/box';
|
|
|
|
<Box
|
|
backgroundColor={COLORS.BACKGROUND_DEFAULT}
|
|
borderColor={COLORS.BORDER_DEFAULT}
|
|
>
|
|
<Typography color={COLORS.TEXT_DEFAULT}>COLORS.BORDER_DEFAULT</Typography>
|
|
</Box>;
|
|
```
|
|
|
|
## Deprecated Colors
|
|
|
|
List of deprecated background and border color props that are not theme compatible and should not be used.
|
|
|
|
```js
|
|
/** !!! DEPRECATED DO NOT USE!!! */
|
|
UI1: 'ui-1',
|
|
UI2: 'ui-2',
|
|
UI3: 'ui-3',
|
|
UI4: 'ui-4',
|
|
GREY: 'grey',
|
|
NEUTRAL_GREY: 'neutral-grey',
|
|
WHITE: 'white',
|
|
PRIMARY1: 'primary-1',
|
|
PRIMARY2: 'primary-2',
|
|
PRIMARY3: 'primary-3',
|
|
SECONDARY1: 'secondary-1',
|
|
SECONDARY2: 'secondary-2',
|
|
SECONDARY3: 'secondary-3',
|
|
SUCCESS1: 'success-1',
|
|
SUCCESS2: 'success-2',
|
|
SUCCESS3: 'success-3',
|
|
ERROR1: 'error-1',
|
|
ERROR2: 'error-2',
|
|
ERROR3: 'error-3',
|
|
ALERT1: 'alert-1',
|
|
ALERT2: 'alert-2',
|
|
ALERT3: 'alert-3',
|
|
```
|