feat(dialog): add bqAfterClose event emitter

Closing transition can be noticed now
Endava · Jun 29, 2023 · cc80370 · cc80370
1 parent eed2f96
commit cc80370
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 10 deletions.
diff --git a/packages/bee-q/src/components.d.ts b/packages/bee-q/src/components.d.ts
@@ -1005,6 +1005,10 @@ declare namespace LocalJSX {
           * If true, it hides the close button
          */
         "hideCloseButton"?: boolean;
+        /**
+          * Callback handler emitted when the dialog finish closing
+         */
+        "onBqAfterClose"?: (event: BqDialogCustomEvent<void>) => void;
         /**
           * Callback handler emitted when the dialog finish opening
          */

diff --git a/packages/bee-q/src/components/dialog/_storybook/bq-dialog.stories.tsx b/packages/bee-q/src/components/dialog/_storybook/bq-dialog.stories.tsx
@@ -26,6 +26,7 @@ const meta: Meta = {
     bqClose: { action: 'bqClose' },
     bqOpen: { action: 'bqOpen' },
     bqAfterOpen: { action: 'bqAfterOpen' },
+    bqAfterClose: { action: 'bqAfterClose' },
     // Not part of the public API
     noContent: { control: 'boolean', table: { disable: true } },
     noFooter: { control: 'boolean', table: { disable: true } },
@@ -68,6 +69,7 @@ const Template = (args: Args) => {
       @bqClose=${args.bqClose}
       @bqOpen=${args.bqOpen}
       @bqAfterOpen=${args.bqAfterOpen}
+      @bqAfterClose=${args.bqAfterClose}
     >
       <h3 class="flex items-center gap-s" slot="title">
         <bq-icon name="info" size="30" color="text--accent" role="img" title="Info"></bq-icon>
@@ -105,16 +107,16 @@ export const Default: Story = {
 export const HighlightFooter: Story = {
   render: Template,
   args: {
-    'footer-apperance': 'highlight',
     open: true,
+    'footer-apperance': 'highlight',
   },
 };
 
 export const NoFooter: Story = {
   render: Template,
   args: {
-    noFooter: true,
     open: true,
+    noFooter: true,
   },
 };
 
@@ -157,6 +159,7 @@ const ConfirmTemplate = (args: Args) => {
       @bqClose=${args.bqClose}
       @bqOpen=${args.bqOpen}
       @bqAfterOpen=${args.bqAfterOpen}
+      @bqAfterClose=${args.bqAfterClose}
     >
       <h3 class="flex items-center gap-s" slot="title">
         <bq-icon name="info" size="30" color="icon--danger" role="img" title="Danger"></bq-icon>

diff --git a/packages/bee-q/src/components/dialog/bq-dialog.tsx b/packages/bee-q/src/components/dialog/bq-dialog.tsx
@@ -25,6 +25,7 @@ export class BqDialog {
   private dialogElem: HTMLDialogElement;
   private contentElem: HTMLElement;
   private footerElem: HTMLElement;
+  private OPEN_CSS_CLASS = 'bq-dialog--open';
 
   // Reference to host HTML element
   // ===================================
@@ -73,6 +74,7 @@ export class BqDialog {
   @Watch('open')
   handleOpenChange() {
     if (this.open) {
+      this.el.classList.add(this.OPEN_CSS_CLASS);
       !this.disableBackdrop ? this.dialogElem.showModal() : this.dialogElem.show();
     } else {
       this.dialogElem.close();
@@ -95,6 +97,9 @@ export class BqDialog {
   /** Callback handler emitted when the dialog finish opening */
   @Event() bqAfterOpen!: EventEmitter<void>;
 
+  /** Callback handler emitted when the dialog finish closing */
+  @Event() bqAfterClose!: EventEmitter<void>;
+
   // Component lifecycle events
   // Ordered by their natural call order
   // =====================================
@@ -194,7 +199,13 @@ export class BqDialog {
   };
 
   private handleTransitionEnd = () => {
-    this.open && this.bqAfterOpen.emit();
+    if (this.open) {
+      this.bqAfterOpen.emit();
+      return;
+    }
+
+    this.bqAfterClose.emit();
+    this.el.classList.remove(this.OPEN_CSS_CLASS);
   };
 
   private handleEscDown = (event: KeyboardEvent) => {

diff --git a/packages/bee-q/src/components/dialog/readme.md b/packages/bee-q/src/components/dialog/readme.md
@@ -20,12 +20,13 @@
 
 ## Events
 
-| Event         | Description                                                             | Type                |
-| ------------- | ----------------------------------------------------------------------- | ------------------- |
-| `bqAfterOpen` | Callback handler emitted when the dialog finish opening                 | `CustomEvent<void>` |
-| `bqCancel`    | Callback handler emitted when the dialog has been canceled or dismissed | `CustomEvent<void>` |
-| `bqClose`     | Callback handler emitted when the dialog will close                     | `CustomEvent<void>` |
-| `bqOpen`      | Callback handler emitted when the dialog will open                      | `CustomEvent<void>` |
+| Event          | Description                                                             | Type                |
+| -------------- | ----------------------------------------------------------------------- | ------------------- |
+| `bqAfterClose` | Callback handler emitted when the dialog finish closing                 | `CustomEvent<void>` |
+| `bqAfterOpen`  | Callback handler emitted when the dialog finish opening                 | `CustomEvent<void>` |
+| `bqCancel`     | Callback handler emitted when the dialog has been canceled or dismissed | `CustomEvent<void>` |
+| `bqClose`      | Callback handler emitted when the dialog will close                     | `CustomEvent<void>` |
+| `bqOpen`       | Callback handler emitted when the dialog will open                      | `CustomEvent<void>` |
 
 
 ## Methods

diff --git a/packages/bee-q/src/components/dialog/scss/bq-dialog.scss b/packages/bee-q/src/components/dialog/scss/bq-dialog.scss
@@ -8,7 +8,7 @@
   @apply invisible #{!important};
 }
 
-:host([open]) {
+:host(.bq-dialog--open) {
   @apply visible #{!important};
 }