diff --git a/packages/big-design/src/components/Box/Box.tsx b/packages/big-design/src/components/Box/Box.tsx index a80b4f846..92ed9feda 100644 --- a/packages/big-design/src/components/Box/Box.tsx +++ b/packages/big-design/src/components/Box/Box.tsx @@ -11,6 +11,10 @@ export interface BoxProps extends React.HTMLAttributes, MarginPr backgroundColor?: keyof Colors; elevation?: keyof Elevation; border?: keyof Border; + borderBottom?: keyof Border; + borderLeft?: keyof Border; + borderRight?: keyof Border; + borderTop?: keyof Border; borderRadius?: keyof BorderRadius; } diff --git a/packages/big-design/src/components/Box/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/Box/__snapshots__/spec.tsx.snap index daa4e1d34..c6d210735 100644 --- a/packages/big-design/src/components/Box/__snapshots__/spec.tsx.snap +++ b/packages/big-design/src/components/Box/__snapshots__/spec.tsx.snap @@ -21,3 +21,14 @@ exports[`has elevation props 1`] = ` elevation="floating" /> `; + +exports[`has individual border props 1`] = ` +.c0 { + border-right: 1px solid #D9DCE9; + border-bottom: 1px solid #D9DCE9; +} + +
+`; diff --git a/packages/big-design/src/components/Box/spec.tsx b/packages/big-design/src/components/Box/spec.tsx index e6317e5b1..a29aa7be8 100644 --- a/packages/big-design/src/components/Box/spec.tsx +++ b/packages/big-design/src/components/Box/spec.tsx @@ -50,6 +50,12 @@ test('has border props', () => { expect(container.firstChild).toMatchSnapshot(); }); +test('has individual border props', () => { + const { container } = render(); + + expect(container.firstChild).toMatchSnapshot(); +}); + test('has elevation props', () => { const { container } = render(); diff --git a/packages/big-design/src/components/Box/styled.tsx b/packages/big-design/src/components/Box/styled.tsx index 1f65195be..a99a841fc 100644 --- a/packages/big-design/src/components/Box/styled.tsx +++ b/packages/big-design/src/components/Box/styled.tsx @@ -16,8 +16,42 @@ export const StyledBox = styled.div` `}; ${({ elevation, theme }) => elevation && theme.elevation[elevation]}; - ${({ border, theme }) => border && theme.border[border]}; - ${({ borderRadius, theme }) => borderRadius && theme.borderRadius[borderRadius]}; + + ${({ border, theme }) => + border && + css` + border: ${theme.border[border]}; + `}; + + ${({ borderTop, theme }) => + borderTop && + css` + border-top: ${theme.border[borderTop]}; + `}; + + ${({ borderRight, theme }) => + borderRight && + css` + border-right: ${theme.border[borderRight]}; + `}; + + ${({ borderBottom, theme }) => + borderBottom && + css` + border-bottom: ${theme.border[borderBottom]}; + `}; + + ${({ borderLeft, theme }) => + borderLeft && + css` + border-left: ${theme.border[borderLeft]}; + `}; + + ${({ borderRadius, theme }) => + borderRadius && + css` + border-radius: ${theme.borderRadius[borderRadius]}; + `}; `; StyledBox.defaultProps = { theme: defaultTheme };