mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-18 03:26:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix(notification): remove notificationType prop

Browse source
This commit is contained in:
Eric Liu 2021-01-22 12:05:46 -08:00
commit ca1208f6cb
6 changed files with 25 additions and 77 deletions
Download patch file Download diff file Expand all files Collapse all files

44
COMPONENT_INDEX.md
View file

@ -1735,17 +1735,16 @@ None.
### Props ### Props
| Prop name | Kind | Reactive | Type | Default value | Description | | Prop name | Kind | Reactive | Type | Default value | Description |
| :--------------- | :--------------- | :------- | :------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ----------------------------------------------------------------------- | | :-------------- | :--------------- | :------- | :------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ----------------------------------------------------------------------- |
| notificationType | <code>let</code> | No | <code>"toast" &#124; "inline"</code> | <code>"inline"</code> | Set the type of notification | | kind | <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 | <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 | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the low contrast variant |
| lowContrast | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the low contrast variant | | timeout | <code>let</code> | No | <code>number</code> | <code>0</code> | Set the timeout duration (ms) to hide the notification after opening it |
| timeout | <code>let</code> | No | <code>number</code> | <code>0</code> | Set the timeout duration (ms) to hide the notification after opening it | | role | <code>let</code> | No | <code>string</code> | <code>"alert"</code> | Set the `role` attribute |
| role | <code>let</code> | No | <code>string</code> | <code>"alert"</code> | Set the `role` attribute | | title | <code>let</code> | No | <code>string</code> | <code>"Title"</code> | Specify the title text |
| title | <code>let</code> | No | <code>string</code> | <code>"Title"</code> | Specify the title text | | subtitle | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the subtitle text |
| subtitle | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the subtitle text | | hideCloseButton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the close button |
| hideCloseButton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the close button | | iconDescription | <code>let</code> | No | <code>string</code> | <code>"Closes notification"</code> | Specify the ARIA label for the icon |
| iconDescription | <code>let</code> | No | <code>string</code> | <code>"Closes notification"</code> | Specify the ARIA label for the icon |
### Slots ### Slots
@ -3873,18 +3872,17 @@ None.
### Props ### Props
| Prop name | Kind | Reactive | Type | Default value | Description | | Prop name | Kind | Reactive | Type | Default value | Description |
| :--------------- | :--------------- | :------- | :------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ----------------------------------------------------------------------- | | :-------------- | :--------------- | :------- | :------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ----------------------------------------------------------------------- |
| notificationType | <code>let</code> | No | <code>"toast" &#124; "inline"</code> | <code>"toast"</code> | Set the type of notification | | kind | <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 | <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 | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the low contrast variant |
| lowContrast | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the low contrast variant | | timeout | <code>let</code> | No | <code>number</code> | <code>0</code> | Set the timeout duration (ms) to hide the notification after opening it |
| timeout | <code>let</code> | No | <code>number</code> | <code>0</code> | Set the timeout duration (ms) to hide the notification after opening it | | role | <code>let</code> | No | <code>string</code> | <code>"alert"</code> | Set the `role` attribute |
| role | <code>let</code> | No | <code>string</code> | <code>"alert"</code> | Set the `role` attribute | | title | <code>let</code> | No | <code>string</code> | <code>"Title"</code> | Specify the title text |
| title | <code>let</code> | No | <code>string</code> | <code>"Title"</code> | Specify the title text | | subtitle | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the subtitle text |
| subtitle | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the subtitle text | | caption | <code>let</code> | No | <code>string</code> | <code>"Caption"</code> | Specify the caption text |
| caption | <code>let</code> | No | <code>string</code> | <code>"Caption"</code> | Specify the caption text | | iconDescription | <code>let</code> | No | <code>string</code> | <code>"Closes notification"</code> | Specify the ARIA label for the icon |
| iconDescription | <code>let</code> | No | <code>string</code> | <code>"Closes notification"</code> | Specify the ARIA label for the icon | | hideCloseButton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the close button |
| hideCloseButton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the close button |
### Slots ### Slots

20
docs/src/COMPONENT_API.json
View file

