feat: table style

Add default styles Closes DCOS-39532
d2iq · Jul 19, 2018 · 08de0d2 · 08de0d2
1 parent 104c5ca
commit 08de0d2
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 15 deletions.
diff --git a/packages/index.ts b/packages/index.ts
@@ -1,3 +1,7 @@
+import { injectGlobalCss } from "./shared/styles/global";
+
 export { Badge } from "./badge";
 export { BadgeButton } from "./badge";
 export { Column, Table, Cell, TextCell, HeaderCell } from "./table";
+
+injectGlobalCss();
diff --git a/packages/shared/styles/global.ts b/packages/shared/styles/global.ts
@@ -0,0 +1,9 @@
+import { injectGlobal } from "emotion";
+
+export const injectGlobalCss = () => {
+  return injectGlobal`
+    .ReactVirtualized__Grid {
+      outline: none;
+    }
+  `;
+};
diff --git a/packages/table/components/Table.tsx b/packages/table/components/Table.tsx
@@ -1,9 +1,11 @@
 import * as React from "react";
 import { css } from "emotion";
 import { AutoSizer, MultiGrid, GridCellProps } from "react-virtualized";
+
+import { headerCss, cellCss, tableCss } from "../style";
+
 import { IColumnProps, Column } from "./Column";
 import memoizeOne from "memoize-one";
