mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 02:11:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source 
* 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
Download patch file Download diff file Expand all files Collapse all files

23
COMPONENT_INDEX.md
View file

@ -4306,17 +4306,18 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
### Props ### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | 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 | | 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 | | 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 | | timeout | No | <code>let</code> | No | <code>number</code> | <code>0</code> | Set the timeout duration (ms) to hide the notification after opening it |
| role | No | <code>let</code> | No | <code>string</code> | <code>"alert"</code> | Set the `role` attribute | | role | No | <code>let</code> | No | <code>string</code> | <code>"alert"</code> | Set the `role` attribute |
| title | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title text | | title | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title text |
| subtitle | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the subtitle text | | subtitle | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the subtitle text |
| caption | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the caption text | | 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 | | 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 | | 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 ### Slots

12
docs/src/COMPONENT_API.json
View file

@ -13386,6 +13386,18 @@
"isRequired": false, "isRequired": false,
"constant": false, "constant": false,
"reactive": 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": [], "moduleExports": [],

6
docs/src/pages/components/ToastNotification.svx
View file

@ -26,6 +26,12 @@ source: Notification/ToastNotification.svelte
// custom close logic (e.g., transitions) // 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 ### Slottable title, subtitle, caption
<ToastNotification> <ToastNotification>

7
src/Notification/ToastNotification.svelte
View file

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

2
tests/ToastNotification.test.svelte
View file

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

7
types/Notification/ToastNotification.svelte.d.ts vendored
View file

@ -62,6 +62,13 @@ export interface ToastNotificationProps
* @default false * @default false
*/ */
hideCloseButton?: boolean; 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< export default class ToastNotification extends SvelteComponentTyped<