fix(atoms): few fixes in the Table components

8base · Sep 19, 2018 · d9bd86f · d9bd86f
1 parent bead39e
commit d9bd86f
Show file tree

Hide file tree

Showing 10 changed files with 34 additions and 30 deletions.
diff --git a/src/atoms/Table/Table.js b/src/atoms/Table/Table.js
@@ -1,3 +1,5 @@
+// @flow
+
 import { TablePlate as Plate, theme as tablePlateTheme } from './TablePlate';
 import { TableHeader as Header, theme as tableHeaderTheme } from './TableHeader';
 import { TableBody as Body, theme as tableBodyTheme } from './TableBody';

diff --git a/src/atoms/Table/TableBody.js b/src/atoms/Table/TableBody.js
@@ -4,9 +4,9 @@ import React from 'react';
 import { Grid } from '../Grid';
 import { createStyledTag, createTheme } from '../../utils';
 
-type TableBodyProps = {|
+type TableBodyProps = {
   children?: React$Node,
-|};
+};
 
 const name = 'tableBody';
 
@@ -17,9 +17,10 @@ const theme = createTheme(name, {
   },
 });
 
-const TableBodyTag = createStyledTag(name, () => ({
+const TableBodyTag = createStyledTag(name, (props: *) => ({
   display: 'grid',
-  overflowY: 'scroll',
+  overflowY: 'auto',
+  borderBottom: `1px solid ${props.theme.COLORS.LIGHT_GRAY1}`,
 }));
 
 function TableBody({

diff --git a/src/atoms/Table/TableBodyCell.js b/src/atoms/Table/TableBodyCell.js
@@ -3,9 +3,9 @@ import React from 'react';
 
 import { createStyledTag, createTheme } from '../../utils';
 
-type TableBodyCellProps = {|
+type TableBodyCellProps = {
   children?: React$Node,
-|};
+};
 
 const name = 'tableBodyCell';
 

diff --git a/src/atoms/Table/TableBodyRow.js b/src/atoms/Table/TableBodyRow.js
@@ -4,9 +4,9 @@ import React from 'react';
 import { Grid } from '../Grid';
 import { createStyledTag, createTheme } from '../../utils';
 
-type TableBodyRowProps = {|
+type TableBodyRowProps = {
   children?: React$Node,
-|};
+};
 
 const name = 'tableBodyRow';
 
@@ -17,9 +17,9 @@ const theme = createTheme(name, {
   },
 });
 
-const TableBodyRowTag = createStyledTag(name, () => ({
+const TableBodyRowTag = createStyledTag(name, (props: *) => ({
   display: 'grid',
-  borderBottom: '1px solid #ccc',
+  borderBottom: `1px solid ${props.theme.COLORS.LIGHT_GRAY1}`,
   height: '6rem',
 
   '&:last-child': {

diff --git a/src/atoms/Table/TableFooter.js b/src/atoms/Table/TableFooter.js
@@ -4,9 +4,9 @@ import React from 'react';
 import { Grid } from '../Grid';
 import { createStyledTag, createTheme } from '../../utils';
 
-type TableFooterProps = {|
+type TableFooterProps = {
   children?: React$Node,
-|};
+};
 
 const name = 'tableFooter';
 
@@ -19,7 +19,6 @@ const theme = createTheme(name, {
 
 const TableFooterTag = createStyledTag(name, () => ({
   display: 'grid',
-  borderTop: '1px solid #ccc',
   padding: '2rem',
 }));
 

diff --git a/src/atoms/Table/TableHeader.js b/src/atoms/Table/TableHeader.js
@@ -4,9 +4,9 @@ import React from 'react';
 import { Grid } from '../Grid';
 import { createStyledTag, createTheme } from '../../utils';
 
-type TableHeaderProps = {|
+type TableHeaderProps = {
   children?: React$Node,
-|};
+};
 
 const name = 'tableHeader';
 

diff --git a/src/atoms/Table/TableHeaderCell.js b/src/atoms/Table/TableHeaderCell.js
@@ -3,9 +3,9 @@ import React from 'react';
 
 import { createStyledTag, createTheme } from '../../utils';
 
-type TableHeaderCellProps = {|
+type TableHeaderCellProps = {
   children?: React$Node,
-|};
+};
 
 const name = 'tableHeaderCell';
 

diff --git a/src/atoms/Table/TablePlate.js b/src/atoms/Table/TablePlate.js
@@ -4,9 +4,9 @@ import React from 'react';
 import { Grid } from '../Grid';
 import { createStyledTag, createTheme } from '../../utils';
 
-type TablePlateProps = {|
+type TablePlateProps = {
   children?: React$Node,
-|};
+};
 
 const name = 'tablePlate';
 

diff --git a/src/atoms/Table/index.js b/src/atoms/Table/index.js
@@ -1 +1,3 @@
+// @flow
+
 export { Table, theme } from './Table';
diff --git a/storybook/__tests__/__snapshots__/storyshots.test.js.snap b/storybook/__tests__/__snapshots__/storyshots.test.js.snap
@@ -1715,10 +1715,10 @@ exports[`Storyshots ATOMS/Card default 1`] = `
   flex-direction: column;
   background: #FFFFFF;
   color: #000000;
-  border-radius: .5rem;
   box-shadow: 0 1px 3px 0 rgba(50,50,93,.14),0 4px 6px 0 rgba(112,157,199,.08);
   position: relative;
   padding: 0px;
+  border-radius: .5rem;
 }
 
 .emotion-0 {
@@ -1794,10 +1794,10 @@ exports[`Storyshots ATOMS/Card with custom offsets 1`] = `
   flex-direction: column;
   background: #FFFFFF;
   color: #000000;
-  border-radius: .5rem;
   box-shadow: 0 1px 3px 0 rgba(50,50,93,.14),0 4px 6px 0 rgba(112,157,199,.08);
   position: relative;
   padding: 0px;
+  border-radius: .5rem;
 }
 
 .emotion-0 {
@@ -1873,10 +1873,10 @@ exports[`Storyshots ATOMS/Card with scrollable body 1`] = `
   flex-direction: column;
   background: #FFFFFF;
   color: #000000;
-  border-radius: .5rem;
   box-shadow: 0 1px 3px 0 rgba(50,50,93,.14),0 4px 6px 0 rgba(112,157,199,.08);
   position: relative;
   padding: 0px;
+  border-radius: .5rem;
 }
 
 .emotion-0 {
@@ -1970,10 +1970,10 @@ exports[`Storyshots ATOMS/Card without footer 1`] = `
   flex-direction: column;
   background: #FFFFFF;
   color: #000000;
-  border-radius: .5rem;
   box-shadow: 0 1px 3px 0 rgba(50,50,93,.14),0 4px 6px 0 rgba(112,157,199,.08);
   position: relative;
   padding: 0px;
+  border-radius: .5rem;
 }
 
 .emotion-0 {
@@ -2036,10 +2036,10 @@ exports[`Storyshots ATOMS/Card without header 1`] = `
   flex-direction: column;
   background: #FFFFFF;
   color: #000000;
-  border-radius: .5rem;
   box-shadow: 0 1px 3px 0 rgba(50,50,93,.14),0 4px 6px 0 rgba(112,157,199,.08);
   position: relative;
   padding: 0px;
+  border-radius: .5rem;
 }
 
 .emotion-0 {
@@ -11947,10 +11947,10 @@ exports[`Storyshots ATOMS/Paper with header and sections 1`] = `
   flex-direction: column;
   background: #FFFFFF;
   color: #000000;
-  border-radius: .5rem;
   box-shadow: 0 1px 3px 0 rgba(50,50,93,.14),0 4px 6px 0 rgba(112,157,199,.08);
   position: relative;
   padding: 0px;
+  border-radius: .5rem;
 }
 
 .emotion-0 {
@@ -13411,7 +13411,8 @@ exports[`Storyshots ATOMS/Table table with loader 1`] = `
 .emotion-9 {
   display: grid;
   display: grid;
-  overflow-y: scroll;
+  overflow-y: auto;
+  border-bottom: 1px solid #d0d7dd;
 }
 
 .emotion-11 {
@@ -13428,7 +13429,6 @@ exports[`Storyshots ATOMS/Table table with loader 1`] = `
   -ms-flex-direction: column;
   flex-direction: column;
   display: grid;
-  border-top: 1px solid #ccc;
   padding: 2rem;
 }
 
@@ -13707,14 +13707,15 @@ exports[`Storyshots ATOMS/Table table with scroll 1`] = `
 .emotion-337 {
   display: grid;
   display: grid;
-  overflow-y: scroll;
+  overflow-y: auto;
+  border-bottom: 1px solid #d0d7dd;
 }
 
 .emotion-17 {
   display: grid;
   grid-template-columns: repeat(6,1fr);
   display: grid;
-  border-bottom: 1px solid #ccc;
+  border-bottom: 1px solid #d0d7dd;
   height: 6rem;
 }
 
@@ -13749,7 +13750,6 @@ exports[`Storyshots ATOMS/Table table with scroll 1`] = `
   -ms-flex-direction: column;
   flex-direction: column;
   display: grid;
-  border-top: 1px solid #ccc;
   padding: 2rem;
 }
Original file line number	Diff line number	Diff line change
		@@ -1 +1,3 @@
		// @flow

		export { Table, theme } from './Table';