feat(inline-notification): make title/subtitle slottable

Closes #883

COMPONENT_INDEX.md

@@ -1996,10 +1996,12 @@ None.
 
 ### Slots
 
-| Slot name | Default | Props | Fallback |
+| Slot name | Default | Props | Fallback                |
-| :-------- | :------ | :---- | :------- |
+| :-------- | :------ | :---- | :---------------------- |
-| --        | Yes     | --    | --       |
+| --        | Yes     | --    | --                      |
-| actions   | No      | --    | --       |
+| actions   | No      | --    | --                      |
+| subtitle  | No      | --    | <code>{subtitle}</code> |
+| title     | No      | --    | <code>{title}</code>    |
 
 ### Events
 

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": [
         {

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." />

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
+      <div class:bx--inline-notification__text-wrapper="{true}">
-        title="{title}"
+        <p class:bx--inline-notification__title="{true}">
-        subtitle="{subtitle}"
+          <slot name="title">{title}</slot>
-        notificationType="inline"
+        </p>
-      >
+        <div class:bx--inline-notification__subtitle="{true}">
+          <slot name="subtitle">{subtitle}</slot>
+        </div>
         <slot />
-      </NotificationTextDetails>
+      </div>
     </div>
     <slot name="actions" />
     {#if !hideCloseButton}

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: {} }
 > {}