m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Adding border radius full to Box component (#16118)

Browse Source 
* Adding border radius full and updating border radius sizes for box

* Adding missing XS size

* Updating docs and linting issues

* Updating name from 'full' to 'pill'
This commit is contained in:
George Marshall 2022-10-07 08:38:23 -07:00 committed by GitHub
parent e755d83def
commit 90badb2483
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 206 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
ui/components/ui/box/README.mdx
View File

@ -14,36 +14,36 @@ Box is a utility component that can be used for layout or as a base for other UI
## 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 | - |
| 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 | - |
| display | [DISPLAY](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js#L200-L210) values or array of [DISPLAY](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js#L200-L210) values for responsive props | - |
| flexDirection | [FLEX_DIRECTION](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js#L187-L192) values or array of [FLEX_DIRECTION](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js#L187-L192) values for responsive props | FLEX_DIRECTION.ROW |
| flexWrap | [FLEX_WRAP](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js#L194-L198) values or array of [FLEX_WRAP](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js#L194-L198) values for responsive props | - |
| alignItems | [ALIGN_ITEMS](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js#L170-L176) values or array of [ALIGN_ITEMS](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js#L170-L176) values for responsive props | - |
| justifyContent | [JUSTIFY_CONTENT](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js#L178-L185) values or array of [JUSTIFY_CONTENT](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js#L178-L185) values | - |
| gap | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
| textAlign | [TEXT_ALIGN](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js#L249-L255) values or array of [TEXT_ALIGN](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js#L249-L255) values for responsive props | - |
| width | [BLOCK_SIZES](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js#L241-L247) values or array of [BLOCK_SIZES](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js#L241-L247) values for responsive props | - |
| height | [BLOCK_SIZES](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js#L241-L247) values or array of [BLOCK_SIZES](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js#LL241-L247) values for responsive props | - |
| color | [COLORS](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js#L117-L133) values or array of [COLORS](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js#L117-L133) values for responsive props | - |
| backgroundColor | [BACKGROUND_COLORS](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js#L62-L88) values or array of [BACKGROUND_COLORS](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js#L62-L88) values for responsive props | - |
| borderColor | [BORDER_COLORS](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js#L90-L115) values or array of [BORDER_COLORS](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js#L90-L115) values for responsive props | - |
| borderWidth | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
| borderRadius | [SIZES](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js#L149-L156) values or array of [SIZES](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js#L149-L156) values for responsive props | - |
| borderStyle | [BORDER_STYLE](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js#L158-L164) values or array of [BORDER_STYLE](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js#L158-L164) values for responsive props | - |
| as | The polymorphic `as` prop allows you to change the root HTML element of the Box component. Defaults to 'div' | 'div' |
| 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 | - |
| 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 | - |
| 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 | ALIGN_ITEMS values or array of ALIGN_ITEMS 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 | JUSTIFY_CONTENT values or array of JUSTIFY_CONTENT 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 | COLORS values or array of COLORS 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 | BACKGROUND_COLORS values or array of BACKGROUND_COLORS 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 | BORDER_COLORS values or array of BORDER_COLORS 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 | BORDER_RADIUS values or array of BORDER_RADIUS 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
@ -188,6 +188,29 @@ import Box from '../ui/box';
</Box>;
```
### Border Radius
Use the `borderRadius` prop along with the `BORDER_RADIUS` 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="ui-components-ui-box-box-stories-js--border-radius" />
</Canvas>
Example of importing `BORDER_RADIUS` object with `Box` component
```jsx
import { BORDER_RADIUS } from '../../../helpers/constants/design-system';
import Box from '../ui/box';
<Box borderRadius={BORDER_RADIUS.NONE}>BORDER_RADIUS.NONE 0px</Box>
<Box borderRadius={BORDER_RADIUS.XS}>BORDER_RADIUS.XS 2px</Box>
<Box borderRadius={BORDER_RADIUS.SM}>BORDER_RADIUS.SM 4px</Box>
<Box borderRadius={BORDER_RADIUS.MD}>BORDER_RADIUS.MD 6px</Box>
<Box borderRadius={BORDER_RADIUS.LG}>BORDER_RADIUS.LG 8px</Box>
<Box borderRadius={BORDER_RADIUS.XL}>BORDER_RADIUS.XL 12px</Box>
<Box borderRadius={BORDER_RADIUS.PILL}>BORDER_RADIUS.PILL 9999px</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.

6
ui/components/ui/box/box.js
View File

@ -12,11 +12,11 @@ import {
ICON_COLORS,
DISPLAY,
JUSTIFY_CONTENT,
SIZES,
TEXT_ALIGN,
FLEX_DIRECTION,
FLEX_WRAP,
BREAKPOINTS,
BORDER_RADIUS,
} from '../../../helpers/constants/design-system';
const BASE_CLASS_NAME = 'box';
@ -288,8 +288,8 @@ Box.propTypes = {
PropTypes.arrayOf(PropTypes.number),
]),
borderRadius: PropTypes.oneOfType([
PropTypes.oneOf(Object.values(SIZES)),
PropTypes.arrayOf(PropTypes.oneOf(Object.values(SIZES))),
PropTypes.oneOf(Object.values(BORDER_RADIUS)),
PropTypes.arrayOf(PropTypes.oneOf(Object.values(BORDER_RADIUS))),
]),
borderStyle: PropTypes.oneOfType([
PropTypes.oneOf(Object.values(BORDER_STYLE)),

14
ui/components/ui/box/box.scss
View File

@ -134,23 +134,27 @@ $attributesToApplyExtraProperties: margin;
}
&--rounded-xs {
border-radius: 0.125rem;
border-radius: 2px;
}
&--rounded-sm {
border-radius: 0.25rem;
border-radius: 4px;
}
&--rounded-md {
border-radius: 0.375rem;
border-radius: 6px;
}
&--rounded-lg {
border-radius: 0.5rem;
border-radius: 8px;
}
&--rounded-xl {
border-radius: 0.75rem;
border-radius: 12px;
}
&--rounded-pill {
border-radius: 9999px;
}
// breakpoint classes

78
ui/components/ui/box/box.stories.js
View File

@ -9,10 +9,10 @@ import {
BACKGROUND_COLORS,
DISPLAY,
JUSTIFY_CONTENT,
SIZES,
TEXT_ALIGN,
FLEX_DIRECTION,
FLEX_WRAP,
BORDER_RADIUS,
} from '../../../helpers/constants/design-system';
import Typography from '../typography';
@ -115,7 +115,7 @@ export default {
table: { category: 'border' },
},
borderRadius: {
options: Object.values(SIZES),
options: Object.values(BORDER_RADIUS),
control: 'select',
table: { category: 'border' },
},
@ -480,6 +480,80 @@ export const BorderColor = () => {
);
};
export const BorderRadius = () => {
return (
<Box
display={DISPLAY.GRID}
style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(250px, 1fr))' }}
gap={4}
>
<Box
padding={3}
backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}
borderColor={COLORS.BORDER_DEFAULT}
borderWidth={2}
borderRadius={BORDER_RADIUS.NONE}
>
BORDER_RADIUS.NONE 0px
</Box>
<Box
padding={3}
backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}
borderColor={COLORS.BORDER_DEFAULT}
borderWidth={2}
borderRadius={BORDER_RADIUS.XS}
>
BORDER_RADIUS.XS 2px
</Box>
<Box
padding={3}
backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}
borderColor={COLORS.BORDER_DEFAULT}
borderWidth={2}
borderRadius={BORDER_RADIUS.SM}
>
BORDER_RADIUS.SM 4px
</Box>
<Box
padding={3}
backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}
borderColor={COLORS.BORDER_DEFAULT}
borderWidth={2}
borderRadius={BORDER_RADIUS.MD}
>
BORDER_RADIUS.MD 6px
</Box>
<Box
padding={3}
backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}
borderColor={COLORS.BORDER_DEFAULT}
borderWidth={2}
borderRadius={BORDER_RADIUS.LG}
>
BORDER_RADIUS.LG 8px
</Box>
<Box
padding={3}
backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}
borderColor={COLORS.BORDER_DEFAULT}
borderWidth={2}
borderRadius={BORDER_RADIUS.XL}
>
BORDER_RADIUS.XL 12px
</Box>
<Box
padding={3}
backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}
borderColor={COLORS.BORDER_DEFAULT}
borderWidth={2}
borderRadius={BORDER_RADIUS.PILL}
>
BORDER_RADIUS.PILL 9999px
</Box>
</Box>
);
};
export const ResponsiveProps = () => {
return (
<>

65
ui/components/ui/box/box.test.js
View File

@ -9,8 +9,8 @@ import {
ALIGN_ITEMS,
JUSTIFY_CONTENT,
TEXT_ALIGN,
SIZES,
BLOCK_SIZES,
BORDER_RADIUS,
} from '../../../helpers/constants/design-system';
import Box from '.';
@ -280,22 +280,67 @@ describe('Box', () => {
});
it('should render the Box with the borderRadius class', () => {
const { getByText } = render(
<Box borderRadius={SIZES.XS}>Box content</Box>,
<>
<Box borderRadius={BORDER_RADIUS.XS}>border radius xs</Box>
<Box borderRadius={BORDER_RADIUS.SM}>border radius sm</Box>
<Box borderRadius={BORDER_RADIUS.MD}>border radius md</Box>
<Box borderRadius={BORDER_RADIUS.LG}>border radius lg</Box>
<Box borderRadius={BORDER_RADIUS.XL}>border radius xl</Box>
<Box borderRadius={BORDER_RADIUS.PILL}>border radius pill</Box>
<Box borderRadius={BORDER_RADIUS.NONE}>border radius none</Box>
</>,
);
expect(getByText('Box content')).toHaveClass('box--rounded-xs');
expect(getByText('border radius xs')).toHaveClass('box--rounded-xs');
expect(getByText('border radius sm')).toHaveClass('box--rounded-sm');
expect(getByText('border radius md')).toHaveClass('box--rounded-md');
expect(getByText('border radius lg')).toHaveClass('box--rounded-lg');
expect(getByText('border radius xl')).toHaveClass('box--rounded-xl');
expect(getByText('border radius pill')).toHaveClass('box--rounded-pill');
expect(getByText('border radius none')).toHaveClass('box--rounded-none');
});
it('should render the Box with the responsive borderRadius classes', () => {
const { getByText } = render(
<Box borderRadius={[SIZES.XS, SIZES.SM, SIZES.MD, SIZES.LG]}>
Box content
</Box>,
<>
<Box
borderRadius={[
BORDER_RADIUS.XS,
BORDER_RADIUS.SM,
BORDER_RADIUS.MD,
BORDER_RADIUS.LG,
]}
>
Border radius set 1
</Box>
<Box
borderRadius={[
BORDER_RADIUS.XL,
BORDER_RADIUS.PILL,
BORDER_RADIUS.NONE,
]}
>
Border radius set 2
</Box>
</>,
);
expect(getByText('Box content')).toHaveClass('box--rounded-xs');
expect(getByText('Box content')).toHaveClass('box--sm:rounded-sm');
expect(getByText('Box content')).toHaveClass('box--md:rounded-md');
expect(getByText('Box content')).toHaveClass('box--lg:rounded-lg');
expect(getByText('Border radius set 1')).toHaveClass('box--rounded-xs');
expect(getByText('Border radius set 1')).toHaveClass(
'box--sm:rounded-sm',
);
expect(getByText('Border radius set 1')).toHaveClass(
'box--md:rounded-md',
);
expect(getByText('Border radius set 1')).toHaveClass(
'box--lg:rounded-lg',
);
expect(getByText('Border radius set 2')).toHaveClass('box--rounded-xl');
expect(getByText('Border radius set 2')).toHaveClass(
'box--sm:rounded-pill',
);
expect(getByText('Border radius set 2')).toHaveClass(
'box--md:rounded-none',
);
});
});
describe('display, gap, flexDirection, flexWrap, alignItems, justifyContent', () => {

10
ui/helpers/constants/design-system.js
View File

@ -185,6 +185,16 @@ export const BORDER_STYLE = {
NONE,
};
export const BORDER_RADIUS = {
XS: SIZES.XS,
SM: SIZES.SM,
MD: SIZES.MD,
LG: SIZES.LG,
XL: SIZES.XL,
NONE,
PILL: 'pill',
};
const FLEX_END = 'flex-end';
const FLEX_START = 'flex-start';
const CENTER = 'center';