feat(notification)!: change InlineNotification props

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

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