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

Added padding/margin inline support to the Box component (#17134)

Browse Source 
* added tests and css for more padding/margin support

* updated README

* fixed spacings

* fixed spacings
This commit is contained in:
Nidhi Kumari 2023-01-14 10:54:25 +05:30 committed by GitHub
parent 1265731344
commit 1df72c6e4e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 158 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -23,11 +23,18 @@ Box is a utility component that can be used for layout or as a base for other UI
| marginBottom | 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 | - | | 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 | - | | marginLeft | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values for responsive props | - |
| marginInline | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values for responsive props | - |
| marginInlineStart| 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values for responsive props | - |
| marginInlineEnd | 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 | - | | 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 | - | | 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 | - | | 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 | - | | 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 | - | | paddingLeft | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
| paddingInline | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
| paddingInlineStart | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
| paddingInlineEnd | 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) | - | | 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 | | 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) | - | | 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) | - |
@ -51,7 +58,7 @@ The following describes the props and example usage for this component.
### Margin ### Margin
The margin props `margin`, `marginTop`, `marginRight`, `marginBottom`, and `marginLeft` can be used to set the margins of the `Box` component. All of the margin props accept [responsive props](#responsive-props) in the form of array props The margin props `margin`, `marginTop`, `marginRight`, `marginBottom`, `marginLeft`, `marginInline`, `marginInlineStart`, and `marginInlineEnd` can be used to set the margins of the `Box` component. All of the margin props accept [responsive props](#responsive-props) in the form of array props
Accepted props are: `0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto` or array of these values Accepted props are: `0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto` or array of these values
@ -65,6 +72,9 @@ Accepted props are: `0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto` or array of these value
<Box marginRight={4} /> <Box marginRight={4} />
<Box marginBottom={4} /> <Box marginBottom={4} />
<Box marginLeft={'auto'} /> <Box marginLeft={'auto'} />
<Box marginInline={4} />
<Box marginInlineStart={4} />
<Box marginInlineEnd={4} />
// Responsive props // Responsive props
<Box margin={[4, 8]} /> <Box margin={[4, 8]} />
@ -72,11 +82,14 @@ Accepted props are: `0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto` or array of these value
<Box marginRight={[4, 8]} /> <Box marginRight={[4, 8]} />
<Box marginBottom={[4, 8]} /> <Box marginBottom={[4, 8]} />
<Box marginLeft={['auto', 8]} /> <Box marginLeft={['auto', 8]} />
<Box marginInline={['auto', 8]} />
<Box marginInlineStart={['auto', 8]} />
<Box marginInlineEnd={['auto', 8]} />
``` ```
### Padding ### Padding
The padding props work very similarly to margin. The padding props `padding`, `paddingTop`, `paddingRight`, `paddingBottom`, and `paddingLeft` can be used to set the paddings of the `Box` component. All of the padding props accept [responsive props](#responsive-props) in the form of array props The padding props work very similarly to margin. The padding props `padding`, `paddingTop`, `paddingRight`, `paddingBottom`, `paddingLeft`, `paddingInline`, `paddingInlineStart`, and `paddingInlineEnd` can be used to set the paddings of the `Box` component. All of the padding props accept [responsive props](#responsive-props) in the form of array props
Accepted props are: `0, 1, 2, 4, 6, 8, 9, 10, 12` or array of these values Accepted props are: `0, 1, 2, 4, 6, 8, 9, 10, 12` or array of these values

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

@ -93,7 +93,10 @@ function isValidSize(type, value) {
type === 'margin-top' || type === 'margin-top' ||
type === 'margin-right' || type === 'margin-right' ||
type === 'margin-bottom' || type === 'margin-bottom' ||
type === 'margin-left') && type === 'margin-left' ||
type === 'margin-inline' ||
type === 'margin-inline-start' ||
type === 'margin-inline-end') &&
value === 'auto') value === 'auto')
); );
} }
@ -320,9 +323,9 @@ Box.propTypes = {
marginBottom: MultipleSizesAndAuto, marginBottom: MultipleSizesAndAuto,
marginRight: MultipleSizesAndAuto, marginRight: MultipleSizesAndAuto,
marginLeft: MultipleSizesAndAuto, marginLeft: MultipleSizesAndAuto,
marginInline: MultipleSizes, marginInline: MultipleSizesAndAuto,
marginInlineStart: MultipleSizes, marginInlineStart: MultipleSizesAndAuto,
marginInlineEnd: MultipleSizes, marginInlineEnd: MultipleSizesAndAuto,
padding: MultipleSizes, padding: MultipleSizes,
paddingTop: MultipleSizes, paddingTop: MultipleSizes,
paddingBottom: MultipleSizes, paddingBottom: MultipleSizes,

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

@ -163,17 +163,17 @@ export default {
table: { category: 'margin' }, table: { category: 'margin' },
}, },
marginInline: { marginInline: {
options: sizeControlOptions, options: marginSizeControlOptions,
control: 'select', control: 'select',
table: { category: 'margin' }, table: { category: 'margin' },
}, },
marginInlineStart: { marginInlineStart: {
options: sizeControlOptions, options: marginSizeControlOptions,
control: 'select', control: 'select',
table: { category: 'margin' }, table: { category: 'margin' },
}, },
marginInlineEnd: { marginInlineEnd: {
options: sizeControlOptions, options: marginSizeControlOptions,
control: 'select', control: 'select',
table: { category: 'margin' }, table: { category: 'margin' },
}, },

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

