From d87ea6ee9baf9f082c0587dac5ef31ef7cf1bb2a Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Fri, 26 Jul 2019 00:34:05 -0700
Subject: [PATCH 1/3] Initial css fixes

---
 .../__snapshots__/data_grid.test.tsx.snap     |  2 +-
 src/components/datagrid/_data_grid.scss       |  5 ++++
 .../datagrid/_data_grid_column_resizer.scss   | 24 ++++++++++++++++---
 .../datagrid/_data_grid_data_row.scss         | 13 ++++++----
 .../datagrid/_data_grid_header_row.scss       | 15 +++++++++---
 src/components/datagrid/_index.scss           |  3 +++
 src/components/datagrid/_mixins.scss          |  0
 src/components/datagrid/_variables.scss       |  1 +
 src/components/datagrid/data_grid.tsx         |  2 +-
 9 files changed, 52 insertions(+), 13 deletions(-)
 create mode 100644 src/components/datagrid/_data_grid.scss
 create mode 100644 src/components/datagrid/_mixins.scss
 create mode 100644 src/components/datagrid/_variables.scss

diff --git a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
index 4ec27255852..afcd5f37c68 100644
--- a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
+++ b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
 <div
   aria-label="aria-label"
-  class="testClass1 testClass2"
+  class="euiDataGrid"
   data-test-subj="test subject string"
 >
   <div
diff --git a/src/components/datagrid/_data_grid.scss b/src/components/datagrid/_data_grid.scss
new file mode 100644
index 00000000000..9f4b3aed915
--- /dev/null
+++ b/src/components/datagrid/_data_grid.scss
@@ -0,0 +1,5 @@
+.euiDataGrid {
+  @include euiScrollBar;
+  font-feature-settings: 'tnum' 1; // Tabular numbers
+  overflow-x: auto;
+}
\ No newline at end of file
diff --git a/src/components/datagrid/_data_grid_column_resizer.scss b/src/components/datagrid/_data_grid_column_resizer.scss
index 3d4e7406f48..5e001b2afd4 100644
--- a/src/components/datagrid/_data_grid_column_resizer.scss
+++ b/src/components/datagrid/_data_grid_column_resizer.scss
@@ -1,9 +1,27 @@
+  // Resizer straddles the column border and is an invisible hitzone for dragging
 .euiDataGridColumnResizer {
   position: absolute;
   top: 0;
-  right: 0;
+  right: -$euiSizeS;
   height: 100%;
-  width: 3px;
-  background-color: $euiColorDarkestShade;
+  width: $euiSize;
   cursor: ew-resize;
+  opacity: 0;
+  z-index: 2;
+
+  // Center a vertical line within the button above
+  &:after {
+    content: '';
+    position: absolute;
+    left: $euiSizeS - 1px;
+    top: 0;
+    bottom: 0;
+    width: $euiDataGridColumnResizerWidth;
+    background-color: $euiColorPrimary;
+  }
+
+  &:hover,
+  &:active {
+    opacity: 1;
+  }
 }
