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`] = `
`;
-exports[`EuiStat props render with custom description element 1`] = `
-
-`;
-
-exports[`EuiStat props render with custom title element 1`] = `
-
-`;
-
exports[`EuiStat props right is rendered 1`] = `
{
expect(component).toMatchSnapshot();
});
- test('render with custom description element', () => {
- const component = render(
- description
}
- descriptionElement="div"
- titleColor="#EB1919"
- />
- );
-
- expect(component).toMatchSnapshot();
- });
-
- test('render with custom title element', () => {
- const component = render(
- title}
- 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 = (
- {createElement(descriptionElement, commonProps, description)}
+ {description}
);
- const titlePropsWithColor = {
- 'aria-hidden': true,
- style: {
- color: `${titleColor}`,
- },
- };
-
- const titleChildren = isLoading ? '--' : title;
-
const titleDisplay = isColorClass(titleColor) ? (
- {createElement(titleElement, commonProps, titleChildren)}
+ {isLoading ? '--' : title}
) : (
- {createElement(titleElement, titlePropsWithColor, titleChildren)}
+
+ {isLoading ? '--' : title}
+
);
@@ -171,9 +149,7 @@ export const EuiStat: FunctionComponent<
{!reverse && descriptionDisplay}
{titleDisplay}
{reverse && descriptionDisplay}
- {typeof title === 'string' &&
- typeof description === 'string' &&
- screenReader}
+ {screenReader}
);