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

feat(notification)!: change InlineNotification props

Browse source 
Add new props: statusIconDescription and closeButtonDescription

BREAKING CHANGE: remove iconDescription prop
This commit is contained in:
Enrico Sacchetti 2022-12-16 13:48:33 -05:00
commit ee21257300
8 changed files with 74 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

31
COMPONENT_INDEX.md
View file

@ -1912,16 +1912,17 @@ None.
### Props
| 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 |
| 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 |
| 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 |
| subtitle | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the subtitle text |
| hideCloseButton | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the close button |
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>"Closes notification"</code> | Specify the ARIA label for the icon |
| 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 |
| 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 |
| 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 |
| subtitle | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the subtitle text |
| hideCloseButton | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the close button |
| statusIconDescription | No | <code>let</code> | No | <code>string</code> | <code>kind + " icon"</code> | Specify the ARIA label for the status icon |
| closeButtonDescription | No | <code>let</code> | No | <code>string</code> | <code>"Close notification"</code> | Specify the ARIA label for the close button |
### Slots
@ -2448,11 +2449,11 @@ None.
### Props
| 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 icon |
| notificationType | No | <code>let</code> | No | <code>"toast" &#124; "inline"</code> | <code>"toast"</code> | Set the type of notification |
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>"Closes notification"</code> | Specify the ARIA label for the icon |
| 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 icon |
| notificationType | No | <code>let</code> | No | <code>"toast" &#124; "inline"</code> | <code>"toast"</code> | Set the type of notification |
| iconDescription | Yes | <code>let</code> | No | -- | <code>undefined</code> | Specify the ARIA label for the icon |
### Slots

25
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
}
@ -8511,7 +8521,8 @@
{
"type": "dispatched",
"name": "change",
"detail": "{ page: number; }"
"detail": "{ page: number; }",
"description": "fires after every user interaction"
},
{
"type": "dispatched",

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

@ -27,6 +27,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." />

18
src/Notification/InlineNotification.svelte
View file

@ -27,8 +27,14 @@
/** Set to `true` to hide the close button */
export let hideCloseButton = false;
/** Specify the ARIA label for the icon */
export let iconDescription = "Closes notification";
/**
* Specify the ARIA label for the status icon
* @type {string}
* */
export let statusIconDescription = kind + " icon";
/** Specify the ARIA label for the close button */
export let closeButtonDescription = "Close notification";
import { createEventDispatcher, onMount } from "svelte";
import NotificationIcon from "./NotificationIcon.svelte";
@ -82,7 +88,11 @@
on:mouseleave
>
<div class:bx--inline-notification__details="{true}">
<NotificationIcon notificationType="inline" kind="{kind}" />
<NotificationIcon
notificationType="inline"
kind="{kind}"
iconDescription="{statusIconDescription}"
/>
<div class:bx--inline-notification__text-wrapper="{true}">
<p class:bx--inline-notification__title="{true}">
<slot name="title">{title}</slot>
@ -96,7 +106,7 @@
<slot name="actions" />
{#if !hideCloseButton}
<NotificationButton
iconDescription="{iconDescription}"
iconDescription="{closeButtonDescription}"
notificationType="inline"
on:click="{close}"
/>

2
src/Notification/NotificationIcon.svelte
View file

@ -12,7 +12,7 @@
export let notificationType = "toast";
/** Specify the ARIA label for the icon */
export let iconDescription = "Closes notification";
export let iconDescription;
import CheckmarkFilled from "../icons/CheckmarkFilled.svelte";
import ErrorFilled from "../icons/ErrorFilled.svelte";

12
types/Notification/InlineNotification.svelte.d.ts vendored
View file

@ -52,10 +52,16 @@ export interface InlineNotificationProps
hideCloseButton?: boolean;
/**
* Specify the ARIA label for the icon
* @default "Closes notification"
* Specify the ARIA label for the status icon
* @default kind + " icon"
*/
iconDescription?: string;
statusIconDescription?: string;
/**
* Specify the ARIA label for the close button
* @default "Close notification"
*/
closeButtonDescription?: string;
}
export default class InlineNotification extends SvelteComponentTyped<

4
types/Notification/NotificationIcon.svelte.d.ts vendored
View file

@ -22,9 +22,9 @@ export interface NotificationIconProps {
/**
* Specify the ARIA label for the icon
* @default "Closes notification"
* @default undefined
*/
iconDescription?: string;
iconDescription: undefined;
}
export default class NotificationIcon extends SvelteComponentTyped<

1
types/PaginationNav/PaginationNav.svelte.d.ts vendored
View file

@ -43,6 +43,7 @@ export interface PaginationNavProps
export default class PaginationNav extends SvelteComponentTyped<
PaginationNavProps,
{
/** fires after every user interaction */
change: CustomEvent<{ page: number }>;
["click:button--previous"]: CustomEvent<{ page: number }>;
["click:button--next"]: CustomEvent<{ page: number }>;