🐛 Checkbox nested i CheckboxGroup mister nå ikke padding (#2612)

* 🐛 Checkbox nested i CheckboxGroup mister nå ikke padding * 🐛 Økt spesifisitet for checkbox i table
navikt · Jan 12, 2024 · 2fedeab · 2fedeab
1 parent b251e3f
commit 2fedeab
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 18 deletions.
diff --git a/.changeset/heavy-dolphins-hide.md b/.changeset/heavy-dolphins-hide.md
@@ -0,0 +1,5 @@
+---
+"@navikt/ds-css": patch
+---
+
+Table: Checkbox nested i CheckboxGroup mister nå ikke padding
diff --git a/@navikt/core/css/table.css b/@navikt/core/css/table.css
@@ -84,15 +84,15 @@
   padding: var(--a-spacing-1) var(--a-spacing-2);
 }
 
-.navds-table .navds-checkbox .navds-checkbox__input {
+.navds-table :not(.navds-checkboxes) > .navds-checkbox .navds-checkbox__input {
   top: -0.75rem;
 }
 
-.navds-table .navds-checkbox--small .navds-checkbox__input {
+.navds-table :not(.navds-checkboxes) > .navds-checkbox--small .navds-checkbox__input {
   top: -0.375rem;
 }
 
-.navds-table .navds-checkbox .navds-checkbox__label {
+.navds-table :not(.navds-checkboxes) > .navds-checkbox .navds-checkbox__label {
   padding: 0;
 }
 

diff --git a/@navikt/core/react/src/table/stories/table.stories.tsx b/@navikt/core/react/src/table/stories/table.stories.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { Table } from "../";
-import { Alert, Button, Checkbox, Link } from "../..";
+import { Alert, Button, Checkbox, CheckboxGroup, Link } from "../..";
 
 export default {
   title: "ds-react/Table",
@@ -229,22 +229,32 @@ const SelectionTable = ({ size = "medium" }: { size?: "small" | "medium" }) => {
         </Table.Row>
         <Table.Row selected={selectedRows.includes("3")}>
           <Table.DataCell>
-            <Checkbox
-              size={size}
-              hideLabel
-              checked={selectedRows.includes("3")}
-              onChange={() => toggleSelectedRow("3")}
-              aria-labelledby={`x_r3-${size}`}
-            >
-              {" "}
-            </Checkbox>
+            <CheckboxGroup legend="velg flere felt" hideLegend>
+              <Checkbox
+                size={size}
+                hideLabel
+                checked={selectedRows.includes("3")}
+                onChange={() => toggleSelectedRow("3")}
+                aria-labelledby={`x_r3-${size}`}
+              >
+                {" "}
+              </Checkbox>
+              <Checkbox
+                size={size}
+                hideLabel
+                checked={selectedRows.includes("3")}
+                onChange={() => toggleSelectedRow("3")}
+                aria-labelledby={`x_r3-${size}`}
+              >
+                {" "}
+              </Checkbox>
+            </CheckboxGroup>
           </Table.DataCell>
-          <Table.HeaderCell scope="row">
-            <span id={`x_r3-${size}`}>Rudolph Bachenmeier</span>
+          <Table.HeaderCell scope="row" colSpan={4}>
+            <span id={`x_r3-${size}`}>
+              Don&apos;t stack multiple checkboxes
+            </span>
           </Table.HeaderCell>
-          <Table.DataCell>32</Table.DataCell>
-          <Table.DataCell>Germany</Table.DataCell>
-          <Table.DataCell>70</Table.DataCell>
         </Table.Row>
       </Table.Body>
     </Table>