diff --git a/ui/components/ui/box/README.mdx b/ui/components/ui/box/README.mdx
index c5b2827503a2..ff443c1f6aee 100644
--- a/ui/components/ui/box/README.mdx
+++ b/ui/components/ui/box/README.mdx
@@ -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';
;
```
+### 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.
+
+
+
+Example of importing `BORDER_RADIUS` object with `Box` component
+
+```jsx
+import { BORDER_RADIUS } from '../../../helpers/constants/design-system';
+import Box from '../ui/box';
+
+BORDER_RADIUS.NONE 0px
+BORDER_RADIUS.XS 2px
+BORDER_RADIUS.SM 4px
+BORDER_RADIUS.MD 6px
+BORDER_RADIUS.LG 8px
+BORDER_RADIUS.XL 12px
+BORDER_RADIUS.PILL 9999px
+```
+
### 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.
diff --git a/ui/components/ui/box/box.js b/ui/components/ui/box/box.js
index 446f314cd7dd..83795b4537e1 100644
--- a/ui/components/ui/box/box.js
+++ b/ui/components/ui/box/box.js
@@ -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)),
diff --git a/ui/components/ui/box/box.scss b/ui/components/ui/box/box.scss
index 77a7364bf4f7..63f9fb9fa9c2 100644
--- a/ui/components/ui/box/box.scss
+++ b/ui/components/ui/box/box.scss
@@ -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
diff --git a/ui/components/ui/box/box.stories.js b/ui/components/ui/box/box.stories.js
index 0c0cbaff4fa5..6d63f186edec 100644
--- a/ui/components/ui/box/box.stories.js
+++ b/ui/components/ui/box/box.stories.js
@@ -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 (
+
+
+ BORDER_RADIUS.NONE 0px
+
+
+ BORDER_RADIUS.XS 2px
+
+
+ BORDER_RADIUS.SM 4px
+
+
+ BORDER_RADIUS.MD 6px
+
+
+ BORDER_RADIUS.LG 8px
+
+
+ BORDER_RADIUS.XL 12px
+
+
+ BORDER_RADIUS.PILL 9999px
+
+
+ );
+};
+
export const ResponsiveProps = () => {
return (
<>
diff --git a/ui/components/ui/box/box.test.js b/ui/components/ui/box/box.test.js
index 7fdfe1737629..8e8534589265 100644
--- a/ui/components/ui/box/box.test.js
+++ b/ui/components/ui/box/box.test.js
@@ -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 content,
+ <>
+ border radius xs
+ border radius sm
+ border radius md
+ border radius lg
+ border radius xl
+ border radius pill
+ border radius none
+ ,
);
- 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 content
- ,
+ <>
+
+ Border radius set 1
+
+
+ Border radius set 2
+
+ ,
);
- 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', () => {
diff --git a/ui/helpers/constants/design-system.js b/ui/helpers/constants/design-system.js
index 58c142e113a7..7c8ddb18e140 100644
--- a/ui/helpers/constants/design-system.js
+++ b/ui/helpers/constants/design-system.js
@@ -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';