@ -5679,16 +5679,6 @@
"moduleName": "ToastNotification", "moduleName": "ToastNotification",
"filePath": "/src/Notification/ToastNotification.svelte", "filePath": "/src/Notification/ToastNotification.svelte",
"props": [ "props": [
{
"name": "notificationType",
"kind": "let",
"description": "Set the type of notification",
"type": "\"toast\" | \"inline\"",
"value": "\"toast\"",
"isFunction": false,
"constant": false,
"reactive": false
},
{ {
"name": "kind", "name": "kind",
"kind": "let", "kind": "let",
@ -5795,16 +5785,6 @@
"moduleName": "InlineNotification", "moduleName": "InlineNotification",
"filePath": "/src/Notification/InlineNotification.svelte", "filePath": "/src/Notification/InlineNotification.svelte",
"props": [ "props": [
{
"name": "notificationType",
"kind": "let",
"description": "Set the type of notification",
"type": "\"toast\" | \"inline\"",
"value": "\"inline\"",
"isFunction": false,
"constant": false,
"reactive": false
},
{ {
"name": "kind", "name": "kind",
"kind": "let", "kind": "let",

12
src/Notification/InlineNotification.svelte
View file

@ -1,10 +1,4 @@
<script> <script>
/**
* Set the type of notification
* @type {"toast" | "inline"}
*/
export let notificationType = "inline";
/** /**
* Specify the kind of notification * Specify the kind of notification
* @type {"error" | "info" | "info-square" | "success" | "warning" | "warning-alt"} * @type {"error" | "info" | "info-square" | "success" | "warning" | "warning-alt"}
@ -79,14 +73,14 @@
> >
<div class:bx--inline-notification__details="{true}"> <div class:bx--inline-notification__details="{true}">
<NotificationIcon <NotificationIcon
notificationType="{notificationType}" notificationType="inline"
kind="{kind}" kind="{kind}"
iconDescription="{iconDescription}" iconDescription="{iconDescription}"
/> />
<NotificationTextDetails <NotificationTextDetails
title="{title}" title="{title}"
subtitle="{subtitle}" subtitle="{subtitle}"
notificationType="{notificationType}" notificationType="inline"
> >
<slot /> <slot />
</NotificationTextDetails> </NotificationTextDetails>
@ -95,7 +89,7 @@
{#if !hideCloseButton} {#if !hideCloseButton}
<NotificationButton <NotificationButton
iconDescription="{iconDescription}" iconDescription="{iconDescription}"
notificationType="{notificationType}" notificationType="inline"
on:click="{close}" on:click="{close}"
/> />
{/if} {/if}

14
src/Notification/ToastNotification.svelte
View file

@ -1,10 +1,4 @@
<script> <script>
/**
* Set the type of notification
* @type {"toast" | "inline"}
*/
export let notificationType = "toast";
/** /**
* Specify the kind of notification * Specify the kind of notification
* @type {"error" | "info" | "info-square" | "success" | "warning" | "warning-alt"} * @type {"error" | "info" | "info-square" | "success" | "warning" | "warning-alt"}
@ -79,23 +73,17 @@
on:mouseenter on:mouseenter
on:mouseleave on:mouseleave
> >
<NotificationIcon <NotificationIcon kind="{kind}" iconDescription="{iconDescription}" />
notificationType="{notificationType}"
kind="{kind}"
iconDescription="{iconDescription}"
/>
<NotificationTextDetails <NotificationTextDetails
title="{title}" title="{title}"
subtitle="{subtitle}" subtitle="{subtitle}"
caption="{caption}" caption="{caption}"
notificationType="{notificationType}"
> >
<slot /> <slot />
</NotificationTextDetails> </NotificationTextDetails>
{#if !hideCloseButton} {#if !hideCloseButton}
<NotificationButton <NotificationButton
iconDescription="{iconDescription}" iconDescription="{iconDescription}"
notificationType="{notificationType}"
on:click="{close}" on:click="{close}"
/> />
{/if} {/if}

6
types/Notification/InlineNotification.d.ts vendored
View file

@ -1,12 +1,6 @@
/// <reference types="svelte" /> /// <reference types="svelte" />
export interface InlineNotificationProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> { export interface InlineNotificationProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/**
* Set the type of notification
* @default "inline"
*/
notificationType?: "toast" | "inline";
/** /**
* Specify the kind of notification * Specify the kind of notification
* @default "error" * @default "error"

6
types/Notification/ToastNotification.d.ts vendored
View file

@ -1,12 +1,6 @@
/// <reference types="svelte" /> /// <reference types="svelte" />
export interface ToastNotificationProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> { export interface ToastNotificationProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/**
* Set the type of notification
* @default "toast"
*/
notificationType?: "toast" | "inline";
/** /**
* Specify the kind of notification * Specify the kind of notification
* @default "error" * @default "error"