From b8419612322679e542e1e0d59f541281b640987e Mon Sep 17 00:00:00 2001
From: Brandon Ferrua <bferrua@gmail.com>
Date: Thu, 16 Nov 2017 14:07:30 -0800
Subject: [PATCH] fix(data-tables): Add column wrap support (#2921)

* fix(data-tables): Add column wrap support

* Bump column support to 15

* Remove striped support
---
 ui/components/data-tables/base/_index.scss | 32 ++++++++++++++++++++++
 ui/components/data-tables/index.jsx        |  3 +-
 2 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/ui/components/data-tables/base/_index.scss b/ui/components/data-tables/base/_index.scss
index 350425d748..12e1098183 100644
--- a/ui/components/data-tables/base/_index.scss
+++ b/ui/components/data-tables/base/_index.scss
@@ -421,6 +421,38 @@
   }
 }
 
+$max-column-support: 15;
+
+@for $i from 1 through $max-column-support {
+
+  .slds-table_column-#{$i}-wrap tbody tr > *:nth-child(#{$i}) .slds-truncate {
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    hyphens: none;
+    white-space: normal;
+  }
+}
+
+[class*="slds-table_column-"] tr td .slds-truncate {
+  overflow: hidden;
+  position: relative;
+  max-height: 3.25rem;
+
+  &:after {
+    content: '';
+    position: absolute;
+    top: 2.25rem;
+    bottom: 0;
+    right: 0;
+    width: 50%;
+    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 69%);
+  }
+}
+
+[class*="slds-table_column-"] tr:hover td .slds-truncate:after {
+  background: linear-gradient(to right, rgba(250, 250, 249, 0) 0%, rgba(250, 250, 249, 1) 69%);
+}
+
 /**
  * Resizable data table columns
  *
diff --git a/ui/components/data-tables/index.jsx b/ui/components/data-tables/index.jsx
index b06abe4e11..b2a6bc8b1e 100644
--- a/ui/components/data-tables/index.jsx
+++ b/ui/components/data-tables/index.jsx
@@ -37,7 +37,8 @@ export const AdvancedDataTable = props => (
       'slds-table slds-table_bordered slds-table_resizable-cols slds-table_fixed-layout',
       props.className,
       {
-        'slds-table_edit': props.isEditable
+        'slds-table_edit': props.isEditable,
+        'slds-table_column-3-wrap': props.columnWrap
       }
     )}
     role="grid"