♿ - fix: fix modal visiblility state being incorrect

src/components/modal/modal.scss

@@ -3,44 +3,56 @@
   background: transparent;
   border-radius: var(--border-radius-l);
   display: block;
+  inset-block-start: 0;
+  inset-block-end: 0;
   transition: transform var(--animation-duration-medium)
     var(--animation-timing-function);
   margin: 0;
   max-height: 100%;
+  opacity: 0;
   overflow: visible; // Allow DatePicker to overflow Card and Modal.
   padding: 0;
+  position: fixed;
   z-index: 9999;
 
+  &[hidden] {
+    display: none;
+  }
+
   &::backdrop {
     background-color: var(--page-color-shadow);
   }
 
   &--position-float {
     margin: auto;
-    opacity: 0;
-    transform: translateY(-100%);
 
     &[open] {
-      opacity: 1;
-      transform: translateY(0);
+      animation: slide-top-center;
+      animation-duration: var(--animation-duration-medium);
+      animation-timing-function: var(--animation-timing-function);
+      animation-direction: normal;
+      animation-fill-mode: forwards;
     }
   }
 
   // TODO: RTL support
   &--position-side {
+    inset-inline-start: 100%;
+    inset-inline-end: 0;
+
+    &[open] {
+      animation: slide-side-center;
+      animation-duration: var(--animation-duration-medium);
+      animation-timing-function: var(--animation-timing-function);
+      animation-direction: normal;
+      animation-fill-mode: forwards;
+    }
+
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
-    left: 100%;
     position: fixed;
-    right: 0;
-    transform: translateX(0);
-    top: 0;
     height: 100%;
 
-    &[open] {
-      transform: translateX(-100%);
-    }
-
     > .mykn-card {
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
@@ -67,3 +79,25 @@
     width: 280px;
   }
 }
+
+@keyframes slide-top-center {
+  from {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slide-side-center {
+  from {
+    opacity: 0;
+    transform: translateX(0%);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-100%);
+  }
+}

src/components/modal/modal.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
+import { expect, waitFor, within } from "@storybook/test";
 import * as React from "react";
 
 import { Form } from "../form";
@@ -62,3 +63,35 @@ export const SideModal: Story = {
     position: "side",
   },
 };
+
+export const HiddenModal: Story = {
+  args: {
+    children: "The quick brown fox jumps over the lazy dog.",
+    open: false,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = await within(canvasElement);
+    const modal = canvas.getByRole("dialog", { hidden: true });
+    const modalElement = canvasElement.querySelector(
+      "dialog",
+    ) as HTMLDialogElement;
+    await expect(modal).not.toBeVisible();
+    await expect(modalElement.checkVisibility()).toBeFalsy();
+  },
+};
+
+export const VisibleModal: Story = {
+  args: {
+    children: "The quick brown fox jumps over the lazy dog.",
+    open: true,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = await within(canvasElement);
+    const modal = canvas.getByRole("dialog", { hidden: true });
+    const modalElement = canvasElement.querySelector(
+      "dialog",
+    ) as HTMLDialogElement;
+    await waitFor(() => expect(modal).toBeVisible());
+    await expect(modalElement.checkVisibility()).toBeTruthy();
+  },
+};