From ec2e18eee790bcdb9aea24949c55aaf677c3b52c Mon Sep 17 00:00:00 2001
From: Marius Tobiassen Bungum <marius@mh2.no>
Date: Tue, 22 Oct 2024 07:44:12 +0200
Subject: [PATCH 1/3] :sparkles: Added contentMaxHeight prop to Dialog

---
 src/molecules/Dialog/Dialog.stories.tsx | 49 +++++++++++++++++++++++++
 src/molecules/Dialog/Dialog.styles.ts   |  1 +
 src/molecules/Dialog/Dialog.test.tsx    | 21 +++++++++++
 src/molecules/Dialog/Dialog.tsx         |  8 +++-
 4 files changed, 78 insertions(+), 1 deletion(-)

diff --git a/src/molecules/Dialog/Dialog.stories.tsx b/src/molecules/Dialog/Dialog.stories.tsx
index 9ebb64b59..bd12b8dff 100644
--- a/src/molecules/Dialog/Dialog.stories.tsx
+++ b/src/molecules/Dialog/Dialog.stories.tsx
@@ -223,3 +223,52 @@ export const ColorVariations: Story = {
     ],
   },
 };
+
+export const LongDialogWithContentMaxHeight: Story = {
+  args: {
+    title: 'Left and right dialog!',
+    children: (
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+        }}
+      >
+        <p>一</p>
+        <p>二</p>
+        <p>三</p>
+        <p>四</p>
+        <p>五</p>
+        <p>六</p>
+        <p>七</p>
+        <p>八</p>
+        <p>九</p>
+        <p>十</p>
+        <p>十一</p>
+        <p>十二</p>
+        <p>十三</p>
+        <p>十四</p>
+        <p>十五</p>
+        <p>十六</p>
+        <p>十七</p>
+        <p>十八</p>
+        <p>十九</p>
+        <p>ニ十</p>
+      </div>
+    ),
+    contentMaxHeight: '400px',
+    actions: [
+      {
+        text: 'Cancel',
+        onClick: () => console.log('clicked'),
+        variant: 'ghost',
+      },
+      {
+        text: 'Okay',
+        onClick: () => console.log('clicked'),
+        variant: 'contained',
+      },
+    ],
+  },
+};
diff --git a/src/molecules/Dialog/Dialog.styles.ts b/src/molecules/Dialog/Dialog.styles.ts
index 3ace8d6b7..49feaf932 100644
--- a/src/molecules/Dialog/Dialog.styles.ts
+++ b/src/molecules/Dialog/Dialog.styles.ts
@@ -41,6 +41,7 @@ export const DialogContent = styled(
   EDSDialog.CustomContent
 )<DialogContentProps>`
   min-height: unset;
+  overflow: auto;
   ${({ $withContentPadding }) => {
     if ($withContentPadding) {
       return css`
diff --git a/src/molecules/Dialog/Dialog.test.tsx b/src/molecules/Dialog/Dialog.test.tsx
index 3a991f98d..bed349a13 100644
--- a/src/molecules/Dialog/Dialog.test.tsx
+++ b/src/molecules/Dialog/Dialog.test.tsx
@@ -318,3 +318,24 @@ test('Custom children works as expected', () => {
   expect(element).toBeInTheDocument();
   expect(element).toHaveTextContent(description);
 });
+
+test('Content max height prop works as expected', () => {
+  const handleOnClose = vi.fn();
+  const title = faker.airline.airplane().name;
+  const description = faker.lorem.paragraph();
+  const contentMaxHeight = `${faker.number.int({ min: 10, max: 1000 })}px`;
+
+  render(
+    <Dialog
+      open
+      title={title}
+      onClose={handleOnClose}
+      contentMaxHeight={contentMaxHeight}
+    >
+      {description}
+    </Dialog>
+  );
+
+  const contentWrapper = screen.getByText(description).parentElement;
+  expect(contentWrapper).toHaveStyle(`max-height: ${contentMaxHeight}`);
+});
diff --git a/src/molecules/Dialog/Dialog.tsx b/src/molecules/Dialog/Dialog.tsx
index 90a9da0b9..596a26428 100644
--- a/src/molecules/Dialog/Dialog.tsx
+++ b/src/molecules/Dialog/Dialog.tsx
@@ -44,6 +44,7 @@ export interface DialogProps extends Omit<EDSDialogProps, 'title'> {
   actions?: DialogAction[];
   withContentPadding?: boolean;
   withBorders?: boolean;
+  contentMaxHeight?: string;
 }
 
 /**
@@ -54,6 +55,7 @@ export interface DialogProps extends Omit<EDSDialogProps, 'title'> {
  * @param actions - Dialog actions, { position: "right" is default }
  * @param withContentPadding - Defaults to true
  * @param withBorders - Defaults to false
+ * @param contentMaxHeight - Defaults to '60vh'
  * Also inherits props from EDS dialog
  */
 export const Dialog = forwardRef<HTMLDivElement, DialogProps>(
@@ -65,6 +67,7 @@ export const Dialog = forwardRef<HTMLDivElement, DialogProps>(
       actions,
       withContentPadding = true,
       withBorders = false,
+      contentMaxHeight = '60vh',
       ...otherProps
     },
     ref
@@ -108,7 +111,10 @@ export const Dialog = forwardRef<HTMLDivElement, DialogProps>(
         </DialogTitle>
         <DialogContent
           $withContentPadding={withContentPadding}
-          style={{ width: width ? `${width}px` : undefined }}
+          style={{
+            width: width ? `${width}px` : undefined,
+            maxHeight: contentMaxHeight,
+          }}
         >
           {childrenElements}
         </DialogContent>

From cf0d027063f2e9342e1dadbd1d45162ffab0b1aa Mon Sep 17 00:00:00 2001
From: Marius Tobiassen Bungum <marius@mh2.no>
Date: Tue, 22 Oct 2024 12:34:01 +0200
Subject: [PATCH 2/3] :speech_balloon: Update dialog title in story

---
 src/molecules/Dialog/Dialog.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/molecules/Dialog/Dialog.stories.tsx b/src/molecules/Dialog/Dialog.stories.tsx
index bd12b8dff..4417b3929 100644
--- a/src/molecules/Dialog/Dialog.stories.tsx
+++ b/src/molecules/Dialog/Dialog.stories.tsx
@@ -226,7 +226,7 @@ export const ColorVariations: Story = {
 
 export const LongDialogWithContentMaxHeight: Story = {
   args: {
-    title: 'Left and right dialog!',
+    title: 'Long dialog with content max height',
     children: (
       <div
         style={{

From 89e2f644e7cdd45904cb135974a6ffb00c6e2a06 Mon Sep 17 00:00:00 2001
From: Marius Tobiassen Bungum <marius@mh2.no>
Date: Tue, 22 Oct 2024 12:34:53 +0200
Subject: [PATCH 3/3] :bookmark: 8.10.3

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 816237fdf..59e61722b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@equinor/amplify-component-lib",
-  "version": "8.10.2",
+  "version": "8.10.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@equinor/amplify-component-lib",
-      "version": "8.10.2",
+      "version": "8.10.3",
       "license": "ISC",
       "dependencies": {
         "@azure/msal-browser": "3.26.1",
diff --git a/package.json b/package.json
index e4f2b809c..0b38cbce6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@equinor/amplify-component-lib",
-  "version": "8.10.2",
+  "version": "8.10.3",
   "description": "Frontend Typescript components for the Amplify team",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",