diff --git a/CHANGELOG.md b/CHANGELOG.md index 63a0319afd9..bcac55a2482 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,6 @@ ## [`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 f837a4fce00..6f5d462139d 100644 --- a/src/components/stat/__snapshots__/stat.test.tsx.snap +++ b/src/components/stat/__snapshots__/stat.test.tsx.snap @@ -302,6 +302,55 @@ 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 6bb93e6a322..7052340d490 100644 --- a/src/components/stat/stat.tsx +++ b/src/components/stat/stat.tsx @@ -22,6 +22,7 @@ import React, { HTMLAttributes, FunctionComponent, ReactNode, + createElement, } from 'react'; import { CommonProps, keysOf } from '../common'; import classNames from 'classnames'; @@ -82,6 +83,14 @@ 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< @@ -96,6 +105,8 @@ export const EuiStat: FunctionComponent< title, titleColor = 'default', titleSize = 'l', + titleElement = 'p', + descriptionElement = 'p', ...rest }) => { const classes = classNames( @@ -112,21 +123,32 @@ export const EuiStat: FunctionComponent< } ); + const commonProps = { + 'aria-hidden': true, + }; + const descriptionDisplay = ( - + {createElement(descriptionElement, commonProps, description)} ); + const titlePropsWithColor = { + 'aria-hidden': true, + style: { + color: `${titleColor}`, + }, + }; + + const titleChildren = isLoading ? '--' : title; + const titleDisplay = isColorClass(titleColor) ? ( - + {createElement(titleElement, commonProps, titleChildren)} ) : ( - + {createElement(titleElement, titlePropsWithColor, titleChildren)} ); @@ -149,7 +171,9 @@ export const EuiStat: FunctionComponent< {!reverse && descriptionDisplay} {titleDisplay} {reverse && descriptionDisplay} - {screenReader} + {typeof title === 'string' && + typeof description === 'string' && + screenReader} );