add additional element to hide text during opacity transition

GetJobber · Feb 26, 2025 · 42ceb9a · 42ceb9a
1 parent 2507013
commit 42ceb9a
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/packages/components/src/Chip/Chip.module.css b/packages/components/src/Chip/Chip.module.css
@@ -185,6 +185,15 @@
   height: 100%;
 }
 
+.truncateGradient > span {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 10%;
+  background-color: var(--chip-base-bg-color);
+}
+
 .truncateGradient::before,
 .truncateGradient::after {
   content: "";
@@ -196,7 +205,7 @@
 .truncateGradient::before {
   background: linear-gradient(
     to left,
-    var(--chip-base-bg-color) 5%,
+    var(--chip-base-bg-color) 10%,
     rgba(255, 255, 255, 0)
   );
   opacity: 1;
@@ -205,7 +214,7 @@
 .truncateGradient::after {
   background: linear-gradient(
     to left,
-    var(--chip-base-hover-bg-color) 5%,
+    var(--chip-base-hover-bg-color) 10%,
     rgba(255, 255, 255, 0)
   );
   opacity: 0;

diff --git a/packages/components/src/Chip/Chip.tsx b/packages/components/src/Chip/Chip.tsx
@@ -78,7 +78,9 @@ export const Chip = ({
             <div
               className={styles.truncateGradient}
               data-testid="ATL-Chip-Truncation-Gradient"
-            />
+            >
+              <span />
+            </div>
           )}
         </div>
         {suffix}