✨ Add transparent modal for opening custom components

Author: Frontendland

src/components/Button/button.ts

@@ -28,5 +28,5 @@ export type SvelteButtonProps = {
 
 export type ReactButtonProps = {
     onClick?: React.MouseEventHandler<HTMLButtonElement>
-    children: React.ReactNode
+    children?: React.ReactNode
 } & ButtonProps

src/components/Modal/Modal.astro

@@ -26,6 +26,7 @@ const {
     showCloseIcon = true,
     closeOnEsc = true,
     closeOnOverlay = true,
+    transparent,
     theme,
     id,
     className,
@@ -40,6 +41,7 @@ const close = [
 
 const classes = [
     styles.modal,
+    transparent && styles.transparent,
     theme && styles[theme],
     className
 ]

src/components/Modal/Modal.svelte

@@ -18,6 +18,7 @@
     export let showCloseIcon: ModalProps['showCloseIcon'] = true
     export let closeOnEsc: ModalProps['closeOnEsc'] = true
     export let closeOnOverlay: ModalProps['closeOnOverlay'] = true
+    export let transparent: ModalProps['transparent'] = false
     export let theme: ModalProps['theme'] = null
     export let id : ModalProps['className'] = ''
     export let className: ModalProps['className'] = ''
@@ -31,6 +32,7 @@
 
     const classes = classNames([
         styles.modal,
+        transparent && styles.transparent,
         theme && styles[theme],
         className
     ])

src/components/Modal/Modal.tsx

@@ -26,6 +26,7 @@ const Modal = ({
     showCloseIcon = true,
     closeOnEsc = true,
     closeOnOverlay = true,
+    transparent,
     theme,
     id,
     className,
@@ -35,6 +36,7 @@ const Modal = ({
     const classes = classNames([
         styles.modal,
         theme && styles[theme],
+        transparent && styles.transparent,
         className
     ])
 

src/components/Modal/modal.module.scss

@@ -28,28 +28,11 @@
         }
     }
 
-    .close {
-        @include position(absolute, t10px, r10px);
-        @include spacing(p-xs);
-
-        svg {
-            @include size(10px);
-        }
-    }
-
-    .title {
-        @include typography(lg);
-        @include spacing(mb-xs);
-        @include layout(flex, v-center, xs);
-
-        svg {
-            @include size(20px);
-        }
-    }
-
-    .subTitle {
-        @include typography(primary-20);
-        @include spacing(mb-xs);
+    &.transparent {
+        @include border(0);
+        @include spacing(p0);
+        @include size('wfit-content');
+        @include background(transparent);
     }
 
     &.info {
@@ -83,6 +66,30 @@
             @include typography(alert);
         }
     }
+
+    .close {
+        @include position(absolute, t10px, r10px);
+        @include spacing(p-xs);
+
+        svg {
+            @include size(10px);
+        }
+    }
+
+    .title {
+        @include typography(lg);
+        @include spacing(mb-xs);
+        @include layout(flex, v-center, xs);
+
+        svg {
+            @include size(20px);
+        }
+    }
+
+    .subTitle {
+        @include typography(primary-20);
+        @include spacing(mb-xs);
+    }
 }
 
 .overlay {

src/components/Modal/modal.ts

@@ -4,6 +4,7 @@ export type ModalProps = {
     showCloseIcon?: boolean
     closeOnEsc?: boolean
     closeOnOverlay?: boolean
+    transparent?: boolean
     id?: string
     className?: string
     theme?: 'info'