m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 18:00:18 +01:00
Code

added padding/margin inline, inline-start and inline-end support to Box Component (#17085)

Browse Source 
* added padding/margin inline-start and inline-end support

* updated story for margin
This commit is contained in:
Nidhi Kumari 2023-01-06 12:10:28 +05:30 committed by GitHub
parent e8809cffaf
commit be227705d0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 58 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -191,11 +191,17 @@ const Box = React.forwardRef(function Box(
paddingRight,
paddingBottom,
paddingLeft,
paddingInline,
paddingInlineStart,
paddingInlineEnd,
margin,
marginTop,
marginRight,
marginBottom,
marginLeft,
marginInline,
marginInlineStart,
marginInlineEnd,
borderColor,
borderWidth,
borderRadius,
@ -228,6 +234,12 @@ const Box = React.forwardRef(function Box(
marginBottom &&
generateClassNames('margin-bottom', marginBottom, isValidSize),
marginLeft && generateClassNames('margin-left', marginLeft, isValidSize),
marginInline &&
generateClassNames('margin-inline', marginInline, isValidSize),
marginInlineStart &&
generateClassNames('margin-inline-start', marginInlineStart, isValidSize),
marginInlineEnd &&
generateClassNames('margin-inline-end', marginInlineEnd, isValidSize),
// Padding
padding && generateClassNames('padding', padding, isValidSize),
paddingTop && generateClassNames('padding-top', paddingTop, isValidSize),
@ -236,6 +248,16 @@ const Box = React.forwardRef(function Box(
paddingBottom &&
generateClassNames('padding-bottom', paddingBottom, isValidSize),
paddingLeft && generateClassNames('padding-left', paddingLeft, isValidSize),
paddingInline &&
generateClassNames('padding-inline', paddingInline, isValidSize),
paddingInlineStart &&
generateClassNames(
'padding-inline-start',
paddingInlineStart,
isValidSize,
),
paddingInlineEnd &&
generateClassNames('padding-inline-end', paddingInlineEnd, isValidSize),
display && generateClassNames('display', display, isValidString),
gap && generateClassNames('gap', gap, isValidSize),
flexDirection &&
@ -298,11 +320,17 @@ Box.propTypes = {
marginBottom: MultipleSizesAndAuto,
marginRight: MultipleSizesAndAuto,
marginLeft: MultipleSizesAndAuto,
marginInline: MultipleSizes,
marginInlineStart: MultipleSizes,
marginInlineEnd: MultipleSizes,
padding: MultipleSizes,
paddingTop: MultipleSizes,
paddingBottom: MultipleSizes,
paddingRight: MultipleSizes,
paddingLeft: MultipleSizes,
paddingInline: MultipleSizes,
paddingInlineStart: MultipleSizes,
paddingInlineEnd: MultipleSizes,
borderColor: MultipleBorderColors,
borderWidth: PropTypes.oneOfType([
PropTypes.number,

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

@ -162,6 +162,21 @@ export default {
control: 'select',
table: { category: 'margin' },
},
marginInline: {
options: sizeControlOptions,
control: 'select',
table: { category: 'margin' },
},
marginInlineStart: {
options: sizeControlOptions,
control: 'select',
table: { category: 'margin' },
},
marginInlineEnd: {
options: sizeControlOptions,
control: 'select',
table: { category: 'margin' },
},
padding: {
options: sizeControlOptions,
control: 'select',
@ -187,6 +202,21 @@ export default {
control: 'select',
table: { category: 'padding' },
},
paddingInline: {
options: sizeControlOptions,
control: 'select',
table: { category: 'padding' },
},
paddingInlineStart: {
options: sizeControlOptions,
control: 'select',
table: { category: 'padding' },
},
paddingInlineEnd: {
options: sizeControlOptions,
control: 'select',
table: { category: 'padding' },
},
as: {
control: 'select',
options: ['div', 'ul', 'li', 'span', 'a', 'button'],