diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
index 905baf910e2..a47ddf7797c 100644
--- a/packages/core/src/components.d.ts
+++ b/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
*/
diff --git a/packages/core/src/components/button/base-button.tsx b/packages/core/src/components/button/base-button.tsx
index 34833721d3d..1a4d9a043e5 100644
--- a/packages/core/src/components/button/base-button.tsx
+++ b/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}
>
) : null}
-
{children}
+
+ {children}
+
{props.afterContent ? props.afterContent : null}
);
diff --git a/packages/core/src/components/button/button-mixin.scss b/packages/core/src/components/button/button-mixin.scss
index 3b5bc1b9bf9..3e7eef00df2 100644
--- a/packages/core/src/components/button/button-mixin.scss
+++ b/packages/core/src/components/button/button-mixin.scss
@@ -137,6 +137,10 @@
white-space: nowrap;
text-overflow: ellipsis;
}
+
+ .content-start {
+ width: 100%;
+ }
}
:host(.disabled) {
diff --git a/packages/core/src/components/button/button.tsx b/packages/core/src/components/button/button.tsx
index ddd14bbaf62..1fa7b9207b6 100644
--- a/packages/core/src/components/button/button.tsx
+++ b/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 (
diff --git a/packages/core/src/components/dropdown-button/dropdown-button.tsx b/packages/core/src/components/dropdown-button/dropdown-button.tsx
index f42bfa6f096..a169c0e020a 100644
--- a/packages/core/src/components/dropdown-button/dropdown-button.tsx
+++ b/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"
>
- {this.icon !== '' || this.icon !== undefined ? (
+ {this.icon ? (
{
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(`
+
+ Dialog title Dialog titleDialog titleDialog titleDialog titleDialog
+ titleDialog title
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Cancel
+ Save
+
+
+ `);
+ 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();
+});
diff --git a/packages/core/src/tests/modal/modal.e2e.ts-snapshots/modal-with-dropdown-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/modal/modal.e2e.ts-snapshots/modal-with-dropdown-1-chromium---theme-classic-dark-linux.png
new file mode 100644
index 00000000000..6c10fb266e2
Binary files /dev/null and b/packages/core/src/tests/modal/modal.e2e.ts-snapshots/modal-with-dropdown-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/modal/modal.e2e.ts-snapshots/modal-with-dropdown-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/modal/modal.e2e.ts-snapshots/modal-with-dropdown-1-chromium---theme-classic-light-linux.png
new file mode 100644
index 00000000000..3f272829f53
Binary files /dev/null and b/packages/core/src/tests/modal/modal.e2e.ts-snapshots/modal-with-dropdown-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/modal/overflow/index.html b/packages/core/src/tests/modal/overflow/index.html
new file mode 100644
index 00000000000..8eb00a3a7ac
--- /dev/null
+++ b/packages/core/src/tests/modal/overflow/index.html
@@ -0,0 +1,83 @@
+
+
+
+
+
+
+ Stencil Component Starter
+
+
+
+ Dialog title Dialog titleDialog titleDialog titleDialog titleDialog
+ titleDialog title
+
+ 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
+
+
+ Cancel
+ Save
+
+
+
+
+
+
diff --git a/packages/vue/src/components.ts b/packages/vue/src/components.ts
index 87a5bed9ff2..ed3037f8627 100644
--- a/packages/vue/src/components.ts
+++ b/packages/vue/src/components.ts
@@ -73,6 +73,7 @@ export const IxButton = /*@__PURE__*/ defineContainer('ix-button',
'type',
'loading',
'icon',
+ 'alignment',
'iconSize'
]);