Implement BasePrimitive for Box, Stack and HGrid

@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);
   }

@navikt/core/css/primitives/box.css

@@ -1,29 +1,23 @@
-.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);
+.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);
@@ -32,57 +26,41 @@
   --__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);
   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 {
-    --__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);
+  .navds-box-border-radius {
     --__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);
+  .navds-box-border-radius {
     --__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);
+  .navds-box-border-radius {
     --__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);
+  .navds-box-border-radius {
     --__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);
+  .navds-box-border-radius {
     --__ac-box-border-radius: var(--__ac-box-border-radius-2xl);
   }
 }

@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<SpacingScale>;
+  /**
+   * 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<SpacingScale>;
+  /**
+   * 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,12 +180,19 @@ export interface BasePrimitiveProps {
   flexGrow?: ResponsiveProp<string>;
 }
 
+export interface BasePrimitiveProps extends PrimtiveBaseProps {
+  children: React.ReactElement;
+}
+
 export const BasePrimitive = ({
   children,
   className,
   padding,
   paddingInline,
   paddingBlock,
+  margin,
+  marginInline,
+  marginBlock,
   width,
   minWidth,
   maxWidth,
@@ -172,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),
@@ -203,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,

@navikt/core/react/src/layout/box/Box.stories.tsx

@@ -380,6 +380,14 @@ export const PaddingDemo = () => (
   </VStack>
 );
 
+export const AsChild = () => (
+  <VStack gap="4">
+    <Box borderRadius="large" padding="4" asChild>
+      <button onClick={() => alert("clicked")}>Box is now a button</button>
+    </Box>
+  </VStack>
+);
+
 export const Chromatic: Story = {
   render: () => (
     <VStack gap="2">