Skip to content

[EuiIcon] Change mock from rendering <div> to <span> #3758

@cchaos

Description

@cchaos

Currently EuiIcon's mock renders their elements <div> because of the dynamics of the SVG imports. However, React's DOM validator complains when they see this <div>nested inside either inline or other elements that shouldn't have block elements inside, like <p>.

console.error
      Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>.
          in div (created by EuiIcon)
          in EuiIcon (created by Context.Consumer)
          in EuiI18n (created by EuiLink)
          in a (created by EuiLink)
          in EuiLink (created by InnerWorkspacePanel)
          in small (created by InnerWorkspacePanel)
          in p (created by InnerWorkspacePanel)

Kibana question:

Is Kibana's mock of EuiIcon provided by EUI directly, or does this also need to change in Kibana manually somewhere?

Metadata

Metadata

Assignees

No one assigned

    Labels

    good first issueiconstestingIssues or PRs that only affect tests - will not need changelog entries

    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