eui icon indicating copy to clipboard operation
eui copied to clipboard

Allow EuiText to generate a different element than div

Open sphilipse opened this issue 1 year ago • 0 comments

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.

sphilipse avatar Aug 22 '24 15:08 sphilipse