Lerna versionbump [ci skip]

- @navikt/ds-css@0.18.14
 - @navikt/ds-react@0.19.13
 - @navikt/ds-react-internal@0.14.14

@navikt/core/css/form/error-summary.css

@@ -28,6 +28,7 @@
   flex-direction: column;
   gap: var(--navds-spacing-3);
   padding-left: var(--navds-spacing-6);
+  list-style: inherit;
 }
 
 .navds-error-summary__list > * {

@navikt/core/css/form/form.css

@@ -1,12 +1,11 @@
-.navds-form-field > :not(:first-child):not(:empty),
-.navds-form-field > input:not(:first-child) {
-  margin-top: var(--navds-spacing-2);
+.navds-form-field {
+  display: grid;
+  justify-items: start;
+  gap: var(--navds-spacing-2);
 }
 
-/* Applied when hideLabel is applied to form-element */
-.navds-form-field > .navds-sr-only + :not(:first-child):not(:empty),
-.navds-form-field > .navds-sr-only + input:not(:first-child) {
-  margin-top: 0;
+.navds-form-field__description {
+  margin-top: -4px;
 }
 
 .navds-form-field .navds-error-message,
@@ -19,3 +18,12 @@
 .navds-fieldset .navds-error-message::before {
   content: "•";
 }
+
+.navds-form-field--disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+.navds-form-field__error:empty {
+  display: none;
+}

@navikt/core/css/form/select.css

@@ -70,13 +70,6 @@
   border-color: var(--navds-select-color-border-error);
 }
 
-/*
-  Disabled handling
- */
-.navds-select--disabled {
-  opacity: 0.3;
-}
-
 .navds-select__input:disabled {
   background-color: var(--navds-select-color-background);
   border-color: var(--navds-select-color-border);

@navikt/core/css/form/text-field.css

@@ -45,6 +45,10 @@
   color: var(--navds-text-field-color-text);
 }
 
+.navds-text-field__input[size] {
+  width: auto;
+}
+
 .navds-text-field__input::placeholder {
   color: var(--navds-text-field-color-placeholder-text);
 }
@@ -54,10 +58,6 @@
   min-height: 32px;
 }
 
-.navds-form-field--small > .navds-text-field__description:not(:empty) {
-  margin-top: var(--navds-spacing-1);
-}
-
 .navds-text-field__input:hover {
   border-color: var(--navds-text-field-color-border-hover);
 }
@@ -87,7 +87,6 @@
   border-color: var(--navds-text-field-color-border);
   box-shadow: none;
   cursor: not-allowed;
-  opacity: 0.3;
 }
 
 .navds-text-field__input[readonly] {
@@ -97,11 +96,6 @@
   cursor: not-allowed;
 }
 
-.navds-text-field--disabled > .navds-text-field__label,
-.navds-text-field--disabled > .navds-text-field__description {
-  opacity: 0.3;
-}
-
 /**
   * Removes default search icon
   */

@navikt/core/css/form/textarea.css

@@ -89,13 +89,6 @@
   border-color: var(--navds-textarea-color-border-error);
 }
 
-/*
-  Disabled handling
- */
-.navds-textarea--disabled {
-  opacity: 0.3;
-}
-
 .navds-textarea__input:disabled {
   background-color: var(--navds-textarea-color-background);
   border-color: var(--navds-textarea-color-border);

@navikt/core/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "0.18.12",
+  "version": "0.18.14",
   "description": "Css for NAV Designsystem components",
   "author": "NAV Designsystem team",
   "keywords": [

@navikt/core/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "0.19.12",
+  "version": "0.19.13",
   "description": "NAV designsystem react components",
   "author": "NAV Designsystem team",
   "license": "MIT",

@navikt/core/react/src/form/ConfirmationPanel.tsx

@@ -57,7 +57,12 @@ export const ConfirmationPanel = forwardRef<
           {label}
         </Checkbox>
       </div>
-      <div id={errorId} aria-relevant="additions removals" aria-live="polite">
+      <div
+        className="navds-form-field__error"
+        id={errorId}
+        aria-relevant="additions removals"
+        aria-live="polite"
+      >
         {showErrorMsg && <ErrorMessage size={size}>{props.error}</ErrorMessage>}
       </div>
     </div>

@navikt/core/react/src/form/Select.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef, SelectHTMLAttributes } from "react";
 import cl from "classnames";
 import { Expand } from "@navikt/ds-icons";
-import { BodyShort, Label, ErrorMessage, omit } from "..";
+import { BodyShort, Label, ErrorMessage, omit, Detail } from "..";
 import { FormFieldProps, useFormField } from "./useFormField";
 
 export interface SelectProps
@@ -53,8 +53,8 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
           "navds-form-field",
           `navds-form-field--${size}`,
           {
+            "navds-form-field--disabled": !!inputProps.disabled,
             "navds-select--error": hasError,
-            "navds-select--disabled": !!inputProps.disabled,
           }
         )}
       >
@@ -62,23 +62,38 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
           htmlFor={inputProps.id}
           size={size}
           as="label"
