navikt · KenAJoh · May 10, 2023 · May 10, 2023 · May 10, 2023 · May 10, 2023
diff --git a/.changeset/cyan-cars-deliver.md 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
@@ -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/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
@@ -43,7 +43,7 @@
 .navds-radio__content {
   display: flex;
   flex-direction: column;
-  gap: var(--a-spacing-1);
+  gap: 0.125rem;
 }
 
 .navds-checkbox--small > .navds-checkbox__input,

diff --git 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/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/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
@@ -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
@@ -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
@@ -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
@@ -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-form-field__subdescription 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
@@ -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-form-field__subdescription 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
@@ -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>
 );
diff --git 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>