From 8fea168ffdac0ebc25cf453271e480d5bacbf1ed Mon Sep 17 00:00:00 2001 From: metonym Date: Sun, 14 Aug 2022 14:56:02 -0700 Subject: [PATCH] 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 | 23 ++++++++++--------- docs/src/COMPONENT_API.json | 12 ++++++++++ .../pages/components/ToastNotification.svx | 6 +++++ src/Notification/ToastNotification.svelte | 7 ++++++ tests/ToastNotification.test.svelte | 2 +- .../ToastNotification.svelte.d.ts | 7 ++++++ 6 files changed, 45 insertions(+), 12 deletions(-) diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 48664be3..1335999a 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -4306,17 +4306,18 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100"; ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :-------------- | :------- | :--------------- | :------- | -------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ----------------------------------------------------------------------- | -| kind | No | let | No | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | "error" | Specify the kind of notification | -| lowContrast | No | let | No | boolean | false | Set to `true` to use the low contrast variant | -| timeout | No | let | No | number | 0 | Set the timeout duration (ms) to hide the notification after opening it | -| role | No | let | No | string | "alert" | Set the `role` attribute | -| title | No | let | No | string | "" | Specify the title text | -| subtitle | No | let | No | string | "" | Specify the subtitle text | -| caption | No | let | No | string | "" | Specify the caption text | -| iconDescription | No | let | No | string | "Closes notification" | Specify the ARIA label for the icon | -| hideCloseButton | No | let | No | boolean | false | Set to `true` to hide the close button | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------------- | :------- | :--------------- | :------- | -------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ----------------------------------------------------------------------------------------- | +| kind | No | let | No | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | "error" | Specify the kind of notification | +| lowContrast | No | let | No | boolean | false | Set to `true` to use the low contrast variant | +| timeout | No | let | No | number | 0 | Set the timeout duration (ms) to hide the notification after opening it | +| role | No | let | No | string | "alert" | Set the `role` attribute | +| title | No | let | No | string | "" | Specify the title text | +| subtitle | No | let | No | string | "" | Specify the subtitle text | +| caption | No | let | No | string | "" | Specify the caption text | +| iconDescription | No | let | No | string | "Closes notification" | Specify the ARIA label for the icon | +| hideCloseButton | No | let | No | boolean | false | Set to `true` to hide the close button | +| fullWidth | No | let | No | boolean | false | Set to `true` for the notification to span
the full width of its containing element. | ### Slots diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 80b8c0f5..13b1ae4e 100644 --- a/docs/src/COMPONENT_API.json +++ b/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": [], diff --git a/docs/src/pages/components/ToastNotification.svx b/docs/src/pages/components/ToastNotification.svx index a430fb8e..1eb20fa4 100644 --- a/docs/src/pages/components/ToastNotification.svx +++ b/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. + + + ### Slottable title, subtitle, caption diff --git a/src/Notification/ToastNotification.svelte b/src/Notification/ToastNotification.svelte index 1d00ba4e..0048fd47 100644 --- a/src/Notification/ToastNotification.svelte +++ b/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 diff --git a/tests/ToastNotification.test.svelte b/tests/ToastNotification.test.svelte index 17a84883..6c947582 100644 --- a/tests/ToastNotification.test.svelte +++ b/tests/ToastNotification.test.svelte @@ -2,7 +2,7 @@ import { ToastNotification } from "../types"; - +