From 54924cb9e5f4e8e37d7f961fc71894f8b8a20e6e Mon Sep 17 00:00:00 2001
From: Ken <ken.aleksander@gmail.com>
Date: Wed, 10 May 2023 08:56:25 +0200
Subject: [PATCH 1/2] :lipstick: Oppdatert label/description for
 skjemakomponenter

---
 .changeset/cyan-cars-deliver.md               |  6 +++
 @navikt/core/css/form/fieldset.css            |  2 +-
 @navikt/core/css/form/radio-checkbox.css      |  7 +++-
 .../core/react/src/form/Fieldset/Fieldset.tsx | 38 +++++++------------
 .../core/react/src/form/checkbox/Checkbox.tsx | 12 +++---
 @navikt/core/react/src/form/radio/Radio.tsx   | 12 +++---
 .../react/src/form/radio/radio.stories.tsx    |  4 +-
 7 files changed, 43 insertions(+), 38 deletions(-)
 create mode 100644 .changeset/cyan-cars-deliver.md

diff --git a/.changeset/cyan-cars-deliver.md b/.changeset/cyan-cars-deliver.md
new file mode 100644
index 0000000000..2522d70414
--- /dev/null
+++ b/.changeset/cyan-cars-deliver.md
@@ -0,0 +1,6 @@
+---
+"@navikt/ds-css": patch
+"@navikt/ds-react": patch
+---
+
+:lipstick: Oppdatert Label og Description spacing for skjemakomponenter
diff --git a/@navikt/core/css/form/fieldset.css b/@navikt/core/css/form/fieldset.css
index c9b3faf0ff..dcfa3c05b3 100644
--- a/@navikt/core/css/form/fieldset.css
+++ b/@navikt/core/css/form/fieldset.css
@@ -10,7 +10,7 @@
 }
 
 .navds-fieldset > .navds-fieldset__description:not(:empty) {
-  margin-top: var(--a-spacing-1);
+  margin-top: 0.125rem;
 }
 
 /* Applied when hideLegend is applied to fieldset */
diff --git a/@navikt/core/css/form/radio-checkbox.css b/@navikt/core/css/form/radio-checkbox.css
index bb66915512..0c4a73d421 100644
--- a/@navikt/core/css/form/radio-checkbox.css
+++ b/@navikt/core/css/form/radio-checkbox.css
@@ -43,7 +43,12 @@
 .navds-radio__content {
   display: flex;
   flex-direction: column;
-  gap: var(--a-spacing-1);
+  gap: 0.125rem;
+}
+
+.navds-checkbox__description,
+.navds-radio__description {
+  color: var(--a-text-subtle);
 }
 
 .navds-checkbox--small > .navds-checkbox__input,
diff --git a/@navikt/core/react/src/form/Fieldset/Fieldset.tsx b/@navikt/core/react/src/form/Fieldset/Fieldset.tsx
index ae937ca1f5..e572ba7ee6 100644
--- a/@navikt/core/react/src/form/Fieldset/Fieldset.tsx
+++ b/@navikt/core/react/src/form/Fieldset/Fieldset.tsx
@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { FieldsetHTMLAttributes, forwardRef, useContext } from "react";
-import { BodyLong, Detail, Label, ErrorMessage, omit } from "../..";
+import { BodyShort, ErrorMessage, Label, omit } from "../..";
 import { FormFieldProps } from "../useFormField";
 import { useFieldset } from "./useFieldset";
 
@@ -104,30 +104,18 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
           >
             {legend}
           </Label>
-          {!!description &&
-            (size === "medium" ? (
-              <BodyLong
-                className={cl("navds-fieldset__description", {
-                  "navds-sr-only": !!hideLegend,
-                })}
-                id={inputDescriptionId}
-                size="small"
-                as="div"
-              >
-                {props.description}
-              </BodyLong>
-            ) : (
-              <Detail
-                className={cl("navds-fieldset__description", {
-                  "navds-sr-only": !!hideLegend,
-                })}
-                id={inputDescriptionId}
-                size="small"
-                as="div"
-              >
-                {props.description}
-              </Detail>
-            ))}
+          {!!description && (
+            <BodyShort
+              className={cl("navds-fieldset__description", {
+                "navds-sr-only": !!hideLegend,
+              })}
+              id={inputDescriptionId}
+              size={size ?? "medium"}
+              as="div"
+            >
+              {props.description}
+            </BodyShort>
+          )}
           {children}
           <div
             id={errorId}
