From a862b27449a47ec1fba6a12ed5b3135279b9ce7f Mon Sep 17 00:00:00 2001 From: Ken Date: Wed, 12 Jun 2024 14:27:06 +0200 Subject: [PATCH 01/24] feat: Implemented baseprimitive in box --- @navikt/core/css/primitives/box.css | 38 ----- .../react/src/layout/base/BasePrimitive.tsx | 46 +++++- .../core/react/src/layout/box/Box.stories.tsx | 10 ++ @navikt/core/react/src/layout/box/Box.tsx | 131 +++++++----------- .../core/react/src/util/types/AsChildProps.ts | 1 + 5 files changed, 103 insertions(+), 123 deletions(-) diff --git a/@navikt/core/css/primitives/box.css b/@navikt/core/css/primitives/box.css index bbd8f09d63..e8f7d278da 100644 --- a/@navikt/core/css/primitives/box.css +++ b/@navikt/core/css/primitives/box.css @@ -1,25 +1,4 @@ .navds-box { - --__ac-box-padding-xs: initial; - --__ac-box-padding-sm: var(--__ac-box-padding-xs); - --__ac-box-padding-md: var(--__ac-box-padding-sm); - --__ac-box-padding-lg: var(--__ac-box-padding-md); - --__ac-box-padding-xl: var(--__ac-box-padding-lg); - --__ac-box-padding-2xl: var(--__ac-box-padding-xl); - --__ac-box-padding-inline-xs: initial; - --__ac-box-padding-inline-sm: var(--__ac-box-padding-inline-xs); - --__ac-box-padding-inline-md: var(--__ac-box-padding-inline-sm); - --__ac-box-padding-inline-lg: var(--__ac-box-padding-inline-md); - --__ac-box-padding-inline-xl: var(--__ac-box-padding-inline-lg); - --__ac-box-padding-inline-2xl: var(--__ac-box-padding-inline-xl); - --__ac-box-padding-block-xs: initial; - --__ac-box-padding-block-sm: var(--__ac-box-padding-block-xs); - --__ac-box-padding-block-md: var(--__ac-box-padding-block-sm); - --__ac-box-padding-block-lg: var(--__ac-box-padding-block-md); - --__ac-box-padding-block-xl: var(--__ac-box-padding-block-lg); - --__ac-box-padding-block-2xl: var(--__ac-box-padding-block-xl); - --__ac-box-padding: var(--__ac-box-padding-xs); - --__ac-box-padding-inline: var(--__ac-box-padding-inline-xs); - --__ac-box-padding-block: var(--__ac-box-padding-block-xs); --__ac-box-background: initial; --__ac-box-border-color: initial; --__ac-box-shadow: initial; @@ -32,8 +11,6 @@ --__ac-box-border-radius-2xl: var(--__ac-box-border-radius-xl); --__ac-box-border-radius: var(--__ac-box-border-radius-xs); - padding-inline: var(--__ac-box-padding-inline, var(--__ac-box-padding)); - padding-block: var(--__ac-box-padding-block, var(--__ac-box-padding)); background-color: var(--__ac-box-background); border-style: solid; border-color: var(--__ac-box-border-color); @@ -44,45 +21,30 @@ @media (min-width: 480px) { .navds-box { - --__ac-box-padding: var(--__ac-box-padding-sm); - --__ac-box-padding-inline: var(--__ac-box-padding-inline-sm); - --__ac-box-padding-block: var(--__ac-box-padding-block-sm); --__ac-box-border-radius: var(--__ac-box-border-radius-sm); } } @media (min-width: 768px) { .navds-box { - --__ac-box-padding: var(--__ac-box-padding-md); - --__ac-box-padding-inline: var(--__ac-box-padding-inline-md); - --__ac-box-padding-block: var(--__ac-box-padding-block-md); --__ac-box-border-radius: var(--__ac-box-border-radius-md); } } @media (min-width: 1024px) { .navds-box { - --__ac-box-padding: var(--__ac-box-padding-lg); - --__ac-box-padding-inline: var(--__ac-box-padding-inline-lg); - --__ac-box-padding-block: var(--__ac-box-padding-block-lg); --__ac-box-border-radius: var(--__ac-box-border-radius-lg); } } @media (min-width: 1280px) { .navds-box { - --__ac-box-padding: var(--__ac-box-padding-xl); - --__ac-box-padding-inline: var(--__ac-box-padding-inline-xl); - --__ac-box-padding-block: var(--__ac-box-padding-block-xl); --__ac-box-border-radius: var(--__ac-box-border-radius-xl); } } @media (min-width: 1440px) { .navds-box { - --__ac-box-padding: var(--__ac-box-padding-2xl); - --__ac-box-padding-inline: var(--__ac-box-padding-inline-2xl); - --__ac-box-padding-block: var(--__ac-box-padding-block-2xl); --__ac-box-border-radius: var(--__ac-box-border-radius-2xl); } } diff --git a/@navikt/core/react/src/layout/base/BasePrimitive.tsx b/@navikt/core/react/src/layout/base/BasePrimitive.tsx index 2fc7e6a49e..cdfb9e95ca 100644 --- a/@navikt/core/react/src/layout/base/BasePrimitive.tsx +++ b/@navikt/core/react/src/layout/base/BasePrimitive.tsx @@ -4,8 +4,7 @@ import { Slot } from "../../util/Slot"; import { getResponsiveProps, getResponsiveValue } from "../utilities/css"; import { ResponsiveProp, SpacingScale } from "../utilities/types"; -export interface BasePrimitiveProps { - children: React.ReactElement; +export interface PrimtiveBaseProps { className?: string; /** * Padding around children. @@ -16,6 +15,45 @@ export interface BasePrimitiveProps { * padding={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}} */ padding?: ResponsiveProp; + /** + * margin around children. + * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213) + * or an object of spacing tokens for different breakpoints. + * @example + * margin='4' + * margin={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}} + */ + margin?: ResponsiveProp; + /** + * Horizontal margin around children. + * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213) + * or an object of spacing tokens for different breakpoints. + * @example + * marginInline='4' + * marginInline='4 5' + * marginInline={{xs: '0 32', sm: '3', md: '4 5', lg: '5', xl: '6'}} + */ + marginInline?: ResponsiveProp< + | SpacingScale + | `${SpacingScale} ${SpacingScale}` + | `auto ${SpacingScale}` + | `${SpacingScale} auto` + >; + /** + * Vertical margin around children. + * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213) + * or an object of spacing tokens for different breakpoints. + * @example + * marginBlock='4' + * marginBlock='4 5' + * marginBlock={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}} + */ + marginBlock?: ResponsiveProp< + | SpacingScale + | `${SpacingScale} ${SpacingScale}` + | `auto ${SpacingScale}` + | `${SpacingScale} auto` + >; /** * Horizontal padding around children. * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213) @@ -142,6 +180,10 @@ export interface BasePrimitiveProps { flexGrow?: ResponsiveProp; } +export interface BasePrimitiveProps extends PrimtiveBaseProps { + children: React.ReactElement; +} + export const BasePrimitive = ({ children, className, diff --git a/@navikt/core/react/src/layout/box/Box.stories.tsx b/@navikt/core/react/src/layout/box/Box.stories.tsx index 297c863487..ab2b148dcd 100644 --- a/@navikt/core/react/src/layout/box/Box.stories.tsx +++ b/@navikt/core/react/src/layout/box/Box.stories.tsx @@ -380,6 +380,16 @@ export const PaddingDemo = () => ( ); +export const AsChild = () => ( + + + + + +); + export const Chromatic: Story = { render: () => ( diff --git a/@navikt/core/react/src/layout/box/Box.tsx b/@navikt/core/react/src/layout/box/Box.tsx index 0f36ad992a..387c5b3ef5 100644 --- a/@navikt/core/react/src/layout/box/Box.tsx +++ b/@navikt/core/react/src/layout/box/Box.tsx @@ -1,6 +1,7 @@ -import cl from "clsx"; import React, { forwardRef } from "react"; -import { OverridableComponent } from "../../util/types"; +import { Slot } from "../../util/Slot"; +import { AsChildProps, OverridableComponent } from "../../util/types"; +import BasePrimitive, { PrimtiveBaseProps } from "../base/BasePrimitive"; import { getResponsiveProps } from "../utilities/css"; import { BackgroundColorToken, @@ -9,77 +10,45 @@ import { ResponsiveProp, ShadowToken, SpaceDelimitedAttribute, - SpacingScale, SurfaceColorToken, } from "../utilities/types"; -export interface BoxProps extends React.HTMLAttributes { - /** - * CSS `background-color` property. - * Accepts a [background/surface color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#afff774dad80). - */ - background?: BackgroundColorToken | SurfaceColorToken; - /** - * CSS `border-color` property. - * Accepts a [border color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#adb1767e2f87). - */ - borderColor?: BorderColorToken; - /** - * CSS `border-radius` property. - * Accepts a [radius token](https://aksel.nav.no/grunnleggende/styling/design-tokens#6d79c5605d31) - * or an object of radius tokens for different breakpoints. - * @example - * borderRadius='full' - * borderRadius='0 full large small' - * borderRadius={{xs: 'small large', sm: '0', md: 'large', lg: 'full'}} - */ - borderRadius?: ResponsiveProp>; - /** - * CSS `border-width` property. If this is not set there will be no border. - * @example - * borderWidth='2' - * borderWidth='1 2 3 4' - */ - borderWidth?: SpaceDelimitedAttribute<"0" | "1" | "2" | "3" | "4" | "5">; - /** - * Padding around children. - * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213) - * or an object of spacing tokens for different breakpoints. - * @example - * padding='4' - * padding={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}} - */ - padding?: ResponsiveProp; - /** - * Horizontal padding around children. - * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213) - * or an object of spacing tokens for different breakpoints. - * @example - * paddingInline='4' - * paddingInline='4 5' - * paddingInline={{xs: '0 32', sm: '3', md: '4 5', lg: '5', xl: '6'}} - */ - paddingInline?: ResponsiveProp< - SpacingScale | `${SpacingScale} ${SpacingScale}` - >; - /** - * Vertical padding around children. - * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213) - * or an object of spacing tokens for different breakpoints. - * @example - * paddingBlock='4' - * paddingBlock='4 5' - * paddingBlock={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}} - */ - paddingBlock?: ResponsiveProp< - SpacingScale | `${SpacingScale} ${SpacingScale}` - >; - /** Shadow on box. Accepts a shadow token. - * @example - * shadow='small' - */ - shadow?: ShadowToken; -} +export type BoxProps = PrimtiveBaseProps & + AsChildProps & + React.HTMLAttributes & { + /** + * CSS `background-color` property. + * Accepts a [background/surface color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#afff774dad80). + */ + background?: BackgroundColorToken | SurfaceColorToken; + /** + * CSS `border-color` property. + * Accepts a [border color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#adb1767e2f87). + */ + borderColor?: BorderColorToken; + /** + * CSS `border-radius` property. + * Accepts a [radius token](https://aksel.nav.no/grunnleggende/styling/design-tokens#6d79c5605d31) + * or an object of radius tokens for different breakpoints. + * @example + * borderRadius='full' + * borderRadius='0 full large small' + * borderRadius={{xs: 'small large', sm: '0', md: 'large', lg: 'full'}} + */ + borderRadius?: ResponsiveProp>; + /** + * CSS `border-width` property. If this is not set there will be no border. + * @example + * borderWidth='2' + * borderWidth='1 2 3 4' + */ + borderWidth?: SpaceDelimitedAttribute<"0" | "1" | "2" | "3" | "4" | "5">; + /** Shadow on box. Accepts a shadow token. + * @example + * shadow='small' + */ + shadow?: ShadowToken; + }; /** * Foundational Layout-primitive for generic encapsulation & styling. @@ -111,17 +80,15 @@ export interface BoxProps extends React.HTMLAttributes { export const Box: OverridableComponent = forwardRef( ( { + children, as: Component = "div", background, borderColor, borderWidth, borderRadius, - className, - padding, - paddingInline, - paddingBlock, shadow, style: _style, + asChild, ...rest }, ref, @@ -149,18 +116,16 @@ export const Box: OverridableComponent = forwardRef( false, ["0"], ), - ...getResponsiveProps("box", "padding", "spacing", padding), - ...getResponsiveProps("box", "padding-inline", "spacing", paddingInline), - ...getResponsiveProps("box", "padding-block", "spacing", paddingBlock), }; + const Comp = asChild ? Slot : Component; + return ( - + + + {children} + + ); }, ); diff --git a/@navikt/core/react/src/util/types/AsChildProps.ts b/@navikt/core/react/src/util/types/AsChildProps.ts index b291dbb12a..549175f1fa 100644 --- a/@navikt/core/react/src/util/types/AsChildProps.ts +++ b/@navikt/core/react/src/util/types/AsChildProps.ts @@ -16,6 +16,7 @@ export type AsChildProps = * ``` */ asChild: true; + as?: never; } | { children: React.ReactNode; From 9927ead2d468471714e8f0f20a6e67c70feb5690 Mon Sep 17 00:00:00 2001 From: Ken Date: Wed, 12 Jun 2024 14:49:28 +0200 Subject: [PATCH 02/24] refactor: segmented box-features into classes --- @navikt/core/css/primitives/box.css | 38 +++++++++++++------ .../core/react/src/layout/box/Box.stories.tsx | 6 +-- @navikt/core/react/src/layout/box/Box.tsx | 14 ++++++- 3 files changed, 42 insertions(+), 16 deletions(-) diff --git a/@navikt/core/css/primitives/box.css b/@navikt/core/css/primitives/box.css index e8f7d278da..93579e7fdf 100644 --- a/@navikt/core/css/primitives/box.css +++ b/@navikt/core/css/primitives/box.css @@ -1,8 +1,23 @@ -.navds-box { +.navds-box-bg { --__ac-box-background: initial; + + background-color: var(--__ac-box-background); +} + +.navds-box-border-color { --__ac-box-border-color: initial; - --__ac-box-shadow: initial; + + border-color: var(--__ac-box-border-color); +} + +.navds-box-border-width { --__ac-box-border-width: initial; + + border-style: solid; + border-width: var(--__ac-box-border-width, 0); +} + +.navds-box-border-radius { --__ac-box-border-radius-xs: initial; --__ac-box-border-radius-sm: var(--__ac-box-border-radius-xs); --__ac-box-border-radius-md: var(--__ac-box-border-radius-sm); @@ -11,40 +26,41 @@ --__ac-box-border-radius-2xl: var(--__ac-box-border-radius-xl); --__ac-box-border-radius: var(--__ac-box-border-radius-xs); - background-color: var(--__ac-box-background); - border-style: solid; - border-color: var(--__ac-box-border-color); border-radius: var(--__ac-box-border-radius); +} + +.navds-box-shadow { + --__ac-box-shadow: initial; + box-shadow: var(--__ac-box-shadow); - border-width: var(--__ac-box-border-width, 0); } @media (min-width: 480px) { - .navds-box { + .navds-box-border-radius { --__ac-box-border-radius: var(--__ac-box-border-radius-sm); } } @media (min-width: 768px) { - .navds-box { + .navds-box-border-radius { --__ac-box-border-radius: var(--__ac-box-border-radius-md); } } @media (min-width: 1024px) { - .navds-box { + .navds-box-border-radius { --__ac-box-border-radius: var(--__ac-box-border-radius-lg); } } @media (min-width: 1280px) { - .navds-box { + .navds-box-border-radius { --__ac-box-border-radius: var(--__ac-box-border-radius-xl); } } @media (min-width: 1440px) { - .navds-box { + .navds-box-border-radius { --__ac-box-border-radius: var(--__ac-box-border-radius-2xl); } } diff --git a/@navikt/core/react/src/layout/box/Box.stories.tsx b/@navikt/core/react/src/layout/box/Box.stories.tsx index ab2b148dcd..a781fd46b5 100644 --- a/@navikt/core/react/src/layout/box/Box.stories.tsx +++ b/@navikt/core/react/src/layout/box/Box.stories.tsx @@ -382,10 +382,8 @@ export const PaddingDemo = () => ( export const AsChild = () => ( - - + + ); diff --git a/@navikt/core/react/src/layout/box/Box.tsx b/@navikt/core/react/src/layout/box/Box.tsx index 387c5b3ef5..0687cde311 100644 --- a/@navikt/core/react/src/layout/box/Box.tsx +++ b/@navikt/core/react/src/layout/box/Box.tsx @@ -1,3 +1,4 @@ +import cl from "clsx"; import React, { forwardRef } from "react"; import { Slot } from "../../util/Slot"; import { AsChildProps, OverridableComponent } from "../../util/types"; @@ -122,7 +123,18 @@ export const Box: OverridableComponent = forwardRef( return ( - + {children} From a0ee7fe3fdd677e5b2cc68d0bf25b976951dc215 Mon Sep 17 00:00:00 2001 From: Ken Date: Wed, 12 Jun 2024 14:55:57 +0200 Subject: [PATCH 03/24] feat: Implemented baseprimitive margin css --- @navikt/core/css/primitives/base.css | 96 +++++++++++++++++++ .../react/src/layout/base/BasePrimitive.tsx | 11 +++ 2 files changed, 107 insertions(+) diff --git a/@navikt/core/css/primitives/base.css b/@navikt/core/css/primitives/base.css index ef70966708..ed15a49c8d 100644 --- a/@navikt/core/css/primitives/base.css +++ b/@navikt/core/css/primitives/base.css @@ -34,6 +34,42 @@ padding-block: var(--__ac-r-pb); } +.navds-r-m { + --__ac-r-m-xs: initial; + --__ac-r-m-sm: var(--__ac-r-m-xs); + --__ac-r-m-md: var(--__ac-r-m-sm); + --__ac-r-m-lg: var(--__ac-r-m-md); + --__ac-r-m-xl: var(--__ac-r-m-lg); + --__ac-r-m-2xl: var(--__ac-r-m-xl); + --__ac-r-margin: var(--__ac-r-m-xs); + + margin: var(--__ac-r-margin); +} + +.navds-r-mi { + --__ac-r-mi-xs: initial; + --__ac-r-mi-sm: var(--__ac-r-mi-xs); + --__ac-r-mi-md: var(--__ac-r-mi-sm); + --__ac-r-mi-lg: var(--__ac-r-mi-md); + --__ac-r-mi-xl: var(--__ac-r-mi-lg); + --__ac-r-mi-2xl: var(--__ac-r-mi-xl); + --__ac-r-mi: var(--__ac-r-mi-xs); + + margin-inline: var(--__ac-r-mi); +} + +.navds-r-mb { + --__ac-r-mb-xs: initial; + --__ac-r-mb-sm: var(--__ac-r-mb-xs); + --__ac-r-mb-md: var(--__ac-r-mb-sm); + --__ac-r-mb-lg: var(--__ac-r-mb-md); + --__ac-r-mb-xl: var(--__ac-r-mb-lg); + --__ac-r-mb-2xl: var(--__ac-r-mb-xl); + --__ac-r-mb: var(--__ac-r-mb-xs); + + margin-block: var(--__ac-r-mb); +} + .navds-r-w { --__ac-r-w-xs: initial; --__ac-r-w-sm: var(--__ac-r-w-xs); @@ -263,6 +299,18 @@ --__ac-r-pb: var(--__ac-r-pb-sm); } + .navds-r-m { + --__ac-r-margin: var(--__ac-r-p-sm); + } + + .navds-r-mi { + --__ac-r-mi: var(--__ac-r-mi-sm); + } + + .navds-r-mb { + --__ac-r-mb: var(--__ac-r-mb-sm); + } + .navds-r-w { --__ac-r-w: var(--__ac-r-w-sm); } @@ -349,6 +397,18 @@ --__ac-r-pb: var(--__ac-r-pb-md); } + .navds-r-m { + --__ac-r-margin: var(--__ac-r-p-md); + } + + .navds-r-mi { + --__ac-r-mi: var(--__ac-r-mi-md); + } + + .navds-r-mb { + --__ac-r-mb: var(--__ac-r-mb-md); + } + .navds-r-w { --__ac-r-w: var(--__ac-r-w-md); } @@ -435,6 +495,18 @@ --__ac-r-pb: var(--__ac-r-pb-lg); } + .navds-r-m { + --__ac-r-margin: var(--__ac-r-p-lg); + } + + .navds-r-mi { + --__ac-r-mi: var(--__ac-r-mi-lg); + } + + .navds-r-mb { + --__ac-r-mb: var(--__ac-r-mb-lg); + } + .navds-r-w { --__ac-r-w: var(--__ac-r-w-lg); } @@ -521,6 +593,18 @@ --__ac-r-pb: var(--__ac-r-pb-xl); } + .navds-r-m { + --__ac-r-margin: var(--__ac-r-p-xl); + } + + .navds-r-mi { + --__ac-r-mi: var(--__ac-r-mi-xl); + } + + .navds-r-mb { + --__ac-r-mb: var(--__ac-r-mb-xl); + } + .navds-r-w { --__ac-r-w: var(--__ac-r-w-xl); } @@ -607,6 +691,18 @@ --__ac-r-pb: var(--__ac-r-pb-2xl); } + .navds-r-m { + --__ac-r-margin: var(--__ac-r-p-2xl); + } + + .navds-r-mi { + --__ac-r-mi: var(--__ac-r-mi-2xl); + } + + .navds-r-mb { + --__ac-r-mb: var(--__ac-r-mb-2xl); + } + .navds-r-w { --__ac-r-w: var(--__ac-r-w-2xl); } diff --git a/@navikt/core/react/src/layout/base/BasePrimitive.tsx b/@navikt/core/react/src/layout/base/BasePrimitive.tsx index cdfb9e95ca..544185053b 100644 --- a/@navikt/core/react/src/layout/base/BasePrimitive.tsx +++ b/@navikt/core/react/src/layout/base/BasePrimitive.tsx @@ -190,6 +190,9 @@ export const BasePrimitive = ({ padding, paddingInline, paddingBlock, + margin, + marginInline, + marginBlock, width, minWidth, maxWidth, @@ -214,6 +217,11 @@ export const BasePrimitive = ({ ...getResponsiveProps("r", "p", "spacing", padding), ...getResponsiveProps("r", "pi", "spacing", paddingInline), ...getResponsiveProps("r", "pb", "spacing", paddingBlock), + /* Margin */ + /* TODO: Unable to handle spacingscale + "auto" combination right now */ + ...getResponsiveProps("r", "m", "spacing", margin), + ...getResponsiveProps("r", "mi", "spacing", marginInline), + ...getResponsiveProps("r", "mb", "spacing", marginBlock), /* Width & height */ ...getResponsiveValue("r", "w", width), ...getResponsiveValue("r", "minw", minWidth), @@ -245,6 +253,9 @@ export const BasePrimitive = ({ "navds-r-p": padding, "navds-r-pi": paddingInline, "navds-r-pb": paddingBlock, + "navds-r-m": margin, + "navds-r-mi": marginInline, + "navds-r-mb": marginBlock, "navds-r-w": width, "navds-r-minw": minWidth, "navds-r-maxw": maxWidth, From 5f0881c55a60903fbbf902cb338431bf01c28926 Mon Sep 17 00:00:00 2001 From: Ken Date: Thu, 13 Jun 2024 11:06:14 +0200 Subject: [PATCH 04/24] refactor: Correctly allow box with no children when no asChild is used --- .../react/src/layout/base/BasePrimitive.tsx | 75 +++++++++++++------ .../src/layout/base/PrimitiveWithAsChild.ts | 40 ++++++++++ @navikt/core/react/src/layout/box/Box.tsx | 13 +++- 3 files changed, 100 insertions(+), 28 deletions(-) create mode 100644 @navikt/core/react/src/layout/base/PrimitiveWithAsChild.ts diff --git a/@navikt/core/react/src/layout/base/BasePrimitive.tsx b/@navikt/core/react/src/layout/base/BasePrimitive.tsx index 544185053b..d1c5b21bb5 100644 --- a/@navikt/core/react/src/layout/base/BasePrimitive.tsx +++ b/@navikt/core/react/src/layout/base/BasePrimitive.tsx @@ -15,6 +15,30 @@ export interface PrimtiveBaseProps { * padding={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}} */ padding?: ResponsiveProp; + /** + * Horizontal padding around children. + * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213) + * or an object of spacing tokens for different breakpoints. + * @example + * paddingInline='4' + * paddingInline='4 5' + * paddingInline={{xs: '0 32', sm: '3', md: '4 5', lg: '5', xl: '6'}} + */ + paddingInline?: ResponsiveProp< + SpacingScale | `${SpacingScale} ${SpacingScale}` + >; + /** + * Vertical padding around children. + * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213) + * or an object of spacing tokens for different breakpoints. + * @example + * paddingBlock='4' + * paddingBlock='4 5' + * paddingBlock={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}} + */ + paddingBlock?: ResponsiveProp< + SpacingScale | `${SpacingScale} ${SpacingScale}` + >; /** * margin around children. * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213) @@ -54,30 +78,6 @@ export interface PrimtiveBaseProps { | `auto ${SpacingScale}` | `${SpacingScale} auto` >; - /** - * Horizontal padding around children. - * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213) - * or an object of spacing tokens for different breakpoints. - * @example - * paddingInline='4' - * paddingInline='4 5' - * paddingInline={{xs: '0 32', sm: '3', md: '4 5', lg: '5', xl: '6'}} - */ - paddingInline?: ResponsiveProp< - SpacingScale | `${SpacingScale} ${SpacingScale}` - >; - /** - * Vertical padding around children. - * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213) - * or an object of spacing tokens for different breakpoints. - * @example - * paddingBlock='4' - * paddingBlock='4 5' - * paddingBlock={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}} - */ - paddingBlock?: ResponsiveProp< - SpacingScale | `${SpacingScale} ${SpacingScale}` - >; /** * CSS `width` */ @@ -180,6 +180,33 @@ export interface PrimtiveBaseProps { flexGrow?: ResponsiveProp; } +export const BasePrimitivePropsAllowedProps: (keyof PrimtiveBaseProps)[] = [ + "padding", + "paddingInline", + "paddingBlock", + "margin", + "marginInline", + "marginBlock", + "width", + "minWidth", + "maxWidth", + "height", + "minHeight", + "maxHeight", + "position", + "inset", + "top", + "right", + "bottom", + "left", + "overflow", + "overflowX", + "overflowY", + "flexBasis", + "flexGrow", + "flexShrink", +]; + export interface BasePrimitiveProps extends PrimtiveBaseProps { children: React.ReactElement; } diff --git a/@navikt/core/react/src/layout/base/PrimitiveWithAsChild.ts b/@navikt/core/react/src/layout/base/PrimitiveWithAsChild.ts new file mode 100644 index 0000000000..8ac6526571 --- /dev/null +++ b/@navikt/core/react/src/layout/base/PrimitiveWithAsChild.ts @@ -0,0 +1,40 @@ +export type PrimitiveWithAsChild = + | { + children: React.ReactElement | false | null; + /** + * Renders the component and its child as a single element, + * merging the props of the component with the props of the child. + * @example + * ```tsx + * + * + * + * + * // Renders + *
+ * ``` + */ + asChild: true; + /** + * When using asChild, the `as` prop is not allowed. + */ + as?: never; + } + | { + children?: React.ReactNode; + /** + * Renders the component and its child as a single element, + * merging the props of the component with the props of the child. + * + * @example + * ```tsx + * + * + * + * + * // Renders + *
+ * ``` + */ + asChild?: false; + }; diff --git a/@navikt/core/react/src/layout/box/Box.tsx b/@navikt/core/react/src/layout/box/Box.tsx index 0687cde311..f05892cd12 100644 --- a/@navikt/core/react/src/layout/box/Box.tsx +++ b/@navikt/core/react/src/layout/box/Box.tsx @@ -1,8 +1,13 @@ import cl from "clsx"; import React, { forwardRef } from "react"; +import { omit } from "../../util"; import { Slot } from "../../util/Slot"; -import { AsChildProps, OverridableComponent } from "../../util/types"; -import BasePrimitive, { PrimtiveBaseProps } from "../base/BasePrimitive"; +import { OverridableComponent } from "../../util/types"; +import BasePrimitive, { + BasePrimitivePropsAllowedProps, + PrimtiveBaseProps, +} from "../base/BasePrimitive"; +import { PrimitiveWithAsChild } from "../base/PrimitiveWithAsChild"; import { getResponsiveProps } from "../utilities/css"; import { BackgroundColorToken, @@ -15,7 +20,7 @@ import { } from "../utilities/types"; export type BoxProps = PrimtiveBaseProps & - AsChildProps & + PrimitiveWithAsChild & React.HTMLAttributes & { /** * CSS `background-color` property. @@ -124,7 +129,7 @@ export const Box: OverridableComponent = forwardRef( return ( Date: Thu, 13 Jun 2024 11:18:53 +0200 Subject: [PATCH 05/24] refactor: Implement BasePrimitive on Stack/HGrid, addef as-prop for hgrid --- .../react/src/layout/base/BasePrimitive.tsx | 1 + @navikt/core/react/src/layout/grid/HGrid.tsx | 118 +++++++++------ .../core/react/src/layout/stack/HStack.tsx | 3 +- @navikt/core/react/src/layout/stack/Stack.tsx | 135 ++++++++++-------- .../core/react/src/layout/stack/VStack.tsx | 4 +- 5 files changed, 152 insertions(+), 109 deletions(-) diff --git a/@navikt/core/react/src/layout/base/BasePrimitive.tsx b/@navikt/core/react/src/layout/base/BasePrimitive.tsx index d1c5b21bb5..d7874b2d07 100644 --- a/@navikt/core/react/src/layout/base/BasePrimitive.tsx +++ b/@navikt/core/react/src/layout/base/BasePrimitive.tsx @@ -181,6 +181,7 @@ export interface PrimtiveBaseProps { } export const BasePrimitivePropsAllowedProps: (keyof PrimtiveBaseProps)[] = [ + "className", "padding", "paddingInline", "paddingBlock", diff --git a/@navikt/core/react/src/layout/grid/HGrid.tsx b/@navikt/core/react/src/layout/grid/HGrid.tsx index b878b97e42..4cc092b833 100644 --- a/@navikt/core/react/src/layout/grid/HGrid.tsx +++ b/@navikt/core/react/src/layout/grid/HGrid.tsx @@ -1,34 +1,41 @@ -import cl from "clsx"; -import React, { HTMLAttributes, forwardRef } from "react"; +import React, { forwardRef } from "react"; +import { OverridableComponent, omit } from "../../util"; +import { Slot } from "../../util/Slot"; +import BasePrimitive, { + BasePrimitivePropsAllowedProps, + PrimtiveBaseProps, +} from "../base/BasePrimitive"; +import { PrimitiveWithAsChild } from "../base/PrimitiveWithAsChild"; import { getResponsiveProps, getResponsiveValue } from "../utilities/css"; import { ResponsiveProp, SpacingScale } from "../utilities/types"; -export interface HGridProps extends HTMLAttributes { - children: React.ReactNode; - /** - * Number of columns to display. Can be a number, a string, or an object with values for specific breakpoints. - * Sets `grid-template-columns`, so `fr`, `minmax` etc. works. - * @example - * columns={{ sm: 1, md: 1, lg: "1fr auto", xl: "1fr auto"}} - * columns={3} - * columns="repeat(3, minmax(0, 1fr))" - */ - columns?: ResponsiveProp; - /** - * Spacing between columns. - * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213) - * or an object of spacing tokens for different breakpoints. - * @example - * gap="6" - * gap="8 4" - * gap={{ sm: "2", md: "2", lg: "6", xl: "6"}} - */ - gap?: ResponsiveProp; - /** - * Vertical alignment of children. Elements will by default stretch to the height of parent-element. - */ - align?: "start" | "center" | "end"; -} +export type HGridProps = PrimtiveBaseProps & + PrimitiveWithAsChild & + React.HTMLAttributes & { + /** + * Number of columns to display. Can be a number, a string, or an object with values for specific breakpoints. + * Sets `grid-template-columns`, so `fr`, `minmax` etc. works. + * @example + * columns={{ sm: 1, md: 1, lg: "1fr auto", xl: "1fr auto"}} + * columns={3} + * columns="repeat(3, minmax(0, 1fr))" + */ + columns?: ResponsiveProp; + /** + * Spacing between columns. + * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213) + * or an object of spacing tokens for different breakpoints. + * @example + * gap="6" + * gap="8 4" + * gap={{ sm: "2", md: "2", lg: "6", xl: "6"}} + */ + gap?: ResponsiveProp; + /** + * Vertical alignment of children. Elements will by default stretch to the height of parent-element. + */ + align?: "start" | "center" | "end"; + }; /** * Horizontal Grid Primitive with dynamic columns and gap based on breakpoints. * @@ -54,25 +61,44 @@ export interface HGridProps extends HTMLAttributes { *
* */ -export const HGrid = forwardRef( - ({ className, columns, gap, style, align, ...rest }, ref) => { - const styles: React.CSSProperties = { - ...style, - "--__ac-hgrid-align": align, - ...getResponsiveProps(`hgrid`, "gap", "spacing", gap), - ...getResponsiveValue(`hgrid`, "columns", formatGrid(columns)), - }; +export const HGrid: OverridableComponent = + forwardRef( + ( + { + children, + as: Component = "div", + columns, + gap, + style, + align, + asChild, + ...rest + }, + ref, + ) => { + const styles: React.CSSProperties = { + ...style, + "--__ac-hgrid-align": align, + ...getResponsiveProps(`hgrid`, "gap", "spacing", gap), + ...getResponsiveValue(`hgrid`, "columns", formatGrid(columns)), + }; + + const Comp = asChild ? Slot : Component; - return ( -
- ); - }, -); + return ( + + + {children} + + + ); + }, + ); function formatGrid( props?: ResponsiveProp, diff --git a/@navikt/core/react/src/layout/stack/HStack.tsx b/@navikt/core/react/src/layout/stack/HStack.tsx index e5a0622817..fb2b431ab5 100644 --- a/@navikt/core/react/src/layout/stack/HStack.tsx +++ b/@navikt/core/react/src/layout/stack/HStack.tsx @@ -1,8 +1,9 @@ import React, { forwardRef } from "react"; import { OverridableComponent } from "../../util/types"; +import { PrimitiveWithAsChild } from "../base/PrimitiveWithAsChild"; import { Stack, StackProps } from "./Stack"; -export type HStackProps = Omit; +export type HStackProps = PrimitiveWithAsChild & Omit; /** * Layout-primitive for horizontal flexbox diff --git a/@navikt/core/react/src/layout/stack/Stack.tsx b/@navikt/core/react/src/layout/stack/Stack.tsx index 59b1ac2272..cf1bcb916b 100644 --- a/@navikt/core/react/src/layout/stack/Stack.tsx +++ b/@navikt/core/react/src/layout/stack/Stack.tsx @@ -1,73 +1,80 @@ import cl from "clsx"; import React, { HTMLAttributes, forwardRef } from "react"; +import { omit } from "../../util"; +import { Slot } from "../../util/Slot"; import { OverridableComponent } from "../../util/types"; +import BasePrimitive, { + BasePrimitivePropsAllowedProps, + PrimtiveBaseProps, +} from "../base/BasePrimitive"; import { getResponsiveProps, getResponsiveValue } from "../utilities/css"; import { ResponsiveProp, SpacingScale } from "../utilities/types"; -export interface StackProps extends HTMLAttributes { - children: React.ReactNode; - /** - * CSS `justify-content` property. - * - * @example - * justify='center' - * justify={{xs: 'start', sm: 'center', md: 'end', lg: 'space-around', xl: 'space-between'}} - */ - justify?: ResponsiveProp< - | "start" - | "center" - | "end" - | "space-around" - | "space-between" - | "space-evenly" - >; - /** - * CSS `align-items` property. - * - * @example - * align='center' - * align={{xs: 'start', sm: 'center', md: 'end', lg: 'baseline', xl: 'stretch'}} - */ - align?: ResponsiveProp<"start" | "center" | "end" | "baseline" | "stretch">; - /** - * Sets the CSS `flex-wrap` property. - */ - wrap?: boolean; - /** - * CSS `gap` property. - * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213) - * or an object of spacing tokens for different breakpoints. - * - * @example - * gap='4' - * gap={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}} - */ - gap?: ResponsiveProp; - /** - * CSS `flex-direction` property. - * @default "row" - * - * @example - * direction='row' - * direction={{xs: 'row', sm: 'column'}} - */ - direction?: ResponsiveProp< - "row" | "column" | "row-reverse" | "column-reverse" - >; -} +export type StackProps = PrimtiveBaseProps & + HTMLAttributes & { + /** + * CSS `justify-content` property. + * + * @example + * justify='center' + * justify={{xs: 'start', sm: 'center', md: 'end', lg: 'space-around', xl: 'space-between'}} + */ + justify?: ResponsiveProp< + | "start" + | "center" + | "end" + | "space-around" + | "space-between" + | "space-evenly" + >; + /** + * CSS `align-items` property. + * + * @example + * align='center' + * align={{xs: 'start', sm: 'center', md: 'end', lg: 'baseline', xl: 'stretch'}} + */ + align?: ResponsiveProp<"start" | "center" | "end" | "baseline" | "stretch">; + /** + * Sets the CSS `flex-wrap` property. + */ + wrap?: boolean; + /** + * CSS `gap` property. + * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213) + * or an object of spacing tokens for different breakpoints. + * + * @example + * gap='4' + * gap={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}} + */ + gap?: ResponsiveProp; + /** + * CSS `flex-direction` property. + * @default "row" + * + * @example + * direction='row' + * direction={{xs: 'row', sm: 'column'}} + */ + direction?: ResponsiveProp< + "row" | "column" | "row-reverse" | "column-reverse" + >; + }; export const Stack: OverridableComponent = forwardRef( ( { + children, as: Component = "div", - className, align, justify, wrap = true, gap, style: _style, direction = "row", + asChild, ...rest }, ref, @@ -81,16 +88,22 @@ export const Stack: OverridableComponent = ...getResponsiveValue(`stack`, "justify", justify), }; + const Comp = asChild ? Slot : Component; + return ( - + + + {children} + + ); }, ); diff --git a/@navikt/core/react/src/layout/stack/VStack.tsx b/@navikt/core/react/src/layout/stack/VStack.tsx index 5e4150fa83..4d590949b9 100644 --- a/@navikt/core/react/src/layout/stack/VStack.tsx +++ b/@navikt/core/react/src/layout/stack/VStack.tsx @@ -1,8 +1,10 @@ import React, { forwardRef } from "react"; import { OverridableComponent } from "../../util/types"; +import { PrimitiveWithAsChild } from "../base/PrimitiveWithAsChild"; import { Stack, StackProps } from "./Stack"; -export type VStackProps = Omit; +export type VStackProps = PrimitiveWithAsChild & + Omit; /** * Layout-primitive for vetical flexbox From e5560f059424497966d021df83c1d6c0620261d4 Mon Sep 17 00:00:00 2001 From: Ken Date: Thu, 13 Jun 2024 11:20:23 +0200 Subject: [PATCH 06/24] typo: Rename constant to a more 'content' nameing convention --- @navikt/core/react/src/layout/base/BasePrimitive.tsx | 2 +- @navikt/core/react/src/layout/box/Box.tsx | 4 ++-- @navikt/core/react/src/layout/grid/HGrid.tsx | 4 ++-- @navikt/core/react/src/layout/stack/Stack.tsx | 4 ++-- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/@navikt/core/react/src/layout/base/BasePrimitive.tsx b/@navikt/core/react/src/layout/base/BasePrimitive.tsx index d7874b2d07..006311063d 100644 --- a/@navikt/core/react/src/layout/base/BasePrimitive.tsx +++ b/@navikt/core/react/src/layout/base/BasePrimitive.tsx @@ -180,7 +180,7 @@ export interface PrimtiveBaseProps { flexGrow?: ResponsiveProp; } -export const BasePrimitivePropsAllowedProps: (keyof PrimtiveBaseProps)[] = [ +export const BASE_PRIMITIVE_ALLOWED_PROPS: (keyof PrimtiveBaseProps)[] = [ "className", "padding", "paddingInline", diff --git a/@navikt/core/react/src/layout/box/Box.tsx b/@navikt/core/react/src/layout/box/Box.tsx index f05892cd12..6a0fda26df 100644 --- a/@navikt/core/react/src/layout/box/Box.tsx +++ b/@navikt/core/react/src/layout/box/Box.tsx @@ -4,7 +4,7 @@ import { omit } from "../../util"; import { Slot } from "../../util/Slot"; import { OverridableComponent } from "../../util/types"; import BasePrimitive, { - BasePrimitivePropsAllowedProps, + BASE_PRIMITIVE_ALLOWED_PROPS, PrimtiveBaseProps, } from "../base/BasePrimitive"; import { PrimitiveWithAsChild } from "../base/PrimitiveWithAsChild"; @@ -129,7 +129,7 @@ export const Box: OverridableComponent = forwardRef( return ( = return ( = return ( Date: Thu, 13 Jun 2024 11:29:42 +0200 Subject: [PATCH 07/24] bug: Fix slot-import --- @navikt/core/react/src/layout/box/Box.tsx | 2 +- @navikt/core/react/src/layout/grid/HGrid.tsx | 2 +- @navikt/core/react/src/layout/stack/Stack.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/@navikt/core/react/src/layout/box/Box.tsx b/@navikt/core/react/src/layout/box/Box.tsx index 6a0fda26df..7b50fc1635 100644 --- a/@navikt/core/react/src/layout/box/Box.tsx +++ b/@navikt/core/react/src/layout/box/Box.tsx @@ -1,7 +1,7 @@ import cl from "clsx"; import React, { forwardRef } from "react"; +import { Slot } from "../../slot/Slot"; import { omit } from "../../util"; -import { Slot } from "../../util/Slot"; import { OverridableComponent } from "../../util/types"; import BasePrimitive, { BASE_PRIMITIVE_ALLOWED_PROPS, diff --git a/@navikt/core/react/src/layout/grid/HGrid.tsx b/@navikt/core/react/src/layout/grid/HGrid.tsx index c8315145e1..75e4cf6796 100644 --- a/@navikt/core/react/src/layout/grid/HGrid.tsx +++ b/@navikt/core/react/src/layout/grid/HGrid.tsx @@ -1,6 +1,6 @@ import React, { forwardRef } from "react"; +import { Slot } from "../../slot/Slot"; import { OverridableComponent, omit } from "../../util"; -import { Slot } from "../../util/Slot"; import BasePrimitive, { BASE_PRIMITIVE_ALLOWED_PROPS, PrimtiveBaseProps, diff --git a/@navikt/core/react/src/layout/stack/Stack.tsx b/@navikt/core/react/src/layout/stack/Stack.tsx index 512d24774d..6b68928efd 100644 --- a/@navikt/core/react/src/layout/stack/Stack.tsx +++ b/@navikt/core/react/src/layout/stack/Stack.tsx @@ -1,7 +1,7 @@ import cl from "clsx"; import React, { HTMLAttributes, forwardRef } from "react"; +import { Slot } from "../../slot/Slot"; import { omit } from "../../util"; -import { Slot } from "../../util/Slot"; import { OverridableComponent } from "../../util/types"; import BasePrimitive, { BASE_PRIMITIVE_ALLOWED_PROPS, From 1c621a13bc96587726b71a62c3599e0517647643 Mon Sep 17 00:00:00 2001 From: Julian Nymark Date: Thu, 13 Jun 2024 12:29:04 +0200 Subject: [PATCH 08/24] :construction: --__ac-r-m.* --- @navikt/core/css/primitives/base.css | 10 +++++----- .../core/react/src/layout/box/Box.stories.tsx | 16 +++++++++++++++- 2 files changed, 20 insertions(+), 6 deletions(-) diff --git a/@navikt/core/css/primitives/base.css b/@navikt/core/css/primitives/base.css index ed15a49c8d..9b63e77900 100644 --- a/@navikt/core/css/primitives/base.css +++ b/@navikt/core/css/primitives/base.css @@ -300,7 +300,7 @@ } .navds-r-m { - --__ac-r-margin: var(--__ac-r-p-sm); + --__ac-r-margin: var(--__ac-r-m-sm); } .navds-r-mi { @@ -398,7 +398,7 @@ } .navds-r-m { - --__ac-r-margin: var(--__ac-r-p-md); + --__ac-r-margin: var(--__ac-r-m-md); } .navds-r-mi { @@ -496,7 +496,7 @@ } .navds-r-m { - --__ac-r-margin: var(--__ac-r-p-lg); + --__ac-r-margin: var(--__ac-r-m-lg); } .navds-r-mi { @@ -594,7 +594,7 @@ } .navds-r-m { - --__ac-r-margin: var(--__ac-r-p-xl); + --__ac-r-margin: var(--__ac-r-m-xl); } .navds-r-mi { @@ -692,7 +692,7 @@ } .navds-r-m { - --__ac-r-margin: var(--__ac-r-p-2xl); + --__ac-r-margin: var(--__ac-r-m-2xl); } .navds-r-mi { diff --git a/@navikt/core/react/src/layout/box/Box.stories.tsx b/@navikt/core/react/src/layout/box/Box.stories.tsx index a781fd46b5..d54374564a 100644 --- a/@navikt/core/react/src/layout/box/Box.stories.tsx +++ b/@navikt/core/react/src/layout/box/Box.stories.tsx @@ -368,11 +368,25 @@ export const BorderRadius = () => ( ); +export const MarginDemo = () => ( + + + + Box + + + +); + export const PaddingDemo = () => ( Box From e2a415600878b5255b961e466598c5cadfc5e6ac Mon Sep 17 00:00:00 2001 From: Ken Date: Fri, 14 Jun 2024 08:18:57 +0200 Subject: [PATCH 09/24] bug: Fixed nesting of className --- .../src/layout/base/BasePrimitive.stories.tsx | 40 +++++++++++++++++++ .../react/src/layout/base/BasePrimitive.tsx | 1 + @navikt/core/react/src/layout/box/Box.tsx | 3 +- @navikt/core/react/src/layout/grid/HGrid.tsx | 4 +- @navikt/core/react/src/layout/stack/Stack.tsx | 3 +- 5 files changed, 48 insertions(+), 3 deletions(-) diff --git a/@navikt/core/react/src/layout/base/BasePrimitive.stories.tsx b/@navikt/core/react/src/layout/base/BasePrimitive.stories.tsx index 2842ba9cdf..d66b334766 100644 --- a/@navikt/core/react/src/layout/base/BasePrimitive.stories.tsx +++ b/@navikt/core/react/src/layout/base/BasePrimitive.stories.tsx @@ -85,6 +85,46 @@ export const Padding = () => ( ); +export const Margin = () => ( + + + Margin all around + + + Margin to the North + + + Margin to the East + + + Margin to the South + + + Margin to the West + + +); + +export const MarginAuto = () => ( + + + + Margin auto + + + + + Margin auto 0 + + + + + Margin 0 auto + + + +); + export const HeightWidth = () => ( diff --git a/@navikt/core/react/src/layout/base/BasePrimitive.tsx b/@navikt/core/react/src/layout/base/BasePrimitive.tsx index 585225d058..f8ec04fcb6 100644 --- a/@navikt/core/react/src/layout/base/BasePrimitive.tsx +++ b/@navikt/core/react/src/layout/base/BasePrimitive.tsx @@ -60,6 +60,7 @@ export interface PrimtiveBaseProps { marginInline?: ResponsiveProp< | SpacingScale | `${SpacingScale} ${SpacingScale}` + | "auto" | `auto ${SpacingScale}` | `${SpacingScale} auto` >; diff --git a/@navikt/core/react/src/layout/box/Box.tsx b/@navikt/core/react/src/layout/box/Box.tsx index 7b50fc1635..62911b604a 100644 --- a/@navikt/core/react/src/layout/box/Box.tsx +++ b/@navikt/core/react/src/layout/box/Box.tsx @@ -87,6 +87,7 @@ export const Box: OverridableComponent = forwardRef( ( { children, + className, as: Component = "div", background, borderColor, @@ -132,7 +133,7 @@ export const Box: OverridableComponent = forwardRef( {...omit(rest, BASE_PRIMITIVE_ALLOWED_PROPS)} ref={ref} style={style} - className={cl("navds-box", { + className={cl("navds-box", className, { "navds-box-bg": background, "navds-box-border-color": borderColor, "navds-box-border-width": borderWidth, diff --git a/@navikt/core/react/src/layout/grid/HGrid.tsx b/@navikt/core/react/src/layout/grid/HGrid.tsx index 75e4cf6796..60f3f04499 100644 --- a/@navikt/core/react/src/layout/grid/HGrid.tsx +++ b/@navikt/core/react/src/layout/grid/HGrid.tsx @@ -1,3 +1,4 @@ +import cl from "clsx"; import React, { forwardRef } from "react"; import { Slot } from "../../slot/Slot"; import { OverridableComponent, omit } from "../../util"; @@ -66,6 +67,7 @@ export const HGrid: OverridableComponent = ( { children, + className, as: Component = "div", columns, gap, @@ -90,7 +92,7 @@ export const HGrid: OverridableComponent = {children} diff --git a/@navikt/core/react/src/layout/stack/Stack.tsx b/@navikt/core/react/src/layout/stack/Stack.tsx index 6b68928efd..8c6378fcb2 100644 --- a/@navikt/core/react/src/layout/stack/Stack.tsx +++ b/@navikt/core/react/src/layout/stack/Stack.tsx @@ -67,6 +67,7 @@ export const Stack: OverridableComponent = ( { children, + className, as: Component = "div", align, justify, @@ -96,7 +97,7 @@ export const Stack: OverridableComponent = {...omit(rest, BASE_PRIMITIVE_ALLOWED_PROPS)} ref={ref} style={style} - className={cl("navds-stack", { + className={cl("navds-stack", className, { "navds-vstack": direction === "column", "navds-hstack": direction === "row", })} From 36652c1bd455f50815f7e1ee6263e9dc89ca9d9b Mon Sep 17 00:00:00 2001 From: Ken Date: Fri, 14 Jun 2024 08:26:22 +0200 Subject: [PATCH 10/24] feat: BasePrimitive now supports auto --- .../src/layout/base/BasePrimitive.stories.tsx | 17 +++++++++++++---- .../react/src/layout/base/BasePrimitive.tsx | 1 - @navikt/core/react/src/layout/utilities/css.ts | 3 +++ 3 files changed, 16 insertions(+), 5 deletions(-) diff --git a/@navikt/core/react/src/layout/base/BasePrimitive.stories.tsx b/@navikt/core/react/src/layout/base/BasePrimitive.stories.tsx index d66b334766..b96dc8f829 100644 --- a/@navikt/core/react/src/layout/base/BasePrimitive.stories.tsx +++ b/@navikt/core/react/src/layout/base/BasePrimitive.stories.tsx @@ -106,20 +106,20 @@ export const Margin = () => ( ); export const MarginAuto = () => ( - + - Margin auto + MarginInline: auto - Margin auto 0 + MarginInline: auto 0 - Margin 0 auto + MarginInline: 0 auto @@ -256,6 +256,15 @@ export const Chromatic: Story = {

Padding

+
+

Margin

+ +
+
+

MarginAuto

+ +
+

Height & Width

diff --git a/@navikt/core/react/src/layout/base/BasePrimitive.tsx b/@navikt/core/react/src/layout/base/BasePrimitive.tsx index f8ec04fcb6..bc75e2cd8f 100644 --- a/@navikt/core/react/src/layout/base/BasePrimitive.tsx +++ b/@navikt/core/react/src/layout/base/BasePrimitive.tsx @@ -247,7 +247,6 @@ export const BasePrimitive = ({ ...getResponsiveProps("r", "pi", "spacing", paddingInline), ...getResponsiveProps("r", "pb", "spacing", paddingBlock), /* Margin */ - /* TODO: Unable to handle spacingscale + "auto" combination right now */ ...getResponsiveProps("r", "m", "spacing", margin), ...getResponsiveProps("r", "mi", "spacing", marginInline), ...getResponsiveProps("r", "mb", "spacing", marginBlock), diff --git a/@navikt/core/react/src/layout/utilities/css.ts b/@navikt/core/react/src/layout/utilities/css.ts index c558839ec4..dc97a20a8d 100644 --- a/@navikt/core/react/src/layout/utilities/css.ts +++ b/@navikt/core/react/src/layout/utilities/css.ts @@ -50,6 +50,9 @@ const translateTokenStringToCSS = ( const width = 100 / arr.length; return `calc((100vw - ${width}%)/2)`; } + if (componentProp === "mi" && x === "auto") { + return "auto"; + } let output = `var(--a-${tokenSubgroup}-${x})`; if (tokenExceptions.includes(x)) { From f05d8894c71a63ebdcf8474c143796a70277d9b2 Mon Sep 17 00:00:00 2001 From: Ken Date: Fri, 14 Jun 2024 08:28:41 +0200 Subject: [PATCH 11/24] memo: Changeset --- .changeset/silly-shrimps-peel.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/silly-shrimps-peel.md diff --git a/.changeset/silly-shrimps-peel.md b/.changeset/silly-shrimps-peel.md new file mode 100644 index 0000000000..fd6ff38a5b --- /dev/null +++ b/.changeset/silly-shrimps-peel.md @@ -0,0 +1,6 @@ +--- +"@navikt/ds-react": minor +"@navikt/ds-css": minor +--- + +Primitives: Added support for padding, paddingInline, paddingBlock, margin, marginInline, marginBlock, width, minWidth, maxWidth, height, minHeight, maxHeight, position, inset, top, right, left, bottom, overflow, overflowX, overflowY, flexBasis, flexGrow, flexShrink to Box, HGrid and Stack. From 67a2ee3cd0b8faa9df697499365b096a8f2acbbd Mon Sep 17 00:00:00 2001 From: Ken Date: Fri, 14 Jun 2024 09:18:27 +0200 Subject: [PATCH 12/24] bug: Added margin auto support for marginBlock --- @navikt/core/react/src/layout/base/BasePrimitive.tsx | 1 + @navikt/core/react/src/layout/utilities/css.ts | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/@navikt/core/react/src/layout/base/BasePrimitive.tsx b/@navikt/core/react/src/layout/base/BasePrimitive.tsx index bc75e2cd8f..a6f837d03d 100644 --- a/@navikt/core/react/src/layout/base/BasePrimitive.tsx +++ b/@navikt/core/react/src/layout/base/BasePrimitive.tsx @@ -76,6 +76,7 @@ export interface PrimtiveBaseProps { marginBlock?: ResponsiveProp< | SpacingScale | `${SpacingScale} ${SpacingScale}` + | "auto" | `auto ${SpacingScale}` | `${SpacingScale} auto` >; diff --git a/@navikt/core/react/src/layout/utilities/css.ts b/@navikt/core/react/src/layout/utilities/css.ts index dc97a20a8d..55dfd72cda 100644 --- a/@navikt/core/react/src/layout/utilities/css.ts +++ b/@navikt/core/react/src/layout/utilities/css.ts @@ -50,7 +50,7 @@ const translateTokenStringToCSS = ( const width = 100 / arr.length; return `calc((100vw - ${width}%)/2)`; } - if (componentProp === "mi" && x === "auto") { + if (["mi", "mb"].includes(componentProp) && x === "auto") { return "auto"; } From 36c78360392717b97c97ef83d25e8841c484266d Mon Sep 17 00:00:00 2001 From: Ken Date: Fri, 14 Jun 2024 11:52:15 +0200 Subject: [PATCH 13/24] refactor: Redo naming of base props --- @navikt/core/react/src/layout/base/BasePrimitive.tsx | 8 ++++---- @navikt/core/react/src/layout/box/Box.tsx | 8 ++++---- @navikt/core/react/src/layout/grid/HGrid.tsx | 8 ++++---- @navikt/core/react/src/layout/stack/Stack.tsx | 8 ++++---- 4 files changed, 16 insertions(+), 16 deletions(-) diff --git a/@navikt/core/react/src/layout/base/BasePrimitive.tsx b/@navikt/core/react/src/layout/base/BasePrimitive.tsx index a6f837d03d..e6dd42e45c 100644 --- a/@navikt/core/react/src/layout/base/BasePrimitive.tsx +++ b/@navikt/core/react/src/layout/base/BasePrimitive.tsx @@ -4,7 +4,7 @@ import { Slot } from "../../slot/Slot"; import { getResponsiveProps, getResponsiveValue } from "../utilities/css"; import { ResponsiveProp, SpacingScale } from "../utilities/types"; -export interface PrimtiveBaseProps { +export type PrimtiveProps = { className?: string; /** * Padding around children. @@ -180,9 +180,9 @@ export interface PrimtiveBaseProps { * CSS `flex-grow` */ flexGrow?: ResponsiveProp; -} +}; -export const BASE_PRIMITIVE_ALLOWED_PROPS: (keyof PrimtiveBaseProps)[] = [ +export const PRIMITIVE_PROPS: (keyof PrimtiveProps)[] = [ "className", "padding", "paddingInline", @@ -210,7 +210,7 @@ export const BASE_PRIMITIVE_ALLOWED_PROPS: (keyof PrimtiveBaseProps)[] = [ "flexShrink", ]; -export interface BasePrimitiveProps extends PrimtiveBaseProps { +interface BasePrimitiveProps extends PrimtiveProps { children: React.ReactElement; } diff --git a/@navikt/core/react/src/layout/box/Box.tsx b/@navikt/core/react/src/layout/box/Box.tsx index 62911b604a..e9fab561e1 100644 --- a/@navikt/core/react/src/layout/box/Box.tsx +++ b/@navikt/core/react/src/layout/box/Box.tsx @@ -4,8 +4,8 @@ import { Slot } from "../../slot/Slot"; import { omit } from "../../util"; import { OverridableComponent } from "../../util/types"; import BasePrimitive, { - BASE_PRIMITIVE_ALLOWED_PROPS, - PrimtiveBaseProps, + PRIMITIVE_PROPS, + PrimtiveProps, } from "../base/BasePrimitive"; import { PrimitiveWithAsChild } from "../base/PrimitiveWithAsChild"; import { getResponsiveProps } from "../utilities/css"; @@ -19,7 +19,7 @@ import { SurfaceColorToken, } from "../utilities/types"; -export type BoxProps = PrimtiveBaseProps & +export type BoxProps = PrimtiveProps & PrimitiveWithAsChild & React.HTMLAttributes & { /** @@ -130,7 +130,7 @@ export const Box: OverridableComponent = forwardRef( return ( & { /** @@ -90,7 +90,7 @@ export const HGrid: OverridableComponent = return ( & { /** * CSS `justify-content` property. @@ -94,7 +94,7 @@ export const Stack: OverridableComponent = return ( Date: Fri, 14 Jun 2024 12:01:28 +0200 Subject: [PATCH 14/24] bug: Typo --- @navikt/core/react/src/layout/base/BasePrimitive.tsx | 6 +++--- @navikt/core/react/src/layout/box/Box.tsx | 5 +++-- @navikt/core/react/src/layout/grid/HGrid.tsx | 4 ++-- @navikt/core/react/src/layout/stack/Stack.tsx | 4 ++-- 4 files changed, 10 insertions(+), 9 deletions(-) diff --git a/@navikt/core/react/src/layout/base/BasePrimitive.tsx b/@navikt/core/react/src/layout/base/BasePrimitive.tsx index e6dd42e45c..31d51964d3 100644 --- a/@navikt/core/react/src/layout/base/BasePrimitive.tsx +++ b/@navikt/core/react/src/layout/base/BasePrimitive.tsx @@ -4,7 +4,7 @@ import { Slot } from "../../slot/Slot"; import { getResponsiveProps, getResponsiveValue } from "../utilities/css"; import { ResponsiveProp, SpacingScale } from "../utilities/types"; -export type PrimtiveProps = { +export type PrimitiveProps = { className?: string; /** * Padding around children. @@ -182,7 +182,7 @@ export type PrimtiveProps = { flexGrow?: ResponsiveProp; }; -export const PRIMITIVE_PROPS: (keyof PrimtiveProps)[] = [ +export const PRIMITIVE_PROPS: (keyof PrimitiveProps)[] = [ "className", "padding", "paddingInline", @@ -210,7 +210,7 @@ export const PRIMITIVE_PROPS: (keyof PrimtiveProps)[] = [ "flexShrink", ]; -interface BasePrimitiveProps extends PrimtiveProps { +interface BasePrimitiveProps extends PrimitiveProps { children: React.ReactElement; } diff --git a/@navikt/core/react/src/layout/box/Box.tsx b/@navikt/core/react/src/layout/box/Box.tsx index e9fab561e1..210afcbed7 100644 --- a/@navikt/core/react/src/layout/box/Box.tsx +++ b/@navikt/core/react/src/layout/box/Box.tsx @@ -5,7 +5,7 @@ import { omit } from "../../util"; import { OverridableComponent } from "../../util/types"; import BasePrimitive, { PRIMITIVE_PROPS, - PrimtiveProps, + PrimitiveProps, } from "../base/BasePrimitive"; import { PrimitiveWithAsChild } from "../base/PrimitiveWithAsChild"; import { getResponsiveProps } from "../utilities/css"; @@ -19,7 +19,7 @@ import { SurfaceColorToken, } from "../utilities/types"; -export type BoxProps = PrimtiveProps & +export type BoxProps = PrimitiveProps & PrimitiveWithAsChild & React.HTMLAttributes & { /** @@ -131,6 +131,7 @@ export const Box: OverridableComponent = forwardRef( & { /** diff --git a/@navikt/core/react/src/layout/stack/Stack.tsx b/@navikt/core/react/src/layout/stack/Stack.tsx index 7137cf5047..b4afe3a579 100644 --- a/@navikt/core/react/src/layout/stack/Stack.tsx +++ b/@navikt/core/react/src/layout/stack/Stack.tsx @@ -5,12 +5,12 @@ import { omit } from "../../util"; import { OverridableComponent } from "../../util/types"; import BasePrimitive, { PRIMITIVE_PROPS, - PrimtiveProps, + PrimitiveProps, } from "../base/BasePrimitive"; import { getResponsiveProps, getResponsiveValue } from "../utilities/css"; import { ResponsiveProp, SpacingScale } from "../utilities/types"; -export type StackProps = PrimtiveProps & +export type StackProps = PrimitiveProps & HTMLAttributes & { /** * CSS `justify-content` property. From 9719fab6b7aabeb8d4ff545c2362bb6b07416a74 Mon Sep 17 00:00:00 2001 From: Ken Date: Mon, 17 Jun 2024 10:50:41 +0200 Subject: [PATCH 15/24] bug: Wrong css-token reference for pi and pb --- @navikt/core/css/primitives/base.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/@navikt/core/css/primitives/base.css b/@navikt/core/css/primitives/base.css index 9b63e77900..9916e287aa 100644 --- a/@navikt/core/css/primitives/base.css +++ b/@navikt/core/css/primitives/base.css @@ -17,7 +17,7 @@ --__ac-r-pi-lg: var(--__ac-r-pi-md); --__ac-r-pi-xl: var(--__ac-r-pi-lg); --__ac-r-pi-2xl: var(--__ac-r-pi-xl); - --__ac-r-pi: var(--__ac-r-p-xs); + --__ac-r-pi: var(--__ac-r-pi-xs); padding-inline: var(--__ac-r-pi); } @@ -29,7 +29,7 @@ --__ac-r-pb-lg: var(--__ac-r-pb-md); --__ac-r-pb-xl: var(--__ac-r-pb-lg); --__ac-r-pb-2xl: var(--__ac-r-pb-xl); - --__ac-r-pb: var(--__ac-r-p-xs); + --__ac-r-pb: var(--__ac-r-pb-xs); padding-block: var(--__ac-r-pb); } From 355ba265c97ce1023710c5335cd37ae19cb84211 Mon Sep 17 00:00:00 2001 From: Ken <26967723+KenAJoh@users.noreply.github.com> Date: Mon, 17 Jun 2024 10:50:59 +0200 Subject: [PATCH 16/24] Update @navikt/core/react/src/layout/base/BasePrimitive.tsx Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> --- @navikt/core/react/src/layout/base/BasePrimitive.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/@navikt/core/react/src/layout/base/BasePrimitive.tsx b/@navikt/core/react/src/layout/base/BasePrimitive.tsx index 31d51964d3..1d6b06127d 100644 --- a/@navikt/core/react/src/layout/base/BasePrimitive.tsx +++ b/@navikt/core/react/src/layout/base/BasePrimitive.tsx @@ -40,7 +40,7 @@ export type PrimitiveProps = { SpacingScale | `${SpacingScale} ${SpacingScale}` >; /** - * margin around children. + * Margin around element. * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213) * or an object of spacing tokens for different breakpoints. * @example From 7a231638fb9c81b82520e8711bcc152d0359d4ff Mon Sep 17 00:00:00 2001 From: Ken <26967723+KenAJoh@users.noreply.github.com> Date: Mon, 17 Jun 2024 10:51:04 +0200 Subject: [PATCH 17/24] Update @navikt/core/react/src/layout/base/BasePrimitive.tsx Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> --- @navikt/core/react/src/layout/base/BasePrimitive.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/@navikt/core/react/src/layout/base/BasePrimitive.tsx b/@navikt/core/react/src/layout/base/BasePrimitive.tsx index 1d6b06127d..23b859d038 100644 --- a/@navikt/core/react/src/layout/base/BasePrimitive.tsx +++ b/@navikt/core/react/src/layout/base/BasePrimitive.tsx @@ -65,7 +65,7 @@ export type PrimitiveProps = { | `${SpacingScale} auto` >; /** - * Vertical margin around children. + * Vertical margin around element. * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213) * or an object of spacing tokens for different breakpoints. * @example From 0532699535e2cc02b234658958cd06ee17d114f4 Mon Sep 17 00:00:00 2001 From: Ken Date: Mon, 17 Jun 2024 10:52:16 +0200 Subject: [PATCH 18/24] bug: Removed static padding representation --- @navikt/core/react/src/layout/box/Box.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/@navikt/core/react/src/layout/box/Box.tsx b/@navikt/core/react/src/layout/box/Box.tsx index 210afcbed7..e45be8d9de 100644 --- a/@navikt/core/react/src/layout/box/Box.tsx +++ b/@navikt/core/react/src/layout/box/Box.tsx @@ -131,7 +131,6 @@ export const Box: OverridableComponent = forwardRef( Date: Mon, 17 Jun 2024 10:54:06 +0200 Subject: [PATCH 19/24] Update @navikt/core/react/src/layout/base/BasePrimitive.tsx Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> --- @navikt/core/react/src/layout/base/BasePrimitive.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/@navikt/core/react/src/layout/base/BasePrimitive.tsx b/@navikt/core/react/src/layout/base/BasePrimitive.tsx index 23b859d038..dfd741c4d1 100644 --- a/@navikt/core/react/src/layout/base/BasePrimitive.tsx +++ b/@navikt/core/react/src/layout/base/BasePrimitive.tsx @@ -49,7 +49,7 @@ export type PrimitiveProps = { */ margin?: ResponsiveProp; /** - * Horizontal margin around children. + * Horizontal margin around element. * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213) * or an object of spacing tokens for different breakpoints. * @example From 441de664e97344cb44094ea79848ad415aefa013 Mon Sep 17 00:00:00 2001 From: Ken Date: Mon, 17 Jun 2024 10:57:40 +0200 Subject: [PATCH 20/24] refactor: Renamed AsChildProps used in Primitives --- .../{PrimitiveWithAsChild.ts => PrimitiveAsChildProps.ts} | 2 +- @navikt/core/react/src/layout/box/Box.tsx | 4 ++-- @navikt/core/react/src/layout/grid/HGrid.tsx | 4 ++-- @navikt/core/react/src/layout/stack/HStack.tsx | 4 ++-- @navikt/core/react/src/layout/stack/Stack.tsx | 2 ++ @navikt/core/react/src/layout/stack/VStack.tsx | 4 ++-- 6 files changed, 11 insertions(+), 9 deletions(-) rename @navikt/core/react/src/layout/base/{PrimitiveWithAsChild.ts => PrimitiveAsChildProps.ts} (96%) diff --git a/@navikt/core/react/src/layout/base/PrimitiveWithAsChild.ts b/@navikt/core/react/src/layout/base/PrimitiveAsChildProps.ts similarity index 96% rename from @navikt/core/react/src/layout/base/PrimitiveWithAsChild.ts rename to @navikt/core/react/src/layout/base/PrimitiveAsChildProps.ts index 8ac6526571..86fbbd72d7 100644 --- a/@navikt/core/react/src/layout/base/PrimitiveWithAsChild.ts +++ b/@navikt/core/react/src/layout/base/PrimitiveAsChildProps.ts @@ -1,4 +1,4 @@ -export type PrimitiveWithAsChild = +export type PrimitiveAsChildProps = | { children: React.ReactElement | false | null; /** diff --git a/@navikt/core/react/src/layout/box/Box.tsx b/@navikt/core/react/src/layout/box/Box.tsx index e45be8d9de..2d2c70128e 100644 --- a/@navikt/core/react/src/layout/box/Box.tsx +++ b/@navikt/core/react/src/layout/box/Box.tsx @@ -7,7 +7,7 @@ import BasePrimitive, { PRIMITIVE_PROPS, PrimitiveProps, } from "../base/BasePrimitive"; -import { PrimitiveWithAsChild } from "../base/PrimitiveWithAsChild"; +import { PrimitiveAsChildProps } from "../base/PrimitiveAsChildProps"; import { getResponsiveProps } from "../utilities/css"; import { BackgroundColorToken, @@ -20,7 +20,7 @@ import { } from "../utilities/types"; export type BoxProps = PrimitiveProps & - PrimitiveWithAsChild & + PrimitiveAsChildProps & React.HTMLAttributes & { /** * CSS `background-color` property. diff --git a/@navikt/core/react/src/layout/grid/HGrid.tsx b/@navikt/core/react/src/layout/grid/HGrid.tsx index bbf5425fd3..fcfb697c6d 100644 --- a/@navikt/core/react/src/layout/grid/HGrid.tsx +++ b/@navikt/core/react/src/layout/grid/HGrid.tsx @@ -6,12 +6,12 @@ import BasePrimitive, { PRIMITIVE_PROPS, PrimitiveProps, } from "../base/BasePrimitive"; -import { PrimitiveWithAsChild } from "../base/PrimitiveWithAsChild"; +import { PrimitiveAsChildProps } from "../base/PrimitiveAsChildProps"; import { getResponsiveProps, getResponsiveValue } from "../utilities/css"; import { ResponsiveProp, SpacingScale } from "../utilities/types"; export type HGridProps = PrimitiveProps & - PrimitiveWithAsChild & + PrimitiveAsChildProps & React.HTMLAttributes & { /** * Number of columns to display. Can be a number, a string, or an object with values for specific breakpoints. diff --git a/@navikt/core/react/src/layout/stack/HStack.tsx b/@navikt/core/react/src/layout/stack/HStack.tsx index fb2b431ab5..c0826df69e 100644 --- a/@navikt/core/react/src/layout/stack/HStack.tsx +++ b/@navikt/core/react/src/layout/stack/HStack.tsx @@ -1,9 +1,9 @@ import React, { forwardRef } from "react"; import { OverridableComponent } from "../../util/types"; -import { PrimitiveWithAsChild } from "../base/PrimitiveWithAsChild"; +import { PrimitiveAsChildProps } from "../base/PrimitiveAsChildProps"; import { Stack, StackProps } from "./Stack"; -export type HStackProps = PrimitiveWithAsChild & Omit; +export type HStackProps = PrimitiveAsChildProps & Omit; /** * Layout-primitive for horizontal flexbox diff --git a/@navikt/core/react/src/layout/stack/Stack.tsx b/@navikt/core/react/src/layout/stack/Stack.tsx index b4afe3a579..95614b2428 100644 --- a/@navikt/core/react/src/layout/stack/Stack.tsx +++ b/@navikt/core/react/src/layout/stack/Stack.tsx @@ -7,10 +7,12 @@ import BasePrimitive, { PRIMITIVE_PROPS, PrimitiveProps, } from "../base/BasePrimitive"; +import { PrimitiveAsChildProps } from "../base/PrimitiveAsChildProps"; import { getResponsiveProps, getResponsiveValue } from "../utilities/css"; import { ResponsiveProp, SpacingScale } from "../utilities/types"; export type StackProps = PrimitiveProps & + PrimitiveAsChildProps & HTMLAttributes & { /** * CSS `justify-content` property. diff --git a/@navikt/core/react/src/layout/stack/VStack.tsx b/@navikt/core/react/src/layout/stack/VStack.tsx index 4d590949b9..5c06682591 100644 --- a/@navikt/core/react/src/layout/stack/VStack.tsx +++ b/@navikt/core/react/src/layout/stack/VStack.tsx @@ -1,9 +1,9 @@ import React, { forwardRef } from "react"; import { OverridableComponent } from "../../util/types"; -import { PrimitiveWithAsChild } from "../base/PrimitiveWithAsChild"; +import { PrimitiveAsChildProps } from "../base/PrimitiveAsChildProps"; import { Stack, StackProps } from "./Stack"; -export type VStackProps = PrimitiveWithAsChild & +export type VStackProps = PrimitiveAsChildProps & Omit; /** From e7c1a319e509758356643cc05715625fe70b7ea1 Mon Sep 17 00:00:00 2001 From: Ken Date: Mon, 17 Jun 2024 12:37:42 +0200 Subject: [PATCH 21/24] bug: Re-added fallback to padding/margin when using a subset of breakpoints for inline/block --- @navikt/core/css/primitives/base.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/@navikt/core/css/primitives/base.css b/@navikt/core/css/primitives/base.css index 9916e287aa..8cef4648e8 100644 --- a/@navikt/core/css/primitives/base.css +++ b/@navikt/core/css/primitives/base.css @@ -19,7 +19,7 @@ --__ac-r-pi-2xl: var(--__ac-r-pi-xl); --__ac-r-pi: var(--__ac-r-pi-xs); - padding-inline: var(--__ac-r-pi); + padding-inline: var(--__ac-r-pi, var(--__ac-r-padding)); } .navds-r-pb { @@ -31,7 +31,7 @@ --__ac-r-pb-2xl: var(--__ac-r-pb-xl); --__ac-r-pb: var(--__ac-r-pb-xs); - padding-block: var(--__ac-r-pb); + padding-block: var(--__ac-r-pb, var(--__ac-r-padding)); } .navds-r-m { @@ -55,7 +55,7 @@ --__ac-r-mi-2xl: var(--__ac-r-mi-xl); --__ac-r-mi: var(--__ac-r-mi-xs); - margin-inline: var(--__ac-r-mi); + margin-inline: var(--__ac-r-mi, var(--__ac-r-margin)); } .navds-r-mb { @@ -67,7 +67,7 @@ --__ac-r-mb-2xl: var(--__ac-r-mb-xl); --__ac-r-mb: var(--__ac-r-mb-xs); - margin-block: var(--__ac-r-mb); + margin-block: var(--__ac-r-mb, var(--__ac-r-margin)); } .navds-r-w { From de5fe23c0765fdd7aff96684d765a583c25cd1ee Mon Sep 17 00:00:00 2001 From: Ken <26967723+KenAJoh@users.noreply.github.com> Date: Wed, 19 Jun 2024 08:31:29 +0200 Subject: [PATCH 22/24] Update @navikt/core/react/src/layout/base/BasePrimitive.stories.tsx Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> --- .../src/layout/base/BasePrimitive.stories.tsx | 40 ++++++++++++------- 1 file changed, 25 insertions(+), 15 deletions(-) diff --git a/@navikt/core/react/src/layout/base/BasePrimitive.stories.tsx b/@navikt/core/react/src/layout/base/BasePrimitive.stories.tsx index b96dc8f829..f59c2673b9 100644 --- a/@navikt/core/react/src/layout/base/BasePrimitive.stories.tsx +++ b/@navikt/core/react/src/layout/base/BasePrimitive.stories.tsx @@ -87,21 +87,31 @@ export const Padding = () => ( export const Margin = () => ( - - Margin all around - - - Margin to the North - - - Margin to the East - - - Margin to the South - - - Margin to the West - + + + Margin all around + + + + + Margin to the North + + + + + Margin to the East + + + + + Margin to the South + + + + + Margin to the West + + ); From b43858ac1fad1b45ae4777d0b11ab43b533e00cb Mon Sep 17 00:00:00 2001 From: Ken Date: Wed, 19 Jun 2024 09:01:56 +0200 Subject: [PATCH 23/24] memo: JSDoc --- @navikt/core/react/src/layout/base/PrimitiveAsChildProps.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/@navikt/core/react/src/layout/base/PrimitiveAsChildProps.ts b/@navikt/core/react/src/layout/base/PrimitiveAsChildProps.ts index 86fbbd72d7..b931a3c7fb 100644 --- a/@navikt/core/react/src/layout/base/PrimitiveAsChildProps.ts +++ b/@navikt/core/react/src/layout/base/PrimitiveAsChildProps.ts @@ -16,7 +16,9 @@ export type PrimitiveAsChildProps = */ asChild: true; /** - * When using asChild, the `as` prop is not allowed. + * Implements [OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) + * + * When using asChild, the prop is not allowed as it would have no effect. */ as?: never; } From b5f0b1540540e2668d4bff9fcf26de63fdeaae76 Mon Sep 17 00:00:00 2001 From: Ken Date: Wed, 19 Jun 2024 09:09:31 +0200 Subject: [PATCH 24/24] refactor: Removed undefined as-props from docgen --- scripts/docgen.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/scripts/docgen.ts b/scripts/docgen.ts index 72ae9cb7a2..5389aa168b 100644 --- a/scripts/docgen.ts +++ b/scripts/docgen.ts @@ -7,6 +7,9 @@ const options: docgen.ParserOptions = { shouldRemoveUndefinedFromOptional: true, propFilter: (prop) => { + if (prop.name === "as" && prop.type.name === "undefined") { + return false; + } if (prop.name === "className" || prop.parent?.name === "RefAttributes") { return true; }