diff --git a/.changeset/blue-deers-shout.md b/.changeset/blue-deers-shout.md new file mode 100644 index 0000000000..b5e05a5074 --- /dev/null +++ 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 index ce65ef78f4..9ae43c9f7e 100644 --- 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 index 3be89c6049..01be5a601d 100644 --- a/@navikt/core/react/src/skeleton/Skeleton.tsx +++ b/@navikt/core/react/src/skeleton/Skeleton.tsx @@ -57,6 +57,7 @@ export const Skeleton = forwardRef( "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 index 394dbc626f..df983c8dd6 100644 --- 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: () => ( Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur - voluptas sint dolore omnis quia consequatur{" "} - beatae vero cum officia debitis. Quidem debitis omnis reprehenderit nobis - rerum. Nulla, magnam? Saepe, eveniet? + voluptas sint dolore {" "} + beatae vero cum officia debitis. Quidem debitis omnis reprehenderit nobis{" "} + test text rerum. Nulla, magnam? Saepe, + eveniet? ), };