mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-17 03:01:25 +00:00
feat(notification)!: replace iconDescription prop with statusIconDescription, closeButtonDescription (#1591)
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
GitHub
parent
e258db0cae
commit
50066966da
10 changed files with 144 additions and 53 deletions
|
|
@ -1912,16 +1912,17 @@ None.
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------------- | :------- | :--------------- | :------- | -------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ----------------------------------------------------------------------- |
|
||||
| kind | No | <code>let</code> | No | <code>"error" | "info" | "info-square" | "success" | "warning" | "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" | "info" | "info-square" | "success" | "warning" | "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" | "info" | "info-square" | "success" | "warning" | "warning-alt"</code> | <code>"error"</code> | Specify the kind of notification icon |
|
||||
| notificationType | No | <code>let</code> | No | <code>"toast" | "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" | "info" | "info-square" | "success" | "warning" | "warning-alt"</code> | <code>"error"</code> | Specify the kind of notification icon |
|
||||
| notificationType | No | <code>let</code> | No | <code>"toast" | "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
|
||||
|
||||
|
|
@ -4310,18 +4311,19 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------------- | :------- | :--------------- | :------- | -------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ----------------------------------------------------------------------------------------- |
|
||||
| kind | No | <code>let</code> | No | <code>"error" | "info" | "info-square" | "success" | "warning" | "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 |
|
||||
| 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 |
|
||||
| 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. |
|
||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||
| :--------------------- | :------- | :--------------- | :------- | -------------------------------------------------------------------------------------------------------------- | --------------------------------- | ----------------------------------------------------------------------------------------- |
|
||||
| kind | No | <code>let</code> | No | <code>"error" | "info" | "info-square" | "success" | "warning" | "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 |
|
||||
| caption | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the caption text |
|
||||
| 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 |
|
||||
| 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
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue