feat(vara-ui): mobile modal (#1645)

gear-tech · Sep 27, 2024 · 3588833 · 3588833
1 parent 7f7ea5f
commit 3588833
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 7 deletions.
diff --git a/utils/vara-ui/package-lock.json b/utils/vara-ui/package-lock.json
diff --git a/utils/vara-ui/package.json b/utils/vara-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gear-js/vara-ui",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "type": "module",
   "description": "React UI components used across Vara applications",
   "author": "Gear Technologies",

diff --git a/utils/vara-ui/src/components/modal/modal.module.scss b/utils/vara-ui/src/components/modal/modal.module.scss
@@ -47,6 +47,12 @@
   background-color: rgba(0, 0, 0, 0.2);
   backdrop-filter: blur(10px);
   z-index: 10;
+
+  @media screen and (max-width: 768px) {
+    padding: 0;
+
+    align-items: flex-end;
+  }
 }
 
 .modal {
@@ -60,9 +66,17 @@
   border-radius: 4px;
   filter: drop-shadow(0px 4px 4px #00000011);
 
+  @media screen and (max-width: 768px) {
+    max-width: unset;
+  }
+
   > * {
-    /* every standalone item for body scrollbar padding */
+    /* applying x-padding to every child, to preserve body scrollbar padding */
     padding: 0 32px;
+
+    @media screen and (max-width: 768px) {
+      padding: 0 16px;
+    }
   }
 }
 

diff --git a/utils/vara-ui/src/components/modal/modal.stories.ts b/utils/vara-ui/src/components/modal/modal.stories.ts
@@ -4,6 +4,9 @@ import { Modal } from './modal';
 type Type = typeof Modal;
 type Story = StoryObj<Type>;
 
+const LONG_TEXT =
+  'Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text';
+
 const meta: Meta<Type> = {
   title: 'Modal',
   component: Modal,
@@ -20,11 +23,28 @@ const Default: Story = {
 const Scroll: Story = {
   args: {
     heading: 'Heading',
-    children:
-      'Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text',
+    children: LONG_TEXT,
     footer: 'Footer',
   },
 };
 
+const Mobile: Story = {
+  args: {
+    heading: 'Mobile Modal',
+    children: 'Some modal text',
+    close: () => {},
+  },
+  parameters: { viewport: { defaultViewport: 'mobile1' } },
+};
+
+const MobileScroll: Story = {
+  args: {
+    heading: 'Mobile Modal',
+    children: LONG_TEXT,
+    close: () => {},
+  },
+  parameters: { viewport: { defaultViewport: 'mobile1' } },
+};
+
 export default meta;
-export { Default, Scroll };
+export { Default, Scroll, Mobile, MobileScroll };