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

feat(notification)!: replace iconDescription prop with statusIconDescription, closeButtonDescription (#1591)

Browse source 
Fixes #672, fixes #1563

* breaking: remove `iconDescription` prop from `InlineNotification`, `ToastNotification`

* breaking: require `iconDescription` prop in `NotificationIcon`

* feat: add new `statusIconDescription` and `closeButtonDescription` to `InlineNotification`, `ToastNotification`
This commit is contained in:
Enrico Sacchetti 2022-12-18 18:28:23 -05:00 • committed by GitHub
commit 50066966da
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 144 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

40
docs/src/COMPONENT_API.json
View file

@ -5627,11 +5627,23 @@
"reactive": false
},
{
"name": "iconDescription",
"name": "statusIconDescription",
"kind": "let",
"description": "Specify the ARIA label for the icon",
"description": "Specify the ARIA label for the status icon",
"type": "string",
"value": "\"Closes notification\"",
"value": "kind + \" icon\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
},
{
"name": "closeButtonDescription",
"kind": "let",
"description": "Specify the ARIA label for the close button",
"type": "string",
"value": "\"Close notification\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@ -7486,11 +7498,9 @@
"name": "iconDescription",
"kind": "let",
"description": "Specify the ARIA label for the icon",
"type": "string",
"value": "\"Closes notification\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"isRequired": true,
"constant": false,
"reactive": false
}
@ -13391,11 +13401,23 @@
"reactive": false
},
{
"name": "iconDescription",
"name": "statusIconDescription",
"kind": "let",
"description": "Specify the ARIA label for the icon",
"description": "Specify the ARIA label for the status icon",
"type": "string",
"value": "\"Closes notification\"",
"value": "kind + \" icon\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
},
{
"name": "closeButtonDescription",
"kind": "let",
"description": "Specify the ARIA label for the close button",
"type": "string",
"value": "\"Close notification\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,

19
docs/src/pages/components/InlineNotification.svx
View file

@ -7,6 +7,12 @@ components: ["InlineNotification", "NotificationActionButton"]
import Preview from "../../components/Preview.svelte";
</script>
Notification that appears inline.
See [detailed
usage](https://carbondesignsystem.com/components/notification/usage).
See also: [ToastNotification](ToastNotification)
## Default (error)
<InlineNotification title="Error:" subtitle="An internal server error occurred." />
@ -27,6 +33,19 @@ components: ["InlineNotification", "NotificationActionButton"]
<strong slot="subtitle">An internal server error occurred.</strong>
</InlineNotification>
## Accessible icon descriptions
The status icon and close button icon descriptions appear on cursor hover and are read
by assistive technology. Default descriptions are provided in English and can be
overridden via `statusIconDescription` and `closeButtonDescription`.
<InlineNotification
title="错误"
subtitle="发生内部服务器错误"
statusIconDescription="错误图标"
closeButtonDescription="关闭通知"
/>
## Hidden close button
<InlineNotification hideCloseButton kind="warning" title="Scheduled maintenance:" subtitle="Maintenance will last 2-4 hours." />

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

@ -3,6 +3,13 @@
import Preview from "../../components/Preview.svelte";
</script>
Toasts are non-modal, time-based window elements used to display short messages;
they usually appear at the top of the screen and disappear after a few seconds.
See [detailed
usage](https://carbondesignsystem.com/components/notification/usage).
See also: [InlineNotification](InlineNotification)
## Default (error)
<ToastNotification title="Error" subtitle="An internal server error occurred." caption="{new Date().toLocaleString()}" />
@ -30,6 +37,19 @@ Set `fullWidth` to `true` for the notification to span the full width of its con
<strong slot="caption">{new Date().toLocaleString()}</strong>
</ToastNotification>
## Accessible icon descriptions
The status icon and close button icon descriptions appear on cursor hover and are read
by assistive technology. Default descriptions are provided in English and can be
overridden via `statusIconDescription` and `closeButtonDescription`.
<ToastNotification
title="错误"
subtitle="发生内部服务器错误"
statusIconDescription="错误图标"
closeButtonDescription="关闭通知"
/>
## Hidden close button
<ToastNotification hideCloseButton kind="warning" title="Scheduled maintenance" subtitle="Maintenance will last 2-4 hours." caption="{new Date().toLocaleString()}" />