From 42d587ddf1753149e9b0861f6ec016602d39ff98 Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Fri, 27 Apr 2018 10:24:11 -0600
Subject: [PATCH] Merge EuiTableRowCell's childClasses into any existing
 classNames, fixes #706

---
 .../__snapshots__/table_row_cell.test.js.snap      | 14 ++++++++++++++
 src/components/table/table_row_cell.js             |  8 +++++++-
 src/components/table/table_row_cell.test.js        | 12 ++++++++++++
 3 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/src/components/table/__snapshots__/table_row_cell.test.js.snap b/src/components/table/__snapshots__/table_row_cell.test.js.snap
index 113bde578eb..d77cae1ddfb 100644
--- a/src/components/table/__snapshots__/table_row_cell.test.js.snap
+++ b/src/components/table/__snapshots__/table_row_cell.test.js.snap
@@ -42,6 +42,20 @@ exports[`align renders right when specified 1`] = `
 </td>
 `;
 
+exports[`children's className merges new classnames into existing ones 1`] = `
+<td
+  class="euiTableRowCell"
+>
+  <div
+    class="euiTableCellContent euiTableCellContent--showOnHover euiTableCellContent--overflowingContent"
+  >
+    <div
+      class="testClass euiTableCellContent__hoverItem"
+    />
+  </div>
+</td>
+`;
+
 exports[`renders EuiTableRowCell 1`] = `
 <td
   class="euiTableRowCell"
diff --git a/src/components/table/table_row_cell.js b/src/components/table/table_row_cell.js
index 98c679508a1..4a7d8271b49 100644
--- a/src/components/table/table_row_cell.js
+++ b/src/components/table/table_row_cell.js
@@ -58,7 +58,13 @@ export const EuiTableRowCell = ({
   if(textOnly === true) {
     modifiedChildren = <span className={childClasses}>{children}</span>;
   } else if(React.isValidElement(modifiedChildren)) {
-    modifiedChildren = React.Children.map(children, child => React.cloneElement(child, { className: childClasses }));
+    modifiedChildren = React.Children.map(
+      children,
+      child => React.cloneElement(
+        child,
+        { className: classNames(child.props.className, childClasses) }
+      )
+    );
   }
 
   return (
diff --git a/src/components/table/table_row_cell.test.js b/src/components/table/table_row_cell.test.js
index 684ac418ee9..5df0e61fd5a 100644
--- a/src/components/table/table_row_cell.test.js
+++ b/src/components/table/table_row_cell.test.js
@@ -82,3 +82,15 @@ describe('truncateText', () => {
     expect(render(component)).toMatchSnapshot();
   });
 });
+
+describe(`children's className`, () => {
+  test('merges new classnames into existing ones', () => {
+    const component = (
+      <EuiTableRowCell textOnly={false} showOnHover={true}>
+        <div className="testClass"/>
+      </EuiTableRowCell>
+    );
+
+    expect(render(component)).toMatchSnapshot();
+  });
+});