From a0aafef4944bd8e33235948c5879221ec14b2fe3 Mon Sep 17 00:00:00 2001 From: Ken Date: Wed, 13 Sep 2023 09:52:06 +0200 Subject: [PATCH] :bug: Width fungerte ikke med inline-variant av skeleton --- .changeset/blue-deers-shout.md | 6 ++++ @navikt/core/css/skeleton.css | 4 +++ @navikt/core/react/src/skeleton/Skeleton.tsx | 1 + .../react/src/skeleton/skeleton.stories.tsx | 7 ++-- yarn.lock | 36 +++++++++---------- 5 files changed, 33 insertions(+), 21 deletions(-) create mode 100644 .changeset/blue-deers-shout.md diff --git a/.changeset/blue-deers-shout.md b/.changeset/blue-deers-shout.md new file mode 100644 index 00000000000..b5e05a50741 --- /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 ce65ef78f41..9ae43c9f7ef 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 3be89c6049a..01be5a601d8 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 394dbc626f6..df983c8dd6d 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? ), }; diff --git a/yarn.lock b/yarn.lock index 5c791ed2eb9..1c981ee289e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3585,7 +3585,7 @@ __metadata: languageName: node linkType: hard -"@navikt/aksel-icons@^5.4.0, @navikt/aksel-icons@workspace:@navikt/aksel-icons": +"@navikt/aksel-icons@^5.4.1, @navikt/aksel-icons@workspace:@navikt/aksel-icons": version: 0.0.0-use.local resolution: "@navikt/aksel-icons@workspace:@navikt/aksel-icons" dependencies: @@ -3612,8 +3612,8 @@ __metadata: version: 0.0.0-use.local resolution: "@navikt/aksel-stylelint@workspace:@navikt/aksel-stylelint" dependencies: - "@navikt/ds-css": ^5.4.0 - "@navikt/ds-tokens": ^5.4.0 + "@navikt/ds-css": ^5.4.1 + "@navikt/ds-tokens": ^5.4.1 "@types/jest": ^29.0.0 concurrently: 7.2.1 copyfiles: 2.4.1 @@ -3631,7 +3631,7 @@ __metadata: version: 0.0.0-use.local resolution: "@navikt/aksel@workspace:@navikt/aksel" dependencies: - "@navikt/ds-css": 5.4.0 + "@navikt/ds-css": 5.4.1 "@types/inquirer": ^9.0.3 "@types/jest": ^29.0.0 axios: 1.3.6 @@ -3655,11 +3655,11 @@ __metadata: languageName: unknown linkType: soft -"@navikt/ds-css@*, @navikt/ds-css@5.4.0, @navikt/ds-css@^5.4.0, @navikt/ds-css@workspace:@navikt/core/css": +"@navikt/ds-css@*, @navikt/ds-css@5.4.1, @navikt/ds-css@^5.4.1, @navikt/ds-css@workspace:@navikt/core/css": version: 0.0.0-use.local resolution: "@navikt/ds-css@workspace:@navikt/core/css" dependencies: - "@navikt/ds-tokens": ^5.4.0 + "@navikt/ds-tokens": ^5.4.1 cssnano: 6.0.0 fast-glob: 3.2.11 lodash: 4.17.21 @@ -3672,12 +3672,12 @@ __metadata: languageName: unknown linkType: soft -"@navikt/ds-react@*, @navikt/ds-react@5.4.0, @navikt/ds-react@^5.4.0, @navikt/ds-react@workspace:@navikt/core/react": +"@navikt/ds-react@*, @navikt/ds-react@5.4.1, @navikt/ds-react@^5.4.1, @navikt/ds-react@workspace:@navikt/core/react": version: 0.0.0-use.local resolution: "@navikt/ds-react@workspace:@navikt/core/react" dependencies: "@floating-ui/react": 0.24.1 - "@navikt/aksel-icons": ^5.4.0 + "@navikt/aksel-icons": ^5.4.1 "@radix-ui/react-tabs": 1.0.0 "@radix-ui/react-toggle-group": 1.0.0 "@testing-library/dom": 8.13.0 @@ -3711,11 +3711,11 @@ __metadata: languageName: unknown linkType: soft -"@navikt/ds-tailwind@^5.4.0, @navikt/ds-tailwind@workspace:@navikt/core/tailwind": +"@navikt/ds-tailwind@^5.4.1, @navikt/ds-tailwind@workspace:@navikt/core/tailwind": version: 0.0.0-use.local resolution: "@navikt/ds-tailwind@workspace:@navikt/core/tailwind" dependencies: - "@navikt/ds-tokens": ^5.4.0 + "@navikt/ds-tokens": ^5.4.1 "@types/jest": ^29.0.0 color: 4.2.3 jest: ^29.0.0 @@ -3726,7 +3726,7 @@ __metadata: languageName: unknown linkType: soft -"@navikt/ds-tokens@^5.4.0, @navikt/ds-tokens@workspace:@navikt/core/tokens": +"@navikt/ds-tokens@^5.4.1, @navikt/ds-tokens@workspace:@navikt/core/tokens": version: 0.0.0-use.local resolution: "@navikt/ds-tokens@workspace:@navikt/core/tokens" dependencies: @@ -8656,11 +8656,11 @@ __metadata: version: 0.0.0-use.local resolution: "aksel.nav.no@workspace:aksel.nav.no" dependencies: - "@navikt/aksel-icons": ^5.4.0 - "@navikt/ds-css": ^5.4.0 - "@navikt/ds-react": ^5.4.0 - "@navikt/ds-tailwind": ^5.4.0 - "@navikt/ds-tokens": ^5.4.0 + "@navikt/aksel-icons": ^5.4.1 + "@navikt/ds-css": ^5.4.1 + "@navikt/ds-react": ^5.4.1 + "@navikt/ds-tailwind": ^5.4.1 + "@navikt/ds-tokens": ^5.4.1 prettier-plugin-tailwindcss: ^0.2.3 languageName: unknown linkType: soft @@ -23785,8 +23785,8 @@ __metadata: version: 0.0.0-use.local resolution: "shadow-dom@workspace:examples/shadow-dom" dependencies: - "@navikt/ds-css": 5.4.0 - "@navikt/ds-react": 5.4.0 + "@navikt/ds-css": 5.4.1 + "@navikt/ds-react": 5.4.1 "@types/react": ^18.0.0 "@types/react-dom": ^18.0.0 "@vitejs/plugin-react": ^3.1.0