feat(toast-notification): add fullWidth prop (#1444)

* feat(toast-notification): add `fullWidth` prop

* Run "yarn build:docs"

* test(toast-notification): assert `fullWidth` prop

* docs(toast-notification): add "Full width" example

COMPONENT_INDEX.md

@@ -4307,7 +4307,7 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
 ### Props
 
 | Prop name       | Required | Kind             | Reactive | Type                                                                                                           | Default value                      | Description                                                                               |
-| :-------------- | :------- | :--------------- | :------- | -------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ----------------------------------------------------------------------- |
+| :-------------- | :------- | :--------------- | :------- | -------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ----------------------------------------------------------------------------------------- |
 | kind            | No       | <code>let</code> | No       | <code>"error" &#124; "info" &#124; "info-square" &#124; "success" &#124; "warning" &#124; "warning-alt"</code> | <code>"error"</code>               | Specify the kind of notification                                                          |
 | lowContrast     | No       | <code>let</code> | No       | <code>boolean</code>                                                                                           | <code>false</code>                 | Set to `true` to use the low contrast variant                                             |
 | timeout         | No       | <code>let</code> | No       | <code>number</code>                                                                                            | <code>0</code>                     | Set the timeout duration (ms) to hide the notification after opening it                   |
@@ -4317,6 +4317,7 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
 | caption         | No       | <code>let</code> | No       | <code>string</code>                                                                                            | <code>""</code>                    | Specify the caption text                                                                  |
 | iconDescription | No       | <code>let</code> | No       | <code>string</code>                                                                                            | <code>"Closes notification"</code> | Specify the ARIA label for the icon                                                       |
 | hideCloseButton | No       | <code>let</code> | No       | <code>boolean</code>                                                                                           | <code>false</code>                 | Set to `true` to hide the close button                                                    |
+| fullWidth       | No       | <code>let</code> | No       | <code>boolean</code>                                                                                           | <code>false</code>                 | Set to `true` for the notification to span<br />the full width of its containing element. |
 
 ### Slots
 

docs/src/COMPONENT_API.json

@@ -13386,6 +13386,18 @@
           "isRequired": false,
           "constant": false,
           "reactive": false
+        },
+        {
+          "name": "fullWidth",
+          "kind": "let",
+          "description": "Set to `true` for the notification to span\nthe full width of its containing element.",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "isRequired": false,
+          "constant": false,
+          "reactive": false
         }
       ],
       "moduleExports": [],

docs/src/pages/components/ToastNotification.svx

@@ -26,6 +26,12 @@ source: Notification/ToastNotification.svelte
   // custom close logic (e.g., transitions)
 }} />
 
+### Full width
+
+Set `fullWidth` to `true` for the notification to span the full width of its containing element.
+
+<ToastNotification fullWidth title="Error" subtitle="An internal server error occurred." caption="{new Date().toLocaleString()}" />
+
 ### Slottable title, subtitle, caption
 
 <ToastNotification>

src/Notification/ToastNotification.svelte

@@ -33,6 +33,12 @@
   /** Set to `true` to hide the close button */
   export let hideCloseButton = false;
 
+  /**
+   * Set to `true` for the notification to span
+   * the full width of its containing element.
+   */
+  export let fullWidth = false;
+
   import { createEventDispatcher, onMount } from "svelte";
   import NotificationButton from "./NotificationButton.svelte";
   import NotificationIcon from "./NotificationIcon.svelte";
@@ -78,6 +84,7 @@
     class:bx--toast-notification--warning="{kind === 'warning'}"
     class:bx--toast-notification--warning-alt="{kind === 'warning-alt'}"
     {...$$restProps}
+    style="{fullWidth && 'width: 100%;'}{$$restProps.style}"
     on:click
     on:mouseover
     on:mouseenter

tests/ToastNotification.test.svelte

@@ -2,7 +2,7 @@
   import { ToastNotification } from "../types";
 </script>
 
-<ToastNotification />
+<ToastNotification fullWidth />
 
 <ToastNotification
   hideCloseButton

types/Notification/ToastNotification.svelte.d.ts

@@ -62,6 +62,13 @@ export interface ToastNotificationProps
    * @default false
    */
   hideCloseButton?: boolean;
+
+  /**
+   * Set to `true` for the notification to span
+   * the full width of its containing element.
+   * @default false
+   */
+  fullWidth?: boolean;
 }
 
 export default class ToastNotification extends SvelteComponentTyped<