Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow EuiText to generate a different element than div #7975

Closed
sphilipse opened this issue Aug 22, 2024 · 1 comment · Fixed by #7993
Closed

Allow EuiText to generate a different element than div #7975

sphilipse opened this issue Aug 22, 2024 · 1 comment · Fixed by #7993
Assignees

Comments

@sphilipse
Copy link
Member

sphilipse commented Aug 22, 2024

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.

@JasonStoltz
Copy link
Member

Adding an addition consideration here -- to make the typing reasonable, we should consider only supporting a subset of options -- p, span, and div, for instance

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants