fix: icon alignment for all [data-icon] (#2271)

db-ui · Feb 29, 2024 · d4b3fa4 · d4b3fa4
1 parent 86e073d
commit d4b3fa4
Show file tree

Hide file tree

Showing 7 changed files with 8 additions and 2 deletions.
diff --git a/...ots__/tabs/showcase/chromium/regular/neutral/DBTabs-should-match-screenshot.png b/...ots__/tabs/showcase/chromium/regular/neutral/DBTabs-should-match-screenshot.png
diff --git a/...hots__/tabs/showcase/firefox/regular/neutral/DBTabs-should-match-screenshot.png b/...hots__/tabs/showcase/firefox/regular/neutral/DBTabs-should-match-screenshot.png
diff --git a/.../tabs/showcase/mobile-chrome/regular/neutral/DBTabs-should-match-screenshot.png b/.../tabs/showcase/mobile-chrome/regular/neutral/DBTabs-should-match-screenshot.png
diff --git a/.../tabs/showcase/mobile-safari/regular/neutral/DBTabs-should-match-screenshot.png b/.../tabs/showcase/mobile-safari/regular/neutral/DBTabs-should-match-screenshot.png
diff --git a/...shots__/tabs/showcase/webkit/regular/neutral/DBTabs-should-match-screenshot.png b/...shots__/tabs/showcase/webkit/regular/neutral/DBTabs-should-match-screenshot.png
diff --git a/packages/components/src/components/icon/icon.scss b/packages/components/src/components/icon/icon.scss
@@ -3,8 +3,6 @@
 .db-icon {
 	@include icons.is-icon-text-replace();
 
-	display: flex;
-
 	/* Safari hack */
 	@supports (-webkit-hyphens: none) {
 		display: inline-block;

diff --git a/packages/foundations/scss/icons/include.scss b/packages/foundations/scss/icons/include.scss
@@ -51,6 +51,10 @@
 
 [data-icon],
 [data-icon-before] {
+	&:is(span) {
+		display: inline-flex;
+	}
+
 	&::before {
 		@extend %icon !optional;
 		margin-inline-end: icon-helpers.$default-icon-margin-end;
@@ -65,6 +69,10 @@
 }
 
 [data-icon-after] {
+	&:is(span) {
+		display: inline-flex;
+	}
+
 	&::after {
 		@extend %icon !optional;
 		content: icon-helpers.$default-icon-content-after;