fix(core/modal): allow dialog to overflow (#692)

packages/core/src/components.d.ts

@@ -186,6 +186,7 @@ export namespace Components {
         "pinned": boolean;
     }
     interface IxButton {
+        "alignment": 'center' | 'start';
         /**
           * Disable the button
          */
@@ -3002,6 +3003,7 @@ declare namespace LocalJSX {
         "pinned"?: boolean;
     }
     interface IxButton {
+        "alignment"?: 'center' | 'start';
         /**
           * Disable the button
          */

packages/core/src/components/button/base-button.tsx

@@ -10,6 +10,8 @@ import { h } from '@stencil/core';
 import { A11yAttributes } from '../utils/a11y';
 import { ButtonVariant } from './button';
 
+export type ButtonAlignment = 'center' | 'start';
+
 const isPrimary = (variant: string) => {
   return variant.toUpperCase() === 'Primary'.toUpperCase();
 };
@@ -58,6 +60,7 @@ export type BaseButtonProps = {
   extraClasses?: { [key: string]: boolean };
   iconSize?: string;
   iconColor?: string;
+  alignment?: ButtonAlignment;
   tabIndex?: number;
   afterContent?: any;
 };
@@ -92,7 +95,14 @@ export function BaseButton(props: BaseButtonProps, children) {
           color={props.iconColor}
         ></ix-icon>
       ) : null}
-      <div class={'content'}>{children}</div>
+      <div
+        class={{
+          content: true,
+          [`content-${props.alignment}`]: !!props.alignment,
+        }}
+      >
+        {children}
+      </div>
       {props.afterContent ? props.afterContent : null}
     </button>
   );

packages/core/src/components/button/button-mixin.scss

@@ -137,6 +137,10 @@
       white-space: nowrap;
       text-overflow: ellipsis;
     }
