From 90badb2483043ec55ff70df3ccdbf6e40547b564 Mon Sep 17 00:00:00 2001 From: George Marshall Date: Fri, 7 Oct 2022 08:38:23 -0700 Subject: [PATCH] Adding border radius full to `Box` component (#16118) * 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' --- ui/components/ui/box/README.mdx | 83 +++++++++++++++++---------- ui/components/ui/box/box.js | 6 +- ui/components/ui/box/box.scss | 14 +++-- ui/components/ui/box/box.stories.js | 78 ++++++++++++++++++++++++- ui/components/ui/box/box.test.js | 65 +++++++++++++++++---- ui/helpers/constants/design-system.js | 10 ++++ 6 files changed, 206 insertions(+), 50 deletions(-) diff --git a/ui/components/ui/box/README.mdx b/ui/components/ui/box/README.mdx index c5b282750..ff443c1f6 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 446f314cd..83795b453 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 77a7364bf..63f9fb9fa 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 0c0cbaff4..6d63f186e 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 7fdfe1737..8e8534589 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 58c142e11..7c8ddb18e 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';