TheDude
/
ciphermask
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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'
feature/default_network_editable
George Marshall 2 years ago 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 all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 83
      ui/components/ui/box/README.mdx
  2. 6
      ui/components/ui/box/box.js
  3. 14
      ui/components/ui/box/box.scss
  4. 78
      ui/components/ui/box/box.stories.js
  5. 65
      ui/components/ui/box/box.test.js
  6. 10
      ui/helpers/constants/design-system.js

83
ui/components/ui/box/README.mdx
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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';

Write Preview
Loading…
Cancel
Save