Simplified HGrid CSS-nesting (#2917)

* test: Setup testing env for HGrid bug * refactor: Forenklet HGrid-css * memo: Changeset
navikt · May 13, 2024 · 7becf3e · 7becf3e
1 parent a358d22
commit 7becf3e
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 41 deletions.
diff --git a/.changeset/silver-insects-confess.md b/.changeset/silver-insects-confess.md
@@ -0,0 +1,5 @@
+---
+"@navikt/ds-css": patch
+---
+
+HGrid: forenklet CSS.
diff --git a/@navikt/core/css/primitives/hgrid.css b/@navikt/core/css/primitives/hgrid.css
@@ -1,17 +1,17 @@
 .navds-hgrid {
   --__ac-hgrid-columns-xs: initial;
-  --__ac-hgrid-columns-sm: initial;
-  --__ac-hgrid-columns-md: initial;
-  --__ac-hgrid-columns-lg: initial;
-  --__ac-hgrid-columns-xl: initial;
-  --__ac-hgrid-columns-2xl: initial;
+  --__ac-hgrid-columns-sm: var(--__ac-hgrid-columns-xs);
+  --__ac-hgrid-columns-md: var(--__ac-hgrid-columns-sm);
+  --__ac-hgrid-columns-lg: var(--__ac-hgrid-columns-md);
+  --__ac-hgrid-columns-xl: var(--__ac-hgrid-columns-lg);
+  --__ac-hgrid-columns-2xl: var(--__ac-hgrid-columns-xl);
   --__ac-hgrid-columns: var(--__ac-hgrid-columns-xs);
   --__ac-hgrid-gap-xs: initial;
-  --__ac-hgrid-gap-sm: initial;
-  --__ac-hgrid-gap-md: initial;
-  --__ac-hgrid-gap-lg: initial;
-  --__ac-hgrid-gap-xl: initial;
-  --__ac-hgrid-gap-2xl: initial;
+  --__ac-hgrid-gap-sm: var(--__ac-hgrid-gap-xs);
+  --__ac-hgrid-gap-md: var(--__ac-hgrid-gap-sm);
+  --__ac-hgrid-gap-lg: var(--__ac-hgrid-gap-md);
+  --__ac-hgrid-gap-xl: var(--__ac-hgrid-gap-lg);
+  --__ac-hgrid-gap-2xl: var(--__ac-hgrid-gap-xl);
   --__ac-hgrid-gap: var(--__ac-hgrid-gap-xs);
   --__ac-hgrid-align: initial;
 
@@ -23,56 +23,35 @@
 
 @media (min-width: 480px) {
   .navds-hgrid {
-    --__ac-hgrid-columns: var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs));
-    --__ac-hgrid-gap: var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs));
+    --__ac-hgrid-columns: var(--__ac-hgrid-columns-sm);
+    --__ac-hgrid-gap: var(--__ac-hgrid-gap-sm);
   }
 }
 
 @media (min-width: 768px) {
   .navds-hgrid {
-    --__ac-hgrid-columns: var(--__ac-hgrid-columns-md, var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs)));
-    --__ac-hgrid-gap: var(--__ac-hgrid-gap-md, var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs)));
+    --__ac-hgrid-columns: var(--__ac-hgrid-columns-md);
+    --__ac-hgrid-gap: var(--__ac-hgrid-gap-md);
   }
 }
 
 @media (min-width: 1024px) {
   .navds-hgrid {
-    --__ac-hgrid-columns: var(
-      --__ac-hgrid-columns-lg,
-      var(--__ac-hgrid-columns-md, var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs)))
-    );
-    --__ac-hgrid-gap: var(--__ac-hgrid-gap-lg, var(--__ac-hgrid-gap-md, var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs))));
+    --__ac-hgrid-columns: var(--__ac-hgrid-columns-lg);
+    --__ac-hgrid-gap: var(--__ac-hgrid-gap-lg);
   }
 }
 
 @media (min-width: 1280px) {
   .navds-hgrid {
-    --__ac-hgrid-columns: var(
-      --__ac-hgrid-columns-xl,
-      var(--__ac-hgrid-columns-lg, var(--__ac-hgrid-columns-md, var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs))))
-    );
-    --__ac-hgrid-gap: var(
-      --__ac-hgrid-gap-xl,
-      var(--__ac-hgrid-gap-lg, var(--__ac-hgrid-gap-md, var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs))))
-    );
+    --__ac-hgrid-columns: var(--__ac-hgrid-columns-xl);
+    --__ac-hgrid-gap: var(--__ac-hgrid-gap-xl);
   }
 }
 
 @media (min-width: 1440px) {
   .navds-hgrid {
-    --__ac-hgrid-columns: var(
-      --__ac-hgrid-columns-2xl,
-      var(
-        --__ac-hgrid-columns-xl,
-        var(--__ac-hgrid-columns-lg, var(--__ac-hgrid-columns-md, var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs))))
-      )
-    );
-    --__ac-hgrid-gap: var(
-      --__ac-hgrid-gap-2xl,
-      var(
-        --__ac-hgrid-gap-xl,
-        var(--__ac-hgrid-gap-lg, var(--__ac-hgrid-gap-md, var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs))))
-      )
-    );
+    --__ac-hgrid-columns: var(--__ac-hgrid-columns-2xl);
+    --__ac-hgrid-gap: var(--__ac-hgrid-gap-2xl);
   }
 }
diff --git a/@navikt/core/react/src/layout/grid/h-grid.stories.tsx b/@navikt/core/react/src/layout/grid/h-grid.stories.tsx
@@ -110,6 +110,21 @@ export const AlignItems = {
   ),
 };
 
+export const Nested = {
+  render: () => (
+    <HGrid columns={{ xs: 1, sm: 2 }} gap="8">
+      <HGrid columns={2} gap="2">
+        <Placeholder text="1" />
+        <Placeholder text="2" />
+      </HGrid>
+      <HGrid columns={2} gap="2">
+        <Placeholder text="3" />
+        <Placeholder text="4" />
+      </HGrid>
+    </HGrid>
+  ),
+};
+
 function Placeholder({ text, height }: { text: string; height?: string }) {
   return (
     <div
@@ -148,6 +163,10 @@ export const Chromatic: Story = {
         <h2>AlignItems</h2>
         <AlignItems.render />
       </div>
+      <div>
+        <h2>Nested</h2>
+        <Nested.render />
+      </div>
     </VStack>
   ),
   parameters: {