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

added 50% border radius support to the Box component (#16486)

Browse Source 
* added 50% border radius support to the Box component

* added height and width

* fixed lint issue
This commit is contained in:
Nidhi Kumari 2022-11-15 03:10:45 +05:30 committed by GitHub
parent 4937bb465a
commit 780728daa8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 86 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -209,6 +209,7 @@ import Box from '../ui/box';
<Box borderRadius={BORDER_RADIUS.LG}>BORDER_RADIUS.LG 8px</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.XL}>BORDER_RADIUS.XL 12px</Box>
<Box borderRadius={BORDER_RADIUS.PILL}>BORDER_RADIUS.PILL 9999px</Box> <Box borderRadius={BORDER_RADIUS.PILL}>BORDER_RADIUS.PILL 9999px</Box>
<Box borderRadius={BORDER_RADIUS.FULL}>BORDER_RADIUS.FULL 50%</Box>
``` ```
### Responsive Props ### Responsive Props

4
ui/components/ui/box/box.scss
View File

@ -157,6 +157,10 @@ $attributesToApplyExtraProperties: margin;
border-radius: 9999px; border-radius: 9999px;
} }
&--rounded-full {
border-radius: 50%;
}
// breakpoint classes // breakpoint classes
@each $breakpoint, $min-width in $screen-sizes-map { @each $breakpoint, $min-width in $screen-sizes-map {
@media screen and (min-width: $min-width) { @media screen and (min-width: $min-width) {

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

@ -482,75 +482,90 @@ export const BorderColor = () => {
export const BorderRadius = () => { export const BorderRadius = () => {
return ( return (
<Box <>
display={DISPLAY.GRID}
style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(250px, 1fr))' }}
gap={4}
>
<Box <Box
padding={3} display={DISPLAY.GRID}
backgroundColor={COLORS.BACKGROUND_ALTERNATIVE} style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(250px, 1fr))' }}
borderColor={COLORS.BORDER_DEFAULT} gap={4}
borderWidth={2}
borderRadius={BORDER_RADIUS.NONE}
> >
BORDER_RADIUS.NONE 0px <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> </Box>
<Box <Box
padding={3} padding={3}
backgroundColor={COLORS.BACKGROUND_ALTERNATIVE} backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}
borderColor={COLORS.BORDER_DEFAULT} borderColor={COLORS.BORDER_DEFAULT}
borderWidth={2} borderWidth={2}
borderRadius={BORDER_RADIUS.XS} borderRadius={BORDER_RADIUS.FULL}
margin={4}
display={DISPLAY.FLEX}
alignItems={ALIGN_ITEMS.CENTER}
style={{ height: '250px', width: '250px' }}
> >
BORDER_RADIUS.XS 2px BORDER_RADIUS.FULL 50%
</Box> </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>
); );
}; };

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

@ -287,6 +287,7 @@ describe('Box', () => {
<Box borderRadius={BORDER_RADIUS.LG}>border radius lg</Box> <Box borderRadius={BORDER_RADIUS.LG}>border radius lg</Box>
<Box borderRadius={BORDER_RADIUS.XL}>border radius xl</Box> <Box borderRadius={BORDER_RADIUS.XL}>border radius xl</Box>
<Box borderRadius={BORDER_RADIUS.PILL}>border radius pill</Box> <Box borderRadius={BORDER_RADIUS.PILL}>border radius pill</Box>
<Box borderRadius={BORDER_RADIUS.FULL}>border radius full</Box>
<Box borderRadius={BORDER_RADIUS.NONE}>border radius none</Box> <Box borderRadius={BORDER_RADIUS.NONE}>border radius none</Box>
</>, </>,
); );
@ -297,6 +298,7 @@ describe('Box', () => {
expect(getByText('border radius lg')).toHaveClass('box--rounded-lg'); expect(getByText('border radius lg')).toHaveClass('box--rounded-lg');
expect(getByText('border radius xl')).toHaveClass('box--rounded-xl'); expect(getByText('border radius xl')).toHaveClass('box--rounded-xl');
expect(getByText('border radius pill')).toHaveClass('box--rounded-pill'); expect(getByText('border radius pill')).toHaveClass('box--rounded-pill');
expect(getByText('border radius full')).toHaveClass('box--rounded-full');
expect(getByText('border radius none')).toHaveClass('box--rounded-none'); expect(getByText('border radius none')).toHaveClass('box--rounded-none');
}); });
it('should render the Box with the responsive borderRadius classes', () => { it('should render the Box with the responsive borderRadius classes', () => {
@ -317,6 +319,7 @@ describe('Box', () => {
BORDER_RADIUS.XL, BORDER_RADIUS.XL,
BORDER_RADIUS.PILL, BORDER_RADIUS.PILL,
BORDER_RADIUS.NONE, BORDER_RADIUS.NONE,
BORDER_RADIUS.FULL,
]} ]}
> >
Border radius set 2 Border radius set 2
@ -341,6 +344,9 @@ describe('Box', () => {
expect(getByText('Border radius set 2')).toHaveClass( expect(getByText('Border radius set 2')).toHaveClass(
'box--md:rounded-none', 'box--md:rounded-none',
); );
expect(getByText('Border radius set 2')).toHaveClass(
'box--lg:rounded-full',
);
}); });
}); });
describe('display, gap, flexDirection, flexWrap, alignItems, justifyContent', () => { describe('display, gap, flexDirection, flexWrap, alignItems, justifyContent', () => {

1
ui/helpers/constants/design-system.js
View File

@ -193,6 +193,7 @@ export const BORDER_RADIUS = {
XL: SIZES.XL, XL: SIZES.XL,
NONE, NONE,
PILL: 'pill', PILL: 'pill',
FULL: 'full',
}; };
const FLEX_END = 'flex-end'; const FLEX_END = 'flex-end';