Skip to content

Allow EuiText to generate a different element than div #7975

@sphilipse

Description

@sphilipse

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.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions