refactor(Dialog): use CSS logical properties instead of physical valu…

…es (#1146) Co-authored-by: Dabiel González Ramos <[email protected]>
Endava · Jul 14, 2024 · afc1653 · afc1653
1 parent 8069d47
commit afc1653
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 31 deletions.
diff --git a/packages/beeq/src/components/dialog/_storybook/bq-dialog.stories.tsx b/packages/beeq/src/components/dialog/_storybook/bq-dialog.stories.tsx
@@ -1,5 +1,6 @@
 import type { Args, Meta, StoryObj } from '@storybook/web-components';
 import { html, nothing } from 'lit-html';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 
 import mdx from './bq-dialog.mdx';
 import { DIALOG_BORDER_RADIUS, DIALOG_FOOTER_APPEARANCE, DIALOG_SIZE } from '../bq-dialog.types';
@@ -30,6 +31,7 @@ const meta: Meta = {
     // Not part of the public API
     noContent: { control: 'boolean', table: { disable: true } },
     noFooter: { control: 'boolean', table: { disable: true } },
+    customClose: { control: 'text', table: { disable: true } },
   },
   args: {
     'disable-backdrop': false,
@@ -73,6 +75,7 @@ const Template = (args: Args) => {
       @bqAfterOpen=${args.bqAfterOpen}
       @bqAfterClose=${args.bqAfterClose}
     >
+      ${ifDefined(args.customClose)}
       <h5 class="bold flex items-center gap-s" slot="title">
         <bq-icon name="info" size="30" color="text--accent" role="img" title="Info"></bq-icon>
         Title
@@ -130,6 +133,29 @@ export const NoBackdrop: Story = {
   },
 };
 
+export const CustomCloseButton: Story = {
+  render: Template,
+  args: {
+    open: true,
+    customClose: html`
+      <style>
+        bq-button[slot='button-close']::part(button) {
+          border-radius: var(--bq-radius--full);
+          /* Paddings */
+          padding-block: 0;
+          padding-inline: 0;
+          /* Size (width/height) */
+          block-size: var(--bq-spacing-xl);
+          inline-size: var(--bq-spacing-xl);
+        }
+      </style>
+      <bq-button appearance="text" size="small" slot="button-close">
+        <bq-icon class="cursor-pointer" name="x" role="img" title="Close"></bq-icon>
+      </bq-button>
+    `,
+  },
+};
+
 const ConfirmTemplate = (args: Args) => {
   const handleOpenDialog = async () => {
     const dialogElem = document.querySelector('bq-dialog');

diff --git a/packages/beeq/src/components/dialog/bq-dialog.tsx b/packages/beeq/src/components/dialog/bq-dialog.tsx
@@ -31,6 +31,7 @@ export class BqDialog {
   private dialogElem: HTMLDialogElement;
   private contentElem: HTMLElement;
   private footerElem: HTMLElement;
+  private closeSlotElem: HTMLElement;
   private OPEN_CSS_CLASS = 'bq-dialog--open';
 
   // Reference to host HTML element
@@ -119,6 +120,12 @@ export class BqDialog {
 
   componentDidLoad() {
     this.handleOpenChange();
+    this.closeSlotElem = this.el.shadowRoot.querySelector('slot[name="button-close"]');
+    this.closeSlotElem?.addEventListener('click', () => this.hide());
+  }
+
+  disconnectedCallback() {
+    this.closeSlotElem?.removeEventListener('click', () => this.hide());
   }
 
   // Listeners
@@ -197,8 +204,8 @@ export class BqDialog {
   private handleClose = async () => {
     if (!this.dialogElem) return;
 
-    this.dialogElem.close();
     await leave(this.dialogElem);
+    this.dialogElem.close();
     // Emit bqAfterClose event after the dialog is closed
     this.handleTransitionEnd();
   };
@@ -244,37 +251,40 @@ export class BqDialog {
     return (
       <dialog
         style={style}
-        class={`bq-dialog hidden ${this.size} focus-visible:outline-none`}
+        class={{
+          [`bq-dialog hidden ${this.size} m-auto focus-visible:outline-none`]: true,
+          'inset-be-[50%] inset-bs-[50%]': this.disableBackdrop,
+        }}
         data-transition-enter="transition ease-in duration-300"
-        data-transition-enter-start="opacity-0 scale-75"
+        data-transition-enter-start="opacity-0 scale-90"
         data-transition-enter-end="opacity-100 scale-100"
         data-transition-leave="transition ease-out duration-300"
         data-transition-leave-start="opacity-100 scale-100"
-        data-transition-leave-end="opacity-0 scale-75"
+        data-transition-leave-end="opacity-0 scale-90"
         inert={this.open ? undefined : true}
         ref={(dialogElem) => (this.dialogElem = dialogElem)}
+        aria-modal="true"
+        aria-labelledby="bq-dialog--title"
         part="dialog"
       >
-        <main class="flex flex-col gap-[var(--bq-dialog--title-body-gap)] overflow-hidden" part="content">
+        <main class="flex flex-col gap-[--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">
+            <div id="bq-dialog--title" class="bq-dialog--title flex flex-1 items-center justify-between" part="title">
               <slot name="title" />
             </div>
-            <div class="flex" onClick={() => this.hide()} role="button" 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>
+            <slot name="button-close">
+              {!this.hideCloseButton && (
+                <bq-button class="bq-dialog--close" appearance="text" size="small">
+                  <bq-icon class="cursor-pointer" name="x" role="img" title="Close" />
+                </bq-button>
+              )}
+            </slot>
           </header>
           <div
             class={{
               '!hidden': !this.hasContent,
-              'overflow-y-auto px-[var(--bq-dialog--padding)]': this.hasContent,
-              '!pb-[var(--bq-dialog--padding)]': !this.hasFooter,
+              'overflow-y-auto p-i-[--bq-dialog--padding]': this.hasContent,
+              '!p-be-[--bq-dialog--padding]': !this.hasFooter,
             }}
             ref={(mainElem) => (this.contentElem = mainElem)}
             part="body"
@@ -286,7 +296,7 @@ export class BqDialog {
           class={{
             '!hidden': !this.hasFooter,
             'bq-dialog--footer': this.hasFooter,
-            'bg-ui-alt !py-s': this.footerAppearance === 'highlight',
+            'bg-ui-alt !p-b-s': this.footerAppearance === 'highlight',
           }}
           ref={(footerElem) => (this.footerElem = footerElem)}
           part="footer"

diff --git a/packages/beeq/src/components/dialog/scss/bq-dialog.scss b/packages/beeq/src/components/dialog/scss/bq-dialog.scss
@@ -1,5 +1,5 @@
 /* -------------------------------------------------------------------------- */
-/*                                Dialog styles                */
+/*                                Dialog styles                               */
 /* -------------------------------------------------------------------------- */
 
 @import './bq-dialog.variables';
@@ -15,28 +15,24 @@
 /* --------------------------------- Dialog --------------------------------- */
 
 .bq-dialog {
-  @apply absolute left-1/2 top-1/2 flex;
-  @apply flex-col gap-[var(--bq-dialog--content-footer-gap)] p-0;
+  @apply absolute flex flex-col gap-[--bq-dialog--content-footer-gap] p-b-0 p-i-0;
   @apply bg-[--bq-dialog--background] text-[--bq-dialog--text-color] shadow-[shadow:--bq-dialog--box-shadow];
-  @apply rounded-[var(--bq-dialog--border-radius)] border-[color:--bq-dialog--border-color] [length:--bq-dialog--border-width];
-  // After setting `optimizeUniversalDefaults` to `true` in `tailwind.config.js`,
-  // `!important` is required to avoid default --tw-* variables to override custom transform values
-  @apply -translate-x-1/2 -translate-y-1/2 #{!important};
+  @apply rounded-[--bq-dialog--border-radius] border-[length:--bq-dialog--border-width] border-[color:--bq-dialog--border-color];
   // If mobile resolution, dialog will be full width
-  @apply w-[90vw];
+  @apply is-[90vw];
 
   border-style: var(--bq-dialog--border-style);
 
   &.small {
-    @apply sm:w-[--bq-dialog--width-small];
+    @apply sm:is-[--bq-dialog--width-small];
   }
 
   &.medium {
-    @apply sm:w-[--bq-dialog--width-medium];
+    @apply sm:is-[--bq-dialog--width-medium];
   }
 
   &.large {
-    @apply sm:w-[--bq-dialog--width-large];
+    @apply sm:is-[--bq-dialog--width-large];
   }
 }
 
@@ -53,13 +49,13 @@
 /* ------------------------------ Dialog header ----------------------------- */
 
 .bq-dialog--header {
-  @apply sticky top-0 flex items-center gap-m p-[--bq-dialog--padding] pb-0;
+  @apply sticky flex items-center gap-m inset-bs-0 p-b-[--bq-dialog--padding] p-be-0 p-i-[--bq-dialog--padding];
 }
 
 /* ------------------------------ Dialog footer ----------------------------- */
 
 .bq-dialog--footer {
-  @apply sticky top-full flex w-full items-center justify-end gap-xs p-[--bq-dialog--padding] pt-0;
+  @apply sticky flex items-center justify-end gap-xs is-full inset-bs-[100%] p-b-[--bq-dialog--padding] p-bs-0 p-i-[--bq-dialog--padding];
 }
 
 /* --------------------------- Dialog close button -------------------------- */