When wrapped in EuiText, title size in EuiCollapsibleNavGroup is ignored

[tsullivan]

I'm seeing a strange issue when trying to use EuiCollapsibleNavGroup on a dark background.

This issue is reflected in the EUI Framework docs:
https://elastic.github.io/eui/#/navigation/collapsible-nav#collapsible-nav-group

It seems like in the example above, the title size of the last nav group should be relatively small since the titleSize attribute is s, but it is actually the largest title in the example.

In my example, I have markup that looks like:

const { euiTheme, colorMode } = useEuiTheme();

return (
  <EuiThemeProvider colorMode={colorMode === 'DARK' ? 'LIGHT' : 'DARK'}>
    <EuiCollapsibleNav
      css={{ background: euiTheme.colors.darkestShade }}
      ...collapsible_nav_props...
    >
      <EuiText color="default">
        <EuiCollapsibleNavGroup
          title="Recent"
          iconType="clock"
          isCollapsible={true}
          initialIsOpen={false}
        >
          <EuiSideNav items={recentItemsNav} />
        </EuiCollapsibleNavGroup>
      </EuiText>
    </EuiCollapsibleNav>
  </EuiThemeProvider>
);

The result is a nav group with a very large title:

Using any value of titleSize in the EuiCollapsibleNavGroup props does not seem to have any effect.

[ryankeairns]

This design was intentional as we had planned to use (and in some cases may still) use a large black button atop the light nav group. That said, we won't be using this dark version other than for the existing 'Manage my deployment' section.

Instead, we likely to need to have EuiCollapsibleNav and EuiSideNav components converted to Emotion in order to apply the theme in this manner. For the time being, just do it all in light/default mode.

Others, correct me if I'm wrong after my very quick pass.

[ryankeairns]

Presuming the prescribed path forward is to convert the nav components to Emotion, this issue can likely be closed in favor of these related issues:

Emotion conversions

• [Emotion] Global styles aren't overridden by color mode changes #6353
• [Emotion] EuiCollapsibleNav #6389
• [Emotion] EuiSideNav #6412

Kibana POC

For reference, here is the related issue in Kibana

• Side Nav Serverless Requirements for April Integration Checkpoint kibana#153945

[cee-chen]

#6353 would incidentally solve this issue, since we wouldn't need to wrap children in EuiText anymore, but I think this bug (titleSize behavior) is separate and needs to be investigated.

[cee-chen]

I took some time today to investigate this. A couple things:

This issue is reflected in the EUI Framework docs:
https://elastic.github.io/eui/#/navigation/collapsible-nav#collapsible-nav-group

This not actually the case. EUI's docs are working correctly. The dark mode EuiCollapsibleNavGroup has a titleSize="s" which is the largest possible title size that can be passed, and should be larger than all the other examples (that have a default titleSize of xxs).

The problem

To tweak the production example to display the issue, I've modified the CodeSandbox demo with a wrapping <EuiText> to show the problem on all 3 examples: https://codesandbox.io/s/nameless-wave-1trf5z?file=/demo.js

The cause of the unexpected title sizing is that EuiText opinionatedly sets default styles on all h1-h6 tags that, due to CSS specificity, overrides the flatter EuiTitle style sizing.

The fastest "solution"/workaround

The fastest workaround to this would be to simply not use the default h3 tag. It's probably not even semantically correct (though I'll need to check with @1Copenut on that). You can override the title tag/element this way:

<EuiCollapsibleNavGroup titleElement="span" />

Example of the above CodeSandbox with titleElement: https://codesandbox.io/s/relaxed-dawn-fxng5s?file=/demo.js

The actual/better solution

The better solution here would be to address why a wrapping EuiText is needed around the EuiCollapsibleNav in the first place. Why not use <EuiCollapsibleNavGroup background="dark" /> (which handles the title being colored correctly)?

Additionally, it's unclear to me why <EuiCollapsibleNav css={{ background: euiTheme.colors.darkestShade }}> is being used as opposed to forcing/wrapping another EuiThemeProvider with colorMode="dark". Is this a support issue on EUI's end for the new nav? Do we need to add a similar background="dark" prop to the parent EuiCollapsibleNav?

[github-actions]

👋 This issue hasn't seen activity in 3 days, so we're automatically closing this issue as answered. Please leave a comment if that's not the case, or if you have any remaining questions or issues.