Lerna versionbump [ci skip]

- @navikt/ds-css@0.18.8
 - @navikt/ds-react@0.19.9
 - @navikt/ds-react-internal@0.14.9

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

@@ -36,9 +36,8 @@
   border: 1px solid var(--navds-textarea-color-border);
   resize: none;
   width: 100%;
-  transition: height 0.1s ease-out;
   display: block;
-  min-height: 3rem;
+  min-height: 48px;
 }
 
 .navds-textarea--counter {
@@ -55,8 +54,7 @@
 }
 
 .navds-form-field--small .navds-textarea__input {
-  padding: var(--navds-spacing-1);
-  min-height: 2rem;
+  padding: 6px;
 }
 
 .navds-form-field--small .navds-textarea--counter.navds-textarea__input {
@@ -68,16 +66,20 @@
   color: var(--navds-textarea-color-counter-text);
   font-style: italic;
   position: absolute;
-  text-align: right;
-  left: var(--navds-spacing-3);
-  right: var(--navds-spacing-3);
-  bottom: var(--navds-spacing-2);
+  text-align: left;
+  left: 1px;
+  bottom: 1px;
+  padding: var(--navds-spacing-1) var(--navds-spacing-2);
 }
 
 .navds-textarea__counter--error {
   color: var(--navds-textarea-color-counter-text-error);
 }
 
+.navds-textarea--resize .navds-textarea__input {
+  resize: both;
+}
+
 /**
   Error handling
 */

@navikt/core/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "0.18.7",
+  "version": "0.18.8",
   "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.8",
+  "version": "0.19.9",
   "description": "NAV designsystem react components",
   "author": "NAV Designsystem team",
   "license": "MIT",

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

@@ -41,6 +41,10 @@ export interface TextareaProps
    * If enabled shows the label and description for screenreaders only
    */
   hideLabel?: boolean;
+  /**
+   * Enables resizing of field
+   */
+  resize?: boolean;
 }
 
 export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
@@ -60,6 +64,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
       description,
       maxLength,
       hideLabel = false,
+      resize,
       ...rest
     } = props;
 
@@ -70,6 +75,14 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
       props?.defaultValue ?? ""
     );
 
+    const getMinRows = () => {
+      let rows = rest?.minRows && rest?.minRows >= 3 ? rest?.minRows : 3;
+      if (size === "small") {
+        rows = rest?.minRows && rest?.minRows >= 2 ? rest?.minRows : 2;
+      }
+      return rows;
+    };
+
     return (
       <div
         className={cl(
@@ -79,6 +92,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
           {
             "navds-textarea--error": hasError,
             "navds-textarea--disabled": !!inputProps.disabled,
+            "navds-textarea--resize": resize,
           }
         )}
       >
@@ -113,6 +127,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
                 ? props.onChange(e)
                 : setControlledValue(e.target.value)
             }
+            minRows={getMinRows()}
             ref={ref}
             className={cl(
               "navds-textarea__input",
@@ -162,8 +177,8 @@ export const Counter = ({ maxLength, currentLength, size }) => {
       size={size}
     >
       {difference < 0
-        ? `Du har ${Math.abs(difference)} tegn for mye`
-        : `Du har ${difference} tegn igjen`}
+        ? `Antall tegn for mye ${Math.abs(difference)}`
+        : `Antall tegn igjen ${difference}`}
     </BodyShort>
   );
 };

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

@@ -23,6 +23,12 @@ export default {
     disabled: {
       type: "boolean",
     },
+    maxRows: {
+      type: "number",
+    },
+    minRows: {
+      type: "number",
+    },
   },
 } as Meta;
 
@@ -109,3 +115,7 @@ export const MaxRows = () => {
     />
   );
 };
+
+export const Resize = () => {
+  return <Textarea resize label="Ipsum enim quis culpa" />;
+};

@navikt/internal/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react-internal",
-  "version": "0.14.8",
+  "version": "0.14.9",
   "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.8",
+    "@navikt/ds-react": "^0.19.9",
     "@popperjs/core": "^2.10.1",
     "classnames": "^2.3.1",
     "copy-to-clipboard": "^3.3.1",

yarn.lock

@@ -3064,7 +3064,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-icons@*, @navikt/ds-icons@^0.8.16, @navikt/ds-icons@workspace:@navikt/core/icons":
+"@navikt/ds-icons@*, @navikt/ds-icons@^0.8.17, @navikt/ds-icons@workspace:@navikt/core/icons":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-icons@workspace:@navikt/core/icons"
   dependencies:
@@ -3094,8 +3094,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@navikt/ds-react-internal@workspace:@navikt/internal/react"
   dependencies:
-    "@navikt/ds-icons": ^0.8.16
-    "@navikt/ds-react": ^0.19.7
+    "@navikt/ds-icons": ^0.8.17
+    "@navikt/ds-react": ^0.19.8
     "@popperjs/core": ^2.10.1
     "@types/node": ^17.0.35
     classnames: ^2.3.1
@@ -3111,13 +3111,13 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-react@*, @navikt/ds-react@^0.19.7, @navikt/ds-react@workspace:@navikt/core/react":
+"@navikt/ds-react@*, @navikt/ds-react@^0.19.8, @navikt/ds-react@workspace:@navikt/core/react":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-react@workspace:@navikt/core/react"
   dependencies:
     "@floating-ui/react-dom": 0.6.0
     "@material-ui/core": ^4.12.3
-    "@navikt/ds-icons": ^0.8.16
+    "@navikt/ds-icons": ^0.8.17
     "@popperjs/core": ^2.10.1
     "@radix-ui/react-tabs": 0.1.5
     "@radix-ui/react-toggle-group": 0.1.5