Pinging @elastic/eui-team (EUI)

I got a question regarding nested EuiThemeProviders (elastic/eui#6775). It seems adding the span elements will potentially end up with a nesting of block elements like divs within those inline span elements. Is that something you discussed, just wondering if you considered that sort of inline/block nesting fine for this case.

I got a question regarding nested EuiThemeProviders (elastic/eui#6775). It seems adding the span elements will potentially end up with a nesting of block elements like divs within those inline span elements. Is that something you discussed, just wondering if you considered that sort of inline/block nesting fine for this case.

Thanks for the super thoughtful and engaged question @walterra! The concept of "block" vs "inline" content no longer has any semantic meaning as of HTML5. It's now solely a presentational aspect of CSS (see MDN docs), and there is no longer any validation or concern around a block element nested within an inline wrapper.

In this case, I opted for an inline span element because I was trying to make the wrapper as unobtrusive as possible and as flexible for as many cases as possible. For block children, the inline span naturally wraps around them to become 100% width. For inline children (e.g. buttons), the span also wraps around them as naturally as possible without creating a new full-width context on the page.

That being said, yes, an escape hatch exists via the new <EuiThemeProvider wrapperProps> prop. If you specifically want your wrapper to display as a block, or flex, or grid, or what have you, you could do something like this:

<EuiThemeProvider wrapperProps={{ style: { display: 'block' } }}>

Or alternatively, if you're using the theme provider in a layout-sensitive context, e.g. as a flexbox or grid child, and the child of your EuiThemeProvider is a single element, you could use wrapperProps.cloneElement:

<EuiFlexGroup>
  <EuiThemeProvider colorMode="inverse" wrapperProps={{ cloneElement: true }}>
    <EuiFlexItem grow={false}> {/* only this wrapper will render */}
      // ...
    </EuiFlexItem>
  </EuiThemeProvider>
</EuiFlexGroup>

I'll do another pass here on this PR for usages of <EuiThemeProvider> to see if I can see in code where Kibana teams may need wrapperProps.cloneElement. Thanks for the reminder!

@elasticmachine merge upstream

@elasticmachine merge upstream

💚 Build Succeeded

• Buildkite Build
• Commit: 33d3bb7

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

History

• 💛 Build #131120 was flaky 8a5c0e4
• 💚 Build #131100 succeeded 95edaac
• 💚 Build #130919 succeeded 1500071
• 💚 Build #130596 succeeded 5f7e7f9
• 💔 Build #130346 failed 496358a
• 💔 Build #130317 failed 933ee11

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

cc @1Copenut