From b2af86aad8054db1cbdec5f4422513afd86b6c30 Mon Sep 17 00:00:00 2001
From: Liam Smith <liam.smith@jpmorgan.com>
Date: Tue, 8 Oct 2024 15:46:29 +0100
Subject: [PATCH] Add max-height multiline input example (#3987)

Co-authored-by: Josh Wooding <12938082+joshwooding@users.noreply.github.com>
---
 .changeset/orange-tips-itch.md                       | 5 +++++
 packages/core/src/multiline-input/MultilineInput.css | 1 +
 site/docs/components/multiline-input/examples.mdx    | 7 +++++++
 site/src/examples/multiline-input/MaxHeight.tsx      | 9 +++++++++
 site/src/examples/multiline-input/index.ts           | 1 +
 5 files changed, 23 insertions(+)
 create mode 100644 .changeset/orange-tips-itch.md
 create mode 100644 site/src/examples/multiline-input/MaxHeight.tsx

diff --git a/.changeset/orange-tips-itch.md b/.changeset/orange-tips-itch.md
new file mode 100644
index 00000000000..8a592963307
--- /dev/null
+++ b/.changeset/orange-tips-itch.md
@@ -0,0 +1,5 @@
+---
+"@salt-ds/core": patch
+---
+
+Updated MultilineInput so that it is easier to set a max-height.
diff --git a/packages/core/src/multiline-input/MultilineInput.css b/packages/core/src/multiline-input/MultilineInput.css
index a5cd9113110..8c9dc3a88a2 100644
--- a/packages/core/src/multiline-input/MultilineInput.css
+++ b/packages/core/src/multiline-input/MultilineInput.css
@@ -262,6 +262,7 @@
   margin: var(--salt-spacing-75) 0;
   min-width: 0;
   min-height: 0;
+  max-height: inherit;
   resize: vertical;
   padding: 0;
 }
diff --git a/site/docs/components/multiline-input/examples.mdx b/site/docs/components/multiline-input/examples.mdx
index 9863c831349..98a65e96203 100644
--- a/site/docs/components/multiline-input/examples.mdx
+++ b/site/docs/components/multiline-input/examples.mdx
@@ -121,5 +121,12 @@ You can use a [button](../button) at the beginning or end of the multiline input
 
 If you've disabled the containing multiline input or set it to a read-only state, ensure your interactive buttons match that state.
 
+</LivePreview>
+<LivePreview componentName="multiline-input" exampleName="MaxHeight" >
+
+## Max rows
+
+To control the number of maximum rows visible, you can set a max height for the multiline input.
+
 </LivePreview>
 </LivePreviewControls>
diff --git a/site/src/examples/multiline-input/MaxHeight.tsx b/site/src/examples/multiline-input/MaxHeight.tsx
new file mode 100644
index 00000000000..eed03cae108
--- /dev/null
+++ b/site/src/examples/multiline-input/MaxHeight.tsx
@@ -0,0 +1,9 @@
+import { MultilineInput } from "@salt-ds/core";
+import type { ReactElement } from "react";
+
+export const MaxHeight = (): ReactElement => (
+  <MultilineInput
+    defaultValue="Value"
+    style={{ maxWidth: "256px", maxHeight: "256px" }}
+  />
+);
diff --git a/site/src/examples/multiline-input/index.ts b/site/src/examples/multiline-input/index.ts
index b1939acc03b..3a03751975a 100644
--- a/site/src/examples/multiline-input/index.ts
+++ b/site/src/examples/multiline-input/index.ts
@@ -9,3 +9,4 @@ export * from "./Readonly";
 export * from "./Secondary";
 export * from "./StaticAdornments";
 export * from "./ValidationStatus";
+export * from "./MaxHeight";