diff --git a/.changeset/large-dragons-joke.md b/.changeset/large-dragons-joke.md new file mode 100644 index 0000000000..3477d11a29 --- /dev/null +++ b/.changeset/large-dragons-joke.md @@ -0,0 +1,5 @@ +--- +"@navikt/ds-react": patch +--- + +Bleed: `marginInline='full'` og `reflectivePadding` kan nĂ¥ brukes sammen. diff --git a/@navikt/core/react/src/layout/bleed/Bleed.stories.tsx b/@navikt/core/react/src/layout/bleed/Bleed.stories.tsx index e326b0332d..dadfc2423c 100644 --- a/@navikt/core/react/src/layout/bleed/Bleed.stories.tsx +++ b/@navikt/core/react/src/layout/bleed/Bleed.stories.tsx @@ -272,6 +272,19 @@ export const Full = { + + + + + full + reflectivePadding + + + + ), diff --git a/@navikt/core/react/src/layout/utilities/css.ts b/@navikt/core/react/src/layout/utilities/css.ts index f7297ed618..27ac27055d 100644 --- a/@navikt/core/react/src/layout/utilities/css.ts +++ b/@navikt/core/react/src/layout/utilities/css.ts @@ -44,6 +44,9 @@ const translateTokenStringToCSS = ( if (componentProp === "margin-inline" && x === "full") { const width = 100 / arr.length; return `calc((100vw - ${width}%)/-2)`; + } else if (componentProp === "padding-inline" && x === "full") { + const width = 100 / arr.length; + return `calc((100vw - ${width}%)/2)`; } let output = `var(--a-${tokenSubgroup}-${x})`;