Skip to content

[Metric] Conflicting styles for ul component from style leakage #2753

@nickofthyme

Description

@nickofthyme

Describe the issue

The Metric chart ul element can have conflicting styling inside of kibana.

<ul
role="list"
className="echMetricContainer"

To Reproduce
Steps to reproduce the behavior:

  1. Go to <kibana-url>/app/observability/cases
  2. Create a new case
  3. Click to add a Lens chart to the description.
  4. Create a simple metric chart.
  5. Save and return from Lens.
  6. Save and preview the chart.Expected behaviour
  7. Notice bad sytyles.

The ul element of the chart renders correctly in any kibana environment.

Screenshots

Image

Version (please complete the following information):

  • Elastic Charts: latest

Additional context

I think the best solution here is to add overrides overrides for the all possible offending styles to the .echMetricContainer.

.echMetricContainer {
  margin-inline-start: 0 !important;
}

We should also check for other usages of ul or li, etc and possibly add more robust styles to cover all components in charts.

Metadata

Metadata

Assignees

No one assigned

    Labels

    :metricRelated to Metric chart:stylingStyling related issuebugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions