EuiTitle wipes out className of cloned child

[cchaos]

EuiTitle is a component that doesn't wrap its children, but clones them applying the appropriate classes. However, it doesn't take into account if the child also has a className applied.

Example

Component code written as:

<EuiTitle size="s">
  <h3 className="myClass">My title</h3>
</EuiTitle>

Results in:

<h3 class="euiTitle euiTitle--small">My title</h3>

When it should be:

<h3 class="euiTitle euiTitle--small myClass">My title</h3>

---

Offending lines:

eui/src/components/title/title.tsx

Lines 38 to 50 in e3d4826

	const classes = classNames(
	'euiTitle',
	titleSizeToClassNameMap[size],
	textTransform ? textTransformToClassNameMap[textTransform] : undefined,
	className
	);
	const props = {
	className: classes,
	...rest,
	};
	return React.cloneElement(children, props);

[anishagg17]

@cchaos please assign me this issue. I am working on It

[myasonik]

@cchaos What do you think about EuiTitle taking a headingLevel param to not require html be passed in at all?

[cchaos]

I think that's out of scope for this issue and would require a larger refactor plus major breaking changes that I don't think are necessary given the wide usage of this component.