Fix rule to override margin-inline-start for badges inside a `EuiBa…

…dgeGroup` (#6618) * Fix issue with CSS specificity and margins of badges * Adding CL
elastic · Feb 27, 2023 · 3479128 · 3479128
1 parent a4af8d6
commit 3479128
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 1 deletion.
diff --git a/src/components/badge/badge_group/badge_group.styles.ts b/src/components/badge/badge_group/badge_group.styles.ts
@@ -18,7 +18,7 @@ export const euiBadgeGroupStyles = ({ euiTheme }: UseEuiTheme) => {
       ${logicalCSS('max-width', '100%')}
 
       // Override the .euiBadge + .euiBadge CSS in badge.styles.ts
-      .euiBadge {
+      .euiBadge + .euiBadge {
         ${logicalCSS('margin-left', 0)}
       }
     `,

diff --git a/upcoming_changelogs/6618.md b/upcoming_changelogs/6618.md
@@ -0,0 +1 @@
+- Fix issue with badges appearing within an `EuiBadgeGroup`, where the CSS rule to override the `margin-inline-start` was not being applied correctly due to the order of appearance in the CSS rules
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		- Fix issue with badges appearing within an `EuiBadgeGroup`, where the CSS rule to override the `margin-inline-start` was not being applied correctly due to the order of appearance in the CSS rules