[EuiStat] Allow customizing the render of the title and description HTML tags

[cchaos]

The error occurs when in the Stat component in the description you add something other than plain text, for example I include my own component, doing this generates a <div> tag inside a <p>, for example:

<p><div></div></p>

This produces a problem with React validation, to be more exact it shows this warning in console:

Warning: validateDOMnesting (...): <div> cannot appear as a descendant of <p>.

Modifying the <p> tags by <span> fixes this error and so you can use custom components, even other Eui components within stats.

Originally posted by @victorst79 in #3673 (comment)

[cchaos]

Regarding the error, I thought that might be the case. EuiStat is pretty prescriptive with the elements it renders because they're being wrapped in EuiTitle and EuiText components which should be some level of text element (heading, paragraph, etc).

We will need to support some level of customizing these elements instead of just replacing the <p> tags with <span> tags. It will require updating props, TS types, tests, and docs.

Action item:

Add props like titleElement and descriptionElement to EuiStat and allow any(?) string to render that html tag as, defaulting to p.

[ashikmeerankutty]

If an element other than a string is provided. What could we do for the screen reader. When I provided a div it was showing [object Object]

eui/src/components/stat/stat.tsx

Lines 139 to 141 in c19ca9f

	<Fragment>
	{reverse ? `${title} ${description}` : `${description} ${title}`}
	</Fragment>

[shrey]

@cchaos The description just straight out displays the text written inside it, could you guide me as to how to reproduce the bug.

        <EuiStat
          title="7,600 mm"
          description="<div><p>Total people</p></div>"
        />

[ashikmeerankutty]

@cchaos The description just straight out displays the text written inside it, could you guide me as to how to reproduce the bug.

Check the console for a warning

[shrey]

@cchaos The description just straight out displays the text written inside it, could you guide me as to how to reproduce the bug.

Check the console for a warning

Still no warning though

[ashikmeerankutty]

You passed the component as string. The component is not rendered here.
Try this:

<EuiStat title="7,600 mm" description={<div>Hello</div>} />