diff --git a/@navikt/core/react/src/form/checkbox/Checkbox.tsx b/@navikt/core/react/src/form/checkbox/Checkbox.tsx
index eca476c5d7..7948fece72 100644
--- a/@navikt/core/react/src/form/checkbox/Checkbox.tsx
+++ b/@navikt/core/react/src/form/checkbox/Checkbox.tsx
@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef, InputHTMLAttributes } from "react";
-import { BodyLong, BodyShort, Detail } from "../../typography";
+import { BodyShort } from "../../typography";
 import { omit } from "../../util";
 import { FormFieldProps } from "../useFormField";
 import useCheckbox from "./useCheckbox";
@@ -44,8 +44,6 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
   (props, ref) => {
     const { inputProps, hasError, size } = useCheckbox(props);
 
-    const Description = size === "medium" ? BodyLong : Detail;
-
     return (
       <div
         className={cl(
@@ -94,9 +92,13 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
               {props.children}
             </BodyShort>
             {props.description && (
-              <Description as="span" className="navds-checkbox__description">
+              <BodyShort
+                as="span"
+                size={size}
+                className="navds-checkbox__description"
+              >
                 {props.description}
-              </Description>
+              </BodyShort>
             )}
           </span>
         </label>
diff --git a/@navikt/core/react/src/form/radio/Radio.tsx b/@navikt/core/react/src/form/radio/Radio.tsx
index 89954f8087..b82e46d597 100644
--- a/@navikt/core/react/src/form/radio/Radio.tsx
+++ b/@navikt/core/react/src/form/radio/Radio.tsx
@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef, InputHTMLAttributes } from "react";
-import { BodyLong, BodyShort, Detail } from "../../typography";
+import { BodyShort } from "../../typography";
 import { omit } from "../../util";
 import { FormFieldProps } from "../useFormField";
 import { useRadio } from "./useRadio";
@@ -25,8 +25,6 @@ export interface RadioProps
 export const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
   const { inputProps, size, hasError } = useRadio(props);
 
-  const Description = size === "medium" ? BodyLong : Detail;
-
   return (
     <div
       className={cl(props.className, "navds-radio", `navds-radio--${size}`, {
@@ -46,9 +44,13 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
             {props.children}
           </BodyShort>
           {props.description && (
-            <Description as="span" className="navds-radio__description">
+            <BodyShort
+              as="span"
+              size={size}
+              className="navds-radio__description"
+            >
               {props.description}
-            </Description>
+            </BodyShort>
           )}
         </span>
       </label>
diff --git a/@navikt/core/react/src/form/radio/radio.stories.tsx b/@navikt/core/react/src/form/radio/radio.stories.tsx
index 17492f4154..81a37ecca4 100644
--- a/@navikt/core/react/src/form/radio/radio.stories.tsx
+++ b/@navikt/core/react/src/form/radio/radio.stories.tsx
@@ -86,7 +86,9 @@ export const GroupDescription = () => (
     defaultValue="tekst2"
     description="Group description"
   >
-    <Radio value="tekst">Radiotekst</Radio>
+    <Radio value="tekst" description="textdesc">
+      Radiotekst
+    </Radio>
     <Radio value="tekst2">Radiotekst</Radio>
   </RadioGroup>
 );

From 878ca0317725e2e1daf7c162eae60b76f5fb7e1a Mon Sep 17 00:00:00 2001
From: Ken <ken.aleksander@gmail.com>
Date: Wed, 10 May 2023 11:30:51 +0200
Subject: [PATCH 2/2] :art: Fikset description-size for alle skjema-komponenter

---
 @navikt/core/css/form/form.css                |  6 ++-
 @navikt/core/css/form/radio-checkbox.css      |  5 ---
 @navikt/core/css/form/switch.css              |  2 +-
 @navikt/core/react/src/form/Select.tsx        | 39 ++++++-----------
 @navikt/core/react/src/form/Switch.tsx        | 12 +++---
 @navikt/core/react/src/form/TextField.tsx     | 39 ++++++-----------
 @navikt/core/react/src/form/Textarea.tsx      | 42 ++++++-------------
 .../core/react/src/form/checkbox/Checkbox.tsx |  2 +-
 @navikt/core/react/src/form/radio/Radio.tsx   |  2 +-
 @navikt/core/react/src/form/search/Search.tsx |  2 +-
 10 files changed, 51 insertions(+), 100 deletions(-)

diff --git a/@navikt/core/css/form/form.css b/@navikt/core/css/form/form.css
index 2eb671afac..285897202d 100644
--- a/@navikt/core/css/form/form.css
+++ b/@navikt/core/css/form/form.css
@@ -5,7 +5,7 @@
 }
 
 .navds-form-field__description {
-  margin-top: -4px;
+  margin-top: -6px;
 }
 
 .navds-form-field .navds-error-message,
@@ -27,3 +27,7 @@
 .navds-form-field__error:empty {
   display: none;
 }
+
+.navds-form-field__subdescription {
+  color: var(--ac-form-subdescription, var(--a-text-subtle));
+}
diff --git a/@navikt/core/css/form/radio-checkbox.css b/@navikt/core/css/form/radio-checkbox.css
index 0c4a73d421..8d5c04b39e 100644
--- a/@navikt/core/css/form/radio-checkbox.css
+++ b/@navikt/core/css/form/radio-checkbox.css
@@ -46,11 +46,6 @@
   gap: 0.125rem;
 }
 
-.navds-checkbox__description,
-.navds-radio__description {
-  color: var(--a-text-subtle);
-}
-
 .navds-checkbox--small > .navds-checkbox__input,
 .navds-radio--small > .navds-radio__input {
   width: 32px;
diff --git a/@navikt/core/css/form/switch.css b/@navikt/core/css/form/switch.css
index bc6b43559c..de1cd176ae 100644
--- a/@navikt/core/css/form/switch.css
+++ b/@navikt/core/css/form/switch.css
@@ -38,7 +38,7 @@
 .navds-switch__content {
   display: flex;
   flex-direction: column;
-  gap: var(--a-spacing-1);
+  gap: 0.125rem;
   padding: 0.75rem 0 0.75rem 3.25rem;
 }
 
diff --git a/@navikt/core/react/src/form/Select.tsx b/@navikt/core/react/src/form/Select.tsx
index 91d4eef415..b86204d689 100644
--- a/@navikt/core/react/src/form/Select.tsx
+++ b/@navikt/core/react/src/form/Select.tsx
@@ -1,8 +1,8 @@
-import React, { forwardRef, SelectHTMLAttributes } from "react";
 import cl from "clsx";
+import React, { forwardRef, SelectHTMLAttributes } from "react";
 
 import { ChevronDownIcon } from "@navikt/aksel-icons";
-import { BodyLong, Label, ErrorMessage, omit, Detail } from "..";
+import { BodyShort, ErrorMessage, Label, omit } from "..";
 import { FormFieldProps, useFormField } from "./useFormField";
 
 export interface SelectProps
@@ -74,31 +74,16 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
           {label}
         </Label>
         {!!description && (
-          <>
-            {size === "medium" ? (
-              <BodyLong
-                className={cl("navds-form-field__description", {
-                  "navds-sr-only": hideLabel,
-                })}
-                id={inputDescriptionId}
-                size="small"
-                as="div"
-              >
-                {description}
-              </BodyLong>
-            ) : (
-              <Detail
-                className={cl("navds-form-field__description", {
-                  "navds-sr-only": hideLabel,
-                })}
-                id={inputDescriptionId}
-                size="small"
-                as="div"
-              >
-                {description}
-              </Detail>
-            )}
-          </>
+          <BodyShort
+            className={cl("navds-form-field__description", {
+              "navds-sr-only": hideLabel,
+            })}
+            id={inputDescriptionId}
+            size={size}
+            as="div"
+          >
+            {description}
+          </BodyShort>
         )}
         <div className="navds-select__container" style={style}>
           <select
diff --git a/@navikt/core/react/src/form/Switch.tsx b/@navikt/core/react/src/form/Switch.tsx
index f3b955c83a..12a8b0b620 100644
--- a/@navikt/core/react/src/form/Switch.tsx
+++ b/@navikt/core/react/src/form/Switch.tsx
@@ -5,7 +5,7 @@ import React, {
   useEffect,
   useState,
 } from "react";
-import { BodyShort, Detail, Loader, omit } from "..";
+import { BodyShort, Loader, omit } from "..";
 import { FormFieldProps, useFormField } from "./useFormField";
 
 const SelectedIcon = () => (
@@ -71,8 +71,6 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
       ...rest
     } = props;
 
-    const Description = size === "medium" ? BodyShort : Detail;
-
     const [checked, setChecked] = useState(
       defaultChecked ?? checkedProp ?? false
     );
@@ -130,13 +128,13 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
               {children}
             </BodyShort>
             {description && (
-              <Description
+              <BodyShort
+                size={size}
                 as="div"
-                size="small"
-                className="navds-switch__description"
+                className="navds-form-field__subdescription navds-switch__description"
               >
                 {description}
-              </Description>
+              </BodyShort>
             )}
           </div>
         </label>
diff --git a/@navikt/core/react/src/form/TextField.tsx b/@navikt/core/react/src/form/TextField.tsx
index 0f07dea1f5..bed1d98e91 100644
--- a/@navikt/core/react/src/form/TextField.tsx
+++ b/@navikt/core/react/src/form/TextField.tsx
@@ -1,6 +1,6 @@
-import React, { forwardRef, InputHTMLAttributes } from "react";
 import cl from "clsx";
-import { BodyLong, Detail, Label, ErrorMessage, omit } from "..";
+import React, { forwardRef, InputHTMLAttributes } from "react";
+import { BodyShort, ErrorMessage, Label, omit } from "..";
 import { FormFieldProps, useFormField } from "./useFormField";
 
 export interface TextFieldProps
@@ -78,31 +78,16 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
         </Label>
 
         {!!description && (
-          <>
-            {size === "medium" ? (
-              <BodyLong
-                className={cl("navds-form-field__description", {
-                  "navds-sr-only": hideLabel,
-                })}
-                id={inputDescriptionId}
-                size="small"
-                as="div"
-              >
-                {description}
-              </BodyLong>
-            ) : (
-              <Detail
-                className={cl("navds-form-field__description", {
-                  "navds-sr-only": hideLabel,
-                })}
-                id={inputDescriptionId}
-                size="small"
-                as="div"
-              >
-                {description}
-              </Detail>
-            )}
-          </>
+          <BodyShort
+            className={cl("navds-form-field__description", {
+              "navds-sr-only": hideLabel,
+            })}
+            id={inputDescriptionId}
+            size={size}
+            as="div"
+          >
+            {description}
+          </BodyShort>
         )}
         <input
           {...omit(rest, ["error", "errorId", "size"])}
diff --git a/@navikt/core/react/src/form/Textarea.tsx b/@navikt/core/react/src/form/Textarea.tsx
index f0b695fa21..bc296c9616 100644
--- a/@navikt/core/react/src/form/Textarea.tsx
+++ b/@navikt/core/react/src/form/Textarea.tsx
@@ -1,9 +1,8 @@
-import React, { forwardRef, useState } from "react";
 import cl from "clsx";
-import { BodyShort, BodyLong, Label, ErrorMessage, omit, Detail } from "..";
-import { FormFieldProps, useFormField } from "./useFormField";
-import { useId } from "..";
+import React, { forwardRef, useState } from "react";
+import { BodyShort, ErrorMessage, Label, omit, useId } from "..";
 import TextareaAutosize from "../util/TextareaAutoSize";
+import { FormFieldProps, useFormField } from "./useFormField";
 
 /**
  * TODO: Mulighet for lokalisering av sr-only/counter text
@@ -120,31 +119,16 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
           {label}
         </Label>
         {!!description && (
-          <>
-            {size === "medium" ? (
-              <BodyLong
-                className={cl("navds-form-field__description", {
-                  "navds-sr-only": hideLabel,
-                })}
-                id={inputDescriptionId}
-                size="small"
-                as="div"
-              >
-                {description}
-              </BodyLong>
-            ) : (
-              <Detail
-                className={cl("navds-form-field__description", {
-                  "navds-sr-only": hideLabel,
-                })}
-                id={inputDescriptionId}
-                size="small"
-                as="div"
-              >
-                {description}
-              </Detail>
-            )}
-          </>
+          <BodyShort
+            className={cl("navds-form-field__description", {
+              "navds-sr-only": hideLabel,
+            })}
+            id={inputDescriptionId}
+            size={size}
+            as="div"
+          >
+            {description}
+          </BodyShort>
         )}
         <div className="navds-textarea__wrapper">
           <TextareaAutosize
diff --git a/@navikt/core/react/src/form/checkbox/Checkbox.tsx b/@navikt/core/react/src/form/checkbox/Checkbox.tsx
index 7948fece72..da611a540a 100644
--- a/@navikt/core/react/src/form/checkbox/Checkbox.tsx
+++ b/@navikt/core/react/src/form/checkbox/Checkbox.tsx
@@ -95,7 +95,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
               <BodyShort
                 as="span"
                 size={size}
-                className="navds-checkbox__description"
+                className="navds-form-field__subdescription navds-checkbox__description"
               >
                 {props.description}
               </BodyShort>
diff --git a/@navikt/core/react/src/form/radio/Radio.tsx b/@navikt/core/react/src/form/radio/Radio.tsx
index b82e46d597..8d72601cf5 100644
--- a/@navikt/core/react/src/form/radio/Radio.tsx
+++ b/@navikt/core/react/src/form/radio/Radio.tsx
@@ -47,7 +47,7 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
             <BodyShort
               as="span"
               size={size}
-              className="navds-radio__description"
+              className="navds-form-field__subdescription navds-radio__description"
             >
               {props.description}
             </BodyShort>
diff --git a/@navikt/core/react/src/form/search/Search.tsx b/@navikt/core/react/src/form/search/Search.tsx
index b496ddcd59..e3fda11703 100644
--- a/@navikt/core/react/src/form/search/Search.tsx
+++ b/@navikt/core/react/src/form/search/Search.tsx
@@ -181,12 +181,12 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
         </Label>
         {!!description && (
           <BodyShort
-            as="div"
             className={cl("navds-form-field__description", {
               "navds-sr-only": hideLabel,
             })}
             id={inputDescriptionId}
             size={size}
+            as="div"
           >
             {description}
           </BodyShort>