From 2a4ec83abef735cf64c249efff553462eea2b509 Mon Sep 17 00:00:00 2001
From: Anish Aggarwal <anish17122000@gmail.com>
Date: Wed, 26 Feb 2020 16:17:44 +0530
Subject: [PATCH 1/3] replaced empty th with td

---
 CHANGELOG.md                               |  1 +
 src/components/table/table_header_cell.tsx | 24 +++++++++++++++-------
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 04d9369662d..39d2371c1ee 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Empty table th elements replaced with td in `EuiTable`. ([#2873](https://github.com/elastic/eui/pull/2873))
 - Added SASS variables for text variants of the primary palette `$euiColorPrimaryText`, `$euiColorSecondaryText`, etc... Updated components to use these new variables. ([#2873](https://github.com/elastic/eui/pull/2873))
 - Updated SASS mixin `makeHighContrastColor()` to default `$background: $euiPageBackgroundColor` and `$ratio: 4.5`. Created `makeGraphicContrastColor()` for graphic specific contrast levels of 3.0. ([#2873](https://github.com/elastic/eui/pull/2873))
 
diff --git a/src/components/table/table_header_cell.tsx b/src/components/table/table_header_cell.tsx
index b0c8406e20b..48b7dd07796 100644
--- a/src/components/table/table_header_cell.tsx
+++ b/src/components/table/table_header_cell.tsx
@@ -146,16 +146,26 @@ export const EuiTableHeaderCell: FunctionComponent<Props> = ({
     );
   }
 
+  if (children) {
+    return (
+      <th
+        className={classes}
+        scope={scope}
+        role="columnheader"
+        style={styleObj}
+        {...rest}>
+        <div className={contentClasses}>
+          <span className="euiTableCellContent__text">{children}</span>
+        </div>
+      </th>
+    );
+  }
+
   return (
-    <th
-      className={classes}
-      scope={scope}
-      role="columnheader"
-      style={styleObj}
-      {...rest}>
+    <td className={classes} style={styleObj} {...rest}>
       <div className={contentClasses}>
         <span className="euiTableCellContent__text">{children}</span>
       </div>
-    </th>
+    </td>
   );
 };

From 67a1fc7037ba86277b7512fc3cd3e3fd33744c43 Mon Sep 17 00:00:00 2001
From: Anish Aggarwal <anish17122000@gmail.com>
Date: Wed, 26 Feb 2020 22:48:50 +0530
Subject: [PATCH 2/3] used single component

---
 CHANGELOG.md                                  |  2 +-
 .../__snapshots__/table_header.test.tsx.snap  | 10 +++++++
 .../table_header_cell.test.tsx.snap           | 12 ++++----
 src/components/table/table_header.test.tsx    |  6 ++++
 src/components/table/table_header_cell.tsx    | 30 +++++++------------
 5 files changed, 34 insertions(+), 26 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 39d2371c1ee..23f75367b52 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-- Empty table th elements replaced with td in `EuiTable`. ([#2873](https://github.com/elastic/eui/pull/2873))
+- Empty table th elements replaced with td in `EuiTable`. ([#2934](https://github.com/elastic/eui/pull/2934))
 - Added SASS variables for text variants of the primary palette `$euiColorPrimaryText`, `$euiColorSecondaryText`, etc... Updated components to use these new variables. ([#2873](https://github.com/elastic/eui/pull/2873))
 - Updated SASS mixin `makeHighContrastColor()` to default `$background: $euiPageBackgroundColor` and `$ratio: 4.5`. Created `makeGraphicContrastColor()` for graphic specific contrast levels of 3.0. ([#2873](https://github.com/elastic/eui/pull/2873))
 
diff --git a/src/components/table/__snapshots__/table_header.test.tsx.snap b/src/components/table/__snapshots__/table_header.test.tsx.snap
index 09b2da1459f..23cb8bc2282 100644
--- a/src/components/table/__snapshots__/table_header.test.tsx.snap
+++ b/src/components/table/__snapshots__/table_header.test.tsx.snap
@@ -12,3 +12,13 @@ Array [
   "children",
 ]
 `;
+
+exports[`EuiTableHeader renders td when children is null/undefined 1`] = `
+<thead
+  aria-label="aria-label"
+  class="testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  <tr />
+</thead>
+`;
diff --git a/src/components/table/__snapshots__/table_header_cell.test.tsx.snap b/src/components/table/__snapshots__/table_header_cell.test.tsx.snap
index b6a4321e000..2e35c59f129 100644
--- a/src/components/table/__snapshots__/table_header_cell.test.tsx.snap
+++ b/src/components/table/__snapshots__/table_header_cell.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`align defaults to left 1`] = `
-<th
+<td
   class="euiTableHeaderCell"
   role="columnheader"
   scope="col"
@@ -13,11 +13,11 @@ exports[`align defaults to left 1`] = `
       class="euiTableCellContent__text"
     />
   </div>
-</th>
+</td>
 `;
 
 exports[`align renders center when specified 1`] = `
-<th
+<td
   class="euiTableHeaderCell"
   role="columnheader"
   scope="col"
@@ -29,11 +29,11 @@ exports[`align renders center when specified 1`] = `
       class="euiTableCellContent__text"
     />
   </div>
-</th>
+</td>
 `;
 
 exports[`align renders right when specified 1`] = `
-<th
+<td
   class="euiTableHeaderCell"
   role="columnheader"
   scope="col"
@@ -45,7 +45,7 @@ exports[`align renders right when specified 1`] = `
       class="euiTableCellContent__text"
     />
   </div>
-</th>
+</td>
 `;
 
 exports[`renders EuiTableHeaderCell 1`] = `
diff --git a/src/components/table/table_header.test.tsx b/src/components/table/table_header.test.tsx
index f79abcf3827..d9c246d7030 100644
--- a/src/components/table/table_header.test.tsx
+++ b/src/components/table/table_header.test.tsx
@@ -12,4 +12,10 @@ describe('EuiTableHeader', () => {
 
     expect(component).toMatchSnapshot();
   });
+
+  test('renders td when children is null/undefined', () => {
+    const component = render(<EuiTableHeader {...requiredProps} />);
+
+    expect(component).toMatchSnapshot();
+  });
 });
diff --git a/src/components/table/table_header_cell.tsx b/src/components/table/table_header_cell.tsx
index 48b7dd07796..db0e2dcdb88 100644
--- a/src/components/table/table_header_cell.tsx
+++ b/src/components/table/table_header_cell.tsx
@@ -91,6 +91,8 @@ export const EuiTableHeaderCell: FunctionComponent<Props> = ({
 
   const styleObj = resolveWidthAsStyle(style, width);
 
+  const CellComponent = children ? 'th' : 'td';
+
   if (onSort) {
     const buttonClasses = classNames('euiTableHeaderButton', {
       'euiTableHeaderButton-isSorted': isSorted,
@@ -114,7 +116,7 @@ export const EuiTableHeaderCell: FunctionComponent<Props> = ({
     }
 
     return (
-      <th
+      <CellComponent
         className={classes}
         scope={scope}
         role="columnheader"
@@ -142,30 +144,20 @@ export const EuiTableHeaderCell: FunctionComponent<Props> = ({
             </EuiScreenReaderOnly>
           </span>
         </button>
-      </th>
-    );
-  }
-
-  if (children) {
-    return (
-      <th
-        className={classes}
-        scope={scope}
-        role="columnheader"
-        style={styleObj}
-        {...rest}>
-        <div className={contentClasses}>
-          <span className="euiTableCellContent__text">{children}</span>
-        </div>
-      </th>
+      </CellComponent>
     );
   }
 
   return (
-    <td className={classes} style={styleObj} {...rest}>
+    <CellComponent
+      className={classes}
+      scope={scope}
+      role="columnheader"
+      style={styleObj}
+      {...rest}>
       <div className={contentClasses}>
         <span className="euiTableCellContent__text">{children}</span>
       </div>
-    </td>
+    </CellComponent>
   );
 };

From 666b9528bbba9ecf07dd672439650a52f5660870 Mon Sep 17 00:00:00 2001
From: Anish Aggarwal <anish17122000@gmail.com>
Date: Thu, 27 Feb 2020 00:17:54 +0530
Subject: [PATCH 3/3] moved test case to correct directory

---
 .../__snapshots__/table_header.test.tsx.snap   | 10 ----------
 .../table_header_cell.test.tsx.snap            | 18 ++++++++++++++++++
 src/components/table/table_header.test.tsx     |  6 ------
 .../table/table_header_cell.test.tsx           |  6 ++++++
 4 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/src/components/table/__snapshots__/table_header.test.tsx.snap b/src/components/table/__snapshots__/table_header.test.tsx.snap
index 23cb8bc2282..09b2da1459f 100644
--- a/src/components/table/__snapshots__/table_header.test.tsx.snap
+++ b/src/components/table/__snapshots__/table_header.test.tsx.snap
@@ -12,13 +12,3 @@ Array [
   "children",
 ]
 `;
-
-exports[`EuiTableHeader renders td when children is null/undefined 1`] = `
-<thead
-  aria-label="aria-label"
-  class="testClass1 testClass2"
-  data-test-subj="test subject string"
->
-  <tr />
-</thead>
-`;
diff --git a/src/components/table/__snapshots__/table_header_cell.test.tsx.snap b/src/components/table/__snapshots__/table_header_cell.test.tsx.snap
index 2e35c59f129..abbec8cae31 100644
--- a/src/components/table/__snapshots__/table_header_cell.test.tsx.snap
+++ b/src/components/table/__snapshots__/table_header_cell.test.tsx.snap
@@ -68,6 +68,24 @@ exports[`renders EuiTableHeaderCell 1`] = `
 </th>
 `;
 
+exports[`renders td when children is null/undefined 1`] = `
+<td
+  aria-label="aria-label"
+  class="euiTableHeaderCell testClass1 testClass2"
+  data-test-subj="test subject string"
+  role="columnheader"
+  scope="col"
+>
+  <div
+    class="euiTableCellContent testClass1 testClass2"
+  >
+    <span
+      class="euiTableCellContent__text"
+    />
+  </div>
+</td>
+`;
+
 exports[`width and style accepts style attribute 1`] = `
 <th
   class="euiTableHeaderCell"
diff --git a/src/components/table/table_header.test.tsx b/src/components/table/table_header.test.tsx
index d9c246d7030..f79abcf3827 100644
--- a/src/components/table/table_header.test.tsx
+++ b/src/components/table/table_header.test.tsx
@@ -12,10 +12,4 @@ describe('EuiTableHeader', () => {
 
     expect(component).toMatchSnapshot();
   });
-
-  test('renders td when children is null/undefined', () => {
-    const component = render(<EuiTableHeader {...requiredProps} />);
-
-    expect(component).toMatchSnapshot();
-  });
 });
diff --git a/src/components/table/table_header_cell.test.tsx b/src/components/table/table_header_cell.test.tsx
index e5431519c35..1414dc82b24 100644
--- a/src/components/table/table_header_cell.test.tsx
+++ b/src/components/table/table_header_cell.test.tsx
@@ -14,6 +14,12 @@ test('renders EuiTableHeaderCell', () => {
   expect(render(component)).toMatchSnapshot();
 });
 
+test('renders td when children is null/undefined', () => {
+  const component = render(<EuiTableHeaderCell {...requiredProps} />);
+
+  expect(component).toMatchSnapshot();
+});
+
 describe('align', () => {
   test('defaults to left', () => {
     const component = <EuiTableHeaderCell />;