refactor: fix nav item spacing (#2113)

* refactor: added spacing between icon and text * test: regenerated screenshots * refactor: fixed margin for full width --------- Co-authored-by: Maximilian Franzke <[email protected]> Co-authored-by: Nicolas Merget <[email protected]>
db-ui · Feb 12, 2024 · cf043f5 · cf043f5
1 parent 8dc98ce
commit cf043f5
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 6 deletions.
diff --git a/.../showcase/chromium/regular/neutral/DBNavigationItem-should-match-screenshot.png b/.../showcase/chromium/regular/neutral/DBNavigationItem-should-match-screenshot.png
diff --git a/...m/showcase/firefox/regular/neutral/DBNavigationItem-should-match-screenshot.png b/...m/showcase/firefox/regular/neutral/DBNavigationItem-should-match-screenshot.png
diff --git a/...case/mobile-chrome/regular/neutral/DBNavigationItem-should-match-screenshot.png b/...case/mobile-chrome/regular/neutral/DBNavigationItem-should-match-screenshot.png
diff --git a/...case/mobile-safari/regular/neutral/DBNavigationItem-should-match-screenshot.png b/...case/mobile-safari/regular/neutral/DBNavigationItem-should-match-screenshot.png
diff --git a/...em/showcase/webkit/regular/neutral/DBNavigationItem-should-match-screenshot.png b/...em/showcase/webkit/regular/neutral/DBNavigationItem-should-match-screenshot.png
diff --git a/packages/components/src/components/navigation-item/navigation-item.scss b/packages/components/src/components/navigation-item/navigation-item.scss
@@ -65,10 +65,6 @@
 	&:active {
 		@include colors.get-variant-bg-color(0.24);
 	}
-
-	&::after {
-		--db-icon-margin-start: auto;
-	}
 }
 
 .db-navigation-item {
@@ -117,11 +113,21 @@
 		font-weight: normal;
 	}
 
+	&:not([data-width="full"]) {
+		.db-navigation-item-expand-button {
+			&::after {
+				--db-icon-margin-start: #{variables.$db-spacing-fixed-sm};
+			}
+		}
+	}
+
 	&[data-width="full"] {
 		inline-size: 100%;
 
-		&::after {
-			--db-icon-margin-start: auto;
+		.db-navigation-item-expand-button {
+			&::after {
+				--db-icon-margin-start: auto;
+			}
 		}
 	}