Modal overflow - align to top when large

hyvor · Jan 2, 2024 · db95321 · db95321
1 parent c1707d6
commit db95321
Show file tree

Hide file tree

Showing 5 changed files with 99 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,6 @@
+## 0.0.35 - 2024-01-02
+- Modal overflow - align to top when large
+
 ## 0.0.34 - 2024-01-02
 - var(--orange) color update
 - TextInput blur bug fixed

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@hyvor/design",
-	"version": "0.0.34",
+	"version": "0.0.35",
 	"license": "MIT",
 	"private": false,
 	"scripts": {

diff --git a/src/lib/components/ActionList/ActionListItem.svelte b/src/lib/components/ActionList/ActionListItem.svelte
@@ -31,6 +31,8 @@
         }
     }}
     {...$$restProps}
+
+    on:click
 >
 
     {#if selection !== 'none'}

diff --git a/src/lib/components/Modal/Modal.svelte b/src/lib/components/Modal/Modal.svelte
@@ -3,13 +3,29 @@
     import { IconX } from '@hyvor/icons';
     import IconButton from './../IconButton/IconButton.svelte';
 	import { scale } from 'svelte/transition';
+    import { onMount, tick } from "svelte";
 
     export let show = false;
     export let title = "";
     export let size : "small" | "medium" | "large" = "medium";
     export let closeOnOutsideClick = true;
     export let closeOnEscape = true;
 
+    let wrapEl: HTMLDivElement;
+    let innerEl: HTMLDivElement;
+
+    async function setFlex() {
+        await tick();
+        if (!wrapEl || !innerEl) return;
+        if (innerEl.offsetHeight > wrapEl.offsetHeight - 60) {
+            wrapEl.style.alignItems = 'flex-start';
+        } else {
+            wrapEl.style.alignItems = 'center';
+        }
+    }
+
+    onMount(setFlex);
+    $: show, setFlex();
 
 </script>
 
@@ -21,7 +37,10 @@
 
 
 {#if show}
-    <div class="wrap">
+    <div 
+        class="wrap"
+        bind:this={wrapEl}
+    >
 
         <div 
             class="inner {size}"
@@ -30,6 +49,7 @@
                 callback: () => show = false
             }}
             in:scale={{duration: 100, start: 0.9, opacity: 0.9}}
+            bind:this={innerEl}
         >
 
             <div class="header">
@@ -81,6 +101,8 @@
         display: flex;
         align-items: center;
         justify-content: center;
+        padding: 30px;
+        overflow: auto;
     }
 
     .inner {
@@ -89,8 +111,6 @@
         box-shadow: var(--box-shadow);
         width: 650px;
         max-width: 100%;
-        max-height: 100%;
-        overflow: auto;
         position: relative;
     }
 
@@ -103,7 +123,6 @@
 
     .header {
         padding: 20px 25px;
-        border-bottom: 1px solid var(--box-border);
         display: flex;
         align-items: center;
     }

diff --git a/src/routes/[[slug]]/docs/Modal.svelte b/src/routes/[[slug]]/docs/Modal.svelte
@@ -18,6 +18,8 @@
 
     let show5 = false;
 
+    let show6 = false;
+
 </script>
 
 <h1>Modal</h1>
@@ -259,4 +261,72 @@
         <Button variant="invisible" on:click={() => show5 = false}>Close</Button>
     </div>
 
+</Modal>
+
+<h3 id="scrollable">
+    Scrollable Modal
+</h3>
+
+<p>
+    If a modal grows larger than the screen, it will be scrollable. The inner content will be aligned to the top of the modal.
+</p>
+
+<CodeResult style="display:flex;flex-direction:column;gap:6px;align-items:flex-start;">
+    <Button on:click={() => show6 = true}>
+        Scrollable Modal
+    </Button>
+</CodeResult>
+
+<Modal 
+    bind:show={show6}
+    title="Scrollable Modal"
+>
+
+    <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. 
+        Quisquam, voluptatum. Quisquam, voluptatum. Quisquam, voluptatum. 
+        Quisquam, voluptatum. Quisquam, voluptatum. Quisquam, voluptatum. 
+        Quisquam, voluptatum. Quisquam, voluptatum. Quisquam, voluptatum. 
+        Quisquam, voluptatum. Quisquam, voluptatum. Quisquam, voluptatum. 
+        Quisquam, voluptatum. Quisquam, voluptatum. Quisquam, voluptatum. 
+        Quisquam, voluptatum. Quisquam, voluptatum. Quisquam, voluptatum. 
+        Quisquam, voluptatum. Quisquam, voluptatum. Quisquam, voluptatum. 
+    </p>
+
+    <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. 
+        Quisquam, voluptatum. Quisquam, voluptatum. Quisquam, voluptatum. 
+        Quisquam, voluptatum. Quisquam, voluptatum. Quisquam, voluptatum. 
+        Quisquam, voluptatum. Quisquam, voluptatum. Quisquam, voluptatum. 
+    </p>
+
+    <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. 
+        Quisquam, voluptatum. Quisquam, voluptatum. Quisquam, voluptatum. 
+        Quisquam, voluptatum. Quisquam, voluptatum. Quisquam, voluptatum. 
+    </p>
+
+    <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. 
+        Quisquam, voluptatum. Quisquam, voluptatum. Quisquam, voluptatum. 
+        Quisquam, voluptatum. Quisquam, voluptatum. Quisquam, voluptatum. 
+    </p>
+
+    <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. 
+        Quisquam, voluptatum. Quisquam, voluptatum. Quisquam, voluptatum. 
+        Quisquam, voluptatum. Quisquam, voluptatum. Quisquam, voluptatum. 
+    </p>
+
+    <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. 
+        Quisquam, voluptatum. Quisquam, voluptatum. Quisquam, voluptatum. 
+        Quisquam, voluptatum. Quisquam, voluptatum. Quisquam, voluptatum. 
+        Quisquam, voluptatum. Quisquam, voluptatum. Quisquam, voluptatum. 
+        Quisquam, voluptatum. Quisquam, voluptatum. Quisquam, voluptatum. 
+        Quisquam, voluptatum. Quisquam, voluptatum. Quisquam, voluptatum. 
+        Quisquam, voluptatum. Quisquam, voluptatum. Quisquam, voluptatum. 
+        Quisquam, voluptatum. Quisquam, voluptatum. Quisquam, voluptatum. 
+    </p>
+
 </Modal>
-Original file line number
+Diff line change
@@ Expand Up / @@ -31,6 +31,8 @@ @@
             }
         }}
         {...$$restProps}
+        on:click
     >
         {#if selection !== 'none'}
@@ Expand Down @@