Merge pull request #829 from equinor/feat/dialog-content-height

✨ Added contentMaxHeight prop to Dialog

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

src/molecules/Dialog/Dialog.stories.tsx

@@ -223,3 +223,52 @@ export const ColorVariations: Story = {
     ],
   },
 };
+
+export const LongDialogWithContentMaxHeight: Story = {
+  args: {
+    title: 'Long dialog with content max height',
+    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',
+      },
+    ],
+  },
+};

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`

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

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>