fix(Table): Change hover cell to hover row (#840)

* fix(SalesTable): Change hover cell to hover row * feat(Table): Add isHoverable props to project * doc(Table): Update doc * test(Table): Add isHoverable to test * fix(Table): Fix sticky footer cliping
tillersystems · Oct 28, 2019 · 752ecf4 · 752ecf4
1 parent 2ae03ae
commit 752ecf4
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 9 deletions.
diff --git a/src/Table/__stories__/Table.stories.js b/src/Table/__stories__/Table.stories.js
@@ -17,6 +17,7 @@ storiesOf('Table', module)
   })
   .add('default', () => {
     const striped = boolean('Striped', false, 'State');
+    const isHoverable = boolean('Hoverable', false, 'State');
     const selectableRow = boolean('Selectable row', false, 'State');
     const dishRowSortable = boolean('Dish row is sortable', true, 'State');
     const priceRowSortable = boolean('Price row is sortable', true, 'State');
@@ -94,12 +95,14 @@ storiesOf('Table', module)
           colsDef={getColsDef(taxCountryCodeValue)}
           rowsDef={rowsDef}
           striped={striped}
+          isHoverable={isHoverable}
         />
       </Wrapper>
     );
   })
   .add('Scrollable table', () => {
     const striped = boolean('Striped', false, 'State');
+    const isHoverable = boolean('Hoverable', false, 'State');
     const selectableRow = boolean('Selectable row', false, 'State');
     const dishRowSortable = boolean('Dish row is sortable', true, 'State');
     const priceRowSortable = boolean('Price row is sortable', true, 'State');
@@ -287,6 +290,7 @@ storiesOf('Table', module)
       <Wrapper>
         <Table
           isScrollable
+          isHoverable={isHoverable}
           height="40rem"
           data={data}
           dataTotal={dataTotal}

diff --git a/src/Table/__tests__/Table.test.js b/src/Table/__tests__/Table.test.js
@@ -11,6 +11,7 @@ StubComponent.displayName = 'StubComponent';
 const getColsDef = (taxCountryCode = 'fr') => [
   {
     title: 'DISH',
+    isRowHeader: true,
     value: d => d.code,
     isSortable: true,
     align: 'left',
@@ -249,4 +250,20 @@ describe('<Table />', () => {
 
     expect(tableContainer).toHaveStyleRule('overflow', 'scroll');
   });
+
+  test('should table be hoverable', () => {
+    const { getByText, getAllByTestId } = render(
+      <Table isHoverable height="10rem" colsDef={getColsDef()} data={data} />,
+    );
+
+    const sortedBodyRows = getAllByTestId('body-row');
+
+    expect(sortedBodyRows[0]).toHaveTextContent(/tartare de boeuf/i);
+
+    fireEvent.mouseOver(sortedBodyRows[0]);
+
+    const tartareRow = getByText(/tartare de boeuf/i);
+
+    expect(tartareRow).toHaveStyleRule(`background-color: ${Theme.palette.veryLightGrey}`);
+  });
 });
diff --git a/src/Table/elements.js b/src/Table/elements.js
@@ -129,9 +129,6 @@ export const Body = styled.tbody`
     &:last-child {
       padding-right: 3rem;
     }
-    &:hover {
-      background-color: ${({ theme: { palette } }) => palette.veryLightGrey};
-    }
   }
 `;
 
@@ -163,6 +160,17 @@ export const BodyRow = styled(Row)`
         box-shadow: inset 3px 0px 0 0px ${({ theme: { palette } }) => palette.primary.default};
       }
     `};
+
+  ${({ isHoverable }) =>
+    isHoverable &&
+    css`
+      &:hover {
+        & > th,
+        & > td {
+          background-color: ${({ theme: { palette } }) => palette.veryLightGrey};
+        }
+      }
+    `}
 `;
 
 export const RowHeader = styled.th`
@@ -198,10 +206,6 @@ export const Footer = styled.tfoot`
 
   td {
     font-feature-settings: 'tnum';
-
-    &:hover {
-      background-color: ${({ theme: { palette } }) => palette.veryLightGrey};
-    }
   }
 
   th,
@@ -220,6 +224,7 @@ export const Footer = styled.tfoot`
       top: 0;
       width: 100%;
       border-top: 1px solid ${({ theme: { palette } }) => palette.veryLightBlue};
+      box-sizing: border-box;
     }
 
     height: 5.2rem;
@@ -246,6 +251,17 @@ export const Footer = styled.tfoot`
   td:last-of-type {
     padding: 0 3rem 0 0.5rem;
   }
+
+  ${({ isHoverable }) =>
+    isHoverable &&
+    css`
+      tr:hover {
+        & > th,
+        & > td {
+          background-color: ${({ theme: { palette } }) => palette.veryLightGrey};
+        }
+      }
+    `}
 `;
 
 // Table Container

diff --git a/src/Table/index.js b/src/Table/index.js
@@ -134,6 +134,7 @@ class Table extends PureComponent {
       colsDef,
       data,
       isScrollable,
+      isHoverable,
       rowsDef: { selectable },
       striped,
     } = this.props;
@@ -184,6 +185,7 @@ class Table extends PureComponent {
             selected={selected === key}
             striped={striped}
             onClick={() => this.handleRowSelect(item, key)}
+            isHoverable={isHoverable}
           >
             {colsDef.map(({ isRowHeader, value, format, align }, columnIndex) =>
               isRowHeader ? (
@@ -212,10 +214,10 @@ class Table extends PureComponent {
    * @return {jsx}
    */
   renderFooter() {
-    const { colsDef, dataTotal, isScrollable } = this.props;
+    const { colsDef, dataTotal, isScrollable, isHoverable } = this.props;
 
     return (
-      <Footer data-testid="footer-row" isScrollable={isScrollable}>
+      <Footer data-testid="footer-row" isScrollable={isScrollable} isHoverable={isHoverable}>
         <tr>
           {colsDef.map(({ isRowHeader, total, format, align }, columnIndex) =>
             isRowHeader ? (
@@ -303,6 +305,12 @@ Table.propTypes = {
    **/
   isScrollable: bool,
 
+  /**
+   * Define if the table is isHoverable or not.
+   * When the table is isHoverable if a user hover a row it background change increasing contrast with others improving readability.
+   **/
+  isHoverable: bool,
+
   /** Rows definition */
   rowsDef: shape({
     onSelect: func,
@@ -321,6 +329,7 @@ Table.defaultProps = {
   dataTotal: null,
   height: 'initial',
   isScrollable: false,
+  isHoverable: false,
   rowsDef: {
     onSelect: () => {},
     selectable: false,