From 1065b0bc72da1da2cc92591630797760d118044a Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Wed, 27 Mar 2024 16:35:27 -0700
Subject: [PATCH] =?UTF-8?q?[EuiTableRowCell]=20Fix=20where=20`className`?=
 =?UTF-8?q?=20is=20applied=20to=20=E2=9A=A0=EF=B8=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- I have no idea why it would apply to the content div instead of to the actual cell element :|||

- !! this is a breaking DOM change and will need careful Kibana migration
---
 .../table/__snapshots__/table_row_cell.test.tsx.snap        | 4 ++--
 src/components/table/table_row_cell.tsx                     | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/table/__snapshots__/table_row_cell.test.tsx.snap b/src/components/table/__snapshots__/table_row_cell.test.tsx.snap
index 871e5547da0..cbad081e94f 100644
--- a/src/components/table/__snapshots__/table_row_cell.test.tsx.snap
+++ b/src/components/table/__snapshots__/table_row_cell.test.tsx.snap
@@ -86,11 +86,11 @@ exports[`renders EuiTableRowCell 1`] = `
     <tr>
       <td
         aria-label="aria-label"
-        class="euiTableRowCell euiTableRowCell--middle emotion-euiTableRowCell-desktop"
+        class="euiTableRowCell testClass1 testClass2 euiTableRowCell--middle emotion-euiTableRowCell-desktop-euiTestCss"
         data-test-subj="test subject string"
       >
         <div
-          class="euiTableCellContent testClass1 testClass2 emotion-euiTestCss"
+          class="euiTableCellContent"
         >
           <span
             class="euiTableCellContent__text"
diff --git a/src/components/table/table_row_cell.tsx b/src/components/table/table_row_cell.tsx
index 52287f2541e..405903e0de8 100644
--- a/src/components/table/table_row_cell.tsx
+++ b/src/components/table/table_row_cell.tsx
@@ -146,7 +146,7 @@ export const EuiTableRowCell: FunctionComponent<Props> = ({
       : [styles.desktop]),
   ];
 
-  const cellClasses = classNames('euiTableRowCell', {
+  const cellClasses = classNames('euiTableRowCell', className, {
     'euiTableRowCell--hasActions': hasActions,
     'euiTableRowCell--isExpander': isExpander,
     'euiTableRowCell--hideForDesktop': mobileOptions.only,
@@ -154,7 +154,7 @@ export const EuiTableRowCell: FunctionComponent<Props> = ({
     [`euiTableRowCell--${valign}`]: valign,
   });
 
-  const contentClasses = classNames('euiTableCellContent', className, {
+  const contentClasses = classNames('euiTableCellContent', {
     'euiTableCellContent--alignRight': align === RIGHT_ALIGNMENT,
     'euiTableCellContent--alignCenter': align === CENTER_ALIGNMENT,
     'euiTableCellContent--showOnHover': showOnHover,
@@ -164,7 +164,7 @@ export const EuiTableRowCell: FunctionComponent<Props> = ({
     'euiTableCellContent--overflowingContent': textOnly !== true,
   });
 
-  const mobileContentClasses = classNames('euiTableCellContent', className, {
+  const mobileContentClasses = classNames('euiTableCellContent', {
     'euiTableCellContent--alignRight':
       mobileOptions.align === RIGHT_ALIGNMENT || align === RIGHT_ALIGNMENT,
     'euiTableCellContent--alignCenter':