feat(component): add clearfix prop for Box component (#381)

bigcommerce · Apr 23, 2020 · 29b073b · 29b073b
1 parent 77ea579
commit 29b073b
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 0 deletions.
diff --git a/packages/big-design/src/components/Box/Box.tsx b/packages/big-design/src/components/Box/Box.tsx
@@ -15,6 +15,7 @@ export interface BoxProps extends React.HTMLAttributes<HTMLDivElement>, DisplayP
   borderRight?: keyof Border;
   borderTop?: keyof Border;
   borderRadius?: keyof BorderRadius;
+  clearfix?: boolean;
 }
 
 interface PrivateProps {

diff --git a/packages/big-design/src/components/Box/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/Box/__snapshots__/spec.tsx.snap
@@ -11,6 +11,22 @@ exports[`has border props 1`] = `
 />
 `;
 
+exports[`has clearfix prop 1`] = `
+.c0 {
+  box-sizing: border-box;
+}
+
+.c0::after {
+  clear: both;
+  content: "";
+  display: table;
+}
+
+<div
+  class="c0"
+/>
+`;
+
 exports[`has individual border props 1`] = `
 .c0 {
   box-sizing: border-box;

diff --git a/packages/big-design/src/components/Box/spec.tsx b/packages/big-design/src/components/Box/spec.tsx
@@ -62,6 +62,12 @@ test('has shadow props', () => {
   expect(container.firstChild).toMatchSnapshot();
 });
 
+test('has clearfix prop', () => {
+  const { container } = render(<Box clearfix />);
+
+  expect(container.firstChild).toMatchSnapshot();
+});
+
 test('renders as a different tag', () => {
   const { getByTestId } = render(<Box data-testid="box" as="section" />);
   const tag = getByTestId('box').tagName;

diff --git a/packages/big-design/src/components/Box/styled.tsx b/packages/big-design/src/components/Box/styled.tsx
@@ -1,4 +1,5 @@
 import { theme as defaultTheme } from '@bigcommerce/big-design-theme';
+import { clearFix } from 'polished';
 import styled, { css } from 'styled-components';
 
 import { withDisplay, withMargins, withPaddings } from '../../mixins';
@@ -11,6 +12,8 @@ export const StyledBox = styled.div<BoxProps>`
   ${withPaddings()}
   box-sizing: border-box;
 
+  ${({ clearfix }) => clearfix && clearFix()};
+
   ${({ backgroundColor, theme }) =>
     backgroundColor &&
     css`

diff --git a/packages/docs/PropTables/BoxPropTable.tsx b/packages/docs/PropTables/BoxPropTable.tsx
@@ -60,6 +60,11 @@ const boxProps: Prop[] = [
     types: ['normal', 'circle', 'none'],
     description: 'Determines type of border radius to be applied.',
   },
+  {
+    name: 'clearfix',
+    types: ['boolean'],
+    description: 'Adds a clearfix for floating internal elements.',
+  },
 ];
 
 export const BoxPropTable: React.FC<PropTableWrapper> = props => (