Skip to content

Commit

Permalink
Adding border radius full to Box component (#16118)
Browse files Browse the repository at this point in the history 
* Adding border radius full and updating border radius sizes for box

* Adding missing XS size

* Updating docs and linting issues

* Updating name from 'full' to 'pill'
  • Loading branch information
@georgewrmarshall
georgewrmarshall authored Oct 7, 2022
1 parent e755d83 commit 90badb2
Show file tree
Hide file tree
Showing 6 changed files with 206 additions and 50 deletions.
83 changes: 53 additions & 30 deletions ui/components/ui/box/README.mdx
View file

Large diffs are not rendered by default.

6 changes: 3 additions & 3 deletions ui/components/ui/box/box.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,11 @@ import {
ICON_COLORS,
DISPLAY,
JUSTIFY_CONTENT,
SIZES,
TEXT_ALIGN,
FLEX_DIRECTION,
FLEX_WRAP,
BREAKPOINTS,
BORDER_RADIUS,
} from '../../../helpers/constants/design-system';

const BASE_CLASS_NAME = 'box';
Expand Down Expand Up @@ -288,8 +288,8 @@ Box.propTypes = {
PropTypes.arrayOf(PropTypes.number),
]),
borderRadius: PropTypes.oneOfType([
PropTypes.oneOf(Object.values(SIZES)),
PropTypes.arrayOf(PropTypes.oneOf(Object.values(SIZES))),
PropTypes.oneOf(Object.values(BORDER_RADIUS)),
PropTypes.arrayOf(PropTypes.oneOf(Object.values(BORDER_RADIUS))),
]),
borderStyle: PropTypes.oneOfType([
PropTypes.oneOf(Object.values(BORDER_STYLE)),
Expand Down
14 changes: 9 additions & 5 deletions ui/components/ui/box/box.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,23 +134,27 @@ $attributesToApplyExtraProperties: margin;
}

&--rounded-xs {
border-radius: 0.125rem;
border-radius: 2px;
}

&--rounded-sm {
border-radius: 0.25rem;
border-radius: 4px;
}

&--rounded-md {
border-radius: 0.375rem;
border-radius: 6px;
}

&--rounded-lg {
border-radius: 0.5rem;
border-radius: 8px;
}

&--rounded-xl {
border-radius: 0.75rem;
border-radius: 12px;
}

&--rounded-pill {
border-radius: 9999px;
}

// breakpoint classes
Expand Down
78 changes: 76 additions & 2 deletions ui/components/ui/box/box.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,10 @@ import {
BACKGROUND_COLORS,
DISPLAY,
JUSTIFY_CONTENT,
SIZES,
TEXT_ALIGN,
FLEX_DIRECTION,
FLEX_WRAP,
BORDER_RADIUS,
} from '../../../helpers/constants/design-system';

import Typography from '../typography';
Expand Down Expand Up @@ -115,7 +115,7 @@ export default {
table: { category: 'border' },
},
borderRadius: {
options: Object.values(SIZES),
options: Object.values(BORDER_RADIUS),
control: 'select',
table: { category: 'border' },
},
Expand Down Expand Up @@ -480,6 +480,80 @@ 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}
>
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>
);
};

export const ResponsiveProps = () => {
return (
<>
Expand Down
65 changes: 55 additions & 10 deletions ui/components/ui/box/box.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@ import {
ALIGN_ITEMS,
JUSTIFY_CONTENT,
TEXT_ALIGN,
SIZES,
BLOCK_SIZES,
BORDER_RADIUS,
} from '../../../helpers/constants/design-system';
import Box from '.';

Expand Down Expand Up @@ -280,22 +280,67 @@ describe('Box', () => {
});
it('should render the Box with the borderRadius class', () => {
const { getByText } = render(
<Box borderRadius={SIZES.XS}>Box content</Box>,
<>
<Box borderRadius={BORDER_RADIUS.XS}>border radius xs</Box>
<Box borderRadius={BORDER_RADIUS.SM}>border radius sm</Box>
<Box borderRadius={BORDER_RADIUS.MD}>border radius md</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.NONE}>border radius none</Box>
</>,
);

expect(getByText('Box content')).toHaveClass('box--rounded-xs');
expect(getByText('border radius xs')).toHaveClass('box--rounded-xs');
expect(getByText('border radius sm')).toHaveClass('box--rounded-sm');
expect(getByText('border radius md')).toHaveClass('box--rounded-md');
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 none')).toHaveClass('box--rounded-none');
});
it('should render the Box with the responsive borderRadius classes', () => {
const { getByText } = render(
<Box borderRadius={[SIZES.XS, SIZES.SM, SIZES.MD, SIZES.LG]}>
Box content
</Box>,
<>
<Box
borderRadius={[
BORDER_RADIUS.XS,
BORDER_RADIUS.SM,
BORDER_RADIUS.MD,
BORDER_RADIUS.LG,
]}
>
Border radius set 1
</Box>
<Box
borderRadius={[
BORDER_RADIUS.XL,
BORDER_RADIUS.PILL,
BORDER_RADIUS.NONE,
]}
>
Border radius set 2
</Box>
</>,
);

expect(getByText('Box content')).toHaveClass('box--rounded-xs');
expect(getByText('Box content')).toHaveClass('box--sm:rounded-sm');
expect(getByText('Box content')).toHaveClass('box--md:rounded-md');
expect(getByText('Box content')).toHaveClass('box--lg:rounded-lg');
expect(getByText('Border radius set 1')).toHaveClass('box--rounded-xs');
expect(getByText('Border radius set 1')).toHaveClass(
'box--sm:rounded-sm',
);
expect(getByText('Border radius set 1')).toHaveClass(
'box--md:rounded-md',
);
expect(getByText('Border radius set 1')).toHaveClass(
'box--lg:rounded-lg',
);
expect(getByText('Border radius set 2')).toHaveClass('box--rounded-xl');
expect(getByText('Border radius set 2')).toHaveClass(
'box--sm:rounded-pill',
);
expect(getByText('Border radius set 2')).toHaveClass(
'box--md:rounded-none',
);
});
});
describe('display, gap, flexDirection, flexWrap, alignItems, justifyContent', () => {
Expand Down
10 changes: 10 additions & 0 deletions ui/helpers/constants/design-system.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -185,6 +185,16 @@ export const BORDER_STYLE = {
NONE,
};

export const BORDER_RADIUS = {
XS: SIZES.XS,
SM: SIZES.SM,
MD: SIZES.MD,
LG: SIZES.LG,
XL: SIZES.XL,
NONE,
PILL: 'pill',
};

const FLEX_END = 'flex-end';
const FLEX_START = 'flex-start';
const CENTER = 'center';
Expand Down

0 comments on commit 90badb2

Please sign in to comment.