From 3d2b88f37fc29520ca76a9a8c9f3f51dcc40fac1 Mon Sep 17 00:00:00 2001
From: Eirik Backer <eirik.backer@gmail.com>
Date: Thu, 26 Sep 2024 13:54:05 +0200
Subject: [PATCH] fix(Skeleton): size of variant text (#2510)

Fixes #2471

---------

Co-authored-by: Tobias Barsnes <tobias.barsnes@digdir.no>
---
 packages/css/skeleton.css                     | 23 +++++++++++++++----
 .../loaders/Skeleton/Skeleton.stories.tsx     |  3 +--
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/packages/css/skeleton.css b/packages/css/skeleton.css
index 89efe43f30..1f6b1e1acc 100644
--- a/packages/css/skeleton.css
+++ b/packages/css/skeleton.css
@@ -1,9 +1,9 @@
 .ds-skeleton {
   --dsc-skeleton-animation-duration: 0.8s;
+  --dsc-skeleton-animation: ds-skeleton-opacity-fade var(--dsc-skeleton-animation-duration) linear infinite alternate;
   --dsc-skeleton-background: var(--ds-color-neutral-surface-default);
 
-  animation: ds-skeleton-opacity-fade var(--dsc-skeleton-animation-duration) linear infinite alternate;
-  background: var(--dsc-skeleton-background);
+  animation: var(--dsc-skeleton-animation);
   border-radius: min(1rem, var(--ds-border-radius-lg));
   box-sizing: border-box;
   display: block;
@@ -19,12 +19,22 @@
   }
 
   &[data-variant='text'] {
+    animation: none;
     border-radius: var(--ds-border-radius-full);
     height: auto;
-    margin-block: calc(1lh - 1em);
+    position: relative; /* So we can position ::after */
+
+    /* Render with ::after so we can add some space to top and bottom */
+    &::after {
+      content: '';
+      animation: var(--dsc-skeleton-animation);
+      border-radius: inherit;
+      inset: 20% 0;
+      position: absolute;
+    }
 
     &:empty::before {
-      content: '\00a0';
+      content: '\00a0'; /* Add non breaking space if empty so we follow line height */
     }
   }
 
@@ -44,7 +54,12 @@
   }
 }
 
+/* Animates background instead of opacity to make Axe Accessibility tests understand color: transparent is intentionally set */
 @keyframes ds-skeleton-opacity-fade {
+  from {
+    background: var(--dsc-skeleton-background);
+  }
+
   to {
     background: rgb(from var(--dsc-skeleton-background) r g b / 0.4);
   }
diff --git a/packages/react/src/components/loaders/Skeleton/Skeleton.stories.tsx b/packages/react/src/components/loaders/Skeleton/Skeleton.stories.tsx
index f7a98cd340..c6509e4c87 100644
--- a/packages/react/src/components/loaders/Skeleton/Skeleton.stories.tsx
+++ b/packages/react/src/components/loaders/Skeleton/Skeleton.stories.tsx
@@ -113,10 +113,9 @@ export const TextExample: StoryFn<typeof Text> = () => {
             <Skeleton variant='text'>Heading</Skeleton>
           </Heading>
           <Paragraph size='sm'>
-            <Skeleton variant='text' />
-
             <Skeleton variant='text' />
             <Skeleton variant='text' />
+            <Skeleton variant='text' width={80} />
           </Paragraph>
         </div>
       </div>