From a451e6db9b31ec65387bded06e360c49a7df59c3 Mon Sep 17 00:00:00 2001 From: willmartindev Date: Wed, 8 Sep 2021 10:19:11 -0400 Subject: [PATCH 1/5] feat(alert, toast): role can now be customized --- core/api.txt | 2 ++ core/src/components.d.ts | 16 ++++++++++++++++ core/src/components/alert/alert.tsx | 11 ++++++++++- core/src/components/alert/readme.md | 1 + core/src/components/toast/readme.md | 1 + core/src/components/toast/toast.tsx | 21 ++++++++++++++++++--- 6 files changed, 48 insertions(+), 4 deletions(-) diff --git a/core/api.txt b/core/api.txt index 09817a5b169..a62b970291c 100644 --- a/core/api.txt +++ b/core/api.txt @@ -55,6 +55,7 @@ ion-alert,prop,keyboardClose,boolean,true,false,false ion-alert,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false ion-alert,prop,message,IonicSafeString | string | undefined,undefined,false,false ion-alert,prop,mode,"ios" | "md",undefined,false,false +ion-alert,prop,role,string | undefined,undefined,false,false ion-alert,prop,subHeader,string | undefined,undefined,false,false ion-alert,prop,translucent,boolean,false,false,false ion-alert,method,dismiss,dismiss(data?: any, role?: string | undefined) => Promise @@ -1273,6 +1274,7 @@ ion-toast,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefin ion-toast,prop,message,IonicSafeString | string | undefined,undefined,false,false ion-toast,prop,mode,"ios" | "md",undefined,false,false ion-toast,prop,position,"bottom" | "middle" | "top",'bottom',false,false +ion-toast,prop,role,string | undefined,undefined,false,false ion-toast,prop,translucent,boolean,false,false,false ion-toast,method,dismiss,dismiss(data?: any, role?: string | undefined) => Promise ion-toast,method,onDidDismiss,onDidDismiss() => Promise> diff --git a/core/src/components.d.ts b/core/src/components.d.ts index f9f06e39f4c..0cad83d1bf0 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -139,6 +139,10 @@ export namespace Components { * Present the alert overlay after it has been created. */ "present": () => Promise; + /** + * The ARIA role of the alert. When unset, the role defaults to 'alertdialog' if the alert contains inputs and 'alert' if it does not. + */ + "role"?: string; /** * The subtitle in the heading of the alert. Displayed under the title. */ @@ -2598,6 +2602,10 @@ export namespace Components { * Present the toast overlay after it has been created. */ "present": () => Promise; + /** + * The ARIA role of the toast. When unset, the role defaults to 'dialog' if the toast contains buttons and 'status' if it does not. + */ + "role"?: string; /** * If `true`, the toast will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). */ @@ -3446,6 +3454,10 @@ declare namespace LocalJSX { */ "onIonAlertWillPresent"?: (event: CustomEvent) => void; "overlayIndex": number; + /** + * The ARIA role of the alert. When unset, the role defaults to 'alertdialog' if the alert contains inputs and 'alert' if it does not. + */ + "role"?: string; /** * The subtitle in the heading of the alert. Displayed under the title. */ @@ -5931,6 +5943,10 @@ declare namespace LocalJSX { * The position of the toast on the screen. */ "position"?: 'top' | 'bottom' | 'middle'; + /** + * The ARIA role of the toast. When unset, the role defaults to 'dialog' if the toast contains buttons and 'status' if it does not. + */ + "role"?: string; /** * If `true`, the toast will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). */ diff --git a/core/src/components/alert/alert.tsx b/core/src/components/alert/alert.tsx index 3aac3a00699..f9729725608 100644 --- a/core/src/components/alert/alert.tsx +++ b/core/src/components/alert/alert.tsx @@ -110,6 +110,12 @@ export class Alert implements ComponentInterface, OverlayInterface { */ @Prop() animated = true; + /** + * The ARIA role of the alert. When unset, the role defaults + * to 'alertdialog' if the alert contains inputs and 'alert' if it does not. + */ + @Prop() role?: string; + /** * Emitted after the alert has presented. */ @@ -555,10 +561,13 @@ export class Alert implements ComponentInterface, OverlayInterface { const hdrId = `alert-${overlayIndex}-hdr`; const subHdrId = `alert-${overlayIndex}-sub-hdr`; const msgId = `alert-${overlayIndex}-msg`; + const role = this.role || (this.inputs.length > 0 || this.buttons.length > 0 ? 'alertdialog' : 'alert'); return ( Animation) \| undefined` | `undefined` | | `message` | `message` | The main message to be displayed in the alert. `message` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `` would become `<Ionic>` For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) | `IonicSafeString \| string \| undefined` | `undefined` | | `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | +| `role` | `role` | The ARIA role of the alert. When unset, the role defaults to 'alertdialog' if the alert contains inputs and 'alert' if it does not. | `string \| undefined` | `undefined` | | `subHeader` | `sub-header` | The subtitle in the heading of the alert. Displayed under the title. | `string \| undefined` | `undefined` | | `translucent` | `translucent` | If `true`, the alert will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | `boolean` | `false` | diff --git a/core/src/components/toast/readme.md b/core/src/components/toast/readme.md index ea6324d5b50..c60e091a531 100644 --- a/core/src/components/toast/readme.md +++ b/core/src/components/toast/readme.md @@ -410,6 +410,7 @@ export default defineComponent({ | `message` | `message` | Message to be shown in the toast. | `IonicSafeString \| string \| undefined` | `undefined` | | `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | | `position` | `position` | The position of the toast on the screen. | `"bottom" \| "middle" \| "top"` | `'bottom'` | +| `role` | `role` | The ARIA role of the toast. When unset, the role defaults to 'dialog' if the toast contains buttons and 'status' if it does not. | `string \| undefined` | `undefined` | | `translucent` | `translucent` | If `true`, the toast will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | `boolean` | `false` | diff --git a/core/src/components/toast/toast.tsx b/core/src/components/toast/toast.tsx index 58a23e34167..cf6fb3b265a 100644 --- a/core/src/components/toast/toast.tsx +++ b/core/src/components/toast/toast.tsx @@ -106,6 +106,12 @@ export class Toast implements ComponentInterface, OverlayInterface { */ @Prop() animated = true; + /** + * The ARIA role of the toast. When unset, the role defaults + * to 'dialog' if the toast contains buttons and 'status' if it does not. + */ + @Prop() role?: string; + /** * Emitted after the toast has presented. */ @@ -263,6 +269,9 @@ export class Toast implements ComponentInterface, OverlayInterface { 'toast-wrapper': true, [`toast-${this.position}`]: true }; + const hdrId = `toast-${this.overlayIndex}-hdr`; + const msgId = `toast-${this.overlayIndex}-msg`; + const role = this.role || (allButtons.length > 0 ? 'dialog' : 'status'); return (
-
+
{this.renderButtons(startButtons, 'start')}
{this.header !== undefined && -
{this.header}
+
{this.header}
} {this.message !== undefined && -
+
}
From b0585556026ddc368818363069bd09598994caff Mon Sep 17 00:00:00 2001 From: willmartindev Date: Mon, 13 Sep 2021 04:13:25 -0400 Subject: [PATCH 2/5] feat(alert, toast): add additionalAttributes prop --- core/api.txt | 4 +-- core/src/components.d.ts | 34 ++++++++++--------- core/src/components/alert/alert-interface.ts | 3 ++ core/src/components/alert/alert.tsx | 11 +++--- core/src/components/alert/readme.md | 32 ++++++++--------- core/src/components/toast/readme.md | 32 ++++++++--------- .../components/toast/test/basic/index.html | 2 +- core/src/components/toast/toast-interface.ts | 5 +++ core/src/components/toast/toast.tsx | 15 ++++---- packages/vue/src/components/Overlays.ts | 4 +-- 10 files changed, 77 insertions(+), 65 deletions(-) diff --git a/core/api.txt b/core/api.txt index a62b970291c..a8704291c2c 100644 --- a/core/api.txt +++ b/core/api.txt @@ -44,6 +44,7 @@ ion-action-sheet,css-prop,--min-width ion-action-sheet,css-prop,--width ion-alert,scoped +ion-alert,prop,additionalAttributes,AlertAttributes | undefined,undefined,false,false ion-alert,prop,animated,boolean,true,false,false ion-alert,prop,backdropDismiss,boolean,true,false,false ion-alert,prop,buttons,(string | AlertButton)[],[],false,false @@ -55,7 +56,6 @@ ion-alert,prop,keyboardClose,boolean,true,false,false ion-alert,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false ion-alert,prop,message,IonicSafeString | string | undefined,undefined,false,false ion-alert,prop,mode,"ios" | "md",undefined,false,false -ion-alert,prop,role,string | undefined,undefined,false,false ion-alert,prop,subHeader,string | undefined,undefined,false,false ion-alert,prop,translucent,boolean,false,false,false ion-alert,method,dismiss,dismiss(data?: any, role?: string | undefined) => Promise @@ -1262,6 +1262,7 @@ ion-title,prop,size,"large" | "small" | undefined,undefined,false,false ion-title,css-prop,--color ion-toast,shadow +ion-toast,prop,additionalAttributes,ToastAttributes | undefined,undefined,false,false ion-toast,prop,animated,boolean,true,false,false ion-toast,prop,buttons,(string | ToastButton)[] | undefined,undefined,false,false ion-toast,prop,color,string | undefined,undefined,false,true @@ -1274,7 +1275,6 @@ ion-toast,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefin ion-toast,prop,message,IonicSafeString | string | undefined,undefined,false,false ion-toast,prop,mode,"ios" | "md",undefined,false,false ion-toast,prop,position,"bottom" | "middle" | "top",'bottom',false,false -ion-toast,prop,role,string | undefined,undefined,false,false ion-toast,prop,translucent,boolean,false,false,false ion-toast,method,dismiss,dismiss(data?: any, role?: string | undefined) => Promise ion-toast,method,onDidDismiss,onDidDismiss() => Promise> diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 0cad83d1bf0..4dc1470c1e5 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -7,8 +7,10 @@ import { HTMLStencilElement, JSXBase } from "@stencil/core/internal"; import { ActionSheetButton, AlertButton, AlertInput, AnimationBuilder, AutocompleteTypes, CheckboxChangeEventDetail, Color, ComponentProps, ComponentRef, DatetimeChangeEventDetail, DatetimeOptions, DomRenderFn, FooterHeightFn, FrameworkDelegate, HeaderFn, HeaderHeightFn, InputChangeEventDetail, ItemHeightFn, ItemRenderFn, ItemReorderEventDetail, MenuChangeEventDetail, NavComponent, NavComponentWithProps, NavOptions, OverlayEventDetail, PickerButton, PickerColumn, RadioGroupChangeEventDetail, RangeChangeEventDetail, RangeValue, RefresherEventDetail, RouteID, RouterDirection, RouterEventDetail, RouterOutletOptions, RouteWrite, ScrollBaseDetail, ScrollDetail, SearchbarChangeEventDetail, SegmentButtonLayout, SegmentChangeEventDetail, SelectChangeEventDetail, SelectInterface, SelectPopoverOption, Side, SpinnerTypes, StyleEventDetail, SwipeGestureHandler, TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout, TextareaChangeEventDetail, TextFieldTypes, ToastButton, ToggleChangeEventDetail, TransitionDoneFn, TransitionInstruction, ViewController } from "./interface"; import { IonicSafeString } from "./utils/sanitization"; +import { AlertAttributes } from "./components/alert/alert-interface"; import { NavigationHookCallback } from "./components/route/route-interface"; import { SelectCompareFn } from "./components/select/select-interface"; +import { ToastAttributes } from "./components/toast/toast-interface"; export namespace Components { interface IonActionSheet { /** @@ -76,6 +78,10 @@ export namespace Components { "translucent": boolean; } interface IonAlert { + /** + * Additional attributes to pass to the alert. + */ + "additionalAttributes"?: AlertAttributes; /** * If `true`, the alert will animate. */ @@ -139,10 +145,6 @@ export namespace Components { * Present the alert overlay after it has been created. */ "present": () => Promise; - /** - * The ARIA role of the alert. When unset, the role defaults to 'alertdialog' if the alert contains inputs and 'alert' if it does not. - */ - "role"?: string; /** * The subtitle in the heading of the alert. Displayed under the title. */ @@ -2535,6 +2537,10 @@ export namespace Components { "size"?: 'large' | 'small'; } interface IonToast { + /** + * Additional attributes to pass to the toast. + */ + "additionalAttributes"?: ToastAttributes; /** * If `true`, the toast will animate. */ @@ -2602,10 +2608,6 @@ export namespace Components { * Present the toast overlay after it has been created. */ "present": () => Promise; - /** - * The ARIA role of the toast. When unset, the role defaults to 'dialog' if the toast contains buttons and 'status' if it does not. - */ - "role"?: string; /** * If `true`, the toast will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). */ @@ -3393,6 +3395,10 @@ declare namespace LocalJSX { "translucent"?: boolean; } interface IonAlert { + /** + * Additional attributes to pass to the alert. + */ + "additionalAttributes"?: AlertAttributes; /** * If `true`, the alert will animate. */ @@ -3454,10 +3460,6 @@ declare namespace LocalJSX { */ "onIonAlertWillPresent"?: (event: CustomEvent) => void; "overlayIndex": number; - /** - * The ARIA role of the alert. When unset, the role defaults to 'alertdialog' if the alert contains inputs and 'alert' if it does not. - */ - "role"?: string; /** * The subtitle in the heading of the alert. Displayed under the title. */ @@ -5878,6 +5880,10 @@ declare namespace LocalJSX { "size"?: 'large' | 'small'; } interface IonToast { + /** + * Additional attributes to pass to the toast. + */ + "additionalAttributes"?: ToastAttributes; /** * If `true`, the toast will animate. */ @@ -5943,10 +5949,6 @@ declare namespace LocalJSX { * The position of the toast on the screen. */ "position"?: 'top' | 'bottom' | 'middle'; - /** - * The ARIA role of the toast. When unset, the role defaults to 'dialog' if the toast contains buttons and 'status' if it does not. - */ - "role"?: string; /** * If `true`, the toast will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). */ diff --git a/core/src/components/alert/alert-interface.ts b/core/src/components/alert/alert-interface.ts index 370943d0a7b..e965c22b764 100644 --- a/core/src/components/alert/alert-interface.ts +++ b/core/src/components/alert/alert-interface.ts @@ -13,6 +13,7 @@ export interface AlertOptions { backdropDismiss?: boolean; translucent?: boolean; animated?: boolean; + additionalAttributes?: AlertAttributes; mode?: Mode; keyboardClose?: boolean; @@ -22,6 +23,8 @@ export interface AlertOptions { leaveAnimation?: AnimationBuilder; } +export interface AlertAttributes extends JSXBase.HTMLAttributes {} + export interface AlertInput { type?: TextFieldTypes | 'checkbox' | 'radio' | 'textarea'; name?: string; diff --git a/core/src/components/alert/alert.tsx b/core/src/components/alert/alert.tsx index f9729725608..32040b2d3d0 100644 --- a/core/src/components/alert/alert.tsx +++ b/core/src/components/alert/alert.tsx @@ -8,6 +8,7 @@ import { BACKDROP, dismiss, eventMethod, isCancel, prepareOverlay, present, safe import { IonicSafeString, sanitizeDOMString } from '../../utils/sanitization'; import { getClassMap } from '../../utils/theme'; +import { AlertAttributes } from './alert-interface'; import { iosEnterAnimation } from './animations/ios.enter'; import { iosLeaveAnimation } from './animations/ios.leave'; import { mdEnterAnimation } from './animations/md.enter'; @@ -111,10 +112,9 @@ export class Alert implements ComponentInterface, OverlayInterface { @Prop() animated = true; /** - * The ARIA role of the alert. When unset, the role defaults - * to 'alertdialog' if the alert contains inputs and 'alert' if it does not. + * Additional attributes to pass to the alert. */ - @Prop() role?: string; + @Prop() additionalAttributes?: AlertAttributes; /** * Emitted after the alert has presented. @@ -556,12 +556,12 @@ export class Alert implements ComponentInterface, OverlayInterface { } render() { - const { overlayIndex, header, subHeader } = this; + const { overlayIndex, header, subHeader, additionalAttributes } = this; const mode = getIonMode(this); const hdrId = `alert-${overlayIndex}-hdr`; const subHdrId = `alert-${overlayIndex}-sub-hdr`; const msgId = `alert-${overlayIndex}-msg`; - const role = this.role || (this.inputs.length > 0 || this.buttons.length > 0 ? 'alertdialog' : 'alert'); + const role = additionalAttributes?.role || (this.inputs.length > 0 || this.buttons.length > 0 ? 'alertdialog' : 'alert'); return ( diff --git a/core/src/components/alert/readme.md b/core/src/components/alert/readme.md index 20f00eaeaf1..d6f8390b52c 100644 --- a/core/src/components/alert/readme.md +++ b/core/src/components/alert/readme.md @@ -1760,22 +1760,22 @@ export default defineComponent({ ## Properties -| Property | Attribute | Description | Type | Default | -| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ----------- | -| `animated` | `animated` | If `true`, the alert will animate. | `boolean` | `true` | -| `backdropDismiss` | `backdrop-dismiss` | If `true`, the alert will be dismissed when the backdrop is clicked. | `boolean` | `true` | -| `buttons` | -- | Array of buttons to be added to the alert. | `(string \| AlertButton)[]` | `[]` | -| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` | -| `enterAnimation` | -- | Animation to use when the alert is presented. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | -| `header` | `header` | The main title in the heading of the alert. | `string \| undefined` | `undefined` | -| `inputs` | -- | Array of input to show in the alert. | `AlertInput[]` | `[]` | -| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` | -| `leaveAnimation` | -- | Animation to use when the alert is dismissed. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | -| `message` | `message` | The main message to be displayed in the alert. `message` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `` would become `<Ionic>` For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) | `IonicSafeString \| string \| undefined` | `undefined` | -| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | -| `role` | `role` | The ARIA role of the alert. When unset, the role defaults to 'alertdialog' if the alert contains inputs and 'alert' if it does not. | `string \| undefined` | `undefined` | -| `subHeader` | `sub-header` | The subtitle in the heading of the alert. Displayed under the title. | `string \| undefined` | `undefined` | -| `translucent` | `translucent` | If `true`, the alert will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | `boolean` | `false` | +| Property | Attribute | Description | Type | Default | +| ---------------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ----------- | +| `additionalAttributes` | -- | Additional attributes to pass to the alert. | `AlertAttributes \| undefined` | `undefined` | +| `animated` | `animated` | If `true`, the alert will animate. | `boolean` | `true` | +| `backdropDismiss` | `backdrop-dismiss` | If `true`, the alert will be dismissed when the backdrop is clicked. | `boolean` | `true` | +| `buttons` | -- | Array of buttons to be added to the alert. | `(string \| AlertButton)[]` | `[]` | +| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` | +| `enterAnimation` | -- | Animation to use when the alert is presented. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | +| `header` | `header` | The main title in the heading of the alert. | `string \| undefined` | `undefined` | +| `inputs` | -- | Array of input to show in the alert. | `AlertInput[]` | `[]` | +| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` | +| `leaveAnimation` | -- | Animation to use when the alert is dismissed. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | +| `message` | `message` | The main message to be displayed in the alert. `message` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `` would become `<Ionic>` For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) | `IonicSafeString \| string \| undefined` | `undefined` | +| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | +| `subHeader` | `sub-header` | The subtitle in the heading of the alert. Displayed under the title. | `string \| undefined` | `undefined` | +| `translucent` | `translucent` | If `true`, the alert will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | `boolean` | `false` | ## Events diff --git a/core/src/components/toast/readme.md b/core/src/components/toast/readme.md index c60e091a531..84fcb92b69d 100644 --- a/core/src/components/toast/readme.md +++ b/core/src/components/toast/readme.md @@ -396,22 +396,22 @@ export default defineComponent({ ## Properties -| Property | Attribute | Description | Type | Default | -| ---------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ----------- | -| `animated` | `animated` | If `true`, the toast will animate. | `boolean` | `true` | -| `buttons` | -- | An array of buttons for the toast. | `(string \| ToastButton)[] \| undefined` | `undefined` | -| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` | -| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` | -| `duration` | `duration` | How many milliseconds to wait before hiding the toast. By default, it will show until `dismiss()` is called. | `number` | `0` | -| `enterAnimation` | -- | Animation to use when the toast is presented. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | -| `header` | `header` | Header to be shown in the toast. | `string \| undefined` | `undefined` | -| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `false` | -| `leaveAnimation` | -- | Animation to use when the toast is dismissed. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | -| `message` | `message` | Message to be shown in the toast. | `IonicSafeString \| string \| undefined` | `undefined` | -| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | -| `position` | `position` | The position of the toast on the screen. | `"bottom" \| "middle" \| "top"` | `'bottom'` | -| `role` | `role` | The ARIA role of the toast. When unset, the role defaults to 'dialog' if the toast contains buttons and 'status' if it does not. | `string \| undefined` | `undefined` | -| `translucent` | `translucent` | If `true`, the toast will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | `boolean` | `false` | +| Property | Attribute | Description | Type | Default | +| ---------------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ----------- | +| `additionalAttributes` | -- | Additional attributes to pass to the toast. | `ToastAttributes \| undefined` | `undefined` | +| `animated` | `animated` | If `true`, the toast will animate. | `boolean` | `true` | +| `buttons` | -- | An array of buttons for the toast. | `(string \| ToastButton)[] \| undefined` | `undefined` | +| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` | +| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` | +| `duration` | `duration` | How many milliseconds to wait before hiding the toast. By default, it will show until `dismiss()` is called. | `number` | `0` | +| `enterAnimation` | -- | Animation to use when the toast is presented. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | +| `header` | `header` | Header to be shown in the toast. | `string \| undefined` | `undefined` | +| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `false` | +| `leaveAnimation` | -- | Animation to use when the toast is dismissed. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | +| `message` | `message` | Message to be shown in the toast. | `IonicSafeString \| string \| undefined` | `undefined` | +| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | +| `position` | `position` | The position of the toast on the screen. | `"bottom" \| "middle" \| "top"` | `'bottom'` | +| `translucent` | `translucent` | If `true`, the toast will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | `boolean` | `false` | ## Events diff --git a/core/src/components/toast/test/basic/index.html b/core/src/components/toast/test/basic/index.html index 569f302eb5c..1a6dc2fbdbc 100644 --- a/core/src/components/toast/test/basic/index.html +++ b/core/src/components/toast/test/basic/index.html @@ -211,4 +211,4 @@ - \ No newline at end of file + diff --git a/core/src/components/toast/toast-interface.ts b/core/src/components/toast/toast-interface.ts index b4e0e4d1347..e506a4ab101 100644 --- a/core/src/components/toast/toast-interface.ts +++ b/core/src/components/toast/toast-interface.ts @@ -1,3 +1,5 @@ +import { JSXBase } from '@stencil/core/internal'; + import { AnimationBuilder, Color, Mode } from '../../interface'; import { IonicSafeString } from '../../utils/sanitization'; @@ -10,6 +12,7 @@ export interface ToastOptions { position?: 'top' | 'bottom' | 'middle'; translucent?: boolean; animated?: boolean; + additionalAttributes?: ToastAttributes; color?: Color; mode?: Mode; @@ -20,6 +23,8 @@ export interface ToastOptions { leaveAnimation?: AnimationBuilder; } +export interface ToastAttributes extends JSXBase.HTMLAttributes {} + export interface ToastButton { text?: string; icon?: string; diff --git a/core/src/components/toast/toast.tsx b/core/src/components/toast/toast.tsx index cf6fb3b265a..51eb4c1094b 100644 --- a/core/src/components/toast/toast.tsx +++ b/core/src/components/toast/toast.tsx @@ -10,6 +10,7 @@ import { iosEnterAnimation } from './animations/ios.enter'; import { iosLeaveAnimation } from './animations/ios.leave'; import { mdEnterAnimation } from './animations/md.enter'; import { mdLeaveAnimation } from './animations/md.leave'; +import { ToastAttributes } from './toast-interface'; /** * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use. @@ -107,10 +108,9 @@ export class Toast implements ComponentInterface, OverlayInterface { @Prop() animated = true; /** - * The ARIA role of the toast. When unset, the role defaults - * to 'dialog' if the toast contains buttons and 'status' if it does not. + * Additional attributes to pass to the toast. */ - @Prop() role?: string; + @Prop() additionalAttributes?: ToastAttributes; /** * Emitted after the toast has presented. @@ -271,7 +271,7 @@ export class Toast implements ComponentInterface, OverlayInterface { }; const hdrId = `toast-${this.overlayIndex}-hdr`; const msgId = `toast-${this.overlayIndex}-msg`; - const role = this.role || (allButtons.length > 0 ? 'dialog' : 'status'); + const role = this.additionalAttributes?.role || (allButtons.length > 0 ? 'dialog' : 'status'); return (
{this.renderButtons(startButtons, 'start')} diff --git a/packages/vue/src/components/Overlays.ts b/packages/vue/src/components/Overlays.ts index d41c2586577..0427852e35c 100644 --- a/packages/vue/src/components/Overlays.ts +++ b/packages/vue/src/components/Overlays.ts @@ -15,7 +15,7 @@ import { defineOverlayContainer } from '../vue-component-lib/overlays'; export const IonActionSheet = /*@__PURE__*/defineOverlayContainer('ion-action-sheet', ['animated', 'backdropDismiss', 'buttons', 'cssClass', 'enterAnimation', 'header', 'keyboardClose', 'leaveAnimation', 'mode', 'subHeader', 'translucent'], actionSheetController); -export const IonAlert = /*@__PURE__*/defineOverlayContainer('ion-alert', ['animated', 'backdropDismiss', 'buttons', 'cssClass', 'enterAnimation', 'header', 'inputs', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'subHeader', 'translucent'], alertController); +export const IonAlert = /*@__PURE__*/defineOverlayContainer('ion-alert', ['additionalAttributes', 'animated', 'backdropDismiss', 'buttons', 'cssClass', 'enterAnimation', 'header', 'inputs', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'subHeader', 'translucent'], alertController); export const IonLoading = /*@__PURE__*/defineOverlayContainer('ion-loading', ['animated', 'backdropDismiss', 'cssClass', 'duration', 'enterAnimation', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'showBackdrop', 'spinner', 'translucent'], loadingController); @@ -25,5 +25,5 @@ export const IonPicker = /*@__PURE__*/defineOverlayContainer('ion export const IonPopover = /*@__PURE__*/defineOverlayContainer('ion-popover', ['animated', 'backdropDismiss', 'component', 'componentProps', 'cssClass', 'enterAnimation', 'event', 'keyboardClose', 'leaveAnimation', 'mode', 'showBackdrop', 'translucent'], popoverController); -export const IonToast = /*@__PURE__*/defineOverlayContainer('ion-toast', ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'position', 'translucent'], toastController); +export const IonToast = /*@__PURE__*/defineOverlayContainer('ion-toast', ['additionalAttributes', 'animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'position', 'translucent'], toastController); From 5a1e88c36720c0ab6b7042e19081be10479e2a73 Mon Sep 17 00:00:00 2001 From: willmartindev Date: Tue, 14 Sep 2021 13:19:23 -0400 Subject: [PATCH 3/5] test(alert): add e2e test --- core/api.txt | 4 +-- core/src/components.d.ts | 32 +++++++++---------- core/src/components/alert/alert-interface.ts | 2 +- core/src/components/alert/alert.tsx | 8 ++--- core/src/components/alert/readme.md | 32 +++++++++---------- core/src/components/alert/test/basic/e2e.ts | 17 ++++++++++ .../components/alert/test/basic/index.html | 5 ++- core/src/components/toast/readme.md | 32 +++++++++---------- core/src/components/toast/toast-interface.ts | 2 +- core/src/components/toast/toast.tsx | 6 ++-- 10 files changed, 80 insertions(+), 60 deletions(-) diff --git a/core/api.txt b/core/api.txt index a8704291c2c..a964a58fad1 100644 --- a/core/api.txt +++ b/core/api.txt @@ -44,13 +44,13 @@ ion-action-sheet,css-prop,--min-width ion-action-sheet,css-prop,--width ion-alert,scoped -ion-alert,prop,additionalAttributes,AlertAttributes | undefined,undefined,false,false ion-alert,prop,animated,boolean,true,false,false ion-alert,prop,backdropDismiss,boolean,true,false,false ion-alert,prop,buttons,(string | AlertButton)[],[],false,false ion-alert,prop,cssClass,string | string[] | undefined,undefined,false,false ion-alert,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false ion-alert,prop,header,string | undefined,undefined,false,false +ion-alert,prop,htmlAttributes,AlertAttributes | undefined,undefined,false,false ion-alert,prop,inputs,AlertInput[],[],false,false ion-alert,prop,keyboardClose,boolean,true,false,false ion-alert,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false @@ -1262,7 +1262,6 @@ ion-title,prop,size,"large" | "small" | undefined,undefined,false,false ion-title,css-prop,--color ion-toast,shadow -ion-toast,prop,additionalAttributes,ToastAttributes | undefined,undefined,false,false ion-toast,prop,animated,boolean,true,false,false ion-toast,prop,buttons,(string | ToastButton)[] | undefined,undefined,false,false ion-toast,prop,color,string | undefined,undefined,false,true @@ -1270,6 +1269,7 @@ ion-toast,prop,cssClass,string | string[] | undefined,undefined,false,false ion-toast,prop,duration,number,0,false,false ion-toast,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false ion-toast,prop,header,string | undefined,undefined,false,false +ion-toast,prop,htmlAttributes,ToastAttributes | undefined,undefined,false,false ion-toast,prop,keyboardClose,boolean,false,false,false ion-toast,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false ion-toast,prop,message,IonicSafeString | string | undefined,undefined,false,false diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 4dc1470c1e5..9c7aad7dedb 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -78,10 +78,6 @@ export namespace Components { "translucent": boolean; } interface IonAlert { - /** - * Additional attributes to pass to the alert. - */ - "additionalAttributes"?: AlertAttributes; /** * If `true`, the alert will animate. */ @@ -112,6 +108,10 @@ export namespace Components { * The main title in the heading of the alert. */ "header"?: string; + /** + * Additional attributes to pass to the alert. + */ + "htmlAttributes"?: AlertAttributes; /** * Array of input to show in the alert. */ @@ -2537,10 +2537,6 @@ export namespace Components { "size"?: 'large' | 'small'; } interface IonToast { - /** - * Additional attributes to pass to the toast. - */ - "additionalAttributes"?: ToastAttributes; /** * If `true`, the toast will animate. */ @@ -2575,6 +2571,10 @@ export namespace Components { * Header to be shown in the toast. */ "header"?: string; + /** + * Additional attributes to pass to the toast. + */ + "htmlAttributes"?: ToastAttributes; /** * If `true`, the keyboard will be automatically dismissed when the overlay is presented. */ @@ -3395,10 +3395,6 @@ declare namespace LocalJSX { "translucent"?: boolean; } interface IonAlert { - /** - * Additional attributes to pass to the alert. - */ - "additionalAttributes"?: AlertAttributes; /** * If `true`, the alert will animate. */ @@ -3423,6 +3419,10 @@ declare namespace LocalJSX { * The main title in the heading of the alert. */ "header"?: string; + /** + * Additional attributes to pass to the alert. + */ + "htmlAttributes"?: AlertAttributes; /** * Array of input to show in the alert. */ @@ -5880,10 +5880,6 @@ declare namespace LocalJSX { "size"?: 'large' | 'small'; } interface IonToast { - /** - * Additional attributes to pass to the toast. - */ - "additionalAttributes"?: ToastAttributes; /** * If `true`, the toast will animate. */ @@ -5912,6 +5908,10 @@ declare namespace LocalJSX { * Header to be shown in the toast. */ "header"?: string; + /** + * Additional attributes to pass to the toast. + */ + "htmlAttributes"?: ToastAttributes; /** * If `true`, the keyboard will be automatically dismissed when the overlay is presented. */ diff --git a/core/src/components/alert/alert-interface.ts b/core/src/components/alert/alert-interface.ts index e965c22b764..a807a11eaf0 100644 --- a/core/src/components/alert/alert-interface.ts +++ b/core/src/components/alert/alert-interface.ts @@ -13,7 +13,7 @@ export interface AlertOptions { backdropDismiss?: boolean; translucent?: boolean; animated?: boolean; - additionalAttributes?: AlertAttributes; + htmlAttributes?: AlertAttributes; mode?: Mode; keyboardClose?: boolean; diff --git a/core/src/components/alert/alert.tsx b/core/src/components/alert/alert.tsx index 32040b2d3d0..f8547e02e00 100644 --- a/core/src/components/alert/alert.tsx +++ b/core/src/components/alert/alert.tsx @@ -114,7 +114,7 @@ export class Alert implements ComponentInterface, OverlayInterface { /** * Additional attributes to pass to the alert. */ - @Prop() additionalAttributes?: AlertAttributes; + @Prop() htmlAttributes?: AlertAttributes; /** * Emitted after the alert has presented. @@ -556,12 +556,12 @@ export class Alert implements ComponentInterface, OverlayInterface { } render() { - const { overlayIndex, header, subHeader, additionalAttributes } = this; + const { overlayIndex, header, subHeader, htmlAttributes } = this; const mode = getIonMode(this); const hdrId = `alert-${overlayIndex}-hdr`; const subHdrId = `alert-${overlayIndex}-sub-hdr`; const msgId = `alert-${overlayIndex}-msg`; - const role = additionalAttributes?.role || (this.inputs.length > 0 || this.buttons.length > 0 ? 'alertdialog' : 'alert'); + const role = htmlAttributes?.role || (this.inputs.length > 0 || this.buttons.length > 0 ? 'alertdialog' : 'alert'); return ( diff --git a/core/src/components/alert/readme.md b/core/src/components/alert/readme.md index d6f8390b52c..5aa387c87a0 100644 --- a/core/src/components/alert/readme.md +++ b/core/src/components/alert/readme.md @@ -1760,22 +1760,22 @@ export default defineComponent({ ## Properties -| Property | Attribute | Description | Type | Default | -| ---------------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ----------- | -| `additionalAttributes` | -- | Additional attributes to pass to the alert. | `AlertAttributes \| undefined` | `undefined` | -| `animated` | `animated` | If `true`, the alert will animate. | `boolean` | `true` | -| `backdropDismiss` | `backdrop-dismiss` | If `true`, the alert will be dismissed when the backdrop is clicked. | `boolean` | `true` | -| `buttons` | -- | Array of buttons to be added to the alert. | `(string \| AlertButton)[]` | `[]` | -| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` | -| `enterAnimation` | -- | Animation to use when the alert is presented. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | -| `header` | `header` | The main title in the heading of the alert. | `string \| undefined` | `undefined` | -| `inputs` | -- | Array of input to show in the alert. | `AlertInput[]` | `[]` | -| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` | -| `leaveAnimation` | -- | Animation to use when the alert is dismissed. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | -| `message` | `message` | The main message to be displayed in the alert. `message` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `` would become `<Ionic>` For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) | `IonicSafeString \| string \| undefined` | `undefined` | -| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | -| `subHeader` | `sub-header` | The subtitle in the heading of the alert. Displayed under the title. | `string \| undefined` | `undefined` | -| `translucent` | `translucent` | If `true`, the alert will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | `boolean` | `false` | +| Property | Attribute | Description | Type | Default | +| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ----------- | +| `animated` | `animated` | If `true`, the alert will animate. | `boolean` | `true` | +| `backdropDismiss` | `backdrop-dismiss` | If `true`, the alert will be dismissed when the backdrop is clicked. | `boolean` | `true` | +| `buttons` | -- | Array of buttons to be added to the alert. | `(string \| AlertButton)[]` | `[]` | +| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` | +| `enterAnimation` | -- | Animation to use when the alert is presented. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | +| `header` | `header` | The main title in the heading of the alert. | `string \| undefined` | `undefined` | +| `htmlAttributes` | -- | Additional attributes to pass to the alert. | `AlertAttributes \| undefined` | `undefined` | +| `inputs` | -- | Array of input to show in the alert. | `AlertInput[]` | `[]` | +| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` | +| `leaveAnimation` | -- | Animation to use when the alert is dismissed. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | +| `message` | `message` | The main message to be displayed in the alert. `message` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `` would become `<Ionic>` For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) | `IonicSafeString \| string \| undefined` | `undefined` | +| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | +| `subHeader` | `sub-header` | The subtitle in the heading of the alert. Displayed under the title. | `string \| undefined` | `undefined` | +| `translucent` | `translucent` | If `true`, the alert will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | `boolean` | `false` | ## Events diff --git a/core/src/components/alert/test/basic/e2e.ts b/core/src/components/alert/test/basic/e2e.ts index ad2511d2b21..06a41ecf99f 100644 --- a/core/src/components/alert/test/basic/e2e.ts +++ b/core/src/components/alert/test/basic/e2e.ts @@ -102,3 +102,20 @@ test(`alert:rtl: basic, radio`, async () => { test(`alert:rtl: basic, checkbox`, async () => { await testAlert(DIRECTORY, '#checkbox', true); }); + +// Attributes + +test('alert: htmlAttributes', async () => { + const page = await newE2EPage({ url: '/src/components/alert/test/basic?ionic:_testing=true' }); + + await page.click('#basic'); + await page.waitForSelector('#basic'); + + let alert = await page.find('ion-alert'); + + expect(alert).not.toBe(null); + await alert.waitForVisible(); + + expect(alert.getAttribute('data-testid')).toEqual('basic-alert'); + expect((alert as any).dataset?.testid).toEqual('basic-alert'); +}); diff --git a/core/src/components/alert/test/basic/index.html b/core/src/components/alert/test/basic/index.html index c8e3a62777e..96bf13d31b2 100644 --- a/core/src/components/alert/test/basic/index.html +++ b/core/src/components/alert/test/basic/index.html @@ -58,7 +58,10 @@ header: 'Alert', subHeader: 'Subtitle', message: 'This is an alert message.', - buttons: ['OK'] + buttons: ['OK'], + htmlAttributes: { + 'data-testid': 'basic-alert' + } }); } diff --git a/core/src/components/toast/readme.md b/core/src/components/toast/readme.md index 84fcb92b69d..77259469428 100644 --- a/core/src/components/toast/readme.md +++ b/core/src/components/toast/readme.md @@ -396,22 +396,22 @@ export default defineComponent({ ## Properties -| Property | Attribute | Description | Type | Default | -| ---------------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ----------- | -| `additionalAttributes` | -- | Additional attributes to pass to the toast. | `ToastAttributes \| undefined` | `undefined` | -| `animated` | `animated` | If `true`, the toast will animate. | `boolean` | `true` | -| `buttons` | -- | An array of buttons for the toast. | `(string \| ToastButton)[] \| undefined` | `undefined` | -| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` | -| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` | -| `duration` | `duration` | How many milliseconds to wait before hiding the toast. By default, it will show until `dismiss()` is called. | `number` | `0` | -| `enterAnimation` | -- | Animation to use when the toast is presented. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | -| `header` | `header` | Header to be shown in the toast. | `string \| undefined` | `undefined` | -| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `false` | -| `leaveAnimation` | -- | Animation to use when the toast is dismissed. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | -| `message` | `message` | Message to be shown in the toast. | `IonicSafeString \| string \| undefined` | `undefined` | -| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | -| `position` | `position` | The position of the toast on the screen. | `"bottom" \| "middle" \| "top"` | `'bottom'` | -| `translucent` | `translucent` | If `true`, the toast will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | `boolean` | `false` | +| Property | Attribute | Description | Type | Default | +| ---------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ----------- | +| `animated` | `animated` | If `true`, the toast will animate. | `boolean` | `true` | +| `buttons` | -- | An array of buttons for the toast. | `(string \| ToastButton)[] \| undefined` | `undefined` | +| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` | +| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` | +| `duration` | `duration` | How many milliseconds to wait before hiding the toast. By default, it will show until `dismiss()` is called. | `number` | `0` | +| `enterAnimation` | -- | Animation to use when the toast is presented. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | +| `header` | `header` | Header to be shown in the toast. | `string \| undefined` | `undefined` | +| `htmlAttributes` | -- | Additional attributes to pass to the toast. | `ToastAttributes \| undefined` | `undefined` | +| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `false` | +| `leaveAnimation` | -- | Animation to use when the toast is dismissed. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | +| `message` | `message` | Message to be shown in the toast. | `IonicSafeString \| string \| undefined` | `undefined` | +| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | +| `position` | `position` | The position of the toast on the screen. | `"bottom" \| "middle" \| "top"` | `'bottom'` | +| `translucent` | `translucent` | If `true`, the toast will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | `boolean` | `false` | ## Events diff --git a/core/src/components/toast/toast-interface.ts b/core/src/components/toast/toast-interface.ts index e506a4ab101..641ade8f942 100644 --- a/core/src/components/toast/toast-interface.ts +++ b/core/src/components/toast/toast-interface.ts @@ -12,7 +12,7 @@ export interface ToastOptions { position?: 'top' | 'bottom' | 'middle'; translucent?: boolean; animated?: boolean; - additionalAttributes?: ToastAttributes; + htmlAttributes?: ToastAttributes; color?: Color; mode?: Mode; diff --git a/core/src/components/toast/toast.tsx b/core/src/components/toast/toast.tsx index 51eb4c1094b..ea6d6997cc7 100644 --- a/core/src/components/toast/toast.tsx +++ b/core/src/components/toast/toast.tsx @@ -110,7 +110,7 @@ export class Toast implements ComponentInterface, OverlayInterface { /** * Additional attributes to pass to the toast. */ - @Prop() additionalAttributes?: ToastAttributes; + @Prop() htmlAttributes?: ToastAttributes; /** * Emitted after the toast has presented. @@ -271,7 +271,7 @@ export class Toast implements ComponentInterface, OverlayInterface { }; const hdrId = `toast-${this.overlayIndex}-hdr`; const msgId = `toast-${this.overlayIndex}-msg`; - const role = this.additionalAttributes?.role || (allButtons.length > 0 ? 'dialog' : 'status'); + const role = this.htmlAttributes?.role || (allButtons.length > 0 ? 'dialog' : 'status'); return (
Date: Tue, 14 Sep 2021 15:09:47 -0400 Subject: [PATCH 4/5] test(alert, toast): update htmlAttributes test --- core/src/components/alert/test/basic/e2e.ts | 5 +++-- core/src/components/toast/test/basic/e2e.ts | 19 +++++++++++++++++++ .../components/toast/test/basic/index.html | 2 +- packages/vue/src/components/Overlays.ts | 4 ++-- 4 files changed, 25 insertions(+), 5 deletions(-) diff --git a/core/src/components/alert/test/basic/e2e.ts b/core/src/components/alert/test/basic/e2e.ts index 06a41ecf99f..0bb2db8a230 100644 --- a/core/src/components/alert/test/basic/e2e.ts +++ b/core/src/components/alert/test/basic/e2e.ts @@ -116,6 +116,7 @@ test('alert: htmlAttributes', async () => { expect(alert).not.toBe(null); await alert.waitForVisible(); - expect(alert.getAttribute('data-testid')).toEqual('basic-alert'); - expect((alert as any).dataset?.testid).toEqual('basic-alert'); + const attribute = await page.evaluate((el) => document.querySelector('ion-alert').getAttribute('data-testid')); + + expect(attribute).toEqual('basic-alert'); }); diff --git a/core/src/components/toast/test/basic/e2e.ts b/core/src/components/toast/test/basic/e2e.ts index 8044981dd0a..3f96b7c955f 100644 --- a/core/src/components/toast/test/basic/e2e.ts +++ b/core/src/components/toast/test/basic/e2e.ts @@ -1,3 +1,4 @@ +import { newE2EPage } from '@stencil/core/testing'; import { testToast } from '../test.utils'; const DIRECTORY = 'basic'; @@ -101,3 +102,21 @@ test('toast:rtl: start end position', async () => { test('toast:rtl: html', async () => { await testToast(DIRECTORY, '#toast-html', true); }); + +// Attributes + +test('toast: htmlAttributes', async () => { + const page = await newE2EPage({ url: '/src/components/toast/test/basic?ionic:_testing=true' }); + + await page.click('#show-bottom-toast'); + await page.waitForSelector('#show-bottom-toast'); + + let toast = await page.find('ion-toast'); + + expect(toast).not.toBe(null); + await toast.waitForVisible(); + + const attribute = await page.evaluate((el) => document.querySelector('ion-toast').getAttribute('data-testid')); + + expect(attribute).toEqual('basic-toast'); +}); diff --git a/core/src/components/toast/test/basic/index.html b/core/src/components/toast/test/basic/index.html index 1a6dc2fbdbc..a3a68ca4629 100644 --- a/core/src/components/toast/test/basic/index.html +++ b/core/src/components/toast/test/basic/index.html @@ -23,7 +23,7 @@ - + Position Bottom diff --git a/packages/vue/src/components/Overlays.ts b/packages/vue/src/components/Overlays.ts index 0427852e35c..f5625b24bbf 100644 --- a/packages/vue/src/components/Overlays.ts +++ b/packages/vue/src/components/Overlays.ts @@ -15,7 +15,7 @@ import { defineOverlayContainer } from '../vue-component-lib/overlays'; export const IonActionSheet = /*@__PURE__*/defineOverlayContainer('ion-action-sheet', ['animated', 'backdropDismiss', 'buttons', 'cssClass', 'enterAnimation', 'header', 'keyboardClose', 'leaveAnimation', 'mode', 'subHeader', 'translucent'], actionSheetController); -export const IonAlert = /*@__PURE__*/defineOverlayContainer('ion-alert', ['additionalAttributes', 'animated', 'backdropDismiss', 'buttons', 'cssClass', 'enterAnimation', 'header', 'inputs', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'subHeader', 'translucent'], alertController); +export const IonAlert = /*@__PURE__*/defineOverlayContainer('ion-alert', ['animated', 'backdropDismiss', 'buttons', 'cssClass', 'enterAnimation', 'header', 'htmlAttributes', 'inputs', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'subHeader', 'translucent'], alertController); export const IonLoading = /*@__PURE__*/defineOverlayContainer('ion-loading', ['animated', 'backdropDismiss', 'cssClass', 'duration', 'enterAnimation', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'showBackdrop', 'spinner', 'translucent'], loadingController); @@ -25,5 +25,5 @@ export const IonPicker = /*@__PURE__*/defineOverlayContainer('ion export const IonPopover = /*@__PURE__*/defineOverlayContainer('ion-popover', ['animated', 'backdropDismiss', 'component', 'componentProps', 'cssClass', 'enterAnimation', 'event', 'keyboardClose', 'leaveAnimation', 'mode', 'showBackdrop', 'translucent'], popoverController); -export const IonToast = /*@__PURE__*/defineOverlayContainer('ion-toast', ['additionalAttributes', 'animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'position', 'translucent'], toastController); +export const IonToast = /*@__PURE__*/defineOverlayContainer('ion-toast', ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'htmlAttributes', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'position', 'translucent'], toastController); From ffaf4e47419a5591fa0a36681c2b27d4f908479a Mon Sep 17 00:00:00 2001 From: willmartindev Date: Tue, 14 Sep 2021 16:01:58 -0400 Subject: [PATCH 5/5] fix(alert, toast): add interface to docs; remove labelledby and describedby --- core/src/components/alert/alert.tsx | 2 -- core/src/components/alert/readme.md | 10 ++++++++-- core/src/components/toast/readme.md | 6 ++++++ core/src/components/toast/toast.tsx | 13 +++---------- 4 files changed, 17 insertions(+), 14 deletions(-) diff --git a/core/src/components/alert/alert.tsx b/core/src/components/alert/alert.tsx index f8547e02e00..88ff5077eea 100644 --- a/core/src/components/alert/alert.tsx +++ b/core/src/components/alert/alert.tsx @@ -566,8 +566,6 @@ export class Alert implements ComponentInterface, OverlayInterface { return ( {} +``` + ### AlertTextareaAttributes ```typescript interface AlertTextareaAttributes extends JSXBase.TextareaHTMLAttributes {} diff --git a/core/src/components/toast/readme.md b/core/src/components/toast/readme.md index 77259469428..98bd7ef4d07 100644 --- a/core/src/components/toast/readme.md +++ b/core/src/components/toast/readme.md @@ -37,6 +37,7 @@ interface ToastOptions { position?: 'top' | 'bottom' | 'middle'; translucent?: boolean; animated?: boolean; + htmlAttributes?: ToastAttributes; color?: Color; mode?: Mode; @@ -48,6 +49,11 @@ interface ToastOptions { } ``` +### ToastAttributes +```typescript +interface ToastAttributes extends JSXBase.HTMLAttributes {} +``` + diff --git a/core/src/components/toast/toast.tsx b/core/src/components/toast/toast.tsx index ea6d6997cc7..eef86781635 100644 --- a/core/src/components/toast/toast.tsx +++ b/core/src/components/toast/toast.tsx @@ -269,8 +269,6 @@ export class Toast implements ComponentInterface, OverlayInterface { 'toast-wrapper': true, [`toast-${this.position}`]: true }; - const hdrId = `toast-${this.overlayIndex}-hdr`; - const msgId = `toast-${this.overlayIndex}-msg`; const role = this.htmlAttributes?.role || (allButtons.length > 0 ? 'dialog' : 'status'); return ( @@ -286,23 +284,18 @@ export class Toast implements ComponentInterface, OverlayInterface { tabindex="-1" onIonToastWillDismiss={this.dispatchCancelHandler} role={role} - aria-labelledby={this.header !== undefined ? hdrId : null} - aria-describedby={this.message !== undefined ? msgId : null} {...this.htmlAttributes as any} >
-
+
{this.renderButtons(startButtons, 'start')}
{this.header !== undefined && -
{this.header}
+
{this.header}
} {this.message !== undefined && -
+
}