From 9a675658db4a6e1b26c8b712c916b41c4e8613ae Mon Sep 17 00:00:00 2001
From: Artur Lang <209750178+artur-langl@users.noreply.github.com>
Date: Tue, 18 Nov 2025 18:01:08 +0200
Subject: [PATCH 1/4] fix(modal-storybook): add extra description for modal
 storybook #203

---
 .../components/overlay/modal/modal.stories.ts     | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/community/components/overlay/modal/modal.stories.ts b/community/components/overlay/modal/modal.stories.ts
index 9bee2a71b..1694df167 100644
--- a/community/components/overlay/modal/modal.stories.ts
+++ b/community/components/overlay/modal/modal.stories.ts
@@ -104,7 +104,20 @@ class StorybookModalComponent implements OnInit {
  *
  * It is also possible to re-use **ModalFooterComponent** and **ModalHeaderComponent** in your own components
  * with custom arguments, or modified inside the modal component's slots.
- * For convenience, you can supply args to all modal components via the `args` input in cdk dialog's `open()` function's option object.
+ * For convenience, you can supply args to all modal components via the `args` input in cdk dialog's `open()` function's option object, which you can consume in
+ *
+ Keep in mind, **ModalComponent** will not work on it's own, it's intended for the user to create their own wrapper for it that makes use of **ModalHeaderComponent**,
+ * **ModalFooterComponent** and **ModalComponent** in a separate component, that you will provide into the `this.dialog.open()` call
+ *
+ * Example usage:
+ *
+ *  ``
+ *import { Dialog } from "@angular/cdk/dialog";
+ * // Inside your component
+ * dialog = inject(Dialog);
+ * this.dialog.open(MyModalComponent, {data})
+ *``
+ *
  */
 const meta: Meta<DialogData> = {
   title: "Community/Overlay/Modal",

From 9db739c678f8fa66cb5092083bdf96edc96c31e5 Mon Sep 17 00:00:00 2001
From: Artur Lang <209750178+artur-langl@users.noreply.github.com>
Date: Tue, 18 Nov 2025 18:21:39 +0200
Subject: [PATCH 2/4] fix(modal-storybook): add highlighting and extra missing
 components by request #203

---
 .../components/overlay/modal/modal.stories.ts | 89 ++++++++++++++++++-
 1 file changed, 87 insertions(+), 2 deletions(-)

diff --git a/community/components/overlay/modal/modal.stories.ts b/community/components/overlay/modal/modal.stories.ts
index 1694df167..a16ea5e2e 100644
--- a/community/components/overlay/modal/modal.stories.ts
+++ b/community/components/overlay/modal/modal.stories.ts
@@ -111,12 +111,97 @@ class StorybookModalComponent implements OnInit {
  *
  * Example usage:
  *
- *  ``
+ *```ts
+ *@Component({
+ *  selector: "storybook-open-modal",
+ *  template: '<button tedi-button (click)="openDialog()">
+ *    Open Select modal
+ *  </button> ',
+ *  imports: [ButtonComponent],
+ *})
+ *class ModalOpenComponent {
+ *  args = input<DialogData>();
+ *  dialog = inject(Dialog);
+ *
+ *  openDialog() {
+ *    this.dialog.open(StorybookModalComponent, {
+ *      data: this.args(),
+ *    });
+ *  }
+ *}
+ *```
+ *
+ *```ts
+ *@Component({
+ *  selector: "storybook-modal",
+ *  template: '
+ *    <tedi-modal [maxWidth]="args()?.maxWidth" [variant]="args()?.variant">
+ *      <tedi-modal-header
+ *        [title]="args()?.title"
+ *        [feedback]="args()?.feedback"
+ *        [closeButton]="args()?.closeButton"
+ *      />
+ *
+ *      <label tedi-label [for]="selectOneId">Label</label>
+ *      <tedi-select [inputId]="selectOneId" state="default">
+ *        @for (option of options; track option.value) {
+ *          <tedi-select-option [value]="option.value" [label]="option.label" />
+ *        }
+ *      </tedi-select>
+ *
+ *      <label tedi-label [for]="selectTwoId">Label</label>
+ *      <tedi-select [inputId]="selectTwoId" state="default">
+ *        @for (option of options; track option.value) {
+ *          <tedi-select-option [value]="option.value" [label]="option.label" />
+ *        }
+ *      </tedi-select>
+ *
+ *      <tedi-modal-footer
+ *        footer-slot
+ *        [buttons]="args()?.buttons"
+ *        [align]="args()?.align"
+ *      />
+ *    </tedi-modal>
+ *  ',
+ *  imports: [
+ *    SelectComponent,
+ *    SelectOptionComponent,
+ *    ModalComponent,
+ *    ModalHeaderComponent,
+ *    ModalFooterComponent,
+ *    FeedbackTextComponent,
+ *    LabelComponent,
+ *  ],
+ *})
+ *class StorybookModalComponent implements OnInit {
+ *  readonly options = [
+ *    { value: "1", label: "Option 1" },
+ *    { value: "2", label: "Option 2" },
+ *    { value: "3", label: "Option 3" },
+ *    { value: "4", label: "Option 4" },
+ *    { value: "5", label: "Option 5" },
+ *  ];
+ *
+ *  readonly args = model<DialogData>();
+ *
+ *  selectOneId?: string;
+ *  selectTwoId?: string;
+ *
+ *  ngOnInit(): void {
+ *    this.selectOneId = indexId("select-one");
+ *    this.selectTwoId = indexId("select-two");
+ *  }
+ *}
+ *```
+ *
+ *
+ *```ts
  *import { Dialog } from "@angular/cdk/dialog";
  * // Inside your component
  * dialog = inject(Dialog);
  * this.dialog.open(MyModalComponent, {data})
- *``
+ *```
+ *
  *
  */
 const meta: Meta<DialogData> = {

From baf20413e0762113c2fcf3f4fe9819f5411f248d Mon Sep 17 00:00:00 2001
From: Artur Lang <209750178+artur-langl@users.noreply.github.com>
Date: Tue, 18 Nov 2025 18:31:42 +0200
Subject: [PATCH 3/4] fix(modal-storybook): use details collapses with custom
 summaries #203

---
 .../components/overlay/modal/modal.stories.ts      | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/community/components/overlay/modal/modal.stories.ts b/community/components/overlay/modal/modal.stories.ts
index a16ea5e2e..11acf75a9 100644
--- a/community/components/overlay/modal/modal.stories.ts
+++ b/community/components/overlay/modal/modal.stories.ts
@@ -109,8 +109,8 @@ class StorybookModalComponent implements OnInit {
  Keep in mind, **ModalComponent** will not work on it's own, it's intended for the user to create their own wrapper for it that makes use of **ModalHeaderComponent**,
  * **ModalFooterComponent** and **ModalComponent** in a separate component, that you will provide into the `this.dialog.open()` call
  *
- * Example usage:
- *
+ *<details>
+ *<summary>Example opening button</summary>
  *```ts
  *@Component({
  *  selector: "storybook-open-modal",
@@ -131,6 +131,11 @@ class StorybookModalComponent implements OnInit {
  *}
  *```
  *
+ *</details>
+ *
+ *
+ *<details>
+ *<summary>Example complete modal</summary>
  *```ts
  *@Component({
  *  selector: "storybook-modal",
@@ -193,8 +198,10 @@ class StorybookModalComponent implements OnInit {
  *  }
  *}
  *```
+ *</details>
  *
- *
+ *<details>
+ *<summary>Example opening action</summary>
  *```ts
  *import { Dialog } from "@angular/cdk/dialog";
  * // Inside your component
@@ -202,6 +209,7 @@ class StorybookModalComponent implements OnInit {
  * this.dialog.open(MyModalComponent, {data})
  *```
  *
+ *</details>
  *
  */
 const meta: Meta<DialogData> = {

From a4bebe2b925eeab3ee8ad8b6d084ac7c1cf592cc Mon Sep 17 00:00:00 2001
From: Artur Lang <209750178+artur-langl@users.noreply.github.com>
Date: Tue, 18 Nov 2025 18:38:09 +0200
Subject: [PATCH 4/4] fix(modal-storybook): missing asterisk #203

---
 community/components/overlay/modal/modal.stories.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/community/components/overlay/modal/modal.stories.ts b/community/components/overlay/modal/modal.stories.ts
index 11acf75a9..841e7144a 100644
--- a/community/components/overlay/modal/modal.stories.ts
+++ b/community/components/overlay/modal/modal.stories.ts
@@ -106,7 +106,7 @@ class StorybookModalComponent implements OnInit {
  * with custom arguments, or modified inside the modal component's slots.
  * For convenience, you can supply args to all modal components via the `args` input in cdk dialog's `open()` function's option object, which you can consume in
  *
- Keep in mind, **ModalComponent** will not work on it's own, it's intended for the user to create their own wrapper for it that makes use of **ModalHeaderComponent**,
+ * Keep in mind, **ModalComponent** will not work on it's own, it's intended for the user to create their own wrapper for it that makes use of **ModalHeaderComponent**,
  * **ModalFooterComponent** and **ModalComponent** in a separate component, that you will provide into the `this.dialog.open()` call
  *
  *<details>