diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts index f9e2f45f4e..9e657d4580 100644 --- a/packages/core/src/components.d.ts +++ b/packages/core/src/components.d.ts @@ -98,7 +98,6 @@ declare global { } namespace JSXElements { export interface IonActionSheetAttributes extends HTMLAttributes { - animate?: boolean; buttons?: ActionSheetButton[]; cssClass?: string; enableBackdropDismiss?: boolean; @@ -107,6 +106,7 @@ declare global { subTitle?: string; title?: string; translucent?: boolean; + willAnimate?: boolean; } } } @@ -166,7 +166,6 @@ declare global { } namespace JSXElements { export interface IonAlertAttributes extends HTMLAttributes { - animate?: boolean; buttons?: AlertButton[]; cssClass?: string; enableBackdropDismiss?: boolean; @@ -177,6 +176,7 @@ declare global { subTitle?: string; title?: string; translucent?: boolean; + willAnimate?: boolean; } } } @@ -1517,7 +1517,6 @@ declare global { } namespace JSXElements { export interface IonLoadingAttributes extends HTMLAttributes { - animate?: boolean; content?: string; cssClass?: string; dismissOnPageChange?: boolean; @@ -1527,6 +1526,7 @@ declare global { showBackdrop?: boolean; spinner?: string; translucent?: boolean; + willAnimate?: boolean; } } } @@ -1653,7 +1653,6 @@ declare global { } namespace JSXElements { export interface IonModalAttributes extends HTMLAttributes { - animate?: boolean; color?: string; component?: any; cssClass?: string; @@ -1665,6 +1664,7 @@ declare global { modalId?: number; mode?: string; showBackdrop?: boolean; + willAnimate?: boolean; } } } @@ -1880,7 +1880,6 @@ declare global { } namespace JSXElements { export interface IonPickerAttributes extends HTMLAttributes { - animate?: boolean; buttons?: PickerButton[]; columns?: PickerColumn[]; content?: string; @@ -1892,6 +1891,7 @@ declare global { leaveAnimation?: AnimationBuilder; pickerId?: string; showBackdrop?: boolean; + willAnimate?: boolean; } } } @@ -1951,7 +1951,6 @@ declare global { } namespace JSXElements { export interface IonPopoverAttributes extends HTMLAttributes { - animate?: boolean; color?: string; component?: string; cssClass?: string; @@ -1965,6 +1964,7 @@ declare global { popoverId?: string; showBackdrop?: boolean; translucent?: boolean; + willAnimate?: boolean; } } } @@ -3003,7 +3003,6 @@ declare global { } namespace JSXElements { export interface IonToastAttributes extends HTMLAttributes { - animate?: boolean; closeButtonText?: string; cssClass?: string; dismissOnPageChange?: boolean; @@ -3015,6 +3014,7 @@ declare global { showCloseButton?: boolean; toastId?: string; translucent?: boolean; + willAnimate?: boolean; } } } diff --git a/packages/core/src/components/action-sheet/action-sheet.tsx b/packages/core/src/components/action-sheet/action-sheet.tsx index 9c71163b36..95ee9fa7e2 100644 --- a/packages/core/src/components/action-sheet/action-sheet.tsx +++ b/packages/core/src/components/action-sheet/action-sheet.tsx @@ -104,7 +104,7 @@ export class ActionSheet { /** * Enable action-sheet animations. If false, action-sheet will not animate in */ - @Prop() animate: boolean = true; + @Prop() willAnimate: boolean = true; /** * Animation to use when the action-sheet is created @@ -138,7 +138,7 @@ export class ActionSheet { this.animation = animation; // Check if prop animate is false or if the config for animate is defined/false - if (!this.animate || (isDef(this.config.get('animate')) && this.config.get('animate') === false)) { + if (!this.willAnimate || (isDef(this.config.get('willAnimate')) && this.config.get('willAnimate') === false)) { // if the duration is 0, it won't actually animate I don't think // TODO - validate this this.animation = animation.duration(0); @@ -168,7 +168,7 @@ export class ActionSheet { return this.animationCtrl.create(animationBuilder, this.el).then(animation => { this.animation = animation; - if (!this.animate || (isDef(this.config.get('animate')) && this.config.get('animate') === false)) { + if (!this.willAnimate || (isDef(this.config.get('willAnimate')) && this.config.get('willAnimate') === false)) { this.animation = animation.duration(0); } diff --git a/packages/core/src/components/action-sheet/readme.md b/packages/core/src/components/action-sheet/readme.md index 4fdd140e7f..b214777d78 100644 --- a/packages/core/src/components/action-sheet/readme.md +++ b/packages/core/src/components/action-sheet/readme.md @@ -7,13 +7,6 @@ ## Properties -#### animate - -boolean - -Enable action-sheet animations. If false, action-sheet will not animate in - - #### buttons any @@ -70,15 +63,15 @@ boolean If true, action-sheet will become translucent. Requires support for backdrop-filters. +#### willAnimate + +boolean + +Enable action-sheet animations. If false, action-sheet will not animate in + + ## Attributes -#### animate - -boolean - -Enable action-sheet animations. If false, action-sheet will not animate in - - #### buttons any @@ -135,6 +128,13 @@ boolean If true, action-sheet will become translucent. Requires support for backdrop-filters. +#### willAnimate + +boolean + +Enable action-sheet animations. If false, action-sheet will not animate in + + ## Events #### ionActionSheetDidDismiss diff --git a/packages/core/src/components/alert/alert.tsx b/packages/core/src/components/alert/alert.tsx index 5357c05eea..1ca335232e 100644 --- a/packages/core/src/components/alert/alert.tsx +++ b/packages/core/src/components/alert/alert.tsx @@ -110,7 +110,7 @@ export class Alert { /** * Enable alert animations. If false, alert will not animate in */ - @Prop() animate: boolean = true; + @Prop() willAnimate: boolean = true; /** * Animation to be used when the alert is shown @@ -140,7 +140,7 @@ export class Alert { // build the animation and kick it off return this.animationCtrl.create(animationBuilder, this.el).then(animation => { this.animation = animation; - if (!this.animate) { + if (!this.willAnimate) { // if the duration is 0, it won't actually animate I don't think // TODO - validate this this.animation = animation.duration(0); diff --git a/packages/core/src/components/alert/readme.md b/packages/core/src/components/alert/readme.md index 829317bc8b..1de51ee93c 100644 --- a/packages/core/src/components/alert/readme.md +++ b/packages/core/src/components/alert/readme.md @@ -7,13 +7,6 @@ ## Properties -#### animate - -boolean - -Enable alert animations. If false, alert will not animate in - - #### buttons any @@ -84,15 +77,15 @@ boolean If true, alert will become translucent. Requires support for backdrop-filters. +#### willAnimate + +boolean + +Enable alert animations. If false, alert will not animate in + + ## Attributes -#### animate - -boolean - -Enable alert animations. If false, alert will not animate in - - #### buttons any @@ -163,6 +156,13 @@ boolean If true, alert will become translucent. Requires support for backdrop-filters. +#### willAnimate + +boolean + +Enable alert animations. If false, alert will not animate in + + ## Events #### ionAlertDidDismiss diff --git a/packages/core/src/components/loading/loading.tsx b/packages/core/src/components/loading/loading.tsx index 946fc68204..c19d9b8ebd 100644 --- a/packages/core/src/components/loading/loading.tsx +++ b/packages/core/src/components/loading/loading.tsx @@ -116,7 +116,7 @@ export class Loading { /** * Toggles whether animation should occur or not */ - @Prop() animate: boolean = true; + @Prop() willAnimate: boolean = true; /** * Present a loading overlay after it has been created @@ -138,7 +138,7 @@ export class Loading { // build the animation and kick it off return this.animationCtrl.create(animationBuilder, this.el).then(animation => { this.animation = animation; - if (!this.animate) { + if (!this.willAnimate) { // if the duration is 0, it won't actually animate I don't think // TODO - validate this this.animation = animation.duration(0); @@ -171,7 +171,7 @@ export class Loading { return this.animationCtrl.create(animationBuilder, this.el).then(animation => { this.animation = animation; - if (!this.animate) { + if (!this.willAnimate) { // if the duration is 0, it won't actually animate I don't think // TODO - validate this this.animation = animation.duration(0); diff --git a/packages/core/src/components/loading/readme.md b/packages/core/src/components/loading/readme.md index 7d707e4ed4..2a0e36d344 100644 --- a/packages/core/src/components/loading/readme.md +++ b/packages/core/src/components/loading/readme.md @@ -7,13 +7,6 @@ ## Properties -#### animate - -boolean - -Toggles whether animation should occur or not - - #### content string @@ -75,15 +68,15 @@ boolean If true, the background will be translucent. Browser support for backdrop-filter is required for the full effect +#### willAnimate + +boolean + +Toggles whether animation should occur or not + + ## Attributes -#### animate - -boolean - -Toggles whether animation should occur or not - - #### content string @@ -145,6 +138,13 @@ boolean If true, the background will be translucent. Browser support for backdrop-filter is required for the full effect +#### willAnimate + +boolean + +Toggles whether animation should occur or not + + ## Events #### ionLoadingDidDismiss diff --git a/packages/core/src/components/modal/modal.tsx b/packages/core/src/components/modal/modal.tsx index af08dd6c96..a29f69799d 100644 --- a/packages/core/src/components/modal/modal.tsx +++ b/packages/core/src/components/modal/modal.tsx @@ -78,7 +78,7 @@ export class Modal { @Prop() enterAnimation: AnimationBuilder; @Prop() leaveAnimation: AnimationBuilder; - @Prop() animate: boolean = true; + @Prop() willAnimate: boolean = true; @Prop({ mutable: true }) delegate: FrameworkDelegate; private animation: Animation; @@ -119,7 +119,7 @@ export class Modal { return this.animationCtrl.create(animationBuilder, this.el) .then(animation => { this.animation = animation; - if (!this.animate) this.animation = animation.duration(0); + if (!this.willAnimate) this.animation = animation.duration(0); return playAnimationAsync(animation); }) .then((animation) => { @@ -147,7 +147,7 @@ export class Modal { return this.animationCtrl.create(animationBuilder, this.el) .then(animation => { this.animation = animation; - if (!this.animate) { + if (!this.willAnimate) { this.animation = animation.duration(0); } return playAnimationAsync(animation); diff --git a/packages/core/src/components/modal/readme.md b/packages/core/src/components/modal/readme.md index bd65ec11f6..225c28183b 100644 --- a/packages/core/src/components/modal/readme.md +++ b/packages/core/src/components/modal/readme.md @@ -7,11 +7,6 @@ ## Properties -#### animate - -boolean - - #### color string @@ -67,13 +62,13 @@ string boolean +#### willAnimate + +boolean + + ## Attributes -#### animate - -boolean - - #### color string @@ -129,6 +124,11 @@ string boolean +#### willAnimate + +boolean + + ## Events #### ionModalDidDismiss diff --git a/packages/core/src/components/modal/test/basic/index.html b/packages/core/src/components/modal/test/basic/index.html index da85d5c14e..7b57a4e357 100644 --- a/packages/core/src/components/modal/test/basic/index.html +++ b/packages/core/src/components/modal/test/basic/index.html @@ -36,7 +36,7 @@ await modalController.componentOnReady(); // create component to open - const element = document.createElement('div'); + const element = document.createElement('ion-page'); element.innerHTML = ` diff --git a/packages/core/src/components/picker/picker.tsx b/packages/core/src/components/picker/picker.tsx index f46b339922..5fd99b7756 100644 --- a/packages/core/src/components/picker/picker.tsx +++ b/packages/core/src/components/picker/picker.tsx @@ -78,7 +78,7 @@ export class Picker { @Prop() pickerId: string; @Prop() showBackdrop: boolean = true; @Prop() enableBackdropDismiss: boolean = true; - @Prop() animate: boolean; + @Prop() willAnimate: boolean = true; @Prop() buttons: PickerButton[] = []; @Prop() columns: PickerColumn[] = []; @@ -100,7 +100,7 @@ export class Picker { // build the animation and kick it off return this.animationCtrl.create(animationBuilder, this.el).then(animation => { this.animation = animation; - if (!this.animate) { + if (!this.willAnimate) { // if the duration is 0, it won't actually animate I don't think // TODO - validate this this.animation = animation.duration(0); diff --git a/packages/core/src/components/picker/readme.md b/packages/core/src/components/picker/readme.md index f0cc4fe75b..3d816d5be0 100644 --- a/packages/core/src/components/picker/readme.md +++ b/packages/core/src/components/picker/readme.md @@ -7,11 +7,6 @@ ## Properties -#### animate - -boolean - - #### buttons any @@ -67,13 +62,13 @@ string boolean +#### willAnimate + +boolean + + ## Attributes -#### animate - -boolean - - #### buttons any @@ -129,6 +124,11 @@ string boolean +#### willAnimate + +boolean + + ## Events #### ionPickerDidDismiss diff --git a/packages/core/src/components/popover/popover.tsx b/packages/core/src/components/popover/popover.tsx index 395a17154c..f50ff5ad45 100644 --- a/packages/core/src/components/popover/popover.tsx +++ b/packages/core/src/components/popover/popover.tsx @@ -79,7 +79,7 @@ export class Popover { @Prop() popoverId: string; @Prop() showBackdrop: boolean = true; @Prop() translucent: boolean = false; - @Prop() animate: boolean = true; + @Prop() willAnimate: boolean = true; @Prop({ mutable: true }) delegate: FrameworkDelegate; private animation: Animation; @@ -120,7 +120,7 @@ export class Popover { }) .then((animation) => { this.animation = animation; - if (!this.animate) this.animation = animation.duration(0); + if (!this.willAnimate) this.animation = animation.duration(0); return playAnimationAsync(animation); }) .then((animation) => { diff --git a/packages/core/src/components/popover/readme.md b/packages/core/src/components/popover/readme.md index cfe0babf7d..15a0e2e295 100644 --- a/packages/core/src/components/popover/readme.md +++ b/packages/core/src/components/popover/readme.md @@ -7,11 +7,6 @@ ## Properties -#### animate - -boolean - - #### color string @@ -77,13 +72,13 @@ boolean boolean +#### willAnimate + +boolean + + ## Attributes -#### animate - -boolean - - #### color string @@ -149,6 +144,11 @@ boolean boolean +#### willAnimate + +boolean + + ## Events #### ionPopoverDidDismiss diff --git a/packages/core/src/components/toast/readme.md b/packages/core/src/components/toast/readme.md index cfca37b69a..5b83408800 100644 --- a/packages/core/src/components/toast/readme.md +++ b/packages/core/src/components/toast/readme.md @@ -7,11 +7,6 @@ ## Properties -#### animate - -boolean - - #### closeButtonText string @@ -67,13 +62,13 @@ string boolean +#### willAnimate + +boolean + + ## Attributes -#### animate - -boolean - - #### closeButtonText string @@ -129,6 +124,11 @@ string boolean +#### willAnimate + +boolean + + ## Events #### ionToastDidDismiss diff --git a/packages/core/src/components/toast/toast.tsx b/packages/core/src/components/toast/toast.tsx index fbf587cea9..78ad9f36e4 100644 --- a/packages/core/src/components/toast/toast.tsx +++ b/packages/core/src/components/toast/toast.tsx @@ -71,7 +71,7 @@ export class Toast { @Prop() position: string; @Prop() translucent: boolean = false; @Prop() toastId: string; - @Prop() animate: boolean = true; + @Prop() willAnimate: boolean = true; @Prop() enterAnimation: AnimationBuilder; @Prop() leaveAnimation: AnimationBuilder; @@ -90,7 +90,7 @@ export class Toast { // build the animation and kick it off return this.animationCtrl.create(animationBuilder, this.el, this.position).then(animation => { this.animation = animation; - if (!this.animate) { + if (!this.willAnimate) { // if the duration is 0, it won't actually animate I don't think // TODO - validate this this.animation = animation.duration(0);