Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 3 commits into from
Nov 14, 2022
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
65bc0d3
added 50% border radius support to the Box component
NidhiKJha Nov 14, 2022
787a436
added height and width
NidhiKJha Nov 14, 2022
5761e31
fixed lint issue
NidhiKJha Nov 14, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions ui/components/ui/box/README.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -209,6 +209,7 @@ import Box from '../ui/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.PILL}>BORDER_RADIUS.PILL 9999px</Box>
<Box borderRadius={BORDER_RADIUS.FULL}>BORDER_RADIUS.FULL 50%</Box>
```

### Responsive Props
Expand Down
4 changes: 4 additions & 0 deletions ui/components/ui/box/box.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,6 +157,10 @@ $attributesToApplyExtraProperties: margin;
border-radius: 9999px;
}

&--rounded-full {
border-radius: 50%;
}

// breakpoint classes
@each $breakpoint, $min-width in $screen-sizes-map {
@media screen and (min-width: $min-width) {
Expand Down
133 changes: 74 additions & 59 deletions ui/components/ui/box/box.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -482,75 +482,90 @@ export const BorderColor = () => {

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

Expand Down
6 changes: 6 additions & 0 deletions ui/components/ui/box/box.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -287,6 +287,7 @@ describe('Box', () => {
<Box borderRadius={BORDER_RADIUS.LG}>border radius lg</Box>
<Box borderRadius={BORDER_RADIUS.XL}>border radius xl</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>
</>,
);
Expand All @@ -297,6 +298,7 @@ describe('Box', () => {
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 full')).toHaveClass('box--rounded-full');
expect(getByText('border radius none')).toHaveClass('box--rounded-none');
});
it('should render the Box with the responsive borderRadius classes', () => {
Expand All @@ -317,6 +319,7 @@ describe('Box', () => {
BORDER_RADIUS.XL,
BORDER_RADIUS.PILL,
BORDER_RADIUS.NONE,
BORDER_RADIUS.FULL,
]}
>
Border radius set 2
Expand All @@ -341,6 +344,9 @@ describe('Box', () => {
expect(getByText('Border radius set 2')).toHaveClass(
'box--md:rounded-none',
);
expect(getByText('Border radius set 2')).toHaveClass(
'box--lg:rounded-full',
);
});
});
describe('display, gap, flexDirection, flexWrap, alignItems, justifyContent', () => {
Expand Down
1 change: 1 addition & 0 deletions ui/helpers/constants/design-system.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -193,6 +193,7 @@ export const BORDER_RADIUS = {
XL: SIZES.XL,
NONE,
PILL: 'pill',
FULL: 'full',
};

const FLEX_END = 'flex-end';
Expand Down