-import { coreColors as Colors } from "../../shared/styles/color";
 
 export interface ITableProps {
   /**
@@ -61,6 +63,7 @@ export class Table<T> extends React.PureComponent<ITableProps, {}> {
     return (
       <AutoSizer
         __dataThatTriggersARerenderWhenChanged={this.props.data} // passed to notify react-virtualized about updates
+        className={tableCss}
         defaultWidth={DEFAULT_WIDTH}
         defaultHeight={DEFAULT_HEIGHT}
         onResize={this.updateGridSize}
@@ -109,9 +112,7 @@ export class Table<T> extends React.PureComponent<ITableProps, {}> {
     }
   ) {
     const { key, style, column } = args;
-    const className = css({
-      boxSizing: "border-box",
-      borderBottom: `1px solid ${Colors().black}`,
+    const className = css(headerCss, {
       ...style
     });
     return (
@@ -145,9 +146,7 @@ export class Table<T> extends React.PureComponent<ITableProps, {}> {
     }
   ) {
     const { style, key, column, data, rowIndex } = args;
-    const className = css({
-      borderBottom: `1px solid ${Colors().greyLight}`,
-      boxSizing: "border-box",
+    const className = css(cellCss, {
       ...style
     });
     return (

diff --git a/packages/table/stories/Table.stories.tsx b/packages/table/stories/Table.stories.tsx
@@ -41,7 +41,7 @@ const cityCellRenderer = ({ city }: { city?: string }) => (
 );
 const roleCellRenderer = ({ role }: { role?: string }) => (
   <Cell>
-    <em>{role}</em>
+    <span>{role}</span>
   </Cell>
 );
 const stateCellRenderer = ({ state }: { state?: string }) => (
@@ -136,7 +136,7 @@ storiesOf("Table", module)
           width={width}
         />
         <Column
-          header={<HeaderCell>zipcode</HeaderCell>}
+          header={<HeaderCell>zip code</HeaderCell>}
           cellRenderer={zipcodeCellRenderer}
           width={width}
         />

diff --git a/packages/table/style.ts b/packages/table/style.ts
@@ -0,0 +1,24 @@
+import { css } from "emotion";
+import { coreColors } from "../shared/styles/color";
+import { coreFonts } from "../shared/styles/typography";
+
+const { black, greyLight } = coreColors();
+const { fontFamilySansSerif } = coreFonts();
+
+export const headerCss = css`
+  box-sizing: border-box;
+  font-family: ${fontFamilySansSerif};
+  border-top: 1px solid ${black};
+  border-bottom: 1px solid ${black};
+`;
+
+export const cellCss = css`
+  box-sizing: border-box;
+  font-family: ${fontFamilySansSerif};
+  border-bottom: 1px solid ${greyLight};
+`;
+
+export const tableCss = css`
+  font-family: ${fontFamilySansSerif};
+  font-weight: normal;
+`;
diff --git a/packages/table/tests/__snapshots__/Table.test.tsx.snap b/packages/table/tests/__snapshots__/Table.test.tsx.snap
@@ -1,6 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Table renders again with new data 1`] = `
+.emotion-0 {
+  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica','Arial',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';
+  font-weight: normal;
+}
+
 <Table
   data={
     Array [
@@ -18,6 +23,7 @@ exports[`Table renders again with new data 1`] = `
         3,
       ]
     }
+    className="emotion-0"
     defaultHeight={768}
     defaultWidth={1024}
     disableHeight={false}
@@ -26,6 +32,7 @@ exports[`Table renders again with new data 1`] = `
     style={Object {}}
   >
     <div
+      className="emotion-0"
       style={
         Object {
           "height": 0,
@@ -66,6 +73,11 @@ exports[`Table renders again with new data 1`] = `
 `;
 
 exports[`Table renders again with new data 2`] = `
+.emotion-0 {
+  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica','Arial',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';
+  font-weight: normal;
+}
+
 <Table
   data={
     Array [
@@ -83,6 +95,7 @@ exports[`Table renders again with new data 2`] = `
         6,
       ]
     }
+    className="emotion-0"
     defaultHeight={768}
     defaultWidth={1024}
     disableHeight={false}
@@ -91,6 +104,7 @@ exports[`Table renders again with new data 2`] = `
     style={Object {}}
   >
     <div
+      className="emotion-0"
       style={
         Object {
           "height": 0,
@@ -131,8 +145,15 @@ exports[`Table renders again with new data 2`] = `
 `;
 
 exports[`Table renders default 1`] = `
+.emotion-12 {
+  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica','Arial',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';
+  font-weight: normal;
+}
+
 .emotion-0 {
   box-sizing: border-box;
+  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica','Arial',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';
+  border-top: 1px solid #000;
   border-bottom: 1px solid #000;
   height: 35px;
   left: 0;
@@ -143,6 +164,8 @@ exports[`Table renders default 1`] = `
 
 .emotion-2 {
   box-sizing: border-box;
+  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica','Arial',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';
+  border-top: 1px solid #000;
   border-bottom: 1px solid #000;
   height: 35px;
   left: 307.2px;
@@ -153,6 +176,8 @@ exports[`Table renders default 1`] = `
 
 .emotion-3 {
   box-sizing: border-box;
+  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica','Arial',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';
+  border-top: 1px solid #000;
   border-bottom: 1px solid #000;
   height: 35px;
   left: 614.4px;
@@ -162,8 +187,9 @@ exports[`Table renders default 1`] = `
 }
 
 .emotion-4 {
-  border-bottom: 1px solid #DADDE2;
   box-sizing: border-box;
+  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica','Arial',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';
+  border-bottom: 1px solid #DADDE2;
   height: 35px;
   left: 0;
   position: absolute;
@@ -172,8 +198,9 @@ exports[`Table renders default 1`] = `
 }
 
 .emotion-5 {
-  border-bottom: 1px solid #DADDE2;
   box-sizing: border-box;
+  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica','Arial',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';
+  border-bottom: 1px solid #DADDE2;
   height: 35px;
   left: 0;
   position: absolute;
@@ -182,8 +209,9 @@ exports[`Table renders default 1`] = `
 }
 
 .emotion-7 {
-  border-bottom: 1px solid #DADDE2;
   box-sizing: border-box;
+  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica','Arial',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';
+  border-bottom: 1px solid #DADDE2;
   height: 35px;
   left: 307.2px;
   position: absolute;
@@ -192,8 +220,9 @@ exports[`Table renders default 1`] = `
 }
 
 .emotion-8 {
-  border-bottom: 1px solid #DADDE2;
   box-sizing: border-box;
+  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica','Arial',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';
+  border-bottom: 1px solid #DADDE2;
   height: 35px;
   left: 614.4px;
   position: absolute;
@@ -202,8 +231,9 @@ exports[`Table renders default 1`] = `
 }
 
 .emotion-10 {
-  border-bottom: 1px solid #DADDE2;
   box-sizing: border-box;
+  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica','Arial',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';
+  border-bottom: 1px solid #DADDE2;
   height: 35px;
   left: 307.2px;
   position: absolute;
@@ -212,8 +242,9 @@ exports[`Table renders default 1`] = `
 }
 
 .emotion-11 {
-  border-bottom: 1px solid #DADDE2;
   box-sizing: border-box;
+  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica','Arial',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';
+  border-bottom: 1px solid #DADDE2;
   height: 35px;
   left: 614.4px;
   position: absolute;
@@ -222,6 +253,7 @@ exports[`Table renders default 1`] = `
 }
 
 <div
+  class="emotion-12"
   style="overflow:visible;height:0;width:0"
 >
   <div