@ -113,6 +113,94 @@ describe('Box', () => {
expect(getByText('Box content')).toHaveClass('box--md:margin-left-3'); expect(getByText('Box content')).toHaveClass('box--md:margin-left-3');
expect(getByText('Box content')).toHaveClass('box--lg:margin-left-4'); expect(getByText('Box content')).toHaveClass('box--lg:margin-left-4');
}); });
it('should render the Box with the marginInline class', () => {
const { getByText } = render(<Box marginInline={1}>Box content</Box>);
expect(getByText('Box content')).toHaveClass('box--margin-inline-1');
});
it('should render the Box with the marginInline auto class', () => {
const { getByText } = render(<Box marginInline="auto">Box content</Box>);
expect(getByText('Box content')).toHaveClass('box--margin-inline-auto');
});
it('should render the Box with the responsive marginInline classes', () => {
const { getByText } = render(
<Box marginInline={[1, 'auto', 3, 4]}>Box content</Box>,
);
expect(getByText('Box content')).toHaveClass('box--margin-inline-1');
expect(getByText('Box content')).toHaveClass(
'box--sm:margin-inline-auto',
);
expect(getByText('Box content')).toHaveClass('box--md:margin-inline-3');
expect(getByText('Box content')).toHaveClass('box--lg:margin-inline-4');
});
it('should render the Box with the marginInlineStart class', () => {
const { getByText } = render(
<Box marginInlineStart={1}>Box content</Box>,
);
expect(getByText('Box content')).toHaveClass(
'box--margin-inline-start-1',
);
});
it('should render the Box with the marginInlineStart auto class', () => {
const { getByText } = render(
<Box marginInlineStart="auto">Box content</Box>,
);
expect(getByText('Box content')).toHaveClass(
'box--margin-inline-start-auto',
);
});
it('should render the Box with the responsive marginInlineStart classes', () => {
const { getByText } = render(
<Box marginInlineStart={[1, 'auto', 3, 4]}>Box content</Box>,
);
expect(getByText('Box content')).toHaveClass(
'box--margin-inline-start-1',
);
expect(getByText('Box content')).toHaveClass(
'box--sm:margin-inline-start-auto',
);
expect(getByText('Box content')).toHaveClass(
'box--md:margin-inline-start-3',
);
expect(getByText('Box content')).toHaveClass(
'box--lg:margin-inline-start-4',
);
});
it('should render the Box with the marginInlineEnd class', () => {
const { getByText } = render(<Box marginInlineEnd={1}>Box content</Box>);
expect(getByText('Box content')).toHaveClass('box--margin-inline-end-1');
});
it('should render the Box with the marginInlineEnd auto class', () => {
const { getByText } = render(
<Box marginInlineEnd="auto">Box content</Box>,
);
expect(getByText('Box content')).toHaveClass(
'box--margin-inline-end-auto',
);
});
it('should render the Box with the responsive marginInlineEnd classes', () => {
const { getByText } = render(
<Box marginInlineEnd={[1, 'auto', 3, 4]}>Box content</Box>,
);
expect(getByText('Box content')).toHaveClass('box--margin-inline-end-1');
expect(getByText('Box content')).toHaveClass(
'box--sm:margin-inline-end-auto',
);
expect(getByText('Box content')).toHaveClass(
'box--md:margin-inline-end-3',
);
expect(getByText('Box content')).toHaveClass(
'box--lg:margin-inline-end-4',
);
});
}); });
describe('padding', () => { describe('padding', () => {
@ -198,6 +286,50 @@ describe('Box', () => {
expect(getByText('Box content')).toHaveClass('box--md:padding-left-3'); expect(getByText('Box content')).toHaveClass('box--md:padding-left-3');
expect(getByText('Box content')).toHaveClass('box--lg:padding-left-4'); expect(getByText('Box content')).toHaveClass('box--lg:padding-left-4');
}); });
it('should render the Box with the responsive paddingInline classes', () => {
const { getByText } = render(
<Box paddingInline={[1, 2, 3, 4]}>Box content</Box>,
);
expect(getByText('Box content')).toHaveClass('box--padding-inline-1');
expect(getByText('Box content')).toHaveClass('box--sm:padding-inline-2');
expect(getByText('Box content')).toHaveClass('box--md:padding-inline-3');
expect(getByText('Box content')).toHaveClass('box--lg:padding-inline-4');
});
it('should render the Box with the responsive paddingInlineStart classes', () => {
const { getByText } = render(
<Box paddingInlineStart={[1, 2, 3, 4]}>Box content</Box>,
);
expect(getByText('Box content')).toHaveClass(
'box--padding-inline-start-1',
);
expect(getByText('Box content')).toHaveClass(
'box--sm:padding-inline-start-2',
);
expect(getByText('Box content')).toHaveClass(
'box--md:padding-inline-start-3',
);
expect(getByText('Box content')).toHaveClass(
'box--lg:padding-inline-start-4',
);
});
it('should render the Box with the responsive paddingInlineEnd classes', () => {
const { getByText } = render(
<Box paddingInlineEnd={[1, 2, 3, 4]}>Box content</Box>,
);
expect(getByText('Box content')).toHaveClass('box--padding-inline-end-1');
expect(getByText('Box content')).toHaveClass(
'box--sm:padding-inline-end-2',
);
expect(getByText('Box content')).toHaveClass(
'box--md:padding-inline-end-3',
);
expect(getByText('Box content')).toHaveClass(
'box--lg:padding-inline-end-4',
);
});
}); });
describe('border', () => { describe('border', () => {
it('should render the Box with the borderWidth class', () => { it('should render the Box with the borderWidth class', () => {

2
ui/css/design-system/attributes.scss
View File

@ -41,7 +41,7 @@ $sizes-numeric: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12;
$sizes-strings: xs, sm, md, lg, xl; $sizes-strings: xs, sm, md, lg, xl;
$border-style: solid, double, none, dashed, dotted; $border-style: solid, double, none, dashed, dotted;
$directions: top, right, bottom, left; $directions: top, right, bottom, left, inline, inline-start, inline-end;
$display: block, flex, grid, inline-block, inline-grid, inline-flex, list-item, none; $display: block, flex, grid, inline-block, inline-grid, inline-flex, list-item, none;
$text-align: left, right, center, justify, end; $text-align: left, right, center, justify, end;
$overflow-wrap: normal, break-word, anywhere; $overflow-wrap: normal, break-word, anywhere;