feat(design): update nav list background color to animate via opacity…

… for performance (#2583)
graycoreio · Oct 12, 2023 · bfccd2c · bfccd2c
1 parent 2059403
commit bfccd2c
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 12 deletions.
diff --git a/apps/design-land/src/app/list/list.component.html b/apps/design-land/src/app/list/list.component.html
@@ -6,7 +6,7 @@ <h2>Basic Lists</h2>
 <design-land-example-viewer-container example="basic-list"></design-land-example-viewer-container>
 
 <h2>Navigation Lists</h2>
-<p>Use <code>&lt;daff-nav-list&gt;</code> for navigation lists. <code>&lt;mat-list-item&gt;</code>should be added to an anchor tag directly.</p>
+<p>Use <code>&lt;daff-nav-list&gt;</code> for navigation lists. <code>&lt;daff-list-item&gt;</code>should be added to an anchor tag directly.</p>
 <design-land-example-viewer-container example="nav-list"></design-land-example-viewer-container>
 
 <h2>Multi-line Lists</h2>

diff --git a/libs/design/src/molecules/list/list/list-theme.scss b/libs/design/src/molecules/list/list/list-theme.scss
@@ -57,11 +57,14 @@
 
 	.daff-nav-list {
 		.daff-list-item {
-			background-color: $base;
-			transition: background-color 150ms;
+			&:after {
+				background-color: $base;
+			}
 
 			&:hover {
-				background-color: theming.daff-illuminate($base, $gray, 1);
+				&:after {
+					background-color: theming.daff-illuminate($base, $gray, 1);
+				}
 			}
 		}
 	}

diff --git a/libs/design/src/molecules/list/list/list.component.scss b/libs/design/src/molecules/list/list/list.component.scss
@@ -1,5 +1,6 @@
 @use '../../../../scss/typography' as t;
 @use '../../../../scss/interactions';
+@use '../../../../scss/layout';
 
 @mixin daff-list() {
 	$root: &;
@@ -10,6 +11,7 @@
 	.daff-list-item {
 		$root: &;
 		display: flex;
+		gap: 16px;
 		padding: 12px 16px;
 
 		&__content {
@@ -34,14 +36,7 @@
 		.daff-suffix {
 			display: flex;
 			align-items: center;
-		}
-
-		.daff-prefix {
-			margin-right: 24px;
-		}
-
-		.daff-suffix {
-			margin-left: 24px;
+			z-index: 2;
 		}
 	}
 }
@@ -103,5 +98,29 @@
 		@include interactions.clickable();
 		outline: none;
 		text-decoration: none;
+		position: relative;
+
+		&__content {
+			z-index: 2;
+		}
+
+		&:after {
+			content: '';
+			position: absolute;
+			height: 100%;
+			width: 100%;
+			top: 0;
+			left: 0;
+			opacity: 0;
+			transition: opacity 300ms;
+			z-index: 1;
+		}
+
+		&:hover,
+		&:active {
+			&:after {
+				opacity: 1;
+			}
+		}
 	}
 }