elastic/kibana

Navigation side-bar border-top disappears on dark theme

Closed this issue · 7 comments

ek-so commented

Description
Visual bug, the description is here:
https://github.com/elastic/UX/issues/120#issuecomment-2389313420

Serverless project type:
Observability (but it's probably in other solutions as well)

Browser:
Chrome 128.0

Describe the bug:
Border top of navigation side-bar is inconsistent between light and dark theme.

Screenshots:
Light theme
Image

Dark Theme
Image

Steps to reproduce:

  1. Just switch between light and dark theme, and vice-versa, to notice it

Expected behavior:
I would expect that border, on dark theme, to be identical (lighter) to the right border of the side-bar, as it is on light theme

Additional context
It might be a bottom-border from the top bar instead of a border-top from navigation side-bar, not entirely sure

elasticmachine commented

Pinging @elastic/appex-sharedux (Team:SharedUX)

vitalymatyushik commented

good day!
I cannot check the issue (maybe not enough permissions) but maybe I can try contribute to the project?

ek-so commented

Hey @vitalymatyushik I have added a full description from the original issue

  • 👍1
vitalymatyushik commented

sorry, I have issues to follow the guide: it's failing with the message "[ERROR][elasticsearch-service] Unable to retrieve version information from Elasticsearch nodes." in the terminal and didn't open in the browser.
could you please advice if there is new instructions how to start the service locally?

paulinashakirova commented

The code related to this issue comes from the /eui/packages/eui/src/components/header/header.styles.ts where there is a separate logic for both themes. In the DARK theme the backgroundColor is used to define the bottom border color, whereas for the default theme the defaultBorderColor is used.

There is also a comment about this difference.

/**
 * The `dark` header is (currently) a bit of a special case. We don't
 * actually want to use <EuiThemeProvider colorMode="dark"> inside it
 * because that will affect popovers and `SelectableSitewideTemplate`
 * as well, which we do not necessarily want to do (?)
 *
 * It's also possible that the dark header will go away or become unused
 * by Kibana in the near future, at which point we can remove this
 */

I’d like to transfer the issue to EUI repo so that the team could check if this is intentional or if this is a bug.

Also, this can be reproduced in the eui documentation. See here.

  • 👍1
Dosant commented

sorry, I have issues to follow the guide: it's failing with the message "[ERROR][elasticsearch-service] Unable to retrieve version information from Elasticsearch nodes." in the terminal and didn't open in the browser. could you please advice if there is new instructions how to start the service locally?

@vitalymatyushik, thank you for your interest, but it turned out to be not a "good first issue", since the root cause is in another library and some further discussions are needed.

As for starting kibana, it seems that elasticsearch was not running (yarn es snapshot) and looks like this step is missing in legacy guide, sorry about that. You can follow this guide with mode details next time

  • 👍1
Dosant commented

I'll close the issue, as it looks like the fix will be completed on EUI side 🥳 elastic/eui#8067