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
This commit is contained in:
metonym 2022-08-14 14:56:02 -07:00 committed by GitHub
commit 8fea168ffd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 45 additions and 12 deletions

View file

@ -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