feat(dialog): allow disable backdrop overlay and bqAfterOpen event (#…

…306)
Endava · Jul 2, 2023 · 633009e · 633009e
1 parent 55d7814
commit 633009e
Show file tree

Hide file tree

Showing 8 changed files with 120 additions and 48 deletions.
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
@@ -43,7 +43,7 @@ jobs:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
 
       - name: 🚀 Publish to NPM registry
-        run: npx nx run-many --target=publish --exclude=workspace,bee-q-icons --skip-nx-cache --output-style=stream-without-prefixes
+        run: npx nx run-many --target=publish --parallel=1 --exclude=workspace,bee-q-icons --skip-nx-cache --output-style=stream-without-prefixes
 
       - name: 🔐 Configure AWS Credentials
         uses: aws-actions/configure-aws-credentials@v1

diff --git a/packages/bee-q/project.json b/packages/bee-q/project.json
@@ -152,8 +152,16 @@
         "configFile": "packages/bee-q/.stylelintrc.json"
       }
     },
+    "prepublish": {
+      "executor": "nx:run-commands",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "command": "mv dist/bee-q/dist/README.md dist/bee-q/"
+      }
+    },
     "publish": {
       "executor": "ngx-deploy-npm:deploy",
+      "dependsOn": ["prepublish"],
       "options": {
         "access": "public",
         "noBuild": true,

diff --git a/packages/bee-q/src/components.d.ts b/packages/bee-q/src/components.d.ts
@@ -179,6 +179,10 @@ export namespace Components {
           * Dismiss or cancel the dialog
          */
         "cancel": () => Promise<void>;
+        /**
+          * If true, the backdrop overlay won't be shown when the dialog opens
+         */
+        "disableBackdrop": boolean;
         /**
           * If true, the dialog will not close when clicking on the backdrop overlay
          */
@@ -981,6 +985,10 @@ declare namespace LocalJSX {
         "value": string;
     }
     interface BqDialog {
+        /**
+          * If true, the backdrop overlay won't be shown when the dialog opens
+         */
+        "disableBackdrop"?: boolean;
         /**
           * If true, the dialog will not close when clicking on the backdrop overlay
          */
@@ -997,6 +1005,14 @@ 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
+         */
+        "onBqAfterOpen"?: (event: BqDialogCustomEvent<void>) => void;
         /**
           * Callback handler emitted when the dialog has been canceled or dismissed
          */

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
@@ -14,6 +14,7 @@ const meta: Meta = {
     },
   },
   argTypes: {
+    'disable-backdrop': { control: 'boolean' },
     'disable-close-click-outside': { control: 'boolean' },
     'disable-close-esc-keydown': { control: 'boolean' },
     'footer-apperance': { control: 'select', options: [...DIALOG_FOOTER_APPEARANCE] },
@@ -24,11 +25,14 @@ const meta: Meta = {
     bqCancel: { action: 'bqCancel' },
     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 } },
   },
   args: {
+    'disable-backdrop': false,
     'disable-close-click-outside': false,
     'disable-close-esc-keydown': false,
     'hide-close-button': false,
@@ -54,6 +58,7 @@ const Template = (args: Args) => {
   return html`
     <bq-button @bqClick=${handleOpenDialog}>Open Dialog</bq-button>
     <bq-dialog
+      ?disable-backdrop=${args['disable-backdrop']}
       ?disable-close-esc-keydown=${args['disable-close-esc-keydown']}
       ?disable-close-click-outside=${args['disable-close-click-outside']}
       footer-apperance=${args['footer-apperance']}
@@ -63,6 +68,8 @@ const Template = (args: Args) => {
       @bqCancel=${args.bqCancel}
       @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>
@@ -100,16 +107,24 @@ 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: {
+    open: true,
     noFooter: true,
+  },
+};
+
+export const NoBackdrop: Story = {
+  render: Template,
+  args: {
     open: true,
+    'disable-backdrop': true,
   },
 };
 
@@ -133,6 +148,7 @@ const ConfirmTemplate = (args: Args) => {
   return html`
     <bq-button variant="ghost" @bqClick=${handleOpenDialog}>Deactivate account</bq-button>
     <bq-dialog
+      ?disable-backdrop=${args['disable-backdrop']}
       ?disable-close-esc-keydown=${args['disable-close-esc-keydown']}
       ?disable-close-click-outside=${args['disable-close-click-outside']}
       footer-apperance=${args['footer-apperance']}
@@ -142,6 +158,8 @@ const ConfirmTemplate = (args: Args) => {
       @bqCancel=${args.bqCancel}
       @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
@@ -6,7 +6,7 @@ import { hasSlotContent, validatePropValue } from '../../shared/utils';
 /**
  * @part body - The `<main>` that holds the dialog body content
  * @part button-close - The button that close the dialog on click
- * @part container - The `<div>` container that holds the dialog content
+ * @part content - The `<div>` container that holds the dialog title and body content
  * @part dialog - The `<dialog>` wrapper container inside the shadow DOM
  * @part footer - The `<footer>` that holds footer content
  * @part header - The `<header>` that holds the icon, title, description and close button
@@ -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
   // ===================================
@@ -40,6 +41,9 @@ export class BqDialog {
   // Public Property API
   // ========================
 
+  /** If true, the backdrop overlay won't be shown when the dialog opens */
+  @Prop({ reflect: true }) disableBackdrop = false;
+
   /** If true, the dialog will not close when the [Esc] key is press */
   @Prop({ reflect: true }) disableCloseEscKeydown = false;
 
@@ -70,7 +74,8 @@ export class BqDialog {
   @Watch('open')
   handleOpenChange() {
     if (this.open) {
-      this.dialogElem.showModal();
+      this.el.classList.add(this.OPEN_CSS_CLASS);
+      !this.disableBackdrop ? this.dialogElem.showModal() : this.dialogElem.show();
     } else {
       this.dialogElem.close();
     }
@@ -89,6 +94,12 @@ export class BqDialog {
   /** Callback handler emitted when the dialog will open */
   @Event() bqOpen!: EventEmitter<void>;
 
+  /** 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
   // =====================================
@@ -100,10 +111,12 @@ export class BqDialog {
   componentDidLoad() {
     this.handleOpenChange();
     this.dialogElem.addEventListener('cancel', this.handleEscDown);
+    this.dialogElem.addEventListener('transitionend', this.handleTransitionEnd);
   }
 
   disconnectedCallback() {
-    this.dialogElem.removeEventListener('cancel', this.handleEscDown);
+    this.dialogElem?.removeEventListener('cancel', this.handleEscDown);
+    this.dialogElem?.removeEventListener('transitionend', this.handleTransitionEnd);
   }
 
   // Listeners
@@ -185,6 +198,16 @@ export class BqDialog {
     this.open = false;
   };
 
+  private handleTransitionEnd = () => {
+    if (this.open) {
+      this.bqAfterOpen.emit();
+      return;
+    }
+
+    this.bqAfterClose.emit();
+    this.el.classList.remove(this.OPEN_CSS_CLASS);
+  };
+
   private handleEscDown = (event: KeyboardEvent) => {
     if (this.disableCloseEscKeydown) {
       event.preventDefault();
@@ -209,30 +232,32 @@ export class BqDialog {
   render() {
     return (
       <dialog class={`bq-dialog ${this.size}`} ref={(dialogElem) => (this.dialogElem = dialogElem)} part="dialog">
-        <header class="bq-dialog--header" part="header">
-          <div class="bq-dialog--title flex flex-1 items-center justify-between" part="title">
-            <slot name="title" />
-          </div>
-          <div class="flex" onClick={this.handleCancel} part="button-close">
-            <slot name="button-close">
-              {!this.hideCloseButton && (
-                <bq-button class="bq-dialog--close" appearance="text" size="small" slot="button-close">
-                  <bq-icon class="cursor-pointer" name="x" role="img" title="Close" />
-                </bq-button>
-              )}
-            </slot>
+        <main class="flex flex-col gap-[var(--bq-dialog--title-body-gap)] overflow-hidden" part="content">
+          <header class="bq-dialog--header" part="header">
+            <div class="bq-dialog--title flex flex-1 items-center justify-between" part="title">
+              <slot name="title" />
+            </div>
+            <div class="flex" onClick={this.handleCancel} part="button-close">
+              <slot name="button-close">
+                {!this.hideCloseButton && (
+                  <bq-button class="bq-dialog--close" appearance="text" size="small" slot="button-close">
+                    <bq-icon class="cursor-pointer" name="x" role="img" title="Close" />
+                  </bq-button>
+                )}
+              </slot>
+            </div>
+          </header>
+          <div
+            class={{
+              hidden: !this.hasContent,
+              'overflow-y-auto px-[var(--bq-dialog--padding)]': this.hasContent,
+              '!pb-[var(--bq-dialog--padding)]': !this.hasFooter,
+            }}
+            ref={(mainElem) => (this.contentElem = mainElem)}
+            part="body"
+          >
+            <slot onSlotchange={this.handleContentSlotChange} />
           </div>
-        </header>
-        <main
-          class={{
-            hidden: !this.hasContent,
-            'overflow-y-auto px-[var(--bq-dialog--padding)]': this.hasContent,
-            '!pb-[var(--bq-dialog--padding)]': !this.hasFooter,
-          }}
-          ref={(mainElem) => (this.contentElem = mainElem)}
-          part="body"
-        >
-          <slot onSlotchange={this.handleContentSlotChange} />
         </main>
         <footer
           class={{

diff --git a/packages/bee-q/src/components/dialog/readme.md b/packages/bee-q/src/components/dialog/readme.md
@@ -9,6 +9,7 @@
 
 | Property                   | Attribute                     | Description                                                              | Type                             | Default      |
 | -------------------------- | ----------------------------- | ------------------------------------------------------------------------ | -------------------------------- | ------------ |
+| `disableBackdrop`          | `disable-backdrop`            | If true, the backdrop overlay won't be shown when the dialog opens       | `boolean`                        | `false`      |
 | `disableCloseClickOutside` | `disable-close-click-outside` | If true, the dialog will not close when clicking on the backdrop overlay | `boolean`                        | `false`      |
 | `disableCloseEscKeydown`   | `disable-close-esc-keydown`   | If true, the dialog will not close when the [Esc] key is press           | `boolean`                        | `false`      |
 | `footerApperance`          | `footer-apperance`            | The appearance of footer                                                 | `"highlight" \| "standard"`      | `'standard'` |
@@ -19,11 +20,13 @@
 
 ## Events
 
-| Event      | Description                                                             | Type                |
-| ---------- | ----------------------------------------------------------------------- | ------------------- |
-| `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
@@ -65,7 +68,7 @@ Type: `Promise<void>`
 | ---------------- | ----------------------------------------------------------------------- |
 | `"body"`         | The `<main>` that holds the dialog body content                         |
 | `"button-close"` | The button that close the dialog on click                               |
-| `"container"`    | The `<div>` container that holds the dialog content                     |
+| `"content"`      | The `<div>` container that holds the dialog title and body content      |
 | `"dialog"`       | The `<dialog>` wrapper container inside the shadow DOM                  |
 | `"footer"`       | The `<footer>` that holds footer content                                |
 | `"header"`       | The `<header>` that holds the icon, title, description and close button |

diff --git a/packages/bee-q/src/components/dialog/scss/bq-dialog.scss b/packages/bee-q/src/components/dialog/scss/bq-dialog.scss
@@ -5,34 +5,34 @@
 @import './bq-dialog.variables';
 
 :host {
-  @apply fixed left-0 top-0 -z-10 flex h-dynamic-vh w-full items-center justify-center;
   @apply invisible #{!important};
 }
 
-:host([open]) {
-  @apply z-[var(--bq-dialog-z-index)];
+:host(.bq-dialog--open) {
   @apply visible #{!important};
 }
 
 /* --------------------------------- Dialog --------------------------------- */
 
 .bq-dialog {
-  @apply m-auto flex flex-col gap-[var(--bq-dialog--gap)] p-0;
+  @apply absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 transform flex-col gap-[var(--bq-dialog--content-footer-gap)] p-0;
   @apply rounded-[var(--bq-dialog--border-radius)] bg-[var(--bq-dialog--background)] shadow-[shadow:var(--bq-dialog--box-shadow)];
-  @apply opacity-50 transition-opacity duration-300 ease-in-out;
+  @apply opacity-0 transition-opacity duration-300 ease-in-out;
+  // If mobile resolution, dialog will be full width
+  @apply w-[90vw];
 
   border: var(--bq-dialog--border-width) var(--bq-dialog--border-style) var(--bq-dialog--border-color);
 
   &.small {
-    @apply w-[var(--bq-dialog--width-small)];
+    @apply sm:w-[var(--bq-dialog--width-small)];
   }
 
   &.medium {
-    @apply w-[var(--bq-dialog--width-medium)];
+    @apply sm:w-[var(--bq-dialog--width-medium)];
   }
 
   &.large {
-    @apply w-[var(--bq-dialog--width-large)];
+    @apply sm:w-[var(--bq-dialog--width-large)];
   }
 }
 
@@ -59,7 +59,7 @@
 /* ------------------------------ Dialog footer ----------------------------- */
 
 .bq-dialog--footer {
-  @apply sticky bottom-0 flex w-full items-center justify-end gap-xs p-[var(--bq-dialog--padding)] pt-0;
+  @apply sticky top-full flex w-full items-center justify-end gap-xs p-[var(--bq-dialog--padding)] pt-0;
 }
 
 /* --------------------------- Dialog close button -------------------------- */

diff --git a/packages/bee-q/src/components/dialog/scss/bq-dialog.variables.scss b/packages/bee-q/src/components/dialog/scss/bq-dialog.variables.scss
@@ -13,7 +13,8 @@
    * @prop --bq-dialog--border-width: Dialog border width
    * @prop --bq-dialog--border-radius: Dialog border radius
    * @prop --bq-dialog--padding: Dialog padding
-   * @prop --bq-dialog--gap: Dialog gap distance between title, body and footer elements
+   * @prop --bq-dialog--content-footer-gap: Dialog gap distance between content and footer elements
+   * @prop --bq-dialog--title-body-gap: Dialog gap distance between title and body elements
    * @prop --bq-dialog--width-small: Dialog small width
    * @prop --bq-dialog--width-medium: Dialog medium width
    * @prop --bq-dialog--width-large: Dialog large width
@@ -26,12 +27,13 @@
   --bq-dialog--box-shadow: theme('boxShadow.m');
 
   --bq-dialog--border-color: theme('colors.transparent');
-  --bq-dialog--border-style: solid;
-  --bq-dialog--border-width: 0;
-  --bq-dialog--border-radius: theme('borderRadius.s');
+  --bq-dialog--border-radius: theme('borderRadius.m');
+  --bq-dialog--border-style: none;
+  --bq-dialog--border-width: unset;
 
   --bq-dialog--padding: theme('spacing.l');
-  --bq-dialog--gap: theme('spacing.l');
+  --bq-dialog--content-footer-gap: theme('spacing.l');
+  --bq-dialog--title-body-gap: theme('spacing.s');
 
   --bq-dialog--width-small: 320px;
   --bq-dialog--width-medium: 480px;