Merge 714bb25 into f6fcf0c

navikt · Sep 13, 2023 · 337dbd5 · 337dbd5
2 parents f6fcf0c + 714bb25
commit 337dbd5
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 3 deletions.
diff --git a/.changeset/blue-deers-shout.md b/.changeset/blue-deers-shout.md
@@ -0,0 +1,6 @@
+---
+"@navikt/ds-react": patch
+"@navikt/ds-css": patch
+---
+
+Skeleton: Width fungerer nå med inline-variant av Skeleton
diff --git a/@navikt/core/css/skeleton.css b/@navikt/core/css/skeleton.css
@@ -5,6 +5,10 @@
   pointer-events: none;
 }
 
+.navds-skeleton--inline {
+  display: inline-block;
+}
+
 .navds-skeleton--has-children {
   color: transparent;
 }

diff --git a/@navikt/core/react/src/skeleton/Skeleton.tsx b/@navikt/core/react/src/skeleton/Skeleton.tsx
@@ -57,6 +57,7 @@ export const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(
             "navds-skeleton--has-children": Boolean(children),
             "navds-skeleton--no-height": !height,
             "navds-skeleton--no-width": !width,
+            "navds-skeleton--inline": As === "span",
           }
         )}
         style={{ ...style, width, height }}

diff --git a/@navikt/core/react/src/skeleton/skeleton.stories.tsx b/@navikt/core/react/src/skeleton/skeleton.stories.tsx
@@ -121,9 +121,10 @@ export const InlineText = {
   render: () => (
     <BodyLong>
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur
-      voluptas sint dolore <Skeleton as="span">omnis quia consequatur</Skeleton>{" "}
-      beatae vero cum officia debitis. Quidem debitis omnis reprehenderit nobis
-      rerum. Nulla, magnam? Saepe, eveniet?
+      voluptas sint dolore <Skeleton width="40px" as="span" variant="text" />{" "}
+      beatae vero cum officia debitis. Quidem debitis omnis reprehenderit nobis{" "}
+      <Skeleton as="span">test text</Skeleton> rerum. Nulla, magnam? Saepe,
+      eveniet?
     </BodyLong>
   ),
 };