add modal medium variant, add export icon (viamrobotics#563)

micheal-parks · Aug 21, 2024 · 03dbc60 · 03dbc60
1 parent 925804a
commit 03dbc60
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 14 deletions.
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/prime-core",
-  "version": "0.0.144",
+  "version": "0.0.145",
   "publishConfig": {
     "access": "public"
   },

diff --git a/packages/core/src/lib/icon/icons.ts b/packages/core/src/lib/icon/icons.ts
@@ -66,6 +66,7 @@ export const paths = {
   'dots-horizontal': MDI.mdiDotsHorizontal,
   download: MDI.mdiDownload,
   earth: MDI.mdiEarth,
+  export: MDI.mdiExport,
   'file-chart-outline': MDI.mdiFileChartOutline,
   'file-download-outline': MDI.mdiFileDownloadOutline,
   'file-swap-outline': MDI.mdiFileSwapOutline,

diff --git a/packages/core/src/lib/modal.svelte b/packages/core/src/lib/modal.svelte
@@ -50,7 +50,7 @@ import { clickOutside } from '$lib';
 export let isOpen: boolean;
 
 /** The variant of the modal. */
-export let variant: 'small' | '' = '';
+export let variant: 'small' | 'medium' | '' = '';
 
 export let role = 'dialog';
 
@@ -84,24 +84,20 @@ $: if (typeof document !== 'undefined') {
   >
     <div
       use:clickOutside={handleCloseModal}
-      class={cx(
-        'relative max-w-lg border border-medium bg-white p-6 shadow-sm',
-        {
-          'max-h-[600px] min-h-[400px] w-[480px]': variant === '',
-          'max-h-[320px] w-[400px]': variant === 'small',
-          'overflow-y-auto': true,
-        }
-      )}
+      class={cx('relative border border-medium bg-white p-6 shadow-sm', {
+        'h-[400px] w-[480px]': variant === '',
+        'h-[600px] w-[800px]': variant === 'medium',
+        'max-h-[320px] w-[400px]': variant === 'small',
+        'overflow-y-auto': true,
+      })}
     >
       <IconButton
         cx="absolute right-4 top-4 text-gray-6"
         icon="close"
         label="Close modal"
         on:click={handleCloseModal}
       />
-      <div
-        class={cx('flex flex-col gap-2', { 'min-h-[400px]': variant === '' })}
-      >
+      <div class="flex min-h-full flex-col gap-2">
         <h2 class="pr-12 text-lg font-semibold text-default">
           <slot name="title" />
         </h2>

diff --git a/packages/core/src/routes/+page.svelte b/packages/core/src/routes/+page.svelte
@@ -1126,8 +1126,9 @@ const onHoverDelayMsInput = (event: Event) => {
   <h1 class="text-2xl">Modal</h1>
 
   <div>
-    <Button on:click={handleOpenModal}>Open Modal</Button>
+    <Button on:click={handleOpenModal}>Open modal</Button>
     <Modal
+      variant="medium"
       isOpen={modalOpen}
       on:close={handleCloseModal}
     >