Skip to content

Navigation sidebar border-top disappears on dark theme #8067

@paulinashakirova

Description

@paulinashakirova

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

Impact and severity
Depends on whether this is a bug or is implemented this way by design.

To Reproduce
Steps to reproduce the behavior:

  1. Switch between dark and light themes

Expected behavior
The border, on dark theme, to be identical (lighter) to the right border of the side-bar, as it is on light theme.

Minimum reproducible sandbox
This can be reproduced in the documentation.

Screenshots
Image

Additional context
It seems that 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
 */

This issue was previously opened on Kibana's side, but 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.

Metadata

Metadata

Assignees

Labels

design decisionUse this to flag an item that needs input from the design team

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