Merge EuiTableRowCell's childClasses into any existing classNames, fixes

elastic#706
chandlerprall · Apr 27, 2018 · eaabb15 · eaabb15
1 parent 016ec92
commit eaabb15
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 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
@@ -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();
+  });
+});