From bc3a1fe1227af9cca5ef50f0f328ef479d7fd2d5 Mon Sep 17 00:00:00 2001
From: Anish Aggarwal <anish17122000@gmail.com>
Date: Mon, 20 Jul 2020 23:08:18 +0530
Subject: [PATCH] Revert "[EuiStat] Allow customizing the render of the title
 and description HTML tags (#3693)"

This reverts commit 14dda39ce2aac9ba0b450a7b6caa2f6fef6bcb17.
---
 CHANGELOG.md                                  |  1 -
 .../stat/__snapshots__/stat.test.tsx.snap     | 49 -------------------
 src/components/stat/stat.test.tsx             | 25 ----------
 src/components/stat/stat.tsx                  | 36 +++-----------
 4 files changed, 6 insertions(+), 105 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8c9be4e6973..4af6dd7741b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,5 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-- Added `titleElement` and `descriptionElement` props to `EuiStat` ([#3693](https://github.com/elastic/eui/pull/3693))
 - Updated `securityAnalyticsApp` app icon ([#3720](https://github.com/elastic/eui/pull/3720))
 - Removed `src/test` and `@types/enzyme` references from `eui.d.ts` ([#3715](https://github.com/elastic/eui/pull/3715))
 - Added `index.d.ts` file to `lib/test`  and `es/test` ([#3715](https://github.com/elastic/eui/pull/3715))
diff --git a/src/components/stat/__snapshots__/stat.test.tsx.snap b/src/components/stat/__snapshots__/stat.test.tsx.snap
index 6f5d462139d..f837a4fce00 100644
--- a/src/components/stat/__snapshots__/stat.test.tsx.snap
+++ b/src/components/stat/__snapshots__/stat.test.tsx.snap
@@ -302,55 +302,6 @@ exports[`EuiStat props primary is rendered 1`] = `
 </div>
 `;
 
-exports[`EuiStat props render with custom description element 1`] = `
-<div
-  class="euiStat euiStat--leftAligned"
->
-  <div
-    class="euiText euiText--small euiStat__description"
-  >
-    <div
-      aria-hidden="true"
-    >
-      <div>
-        description
-      </div>
-    </div>
-  </div>
-  <p
-    aria-hidden="true"
-    class="euiTitle euiTitle--large euiStat__title"
-    style="color:#EB1919"
-  >
-    title
-  </p>
-</div>
-`;
-
-exports[`EuiStat props render with custom title element 1`] = `
-<div
-  class="euiStat euiStat--leftAligned"
->
-  <div
-    class="euiText euiText--small euiStat__description"
-  >
-    <p
-      aria-hidden="true"
-    >
-      description
-    </p>
-  </div>
-  <div
-    aria-hidden="true"
-    class="euiTitle euiTitle--large euiStat__title"
-  >
-    <div>
-      title
-    </div>
-  </div>
-</div>
-`;
-
 exports[`EuiStat props right is rendered 1`] = `
 <div
   class="euiStat euiStat--rightAligned"
diff --git a/src/components/stat/stat.test.tsx b/src/components/stat/stat.test.tsx
index 1bb755171f9..9eeb80c4064 100644
--- a/src/components/stat/stat.test.tsx
+++ b/src/components/stat/stat.test.tsx
@@ -89,31 +89,6 @@ describe('EuiStat', () => {
       expect(component).toMatchSnapshot();
     });
 
-    test('render with custom description element', () => {
-      const component = render(
-        <EuiStat
-          title="title"
-          description={<div>description</div>}
-          descriptionElement="div"
-          titleColor="#EB1919"
-        />
-      );
-
-      expect(component).toMatchSnapshot();
-    });
-
-    test('render with custom title element', () => {
-      const component = render(
-        <EuiStat
-          title={<div>title</div>}
-          titleElement="div"
-          description="description"
-        />
-      );
-
-      expect(component).toMatchSnapshot();
-    });
-
     TITLE_SIZES.forEach(size => {
       test(`${size} is rendered`, () => {
         const component = render(
diff --git a/src/components/stat/stat.tsx b/src/components/stat/stat.tsx
index 7052340d490..6bb93e6a322 100644
--- a/src/components/stat/stat.tsx
+++ b/src/components/stat/stat.tsx
@@ -22,7 +22,6 @@ import React, {
   HTMLAttributes,
   FunctionComponent,
   ReactNode,
-  createElement,
 } from 'react';
 import { CommonProps, keysOf } from '../common';
 import classNames from 'classnames';
@@ -83,14 +82,6 @@ export interface EuiStatProps {
    * Size of the title. See EuiTitle for options ('s', 'm', 'l'... etc)
    */
   titleSize?: EuiTitleSize;
-  /**
-   * HTML Element to be used for title
-   */
-  titleElement?: string;
-  /**
-   * HTML Element to be used for description
-   */
-  descriptionElement?: string;
 }
 
 export const EuiStat: FunctionComponent<
@@ -105,8 +96,6 @@ export const EuiStat: FunctionComponent<
   title,
   titleColor = 'default',
   titleSize = 'l',
-  titleElement = 'p',
-  descriptionElement = 'p',
   ...rest
 }) => {
   const classes = classNames(
@@ -123,32 +112,21 @@ export const EuiStat: FunctionComponent<
     }
   );
 
-  const commonProps = {
-    'aria-hidden': true,
-  };
-
   const descriptionDisplay = (
     <EuiText size="s" className="euiStat__description">
-      {createElement(descriptionElement, commonProps, description)}
+      <p aria-hidden="true">{description}</p>
     </EuiText>
   );
 
-  const titlePropsWithColor = {
-    'aria-hidden': true,
-    style: {
-      color: `${titleColor}`,
-    },
-  };
-
-  const titleChildren = isLoading ? '--' : title;
-
   const titleDisplay = isColorClass(titleColor) ? (
     <EuiTitle size={titleSize} className={titleClasses}>
-      {createElement(titleElement, commonProps, titleChildren)}
+      <p aria-hidden="true">{isLoading ? '--' : title}</p>
     </EuiTitle>
   ) : (
     <EuiTitle size={titleSize} className={titleClasses}>
-      {createElement(titleElement, titlePropsWithColor, titleChildren)}
+      <p aria-hidden="true" style={{ color: `${titleColor}` }}>
+        {isLoading ? '--' : title}
+      </p>
     </EuiTitle>
   );
 
@@ -171,9 +149,7 @@ export const EuiStat: FunctionComponent<
       {!reverse && descriptionDisplay}
       {titleDisplay}
       {reverse && descriptionDisplay}
-      {typeof title === 'string' &&
-        typeof description === 'string' &&
-        screenReader}
+      {screenReader}
     </Fragment>
   );