diff --git a/src/components/datagrid/_data_grid_data_row.scss b/src/components/datagrid/_data_grid_data_row.scss
index 56e9f1445ac..3a2b0339c4f 100644
--- a/src/components/datagrid/_data_grid_data_row.scss
+++ b/src/components/datagrid/_data_grid_data_row.scss
@@ -1,12 +1,15 @@
 .euiDataGridRow {
-  white-space: nowrap;
+  display: inline-flex;
+  min-width: 100%;
 }
 
 .euiDataGridRowCell {
-  display: inline-block;
-  padding: $euiSize;
-  border: $euiBorderThin;
-  border-left-width: 0;
+  @include euiFontSizeXS;
+  @include euiTextTruncate;
+
+  padding: $euiSizeM / 2;
+  border-right: $euiBorderThin;
+  border-bottom: $euiBorderThin;
   overflow: hidden;
   white-space: nowrap;
 
diff --git a/src/components/datagrid/_data_grid_header_row.scss b/src/components/datagrid/_data_grid_header_row.scss
index e962b97f482..a166a7bf1b8 100644
--- a/src/components/datagrid/_data_grid_header_row.scss
+++ b/src/components/datagrid/_data_grid_header_row.scss
@@ -1,9 +1,18 @@
+.euiDataGridHeader {
+  display: inline-flex;
+  min-width: 100%;
+}
+
 .euiDataGridHeaderCell {
-  display: inline-block;
-  padding: $euiSize;
+  @include euiFontSizeXS;
+
+  padding: $euiSizeM / 2;
   border: $euiBorderThin;
-  border-left-width: 0;
+  border-left: none;
   position: relative;
+  background: $euiColorLightestShade;
+  user-select: none;
+
 
   &:first-of-type {
     border-left: $euiBorderThin;
diff --git a/src/components/datagrid/_index.scss b/src/components/datagrid/_index.scss
index 8f26162dab3..10d5a8c8837 100644
--- a/src/components/datagrid/_index.scss
+++ b/src/components/datagrid/_index.scss
@@ -1,3 +1,6 @@
+@import 'variables';
+@import 'mixins';
+@import 'data_grid';
 @import 'data_grid_header_row';
 @import 'data_grid_column_resizer';
 @import 'data_grid_data_row';
diff --git a/src/components/datagrid/_mixins.scss b/src/components/datagrid/_mixins.scss
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/src/components/datagrid/_variables.scss b/src/components/datagrid/_variables.scss
new file mode 100644
index 00000000000..6dc61af5625
--- /dev/null
+++ b/src/components/datagrid/_variables.scss
@@ -0,0 +1 @@
+$euiDataGridColumnResizerWidth: 3px; // Odd number because it straddles a border
\ No newline at end of file
diff --git a/src/components/datagrid/data_grid.tsx b/src/components/datagrid/data_grid.tsx
index ff4c86408f9..68d7870d41a 100644
--- a/src/components/datagrid/data_grid.tsx
+++ b/src/components/datagrid/data_grid.tsx
@@ -63,7 +63,7 @@ export class EuiDataGrid extends Component<EuiDataGridProps, EuiDataGridState> {
     const { columns, rowCount, renderCellValue, ...rest } = this.props;
 
     return (
-      <div {...rest}>
+      <div {...rest} className="euiDataGrid">
         <EuiDataGridHeaderRow
           columns={columns}
           columnWidths={columnWidths}

From 6cb11d1e0e4b3b33ca602e61bfad40336decb1a1 Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Fri, 26 Jul 2019 08:39:14 -0700
Subject: [PATCH 2/3] works in IE, addresses feedback

---
 .../__snapshots__/data_grid.test.tsx.snap     | 96 +++++++++----------
 src/components/datagrid/_data_grid.scss       |  2 +
 .../datagrid/_data_grid_data_row.scss         |  1 +
 .../datagrid/_data_grid_header_row.scss       |  1 +
 src/components/datagrid/data_grid.tsx         | 13 ++-
 5 files changed, 60 insertions(+), 53 deletions(-)

diff --git a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
index afcd5f37c68..318decfc653 100644
--- a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
+++ b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
 <div
   aria-label="aria-label"
-  class="euiDataGrid"
+  class="testClass1 testClass2 euiDataGrid"
   data-test-subj="test subject string"
 >
   <div
@@ -44,64 +44,60 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
     </div>
   </div>
   <div
-    class="dataGridBody"
+    class="euiDataGridRow"
+    data-test-subj="dataGridRow"
   >
     <div
-      class="euiDataGridRow"
-      data-test-subj="dataGridRow"
+      class="euiDataGridRowCell"
+      data-test-subj="dataGridRowCell"
+      style="width:100px"
     >
-      <div
-        class="euiDataGridRowCell"
-        data-test-subj="dataGridRowCell"
-        style="width:100px"
-      >
-        0, A
-      </div>
-      <div
-        class="euiDataGridRowCell"
-        data-test-subj="dataGridRowCell"
-        style="width:100px"
-      >
-        0, B
-      </div>
+      0, A
     </div>
     <div
-      class="euiDataGridRow"
-      data-test-subj="dataGridRow"
+      class="euiDataGridRowCell"
+      data-test-subj="dataGridRowCell"
+      style="width:100px"
     >
-      <div
-        class="euiDataGridRowCell"
-        data-test-subj="dataGridRowCell"
-        style="width:100px"
-      >
-        1, A
-      </div>
-      <div
-        class="euiDataGridRowCell"
-        data-test-subj="dataGridRowCell"
-        style="width:100px"
-      >
-        1, B
-      </div>
+      0, B
     </div>
+  </div>
+  <div
+    class="euiDataGridRow"
+    data-test-subj="dataGridRow"
+  >
     <div
-      class="euiDataGridRow"
-      data-test-subj="dataGridRow"
+      class="euiDataGridRowCell"
+      data-test-subj="dataGridRowCell"
+      style="width:100px"
     >
-      <div
-        class="euiDataGridRowCell"
-        data-test-subj="dataGridRowCell"
-        style="width:100px"
-      >
-        2, A
-      </div>
-      <div
-        class="euiDataGridRowCell"
-        data-test-subj="dataGridRowCell"
-        style="width:100px"
-      >
-        2, B
-      </div>
+      1, A
+    </div>
+    <div
+      class="euiDataGridRowCell"
+      data-test-subj="dataGridRowCell"
+      style="width:100px"
+    >
+      1, B
+    </div>
+  </div>
+  <div
+    class="euiDataGridRow"
+    data-test-subj="dataGridRow"
+  >
+    <div
+      class="euiDataGridRowCell"
+      data-test-subj="dataGridRowCell"
+      style="width:100px"
+    >
+      2, A
+    </div>
+    <div
+      class="euiDataGridRowCell"
+      data-test-subj="dataGridRowCell"
+      style="width:100px"
+    >
+      2, B
     </div>
   </div>
 </div>
diff --git a/src/components/datagrid/_data_grid.scss b/src/components/datagrid/_data_grid.scss
index 9f4b3aed915..794f0effbaf 100644
--- a/src/components/datagrid/_data_grid.scss
+++ b/src/components/datagrid/_data_grid.scss
@@ -2,4 +2,6 @@
   @include euiScrollBar;
   font-feature-settings: 'tnum' 1; // Tabular numbers
   overflow-x: auto;
+  max-width: 100%;
+  width: 100%;
 }
\ No newline at end of file
diff --git a/src/components/datagrid/_data_grid_data_row.scss b/src/components/datagrid/_data_grid_data_row.scss
index 3a2b0339c4f..baec186f8af 100644
--- a/src/components/datagrid/_data_grid_data_row.scss
+++ b/src/components/datagrid/_data_grid_data_row.scss
@@ -12,6 +12,7 @@
   border-bottom: $euiBorderThin;
   overflow: hidden;
   white-space: nowrap;
+  flex: 0 0 auto;
 
   &:first-of-type {
     border-left: $euiBorderThin;
diff --git a/src/components/datagrid/_data_grid_header_row.scss b/src/components/datagrid/_data_grid_header_row.scss
index a166a7bf1b8..5605acd492e 100644
--- a/src/components/datagrid/_data_grid_header_row.scss
+++ b/src/components/datagrid/_data_grid_header_row.scss
@@ -12,6 +12,7 @@
   position: relative;
   background: $euiColorLightestShade;
   user-select: none;
+  flex: 0 0 auto;
 
 
   &:first-of-type {
diff --git a/src/components/datagrid/data_grid.tsx b/src/components/datagrid/data_grid.tsx
index 68d7870d41a..4fafca0250b 100644
--- a/src/components/datagrid/data_grid.tsx
+++ b/src/components/datagrid/data_grid.tsx
@@ -4,6 +4,7 @@ import { EuiDataGridDataRow } from './data_grid_data_row';
 import { CommonProps } from '../common';
 import { Column, ColumnWidths } from './data_grid_types';
 import { EuiDataGridCellProps } from './data_grid_cell';
+import classNames from 'classnames';
 
 type EuiDataGridProps = CommonProps &
   HTMLAttributes<HTMLDivElement> & {
@@ -60,16 +61,22 @@ export class EuiDataGrid extends Component<EuiDataGridProps, EuiDataGridState> {
 
   render() {
     const { columnWidths, rows } = this.state;
-    const { columns, rowCount, renderCellValue, ...rest } = this.props;
+    const {
+      columns,
+      rowCount,
+      renderCellValue,
+      className,
+      ...rest
+    } = this.props;
 
     return (
-      <div {...rest} className="euiDataGrid">
+      <div {...rest} className={classNames(className, 'euiDataGrid')}>
         <EuiDataGridHeaderRow
           columns={columns}
           columnWidths={columnWidths}
           setColumnWidth={this.setColumnWidth}
         />
-        <div className="dataGridBody">{rows}</div>
+        {rows}
       </div>
     );
   }

From e0069e5986a7b957b001c3f9a3cca6a8548dc4c4 Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Fri, 26 Jul 2019 09:02:44 -0700
Subject: [PATCH 3/3] remove user select

---
 src/components/datagrid/_data_grid_header_row.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/datagrid/_data_grid_header_row.scss b/src/components/datagrid/_data_grid_header_row.scss
index 5605acd492e..cab0119b318 100644
--- a/src/components/datagrid/_data_grid_header_row.scss
+++ b/src/components/datagrid/_data_grid_header_row.scss
@@ -11,7 +11,6 @@
   border-left: none;
   position: relative;
   background: $euiColorLightestShade;
-  user-select: none;
   flex: 0 0 auto;