From 2fedeab6050a69d2bb8d803c4e0d71739d443c7b Mon Sep 17 00:00:00 2001
From: Ken <26967723+KenAJoh@users.noreply.github.com>
Date: Fri, 12 Jan 2024 20:30:54 +0100
Subject: [PATCH] =?UTF-8?q?:bug:=20`Checkbox`=20nested=20i=20`CheckboxGrou?=
 =?UTF-8?q?p`=20mister=20n=C3=A5=20ikke=20padding=20(#2612)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* :bug: Checkbox nested i CheckboxGroup mister nå ikke padding

* :bug: Økt spesifisitet for checkbox i table
---
 .changeset/heavy-dolphins-hide.md             |  5 +++
 @navikt/core/css/table.css                    |  6 +--
 .../react/src/table/stories/table.stories.tsx | 40 ++++++++++++-------
 3 files changed, 33 insertions(+), 18 deletions(-)
 create mode 100644 .changeset/heavy-dolphins-hide.md

diff --git a/.changeset/heavy-dolphins-hide.md b/.changeset/heavy-dolphins-hide.md
new file mode 100644
index 0000000000..a2dc5248dc
--- /dev/null
+++ 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
index e8cae5b602..bfc93c15ee 100644
--- 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
index 893665df19..b5d3008596 100644
--- 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>