Implement BasePrimitive for Box, Stack and HGrid (#3003)

* feat: Implemented baseprimitive in box * refactor: segmented box-features into classes * feat: Implemented baseprimitive margin css * refactor: Correctly allow box with no children when no asChild is used * refactor: Implement BasePrimitive on Stack/HGrid, addef as-prop for hgrid * typo: Rename constant to a more 'content' nameing convention * bug: Fix slot-import * 🚧 --__ac-r-m.* * bug: Fixed nesting of className * feat: BasePrimitive now supports auto * memo: Changeset * bug: Added margin auto support for marginBlock * refactor: Redo naming of base props * bug: Typo * bug: Wrong css-token reference for pi and pb * Update @navikt/core/react/src/layout/base/BasePrimitive.tsx Co-authored-by: Halvor Haugan <[email protected]> * Update @navikt/core/react/src/layout/base/BasePrimitive.tsx Co-authored-by: Halvor Haugan <[email protected]> * bug: Removed static padding representation * Update @navikt/core/react/src/layout/base/BasePrimitive.tsx Co-authored-by: Halvor Haugan <[email protected]> * refactor: Renamed AsChildProps used in Primitives * bug: Re-added fallback to padding/margin when using a subset of breakpoints for inline/block * Update @navikt/core/react/src/layout/base/BasePrimitive.stories.tsx Co-authored-by: Halvor Haugan <[email protected]> * memo: JSDoc * refactor: Removed undefined as-props from docgen --------- Co-authored-by: Julian Nymark <[email protected]> Co-authored-by: Halvor Haugan <[email protected]>
navikt · Jun 19, 2024 · b38789b · b38789b
1 parent cb304d0
commit b38789b
Show file tree

Hide file tree

Showing 16 changed files with 569 additions and 247 deletions.
diff --git a/.changeset/silly-shrimps-peel.md 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.
diff --git a/@navikt/core/css/primitives/base.css b/@navikt/core/css/primitives/base.css
@@ -17,9 +17,9 @@
   --__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);
+  padding-inline: var(--__ac-r-pi, var(--__ac-r-padding));
 }
 
 .navds-r-pb {
@@ -29,9 +29,45 @@
   --__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);
+  padding-block: var(--__ac-r-pb, var(--__ac-r-padding));
+}
+
+.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, var(--__ac-r-margin));
+}
+
+.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, var(--__ac-r-margin));
 }
 
 .navds-r-w {
@@ -263,6 +299,18 @@
     --__ac-r-pb: var(--__ac-r-pb-sm);
   }
 
+  .navds-r-m {
+    --__ac-r-margin: var(--__ac-r-m-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-m-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-m-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-m-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-m-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/css/primitives/box.css b/@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);
   }
 }
diff --git a/@navikt/core/react/src/layout/base/BasePrimitive.stories.tsx b/@navikt/core/react/src/layout/base/BasePrimitive.stories.tsx
@@ -85,6 +85,56 @@ export const Padding = () => (
   </VStack>
 );
 
+export const Margin = () => (
+  <VStack align="center" gap="2">
+    <Box background="surface-alt-3-subtle">
+      <BasePrimitive margin="20">
+        <Box borderWidth="1">Margin all around</Box>
+      </BasePrimitive>
+    </Box>
+    <Box background="surface-alt-3-subtle">
+      <BasePrimitive margin="1" marginBlock="20 0">
+        <Box borderWidth="1">Margin to the North</Box>
+      </BasePrimitive>
+    </Box>
+    <Box background="surface-alt-3-subtle">
+      <BasePrimitive margin="1" marginInline="0 20">
+        <Box borderWidth="1">Margin to the East</Box>
+      </BasePrimitive>
+    </Box>
+    <Box background="surface-alt-3-subtle">
+      <BasePrimitive margin="1" marginBlock="0 20">
+        <Box borderWidth="1">Margin to the South</Box>
+      </BasePrimitive>
+    </Box>
+    <Box background="surface-alt-3-subtle">
+      <BasePrimitive margin="1" marginInline="20 0">
+        <Box borderWidth="1">Margin to the West</Box>
+      </BasePrimitive>
+    </Box>
+  </VStack>
+);
+
+export const MarginAuto = () => (
+  <Box width="400px" background="surface-alt-3-subtle">
+    <BasePrimitive marginInline="auto">
+      <Box borderWidth="1" width="200px">
+        MarginInline: auto
+      </Box>
+    </BasePrimitive>
+    <BasePrimitive marginInline="auto 0" marginBlock="2">
+      <Box borderWidth="1" width="200px">
+        MarginInline: auto 0
+      </Box>
+    </BasePrimitive>
+    <BasePrimitive marginInline="0 auto" marginBlock="2">
+      <Box borderWidth="1" width="200px">
+        MarginInline: 0 auto
+      </Box>
+    </BasePrimitive>
+  </Box>
+);
+
 export const HeightWidth = () => (
   <VStack align="center" gap="2">
     <BasePrimitive height="4rem">
@@ -216,6 +266,15 @@ export const Chromatic: Story = {
         <h2>Padding</h2>
         <Padding />
       </div>
+      <div>
+        <h2>Margin</h2>
+        <Margin />
+      </div>
+      <div>
+        <h2>MarginAuto</h2>
+        <MarginAuto />
+      </div>
+
       <div>
         <h2>Height & Width</h2>
         <HeightWidth />