Skip to content

[EuiBadgeGroup] Issue with CSS specificity and margins of badges #6617

@elizabetdev

Description

@elizabetdev

When a gutter is added in EuiBadgeGroup like gutterSize="s" the margin inline should be overridden to 0 like:

image

This can be replicated here:

https://codesandbox.io/s/muddy-dust-juq2z7?file=/demo.tsx

But for some reason, in a few scenarios, the CSS's order of appearance makes the margin not overridden:

image

This can be replicated here:

https://codesandbox.io/s/intelligent-darwin-l1gk6s?file=/demo.js

To fix this we can improve the CSS to be more specific.

Metadata

Metadata

Assignees

Labels

No labels
No labels

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