Merge EuiTableRowCell's childClasses into any existing className (#709)

* Merge EuiTableRowCell's childClasses into any existing classNames, fixes #706 * changelog
elastic · May 1, 2018 · becf30a · becf30a
1 parent 537f19b
commit becf30a
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,9 @@
 - Added `EuiEmptyPrompt` which can be used as a placeholder over empty tables and lists ([#711](https://github.com/elastic/eui/pull/711))
 - Added `EuiTabbedContent` ([#737](https://github.com/elastic/eui/pull/737))
 
+**Bug fixes**
+- Fixed `EuiTableRowCell` from overwriting its child element's `className` [#709](https://github.com/elastic/eui/pull/709)
+
 ## [`0.0.44`](https://github.com/elastic/eui/tree/v0.0.44)
 
 - Reduced `EuiToast` title size ([#703](https://github.com/elastic/eui/pull/703))

diff --git 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
@@ -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
@@ -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();
+  });
+});