From faacca5ff2c63d2e968250722030e5224f58968b Mon Sep 17 00:00:00 2001
From: Elain T <elain.tsai@graycore.io>
Date: Fri, 19 Jan 2024 15:52:32 -0500
Subject: [PATCH] feat(daffio): update api list item background color to
 animate via opacity (#2734)

---
 .../components/api-list/api-list-theme.scss   |  2 +-
 .../api-list/api-list.component.scss          | 38 ++++++++++++++++---
 .../src/scss/type-descriptors/_mixins.scss    |  1 -
 3 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/apps/daffio/src/app/api/components/api-list/api-list-theme.scss b/apps/daffio/src/app/api/components/api-list/api-list-theme.scss
index 994fe7123c..780c52a470 100644
--- a/apps/daffio/src/app/api/components/api-list/api-list-theme.scss
+++ b/apps/daffio/src/app/api/components/api-list/api-list-theme.scss
@@ -26,7 +26,7 @@
 				outline: none;
 			}
 
-			&:hover {
+			&:after {
 				background: daff-theme.daff-illuminate($base, $gray, 2);
 			}
 		}
diff --git a/apps/daffio/src/app/api/components/api-list/api-list.component.scss b/apps/daffio/src/app/api/components/api-list/api-list.component.scss
index f52c4ef23a..8925af61e7 100644
--- a/apps/daffio/src/app/api/components/api-list/api-list.component.scss
+++ b/apps/daffio/src/app/api/components/api-list/api-list.component.scss
@@ -1,6 +1,8 @@
 @use '../../../../scss/type-descriptors/mixins' as type-mixin;
 @use 'utilities' as daff;
 
+$api-list-item-border-radius: 4px;
+
 :host {
 	display: flex;
 	flex-direction: column;
@@ -33,7 +35,7 @@
 		}
 
 		> * {
-			@include daff.single-line-ellipsis();
+			@include daff.text-truncate();
 
 			@include daff.breakpoint(mobile) {
 				display: inline-block;
@@ -49,7 +51,7 @@
 		@include daff.breakpoint(tablet) {
 			grid-template-columns: repeat(2, 1fr);
 		}
-		
+
 		@include daff.breakpoint(small-laptop) {
 			grid-template-columns: repeat(3, 1fr);
 		}
@@ -58,15 +60,34 @@
 	&__item {
 		display: flex;
 		align-items: center;
-		border-radius: 4px;
+		border-radius: $api-list-item-border-radius;
 		justify-content: space-between;
 		overflow: hidden;
 		padding: 8px;
-		transition: background-color 300ms;
-}
+		position: relative;
+
+		&:after {
+			content: '';
+			border-radius: $api-list-item-border-radius;
+			position: absolute;
+			left: 0;
+			top: 0;
+			height: 100%;
+			width: 100%;
+			opacity: 0;
+			transition: opacity 300ms;
+			z-index: 1;
+		}
+
+		&:hover {
+			&:after {
+				opacity: 1;
+			}
+		}
+	}
 
 	&__item-name {
-		@include daff.single-line-ellipsis();
+		@include daff.text-truncate();
 	}
 
 	&__item-label {
@@ -75,4 +96,9 @@
 		padding: 4px;
 		margin-left: 16px;
 	}
+
+	&__item-name,
+	&__item-label {
+		z-index: 2;
+	}
 }
diff --git a/apps/daffio/src/scss/type-descriptors/_mixins.scss b/apps/daffio/src/scss/type-descriptors/_mixins.scss
index 486d549d3a..7ead582d91 100644
--- a/apps/daffio/src/scss/type-descriptors/_mixins.scss
+++ b/apps/daffio/src/scss/type-descriptors/_mixins.scss
@@ -19,7 +19,6 @@ $base-contrast: daff-theme.daff-map-deep-get(daff-theme.$theme, 'core.base-contr
 	font-size: 0.625rem;
 	box-sizing: border-box;
 	text-transform: uppercase;
-	transition: background-color 300ms;
 
 	&.class {
 		@include type-theming(daff-theme.daff-color($primary));