Merge pull request #209 from dcos-labs/mp/fix/DCOS-40355-tablerow-hover

DCOS-40355: add hover style for Table rows
d2iq · Aug 21, 2018 · 773927a · 773927a
2 parents de0fe9a + 744f160
commit 773927a
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 4 deletions.
diff --git a/packages/table/components/Table.tsx b/packages/table/components/Table.tsx
@@ -7,7 +7,8 @@ import {
  cellCss,
  tableCss,
  rightGrid,
- hideScrollbarCss
+ hideScrollbarCss,
+ rowHoverCss
 } from "../style";
 
 import { IColumnProps, Column } from "./Column";
@@ -25,6 +26,7 @@ export interface ITableProps {
 
 export interface ITableState {
  isScrolling: boolean;
+ hoveredRowIndex: number;
 }
 
 const ROW_HEIGHT = 35;
@@ -70,7 +72,8 @@ export class Table<T> extends React.PureComponent<ITableProps, ITableState> {
  this.onScroll = this.onScroll.bind(this);
 
  this.state = {
- isScrolling: false
+ isScrolling: false,
+ hoveredRowIndex: -1
  };
  }
 
@@ -183,8 +186,18 @@ export class Table<T> extends React.PureComponent<ITableProps, ITableState> {
  const className = css(cellCss, {
  ...style
  });
+ const updateHoveredRowIndex = () => {
+ this.setState({ hoveredRowIndex: rowIndex });
+ };
+
  return (
- <div className={className} key={key}>
+ <div
+ className={cx(className, {
+ [rowHoverCss]: rowIndex === this.state.hoveredRowIndex
+ })}
+ key={key}
+ onMouseOver={updateHoveredRowIndex}
+ >
  {column.props.cellRenderer(data[rowIndex])}
  </div>
  );

diff --git a/packages/table/style.ts b/packages/table/style.ts
@@ -2,7 +2,7 @@ import { css } from "emotion";
 import { coreColors, hexToRgbA } from "../shared/styles/color";
 import { coreFonts } from "../shared/styles/typography";
 
-const { black, greyLight } = coreColors();
+const { black, greyLight, greyLightLighten5 } = coreColors();
 const { fontFamilySansSerif } = coreFonts();
 
 export const headerCss = css`
@@ -40,3 +40,9 @@ export const hideScrollbarCss = css`
  display: none;
  }
 `;
+
+export const rowHoverCss = css`
+ background-color: ${greyLightLighten5};
+ mix-blend-mode: multiply;
+ will-change: left;
+`;