Merge d9877cd into 6ee4aa3

navikt · Nov 22, 2023 · 0901595 · 0901595
2 parents 6ee4aa3 + d9877cd
commit 0901595
Show file tree

Hide file tree

Showing 5 changed files with 164 additions and 83 deletions.
diff --git a/.changeset/tender-maps-cheat.md b/.changeset/tender-maps-cheat.md
@@ -0,0 +1,6 @@
+---
+"@navikt/ds-react": minor
+"@navikt/ds-css": minor
+---
+
+:sparkles: Textarea: Eksperimentell støtte for automatisk scrollbar
diff --git a/@navikt/core/css/form/textarea.css b/@navikt/core/css/form/textarea.css
@@ -22,7 +22,7 @@
 
 .navds-textarea__wrapper {
   position: relative;
-  width: 100%;
+  min-width: 100%;
 }
 
 .navds-textarea__input {
@@ -72,6 +72,22 @@
 
 .navds-textarea--resize .navds-textarea__input {
   resize: both;
+  border-end-end-radius: 0;
+}
+
+.navds-textarea--autoscrollbar,
+.navds-textarea--autoscrollbar .navds-textarea__wrapper {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  /* Makes the box-shadow visible even though overflow is hidden: */
+  padding: 3px;
+  margin: -3px;
+}
+
+.navds-textarea--autoscrollbar .navds-textarea__input {
+  scrollbar-gutter: stable; /* Needed to prevent scrollbar from appearing too early */
 }
 
 /**

diff --git a/@navikt/core/react/src/form/Textarea.tsx b/@navikt/core/react/src/form/Textarea.tsx
@@ -46,6 +46,12 @@ export interface TextareaProps
    * Enables resizing of field
    */
   resize?: boolean;
+  /**
+   * Textarea will stop growing and get a scrollbar when there's no more room to grow.
+   * Requires `display:flex` on the parent.
+   * Experimental feature that may be removed or get breaking changes in a minor version.
+   */
+  UNSAFE_autoScrollbar?: boolean;
   /**
    * i18n-translations for counter-text
    */
@@ -86,6 +92,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
       maxLength,
       hideLabel = false,
       resize,
+      UNSAFE_autoScrollbar,
       i18n,
       readOnly,
       ...rest
@@ -122,6 +129,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
             "navds-textarea--readonly": readOnly,
             "navds-textarea--error": hasError,
             "navds-textarea--resize": resize,
+            "navds-textarea--autoscrollbar": UNSAFE_autoScrollbar,
           }
         )}
       >
@@ -157,6 +165,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
                 : setControlledValue(e.target.value)
             }
             minRows={getMinRows()}
+            autoScrollbar={UNSAFE_autoScrollbar}
             ref={ref}
             readOnly={readOnly}
             className={cl(

diff --git a/@navikt/core/react/src/form/stories/textarea.stories.tsx b/@navikt/core/react/src/form/stories/textarea.stories.tsx
@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from "@storybook/react";
 import React from "react";
+import { Button } from "../../button";
 import { Textarea } from "../index";
 
 const meta: Meta<typeof Textarea> = {
@@ -138,3 +139,35 @@ export const Readonly = () => {
     </div>
   );
 };
+
+export const AutoScrollbar = (props) => (
+  <div
+    style={{
+      border: "1px solid lightGreen",
+      height: "90vh",
+      display: "flex",
+      flexDirection: "column",
+    }}
+  >
+    <div style={{ border: "1px dashed gray" }}>
+      <h1>Header</h1>
+    </div>
+    <Textarea
+      resize
+      label="Textarea with autoScrollbar"
+      description="Description"
+      maxLength={30}
+      UNSAFE_autoScrollbar
+      {...props}
+    />
+    <div style={{ border: "1px dashed gray" }}>
+      <Button>Send</Button>
+    </div>
+  </div>
+);
+AutoScrollbar.argTypes = {
+  error: { type: "string" },
+  hideLabel: { type: "boolean" },
+  maxRows: { type: "number" },
+  minRows: { type: "number" },
+};