TheDude
/
ciphermask
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
feature/default_network_editable
Nidhi Kumari 2 years ago 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 all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 1
      ui/components/ui/box/README.mdx
  2. 4
      ui/components/ui/box/box.scss
  3. 133
      ui/components/ui/box/box.stories.js
  4. 6
      ui/components/ui/box/box.test.js
  5. 1
      ui/helpers/constants/design-system.js

1
ui/components/ui/box/README.mdx
Unescape 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.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

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

@ -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) {

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

@ -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>
</>
);
};

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

@ -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>
</>,
);
@ -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', () => {
@ -317,6 +319,7 @@ describe('Box', () => {
BORDER_RADIUS.XL,
BORDER_RADIUS.PILL,
BORDER_RADIUS.NONE,
BORDER_RADIUS.FULL,
]}
>
Border radius set 2
@ -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', () => {

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

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

Write Preview
Loading…
Cancel
Save