eui
eui copied to clipboard
Allow EuiText to generate a different element than div
Is your feature request related to a problem? Please describe.
Right now EuiText generates a wrapping <div>. This is problematic when it's a child of a p, which generates console warnings in Kibana (and rightfully so). This occurs somewhat frequently when we have a parent (EUI) component generate a p, but we need to use an EuiText for styling purposes (color, size, general text alignment) inside the p and cannot use it to wrap the component, because the component is a composite. For instance in EuiCard, where description is always wrapped in p:
<EuiCard
title="Title"
description={
<EuiText color="subdued" size="s">
{description}
</EuiText>
}
/>
Describe the solution you'd like
Have EuiText take an optional prop (maybe called element) that can describe a different element than div to circumvent these errors. span seems like a good option.
Describe alternatives you've considered
Changing every wrapping component in EUI to not use p, or to accept its own optional element prop to change a p element. That seems very cumbersome and inexact.
Desired timeline Soon-ish, it's blocking us from resolving at least some errors in the frontend.