elastic/kibana

[Dev Tools] Small design issues in high contrast mode

Open

#217,547 opened on Apr 8, 2025

View on GitHubContributor guide
 (8 comments) (0 reactions) (0 assignees)TypeScript (8,021 forks)batch import
Feature:ConsoleFeature:Search ProfilerTeam:Kibana Managementgood first issue

Repository metrics

Stars
 (19,065 stars)
PR merge metrics
 (PR metrics pending)

Description

In high contrast mode, some of the Dev Tools components have double borders or rounded corners. This is because the EuiPanel always has a border in high contrast mode, even if it's set to have no shadow and no border. We could try to fix this by using div elements instead.

Contributor guide

Research direction
Locate the EuiPanel components in the Dev Tools codebase that cause double borders in high contrast mode. Replace them with plain div elements to avoid the forced border. Test across different components shown in screenshots.
Tech stack
typescriptreact
Domain
frontend
Issue type
Bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
Half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
ReactCSSGit
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70