diff --git a/libs/components/src/dialog/dialog.service.stories.ts b/libs/components/src/dialog/dialog.service.stories.ts
index 7e2d8c62bb6..c7b8f0ae916 100644
--- a/libs/components/src/dialog/dialog.service.stories.ts
+++ b/libs/components/src/dialog/dialog.service.stories.ts
@@ -25,10 +25,13 @@ interface Animal {
template: `
+
`,
- imports: [ButtonModule],
+ imports: [ButtonModule, LayoutComponent],
})
class StoryDialogComponent {
constructor(public dialogService: DialogService) {}
@@ -41,6 +44,15 @@ class StoryDialogComponent {
});
}
+ openDialogNonDismissable() {
+ this.dialogService.open(NonDismissableContent, {
+ data: {
+ animal: "panda",
+ },
+ disableClose: true,
+ });
+ }
+
openDrawer() {
this.dialogService.openDrawer(StoryDialogContentComponent, {
data: {
@@ -79,13 +91,40 @@ class StoryDialogContentComponent {
}
}
+@Component({
+ template: `
+
+
+ Dialog body text goes here.
+
+ Animal: {{ animal }}
+
+
+
+
+
+ `,
+ imports: [DialogModule, ButtonModule],
+})
+class NonDismissableContent {
+ constructor(
+ public dialogRef: DialogRef,
+ @Inject(DIALOG_DATA) private data: Animal,
+ ) {}
+
+ get animal() {
+ return this.data?.animal;
+ }
+}
+
export default {
title: "Component Library/Dialogs/Service",
component: StoryDialogComponent,
decorators: [
positionFixedWrapperDecorator(),
moduleMetadata({
- declarations: [StoryDialogContentComponent],
imports: [
SharedModule,
ButtonModule,
@@ -138,8 +177,7 @@ export const Default: Story = {
},
};
-/** Drawers must be a descendant of `bit-layout`. */
-export const Drawer: Story = {
+export const NonDismissable: Story = {
play: async (context) => {
const canvas = context.canvasElement;
@@ -147,3 +185,13 @@ export const Drawer: Story = {
await userEvent.click(button);
},
};
+
+/** Drawers must be a descendant of `bit-layout`. */
+export const Drawer: Story = {
+ play: async (context) => {
+ const canvas = context.canvasElement;
+
+ const button = getAllByRole(canvas, "button")[2];
+ await userEvent.click(button);
+ },
+};
diff --git a/libs/components/src/dialog/dialog/dialog.component.html b/libs/components/src/dialog/dialog/dialog.component.html
index eaf7fc2beec..db08f88799b 100644
--- a/libs/components/src/dialog/dialog/dialog.component.html
+++ b/libs/components/src/dialog/dialog/dialog.component.html
@@ -30,15 +30,17 @@
}
-
+ @if (!this.dialogRef?.disableClose) {
+
+ }
Open Simple Dialog`,
+ template: `
+
+
+
+ `,
imports: [ButtonModule],
})
class StoryDialogComponent {
constructor(public dialogService: DialogService) {}
- openDialog() {
- this.dialogService.open(StoryDialogContentComponent, {
+ openSimpleDialog() {
+ this.dialogService.open(SimpleDialogContent, {
data: {
animal: "panda",
},
});
}
+
+ openNonDismissableWithPrimaryButtonDialog() {
+ this.dialogService.open(NonDismissableWithPrimaryButtonContent, {
+ data: {
+ animal: "panda",
+ },
+ disableClose: true,
+ });
+ }
+
+ openNonDismissableWithNoButtonsDialog() {
+ this.dialogService.open(NonDismissableWithNoButtonsContent, {
+ data: {
+ animal: "panda",
+ },
+ disableClose: true,
+ });
+ }
}
@Component({
@@ -49,7 +76,60 @@ class StoryDialogComponent {
`,
imports: [ButtonModule, DialogModule],
})
-class StoryDialogContentComponent {
+class SimpleDialogContent {
+ constructor(
+ public dialogRef: DialogRef,
+ @Inject(DIALOG_DATA) private data: Animal,
+ ) {}
+
+ get animal() {
+ return this.data?.animal;
+ }
+}
+
+@Component({
+ template: `
+
+ Dialog Title
+
+ Dialog body text goes here.
+
+ Animal: {{ animal }}
+
+
+
+
+
+ `,
+ imports: [ButtonModule, DialogModule],
+})
+class NonDismissableWithPrimaryButtonContent {
+ constructor(
+ public dialogRef: DialogRef,
+ @Inject(DIALOG_DATA) private data: Animal,
+ ) {}
+
+ get animal() {
+ return this.data?.animal;
+ }
+}
+
+@Component({
+ template: `
+
+ Dialog Title
+
+ Dialog body text goes here.
+
+ Animal: {{ animal }}
+
+
+ `,
+ imports: [ButtonModule, DialogModule],
+})
+class NonDismissableWithNoButtonsContent {
constructor(
public dialogRef: DialogRef,
@Inject(DIALOG_DATA) private data: Animal,
@@ -89,4 +169,29 @@ export default {
type Story = StoryObj;
-export const Default: Story = {};
+export const Default: Story = {
+ play: async (context) => {
+ const canvas = context.canvasElement;
+
+ const button = getAllByRole(canvas, "button")[0];
+ await userEvent.click(button);
+ },
+};
+
+export const NonDismissableWithPrimaryButton: Story = {
+ play: async (context) => {
+ const canvas = context.canvasElement;
+
+ const button = getAllByRole(canvas, "button")[1];
+ await userEvent.click(button);
+ },
+};
+
+export const NonDismissableWithNoButtons: Story = {
+ play: async (context) => {
+ const canvas = context.canvasElement;
+
+ const button = getAllByRole(canvas, "button")[2];
+ await userEvent.click(button);
+ },
+};