-          className={cl("navds-select__label", {
+          className={cl("navds-form-field__label", {
             "navds-sr-only": hideLabel,
           })}
         >
           {label}
         </Label>
         {!!description && (
-          <BodyShort
-            as="div"
-            className={cl("navds-select__description", {
-              "navds-sr-only": hideLabel,
-            })}
-            id={inputDescriptionId}
-            size={size}
-          >
-            {description}
-          </BodyShort>
+          <>
+            {size === "medium" ? (
+              <BodyShort
+                className={cl("navds-form-field__description", {
+                  "navds-sr-only": hideLabel,
+                })}
+                id={inputDescriptionId}
+                size="small"
+                as="div"
+              >
+                {description}
+              </BodyShort>
+            ) : (
+              <Detail
+                className={cl("navds-form-field__description", {
+                  "navds-sr-only": hideLabel,
+                })}
+                id={inputDescriptionId}
+                size="small"
+                as="div"
+              >
+                {description}
+              </Detail>
+            )}
+          </>
         )}
         <div className="navds-select__container">
           <select
@@ -96,7 +111,12 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
           </select>
           <Expand className="navds-select__chevron" aria-hidden />
         </div>
-        <div id={errorId} aria-relevant="additions removals" aria-live="polite">
+        <div
+          className="navds-form-field__error"
+          id={errorId}
+          aria-relevant="additions removals"
+          aria-live="polite"
+        >
           {showErrorMsg && (
             <ErrorMessage size={size}>{props.error}</ErrorMessage>
           )}

@navikt/core/react/src/form/TextField.tsx

@@ -63,6 +63,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
           {
             "navds-text-field--error": hasError,
             "navds-text-field--disabled": !!inputProps.disabled,
+            "navds-form-field--disabled": !!inputProps.disabled,
           }
         )}
       >
@@ -70,7 +71,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
           htmlFor={inputProps.id}
           size={size}
           as="label"
-          className={cl("navds-text-field__label", {
+          className={cl("navds-form-field__label", {
             "navds-sr-only": hideLabel,
           })}
         >
@@ -81,7 +82,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
           <>
             {size === "medium" ? (
               <BodyShort
-                className={cl("navds-text-field__description", {
+                className={cl("navds-form-field__description", {
                   "navds-sr-only": hideLabel,
                 })}
                 id={inputDescriptionId}
@@ -92,7 +93,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
               </BodyShort>
             ) : (
               <Detail
-                className={cl("navds-text-field__description", {
+                className={cl("navds-form-field__description", {
                   "navds-sr-only": hideLabel,
                 })}
                 id={inputDescriptionId}
@@ -116,7 +117,12 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
           )}
           size={htmlSize}
         />
-        <div id={errorId} aria-relevant="additions removals" aria-live="polite">
+        <div
+          className="navds-form-field__error"
+          id={errorId}
+          aria-relevant="additions removals"
+          aria-live="polite"
+        >
           {showErrorMsg && (
             <ErrorMessage size={size}>{props.error}</ErrorMessage>
           )}

@navikt/core/react/src/form/Textarea.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef, useState } from "react";
 import cl from "classnames";
 import TextareaAutosize from "@material-ui/core/TextareaAutosize";
-import { BodyShort, Label, ErrorMessage, omit } from "..";
+import { BodyShort, Label, ErrorMessage, omit, Detail } from "..";
 import { FormFieldProps, useFormField } from "./useFormField";
 import { useId } from "..";
 
@@ -90,8 +90,8 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
           "navds-form-field",
           `navds-form-field--${size}`,
           {
+            "navds-form-field--disabled": !!inputProps.disabled,
             "navds-textarea--error": hasError,
-            "navds-textarea--disabled": !!inputProps.disabled,
             "navds-textarea--resize": resize,
           }
         )}
@@ -100,23 +100,38 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
           htmlFor={inputProps.id}
           size={size}
           as="label"
-          className={cl("navds-textarea__label", {
+          className={cl("navds-form-field__label", {
             "navds-sr-only": hideLabel,
           })}
         >
           {label}
         </Label>
         {!!description && (
-          <BodyShort
-            as="div"
-            className={cl("navds-textarea__description", {
-              "navds-sr-only": hideLabel,
-            })}
-            id={inputDescriptionId}
-            size={size}
-          >
-            {description}
-          </BodyShort>
+          <>
+            {size === "medium" ? (
+              <BodyShort
+                className={cl("navds-form-field__description", {
+                  "navds-sr-only": hideLabel,
+                })}
+                id={inputDescriptionId}
+                size="small"
+                as="div"
+              >
+                {description}
+              </BodyShort>
+            ) : (
+              <Detail
+                className={cl("navds-form-field__description", {
+                  "navds-sr-only": hideLabel,
+                })}
+                id={inputDescriptionId}
+                size="small"
+                as="div"
+              >
+                {description}
+              </Detail>
+            )}
+          </>
         )}
         <div className="navds-textarea__wrapper">
           <TextareaAutosize
@@ -155,7 +170,12 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
             </>
           )}
         </div>
-        <div id={errorId} aria-relevant="additions removals" aria-live="polite">
+        <div
+          className="navds-form-field__error"
+          id={errorId}
+          aria-relevant="additions removals"
+          aria-live="polite"
+        >
           {showErrorMsg && (
             <ErrorMessage size={size}>{props.error}</ErrorMessage>
           )}

@navikt/core/react/src/form/search/Search.tsx

@@ -78,10 +78,11 @@ export const SearchContext = React.createContext<SearchContextProps | null>(
 
 export const Search = forwardRef<HTMLInputElement, SearchProps>(
   (props, ref) => {
-    const { inputProps, size = "medium", inputDescriptionId } = useSearch(
-      props,
-      "searchfield"
-    );
+    const {
+      inputProps,
+      size = "medium",
+      inputDescriptionId,
+    } = useSearch(props, "searchfield");
 
     const {
       className,
@@ -153,7 +154,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
           htmlFor={inputProps.id}
           size={size}
           as="label"
-          className={cl("navds-text-field__label", {
+          className={cl("navds-form-field__label", {
             "navds-sr-only": hideLabel,
           })}
         >
@@ -162,7 +163,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
         {!!description && (
           <BodyShort
             as="div"
-            className={cl("navds-text-field__description", {
+            className={cl("navds-form-field__description", {
               "navds-sr-only": hideLabel,
             })}
             id={inputDescriptionId}

@navikt/core/react/src/form/stories/fieldset.stories.tsx

@@ -61,8 +61,14 @@ export const Description = () => (
     legend="Mollit eiusmod"
     description="Esse cupidatat reprehenderit est culpa consectetur sit dolor esse."
   >
-    <TextField label="Textfield label" hideLabel />
-    <TextField label="Textfield label" hideLabel />
+    <TextField
+      label="Textfield label"
+      description="Amet quis cillum incididunt "
+    />
+    <TextField
+      label="Textfield label"
+      description="Enim et occaecat voluptate labore sit do exercitation laborum non "
+    />
   </Fieldset>
 );
 

@navikt/core/react/src/form/stories/textarea.stories.tsx

@@ -44,6 +44,7 @@ export const Default = (props) => {
 
 Default.args = {
   maxLength: 100,
+  resize: false,
 };
 
 export const Small = () => {

@navikt/internal/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react-internal",
-  "version": "0.14.12",
+  "version": "0.14.14",
   "description": "NAV internal designsystem react components",
   "author": "NAV Designsystem team",
   "license": "MIT",
@@ -35,7 +35,7 @@
   },
   "dependencies": {
     "@navikt/ds-icons": "^0.8.17",
-    "@navikt/ds-react": "^0.19.12",
+    "@navikt/ds-react": "^0.19.13",
     "@popperjs/core": "^2.10.1",
     "classnames": "^2.3.1",
     "copy-to-clipboard": "^3.3.1",

@navikt/internal/react/src/dropdown/Menu/index.tsx

@@ -14,6 +14,23 @@ interface MenuProps extends React.HTMLAttributes<HTMLDivElement> {
    * onClose callback
    */
   onClose?: () => void;
+  /**
+   * Default dialog-placement on open
+   * @default "bottom-end"
+   */
+  placement?:
+    | "top"
+    | "bottom"
+    | "right"
+    | "left"
+    | "top-start"
+    | "top-end"
+    | "bottom-start"
+    | "bottom-end"
+    | "right-start"
+    | "right-end"
+    | "left-start"
+    | "left-end";
 }
 
 export interface MenuType<Props = MenuProps>
@@ -25,7 +42,7 @@ export interface MenuType<Props = MenuProps>
 }
 
 export const Menu = forwardRef<HTMLDivElement, MenuProps>(
-  ({ className, onClose, ...rest }, ref) => {
+  ({ className, onClose, placement = "bottom-end", ...rest }, ref) => {
     const context = useContext(DropdownContext);
 
     if (!context) {
@@ -38,8 +55,8 @@ export const Menu = forwardRef<HTMLDivElement, MenuProps>(
     return (
       <Popover
         {...rest}
+        placement={placement}
         ref={ref}
-        placement="bottom-end"
         arrow={false}
         className={cl("navdsi-dropdown__menu", className)}
         offset={-4}

README.md

@@ -1,6 +1,6 @@
 <h1 align="center">
     <img src="https://avatars.githubusercontent.com/u/11848947?s=200&v=4" />
-    <br/>Aksel
+    <br/>Designsystemet
 </h1>
 
 <div align="center">

yarn.lock

@@ -3095,7 +3095,7 @@ __metadata:
   resolution: "@navikt/ds-react-internal@workspace:@navikt/internal/react"
   dependencies:
     "@navikt/ds-icons": ^0.8.17
-    "@navikt/ds-react": ^0.19.9
+    "@navikt/ds-react": ^0.19.12
     "@popperjs/core": ^2.10.1
     "@types/node": ^17.0.35
     classnames: ^2.3.1
@@ -3111,7 +3111,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-react@*, @navikt/ds-react@^0.19.9, @navikt/ds-react@workspace:@navikt/core/react":
+"@navikt/ds-react@*, @navikt/ds-react@^0.19.12, @navikt/ds-react@workspace:@navikt/core/react":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-react@workspace:@navikt/core/react"
   dependencies: