Add max-height multiline input example (#3987)

Co-authored-by: Josh Wooding <[email protected]>

.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.

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;
 }

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>

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" }}
+  />
+);

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";