🐛 Fix custom icon showing up in wrong place for Svelte component

Author: Frontendland

src/components/Toast/Toast.svelte

@@ -24,9 +24,14 @@
     }
 </script>
 
-<Alert {...$$restProps} className={classes} {...additionalProps}>
-    {#if $$slots.icon}
-        <slot name="icon" />
-    {/if}
-    <slot />
-</Alert>
+{#if $$slots.icon}
+    <Alert {...$$restProps} className={classes} {...additionalProps}>
+        <slot slot="icon" name="icon" />
+        <slot />
+    </Alert>
+{:else}
+    <Alert {...$$restProps} className={classes} {...additionalProps}>
+        <slot />
+    </Alert>
+{/if}
+

src/pages/toast.astro

@@ -129,7 +129,7 @@ const sections = getSections({
                 </section.component>
             </ComponentWrapper>
 
-            <ComponentWrapper title="Programmatically setting copy, theme & pos">
+            <ComponentWrapper title="Programmatically setting copy & pos">
                 <Button theme="secondary" id={`programmatic-btn-${index}`}>
                     Programmatically setting copy
                 </Button>
@@ -138,11 +138,11 @@ const sections = getSections({
                     Original content
                 </section.component>
 
-                <Button theme="secondary" id={`themed-btn-${index}`}>
+                <Button theme="secondary" id={`pos-btn-${index}`}>
                     Show Toast in top-left corner
                 </Button>
 
-                <section.component title="Original title" id={`themed-toast-${index}`}>
+                <section.component title="Original title" id={`pos-toast-${index}`}>
                     Original content
                 </section.component>
             </ComponentWrapper>
@@ -208,14 +208,12 @@ const sections = getSections({
         })
     });
 
-    // Programmatically setting theme
+    // Programmatically setting position
     [0, 1, 2].forEach(x => {
-        on(`#themed-btn-${x}`, () => {
+        on(`#pos-btn-${x}`, () => {
             toast({
-                element: `#themed-toast-${x}`,
+                element: `#pos-toast-${x}`,
                 title: 'Title set through JS',
-                content: 'Theme set to "success"',
-                theme: 'success',
                 position: 'top-left'
             })
         })

src/utils/toast.ts

@@ -6,7 +6,6 @@ type Toast = {
     timeout?: number
     title?: AlertProps['title']
     content?: string
-    theme?: AlertProps['theme']
     position?: ToastProps['position']
 }
 
@@ -23,17 +22,12 @@ export const toast = (config: Toast | string) => {
         timeout,
         title,
         content,
-        theme,
         position
     } = (typeof config === 'string' ? {} : config) as Toast
 
     const htmlElement = document.querySelector(element) as HTMLElement
 
     if (htmlElement) {
-        if (theme) {
-            htmlElement.dataset.theme = theme
-        }
-        
         if (position) {
             htmlElement.dataset.position = position
         }