+
+    .content-start {
+      width: 100%;
+    }
   }
 
   :host(.disabled) {

packages/core/src/components/button/button.tsx

@@ -55,9 +55,10 @@ export class Button {
    */
   @Prop() icon: string;
 
-  /**
-   * @internal
-   */
+  /** @internal */
+  @Prop() alignment: 'center' | 'start' = 'center';
+
+  /** @internal */
   @Prop() iconSize: '12' | '16' | '24' = '24';
 
   @Element() hostElement: HTMLIxButtonElement;
@@ -99,6 +100,7 @@ export class Button {
       loading: this.loading,
       onClick: () => this.dispatchFormEvents(),
       type: this.type,
+      alignment: this.alignment,
     };
 
     return (

packages/core/src/components/dropdown-button/dropdown-button.tsx

@@ -96,9 +96,10 @@ export class DropdownButton {
               outline={this.outline}
               ghost={this.ghost}
               disabled={this.disabled}
+              alignment="start"
             >
               <div class={'content'}>
-                {this.icon !== '' || this.icon !== undefined ? (
+                {this.icon ? (
                   <ix-icon
                     name={this.icon}
                     size="24"

packages/core/src/components/modal/modal.scss

@@ -26,17 +26,16 @@
   }
 
   .modal {
-    display: grid;
-    position: relative;
+    display: flex;
     flex-direction: column;
+    position: relative;
     border: none;
     border-radius: var(--theme-default-border-radius);
     background: var(--theme-modal--background);
     box-shadow: var(--theme-shadow-4);
     color: var(--theme-color-std-text);
-
+    overflow: visible;
     max-height: 80vh;
-    overflow: hidden;
     pointer-events: all;
   }
 

packages/core/src/tests/modal/modal.e2e.ts

@@ -8,7 +8,7 @@
  */
 
 import { expect } from '@playwright/test';
-import { regressionTest } from '@utils/test';
+import { regressionTest, test } from '@utils/test';
 
 regressionTest.describe('modal', () => {
   regressionTest('basic', async ({ page }) => {
@@ -37,3 +37,41 @@ regressionTest.describe('modal', () => {
     expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
   });
 });
+
+test('modal with dropdown', async ({ mount, page }) => {
+  await mount(`
+  <ix-modal>
+    <ix-modal-header
+      >Dialog title Dialog titleDialog titleDialog titleDialog titleDialog
+      titleDialog title</ix-modal-header
+    >
+    <ix-modal-content>
+      <ix-dropdown-button label="drop">
+        <ix-dropdown-item label="item"></ix-dropdown-item>
+        <ix-dropdown-item label="item"></ix-dropdown-item>
+        <ix-dropdown-item label="item"></ix-dropdown-item>
+        <ix-dropdown-item label="item"></ix-dropdown-item>
+        <ix-dropdown-item label="item"></ix-dropdown-item>
+        <ix-dropdown-item label="item"></ix-dropdown-item>
+        <ix-dropdown-item label="item"></ix-dropdown-item>
+        <ix-dropdown-item label="item"></ix-dropdown-item>
+      </ix-dropdown-button>
+    </ix-modal-content>
+    <ix-modal-footer>
+      <ix-button outline>Cancel</ix-button>
+      <ix-button>Save</ix-button>
+    </ix-modal-footer>
+  </ix-modal>
+    `);
+  const modal = page.locator('ix-modal');
+  await expect(modal).toHaveClass(/hydrated/);
+  const dropdown = page.locator('ix-dropdown-button');
+  await dropdown.click();
+
+  const dropdownContent = dropdown.locator('ix-dropdown');
+
+  await expect(dropdownContent).toHaveClass(/show/);
+
+  await modal.evaluate((modal: HTMLIxModalElement) => modal.showModal());
+  expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+});

packages/core/src/tests/modal/overflow/index.html

@@ -0,0 +1,83 @@
+<!--
+SPDX-FileCopyrightText: 2023 Siemens AG
+
+SPDX-License-Identifier: MIT
+-->
+
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
+    />
+    <title>Stencil Component Starter</title>
+  </head>
+  <body>
+    <ix-modal>
+      <ix-modal-header
+        >Dialog title Dialog titleDialog titleDialog titleDialog titleDialog
+        titleDialog title</ix-modal-header
+      >
+      <ix-modal-content>
+        My Content My Content My Content My Content My Content My Content My
+        Content My Content My Content My Content My Content My Content My
+        Content My Content My Content My Content My Content My Content My
+        Content My Content My Content My Content My Content My Content My
+        Content My Content My Content My Content My Content My Content My
+        Content My Content My Content My Content My Content My Content My
+        Content My Content My Content My Content My Content My Content My
+        Content My Content My Content My Content My Content My Content My
+        Content My Content My Content My Content My Content My Content My
+        Content My Content My Content My Content My Content My Content My
+        Content My Content My Content My Content My Content My Content My
+        Content My Content My Content My Content My Content My Content My
+        Content My Content My Content My Content My Content My Content My
+        Content My Content My Content My Content My Content My Content My
+        Content My Content My Content My Content My Content My Content My
+        Content My Content My Content My Content My Content My Content My
+        Content My Content My Content My Content My Content My Content My
+        Content My Content My Content My Content My Content My Content My
+        Content My Content My Content My Content My Content My Content My
+        Content My Content My Content My Content My Content My Content My
+        Content My Content My Content My Content My Content My Content My
+        Content My Content My Content My Content My Content My Content My
+        Content My Content My Content My Content My Content My Content My
+        Content My Content My Content My Content My Content My Content My
+        Content My Content My Content My Content My Content My Content My
+        Content My Content My Content My Content My Content My Content My
+        Content My Content My Content My Content My Content My Content My
+        Content My Content My Content My Content My Content My Content My
+        Content My Content My Content My Content My Content My Content My
+        Content My Content My Content My Content My Content My Content My
+        Content My Content My Content My Content My Content My Content My
+        Content My Content My Content My Content My Content My Content My
+        Content My Content My Content My Content My Content My Content My
+        Content My Content My Content My Content My Content My Content My
+        Content My Content My Content My Content My Content My Content My
+        Content My Content My Content My Content My Content My Content My
+        Content My Content My Content My Content My Content My Content My
+        Content My Content My Content My Content My Content My Content My
+        Content My Content My Content My Content My Content My Content My
+        Content My Content My Content My Content My Content My Content My
+        Content My Content My Content My Content My Content My Content My
+        Content My Content My Content My Content My Content My Content My
+        Content My Content My Content My Content My Content My Content My
+        Content My Content My Content My Content My Content My Content My
+      </ix-modal-content>
+      <ix-modal-footer>
+        <ix-button outline>Cancel</ix-button>
+        <ix-button>Save</ix-button>
+      </ix-modal-footer>
+    </ix-modal>
+    <script>
+      (async () => {
+        await window.customElements.whenDefined('ix-modal');
+        const modal = document.querySelector('ix-modal');
+
+        modal.showModal();
+      })();
+    </script>
+    <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
+  </body>
+</html>

packages/vue/src/components.ts

@@ -73,6 +73,7 @@ export const IxButton = /*@__PURE__*/ defineContainer<JSX.IxButton>('ix-button',
   'type',
   'loading',
   'icon',
+  'alignment',
   'iconSize'
 ]);