fix(components): Fix table vertical scroll (#460)

* Fix table vertical scroll when maxHeight is set to the table container

* Fix snapshot test

Author: marielakas

src/components/Table/Table.js

@@ -89,8 +89,6 @@ const scrollableStyles = ({ scrollable, height }) =>
 const ScrollContainer = styled.div`
   ${containerStyles};
   ${scrollableStyles};
-  ${shadowSingle};
-  ${noShadowStyles};
 `;
 
 /**
@@ -151,20 +149,18 @@ class Table extends Component {
     tableBodyHeight: null
   };
 
-  componentDidUpdate({ scrollable, rowHeaders }) {
-    const shouldAddScroll =
-      (!scrollable && this.props.scrollable) ||
-      (rowHeaders && !this.props.rowHeaders);
-
-    const shouldRemoveScroll =
-      (scrollable && !this.props.scrollable) ||
-      (!rowHeaders && this.props.rowHeaders);
+  componentDidMount() {
+    if (this.props.scrollable) {
+      this.addVerticalScroll();
+    }
+  }
 
-    if (shouldAddScroll) {
+  componentDidUpdate({ scrollable }) {
+    if (!scrollable && this.props.scrollable) {
       this.addVerticalScroll();
     }
 
-    if (shouldRemoveScroll) {
+    if (scrollable && !this.props.scrollable) {
       this.removeVerticalScroll();
     }
   }
@@ -190,11 +186,9 @@ class Table extends Component {
 
   calculateTableBodyHeight = () => {
     this.setState({
-      tableBodyHeight: `${
-        isNil(this.tableContainer)
-          ? 'unset'
-          : this.tableContainer.parentNode.offsetHeight
-      }px`
+      tableBodyHeight: isNil(this.tableContainer)
+        ? 'unset'
+        : `${this.tableContainer.parentNode.offsetHeight}px`
     });
   };
 

src/components/Table/Table.story.js

@@ -65,7 +65,7 @@ storiesOf(`${GROUPS.COMPONENTS}|Table`, module)
   .add(
     'Table',
     withInfo()(() => (
-      <div style={{ width: '98vw', height: 150 }}>
+      <div style={{ width: '98vw', maxHeight: 150 }}>
         <Table
           headers={headers}
           rows={rows}

src/components/Table/__snapshots__/Table.spec.js.snap

@@ -8,7 +8,6 @@ exports[`Table Style tests should not render a scrollable table if the rowHeader
 
 .circuit-47 {
   border-radius: 4px;
-  box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06);
 }
 
 @media (max-width:767px) {
@@ -390,7 +389,6 @@ exports[`Table Style tests should render a collapsed table 1`] = `
 
 .circuit-47 {
   border-radius: 4px;
-  box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06);
 }
 
 @media (max-width:767px) {
@@ -773,7 +771,6 @@ exports[`Table Style tests should render a condensed table 1`] = `
 
 .circuit-47 {
   border-radius: 4px;
-  box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06);
 }
 
 @media (max-width:767px) {
@@ -1265,12 +1262,6 @@ tbody .circuit-9:last-child td {
   }
 }
 
-.circuit-39 {
-  height: 100%;
-  overflow-y: auto;
-  box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06);
-}
-
 .circuit-37 {
   background-color: #FFFFFF;
   border-collapse: separate;
@@ -1321,12 +1312,17 @@ tbody .circuit-9:last-child td {
   opacity: 1;
 }
 
+.circuit-39 {
+  height: unset;
+  overflow-y: auto;
+}
+
 <div
   className="circuit-41 circuit-42"
 >
   <div
     className="circuit-39 circuit-40"
-    height={null}
+    height="unset"
     onScroll={[Function]}
   >
     <table
@@ -1456,7 +1452,6 @@ exports[`Table Style tests should render with default styles 1`] = `
 
 .circuit-47 {
   border-radius: 4px;
-  box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06);
 }
 
 @media (max-width:767px) {
@@ -1838,7 +1833,6 @@ exports[`Table Style tests should render with rowHeader styles 1`] = `
 
 .circuit-47 {
   border-radius: 4px;
-  box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06);
 }
 
 @media (max-width:767px) {
@@ -2215,7 +2209,6 @@ tbody .circuit-11:last-child td {
 exports[`Table Style tests should render without the table shadow 1`] = `
 .circuit-47 {
   border-radius: 4px;
-  box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06);
 }
 
 @media (max-width:767px) {