refactor(Notification): use CSS logical properties instead of physica…

…l values (#1111)
Endava · Jun 20, 2024 · 38e9117 · 38e9117
1 parent 33b2214
commit 38e9117
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 10 deletions.
diff --git a/packages/beeq/src/components/notification/_storybook/bq-notification.stories.tsx b/packages/beeq/src/components/notification/_storybook/bq-notification.stories.tsx
@@ -188,11 +188,11 @@ export const Stacked: Story = {
     };
 
     return html`
-      <p class="mb-0">
+      <p class="m-be-0">
         The notification component creates and manages the notification portal, a fixed-position element that allows for
         stacking multiple notifications vertically.
       </p>
-      <p class="mb-6">
+      <p class="m-be-6">
         Only one instance of the notification portal exists and it is added or removed from the DOM as required when
         notifications are displayed.
       </p>

diff --git a/packages/beeq/src/components/notification/bq-notification.tsx b/packages/beeq/src/components/notification/bq-notification.tsx
@@ -259,7 +259,7 @@ export class BqNotification {
           {/* CLOSE BUTTON */}
           {!this.disableClose && (
             <bq-button
-              class="notification--close absolute right-5"
+              class="notification--close absolute inset-ie-5"
               appearance="text"
               size="small"
               onClick={() => this.hide()}
@@ -273,7 +273,7 @@ export class BqNotification {
             class={{
               '!hidden': this.hideIcon,
               [`color-${this.type}`]: true, // The icon color will be based on the type (info, success, warning, error)
-              'notification--icon mr-xs flex text-left align-top': true,
+              'notification--icon me-xs flex text-left align-top': true,
             }}
             part="icon-outline"
           >
@@ -282,8 +282,8 @@ export class BqNotification {
             </slot>
           </div>
           {/* MAIN */}
-          <div class="flex flex-col items-start gap-[var(--bq-notification--content-footer-gap)]" part="main">
-            <div class="flex flex-col gap-[var(--bq-notification--title-body-gap)]" part="content">
+          <div class="flex flex-col items-start gap-[--bq-notification--content-footer-gap]" part="main">
+            <div class="flex flex-col gap-[--bq-notification--title-body-gap]" part="content">
               {/* TITLE */}
               <div class="title-font font-semibold leading-regular" part="title">
                 <slot />

diff --git a/packages/beeq/src/components/notification/scss/bq-notification.scss b/packages/beeq/src/components/notification/scss/bq-notification.scss
@@ -13,8 +13,8 @@
 }
 
 .bq-notification {
-  @apply relative flex min-w-[var(--bq-notification--min-width)] p-[var(--bq-notification--padding)] transition-all;
-  @apply rounded-[var(--bq-notification--border-radius)] bg-[var(--bq-notification--background)] shadow-[shadow:var(--bq-notification--box-shadow)];
+  @apply relative flex transition-all min-is-[--bq-notification--min-width] p-b-[--bq-notification--padding] p-i-[--bq-notification--padding];
+  @apply rounded-[--bq-notification--border-radius] bg-[--bq-notification--background] shadow-[shadow:--bq-notification--box-shadow];
 }
 
 /**
@@ -46,7 +46,7 @@
  * Tweak the close bq-button styles so it remain small without extra padding
  */
 .notification--close::part(button) {
-  @apply h-fit rounded-s border-0 p-0;
+  @apply rounded-s border-0 bs-fit p-b-0 p-i-0;
 }
 
 /**
@@ -60,6 +60,6 @@
 [part='body'],
 [part='footer'] {
   ::slotted(*) {
-    @apply mt-m block;
+    @apply block m-bs-m;
   }
 }