From e59e1a93482329c2218eaa8da9798c9fe005b3ff Mon Sep 17 00:00:00 2001
From: metonym <ericyl.us@gmail.com>
Date: Fri, 12 Nov 2021 16:13:06 -0800
Subject: [PATCH] feat(inline-notification): make title/subtitle slottable

Closes #883
---
 COMPONENT_INDEX.md                                | 10 ++++++----
 docs/src/COMPONENT_API.json                       | 14 +++++++++++++-
 docs/src/pages/components/InlineNotification.svx  |  7 +++++++
 src/Notification/InlineNotification.svelte        | 15 ++++++++-------
 types/Notification/InlineNotification.svelte.d.ts |  2 +-
 5 files changed, 35 insertions(+), 13 deletions(-)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index c524a444..427f4077 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -1996,10 +1996,12 @@ None.
 
 ### Slots
 
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :---- | :------- |
-| --        | Yes     | --    | --       |
-| actions   | No      | --    | --       |
+| Slot name | Default | Props | Fallback                |
+| :-------- | :------ | :---- | :---------------------- |
+| --        | Yes     | --    | --                      |
+| actions   | No      | --    | --                      |
+| subtitle  | No      | --    | <code>{subtitle}</code> |
+| title     | No      | --    | <code>{title}</code>    |
 
 ### Events
 
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index e3dbf224..344225fb 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -5218,7 +5218,19 @@
       ],
       "slots": [
         { "name": "__default__", "default": true, "slot_props": "{}" },
-        { "name": "actions", "default": false, "slot_props": "{}" }
+        { "name": "actions", "default": false, "slot_props": "{}" },
+        {
+          "name": "subtitle",
+          "default": false,
+          "fallback": "{subtitle}",
+          "slot_props": "{}"
+        },
+        {
+          "name": "title",
+          "default": false,
+          "fallback": "{title}",
+          "slot_props": "{}"
+        }
       ],
       "events": [
         {
diff --git a/docs/src/pages/components/InlineNotification.svx b/docs/src/pages/components/InlineNotification.svx
index 80ff1f4a..88b75733 100644
--- a/docs/src/pages/components/InlineNotification.svx
+++ b/docs/src/pages/components/InlineNotification.svx
@@ -11,6 +11,13 @@ source: Notification/InlineNotification.svelte
 
 <InlineNotification title="Error:" subtitle="An internal server error occurred." />
 
+### Slottable title, subtitle
+
+<InlineNotification>
+  <strong slot="title">Error: </strong>
+  <strong slot="subtitle">An internal server error occurred.</strong>
+</InlineNotification>
+
 ### Hidden close button
 
 <InlineNotification hideCloseButton kind="warning" title="Scheduled maintenance:" subtitle="Maintenance will last 2-4 hours." />
diff --git a/src/Notification/InlineNotification.svelte b/src/Notification/InlineNotification.svelte
index 029e3f02..19cb0588 100644
--- a/src/Notification/InlineNotification.svelte
+++ b/src/Notification/InlineNotification.svelte
@@ -32,7 +32,6 @@
 
   import { createEventDispatcher, onMount } from "svelte";
   import NotificationIcon from "./NotificationIcon.svelte";
-  import NotificationTextDetails from "./NotificationTextDetails.svelte";
   import NotificationButton from "./NotificationButton.svelte";
 
   const dispatch = createEventDispatcher();
@@ -78,13 +77,15 @@
   >
     <div class:bx--inline-notification__details="{true}">
       <NotificationIcon notificationType="inline" kind="{kind}" />
-      <NotificationTextDetails
-        title="{title}"
-        subtitle="{subtitle}"
-        notificationType="inline"
-      >
+      <div class:bx--inline-notification__text-wrapper="{true}">
+        <p class:bx--inline-notification__title="{true}">
+          <slot name="title">{title}</slot>
+        </p>
+        <div class:bx--inline-notification__subtitle="{true}">
+          <slot name="subtitle">{subtitle}</slot>
+        </div>
         <slot />
-      </NotificationTextDetails>
+      </div>
     </div>
     <slot name="actions" />
     {#if !hideCloseButton}
diff --git a/types/Notification/InlineNotification.svelte.d.ts b/types/Notification/InlineNotification.svelte.d.ts
index dc810ee9..4e6ccd17 100644
--- a/types/Notification/InlineNotification.svelte.d.ts
+++ b/types/Notification/InlineNotification.svelte.d.ts
@@ -67,5 +67,5 @@ export default class InlineNotification extends SvelteComponentTyped<
     mouseenter: WindowEventMap["mouseenter"];
     mouseleave: WindowEventMap["mouseleave"];
   },
-  { default: {}; actions: {} }
+  { default: {}; actions: {}; subtitle: {}; title: {} }
 > {}