diff --git a/angular/src/directives/css-utils-deprecations.ts b/angular/src/directives/css-utils-deprecations.ts
deleted file mode 100644
index 5ae5c0e86b0..00000000000
--- a/angular/src/directives/css-utils-deprecations.ts
+++ /dev/null
@@ -1,134 +0,0 @@
-import { Directive, ElementRef } from '@angular/core';
-
-@Directive({
- selector: '[align-self-start], [align-self-end], [align-self-center], [align-self-stretch], [align-self-baseline], [align-self-auto], [wrap-reverse], [justify-content-start], [justify-content-center], [justify-content-end], [justify-content-around], [justify-content-between], [justify-content-evenly], [align-items-start], [align-items-center], [align-items-end], [align-items-stretch], [align-items-baseline], [float-left], [float-right], [float-start], [float-end], [float-sm-left], [float-sm-right], [float-sm-start], [float-sm-end], [float-md-left], [float-md-right], [float-md-start], [float-md-end], [float-lg-left], [float-lg-right], [float-lg-start], [float-lg-end], [float-xl-left], [float-xl-right], [float-xl-start], [float-xl-end], [text-center], [text-justify], [text-start], [text-end], [text-left], [text-right], [text-nowrap], [text-wrap], [text-sm-center], [text-sm-justify], [text-sm-start], [text-sm-end], [text-sm-left], [text-sm-right], [text-sm-nowrap], [text-sm-wrap], [text-md-center], [text-md-justify], [text-md-start], [text-md-end], [text-md-left], [text-md-right], [text-md-nowrap], [text-md-wrap], [text-lg-center], [text-lg-justify], [text-lg-start], [text-lg-end], [text-lg-left], [text-lg-right], [text-lg-nowrap], [text-lg-wrap], [text-xl-center], [text-xl-justify], [text-xl-start], [text-xl-end], [text-xl-left], [text-xl-right], [text-xl-nowrap], [text-xl-wrap], [text-uppercase], [text-lowercase], [text-capitalize], [text-sm-uppercase], [text-sm-lowercase], [text-sm-capitalize], [text-md-uppercase], [text-md-lowercase], [text-md-capitalize], [text-lg-uppercase], [text-lg-lowercase], [text-lg-capitalize], [text-xl-uppercase], [text-xl-lowercase], [text-xl-capitalize], [no-padding], [padding], [padding-top], [padding-bottom], [padding-start], [padding-end], [padding-vertical], [padding-horizontal], [no-margin], [margin], [margin-top], [margin-bottom], [margin-start], [margin-end], [margin-vertical], [margin-horizontal]',
-})
-export class CssUtilsDeprecations {
- constructor(ref: ElementRef) {
- const el = (ref.nativeElement as HTMLElement);
- const attributes = Array.from(el.attributes)
- .map(a => a.name)
- .filter(n => DEPRECATED_ATTRIBUTES.includes(n));
-
- if (attributes.length > 0) {
- console.warn(`[DEPRECATED][CSS] Ionic CSS attributes are deprecated.
-Replace:
-'<${el.tagName.toLowerCase()} ${attributes.map(n => `${n}`).join(' ')}>'
-
-With:
-'<${el.tagName.toLowerCase()} class="${attributes.map(n => `ion-${n}`).join(' ')}">'
- `);
- }
- }
-}
-const DEPRECATED_ATTRIBUTES = [
- 'align-self-start',
- 'align-self-end',
- 'align-self-center',
- 'align-self-stretch',
- 'align-self-baseline',
- 'align-self-auto',
- 'wrap-reverse',
- 'justify-content-start',
- 'justify-content-center',
- 'justify-content-end',
- 'justify-content-around',
- 'justify-content-between',
- 'justify-content-evenly',
- 'align-items-start',
- 'align-items-center',
- 'align-items-end',
- 'align-items-stretch',
- 'align-items-baseline',
- 'float-left',
- 'float-right',
- 'float-start',
- 'float-end',
- 'float-sm-left',
- 'float-sm-right',
- 'float-sm-start',
- 'float-sm-end',
- 'float-md-left',
- 'float-md-right',
- 'float-md-start',
- 'float-md-end',
- 'float-lg-left',
- 'float-lg-right',
- 'float-lg-start',
- 'float-lg-end',
- 'float-xl-left',
- 'float-xl-right',
- 'float-xl-start',
- 'float-xl-end',
- 'text-center',
- 'text-justify',
- 'text-start',
- 'text-end',
- 'text-left',
- 'text-right',
- 'text-nowrap',
- 'text-wrap',
- 'text-sm-center',
- 'text-sm-justify',
- 'text-sm-start',
- 'text-sm-end',
- 'text-sm-left',
- 'text-sm-right',
- 'text-sm-nowrap',
- 'text-sm-wrap',
- 'text-md-center',
- 'text-md-justify',
- 'text-md-start',
- 'text-md-end',
- 'text-md-left',
- 'text-md-right',
- 'text-md-nowrap',
- 'text-md-wrap',
- 'text-lg-center',
- 'text-lg-justify',
- 'text-lg-start',
- 'text-lg-end',
- 'text-lg-left',
- 'text-lg-right',
- 'text-lg-nowrap',
- 'text-lg-wrap',
- 'text-xl-center',
- 'text-xl-justify',
- 'text-xl-start',
- 'text-xl-end',
- 'text-xl-left',
- 'text-xl-right',
- 'text-xl-nowrap',
- 'text-xl-wrap',
- 'text-uppercase',
- 'text-lowercase',
- 'text-capitalize',
- 'text-sm-uppercase',
- 'text-sm-lowercase',
- 'text-sm-capitalize',
- 'text-md-uppercase',
- 'text-md-lowercase',
- 'text-md-capitalize',
- 'text-lg-uppercase',
- 'text-lg-lowercase',
- 'text-lg-capitalize',
- 'text-xl-uppercase',
- 'text-xl-lowercase',
- 'text-xl-capitalize',
- 'no-padding',
- 'padding',
- 'padding-top',
- 'padding-bottom',
- 'padding-start',
- 'padding-end',
- 'padding-vertical',
- 'padding-horizontal',
- 'no-margin',
- 'margin',
- 'margin-top',
- 'margin-bottom',
- 'margin-start',
- 'margin-end',
- 'margin-vertical',
- 'margin-horizontal'
-];
diff --git a/angular/src/directives/proxies-list.txt b/angular/src/directives/proxies-list.txt
index 443628c5c07..0f06d58842e 100644
--- a/angular/src/directives/proxies-list.txt
+++ b/angular/src/directives/proxies-list.txt
@@ -44,9 +44,6 @@ d.IonApp,
d.IonMenuToggle,
d.IonNav,
d.IonNavLink,
- d.IonNavPop,
- d.IonNavPush,
- d.IonNavSetRoot,
d.IonNote,
d.IonProgressBar,
d.IonRadio,
diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts
index 482b67d795b..d8d79475299 100644
--- a/angular/src/directives/proxies.ts
+++ b/angular/src/directives/proxies.ts
@@ -517,38 +517,6 @@ export class IonNavLink {
}
proxyInputs(IonNavLink, ['component', 'componentProps', 'routerDirection']);
-export declare interface IonNavPop extends Components.IonNavPop {}
-@Component({ selector: 'ion-nav-pop', changeDetection: ChangeDetectionStrategy.OnPush, template: '' })
-export class IonNavPop {
- protected el: HTMLElement;
- constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
- c.detach();
- this.el = r.nativeElement;
- }
-}
-
-export declare interface IonNavPush extends Components.IonNavPush {}
-@Component({ selector: 'ion-nav-push', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['component', 'componentProps'] })
-export class IonNavPush {
- protected el: HTMLElement;
- constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
- c.detach();
- this.el = r.nativeElement;
- }
-}
-proxyInputs(IonNavPush, ['component', 'componentProps']);
-
-export declare interface IonNavSetRoot extends Components.IonNavSetRoot {}
-@Component({ selector: 'ion-nav-set-root', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['component', 'componentProps'] })
-export class IonNavSetRoot {
- protected el: HTMLElement;
- constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
- c.detach();
- this.el = r.nativeElement;
- }
-}
-proxyInputs(IonNavSetRoot, ['component', 'componentProps']);
-
export declare interface IonNote extends Components.IonNote {}
@Component({ selector: 'ion-note', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['color', 'mode'] })
export class IonNote {
@@ -761,7 +729,7 @@ export class IonSelectOption {
proxyInputs(IonSelectOption, ['disabled', 'selected', 'value']);
export declare interface IonSkeletonText extends Components.IonSkeletonText {}
-@Component({ selector: 'ion-skeleton-text', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['animated', 'width'] })
+@Component({ selector: 'ion-skeleton-text', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['animated'] })
export class IonSkeletonText {
protected el: HTMLElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
@@ -769,7 +737,7 @@ export class IonSkeletonText {
this.el = r.nativeElement;
}
}
-proxyInputs(IonSkeletonText, ['animated', 'width']);
+proxyInputs(IonSkeletonText, ['animated']);
export declare interface IonSlide extends Components.IonSlide {}
@Component({ selector: 'ion-slide', changeDetection: ChangeDetectionStrategy.OnPush, template: '' })
diff --git a/angular/src/index.ts b/angular/src/index.ts
index 0ca141a061c..9229d5e6e3e 100644
--- a/angular/src/index.ts
+++ b/angular/src/index.ts
@@ -14,14 +14,12 @@ export { IonVirtualScroll } from './directives/virtual-scroll/virtual-scroll';
export { VirtualItem } from './directives/virtual-scroll/virtual-item';
export { VirtualHeader } from './directives/virtual-scroll/virtual-header';
export { VirtualFooter } from './directives/virtual-scroll/virtual-footer';
-export { CssUtilsDeprecations } from './directives/css-utils-deprecations';
export * from './directives/proxies';
// PROVIDERS
export { AngularDelegate } from './providers/angular-delegate';
export { ActionSheetController } from './providers/action-sheet-controller';
export { AlertController } from './providers/alert-controller';
-export { Events } from './providers/events';
export { LoadingController } from './providers/loading-controller';
export { MenuController } from './providers/menu-controller';
export { PickerController } from './providers/picker-controller';
diff --git a/angular/src/ionic-module.ts b/angular/src/ionic-module.ts
index 8260c3b861e..04d1fd4eaef 100644
--- a/angular/src/ionic-module.ts
+++ b/angular/src/ionic-module.ts
@@ -8,13 +8,12 @@ import { NumericValueAccessor } from './directives/control-value-accessors/numer
import { RadioValueAccessor } from './directives/control-value-accessors/radio-value-accessor';
import { SelectValueAccessor } from './directives/control-value-accessors/select-value-accessor';
import { TextValueAccessor } from './directives/control-value-accessors/text-value-accessor';
-import { CssUtilsDeprecations } from './directives/css-utils-deprecations';
import { IonBackButtonDelegate } from './directives/navigation/ion-back-button';
import { IonRouterOutlet } from './directives/navigation/ion-router-outlet';
import { IonTabs } from './directives/navigation/ion-tabs';
import { NavDelegate } from './directives/navigation/nav-delegate';
import { RouterLinkDelegate } from './directives/navigation/router-link-delegate';
-import { IonApp, IonAvatar, IonBackButton, IonBackdrop, IonBadge, IonButton, IonButtons, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonCheckbox, IonChip, IonCol, IonContent, IonDatetime, IonFab, IonFabButton, IonFabList, IonFooter, IonGrid, IonHeader, IonIcon, IonImg, IonInfiniteScroll, IonInfiniteScrollContent, IonInput, IonItem, IonItemDivider, IonItemGroup, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList, IonListHeader, IonMenu, IonMenuButton, IonMenuToggle, IonNav, IonNavLink, IonNavPop, IonNavPush, IonNavSetRoot, IonNote, IonProgressBar, IonRadio, IonRadioGroup, IonRange, IonRefresher, IonRefresherContent, IonReorder, IonReorderGroup, IonRippleEffect, IonRow, IonSearchbar, IonSegment, IonSegmentButton, IonSelect, IonSelectOption, IonSkeletonText, IonSlide, IonSlides, IonSpinner, IonSplitPane, IonTabBar, IonTabButton, IonText, IonTextarea, IonThumbnail, IonTitle, IonToggle, IonToolbar } from './directives/proxies';
+import { IonApp, IonAvatar, IonBackButton, IonBackdrop, IonBadge, IonButton, IonButtons, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonCheckbox, IonChip, IonCol, IonContent, IonDatetime, IonFab, IonFabButton, IonFabList, IonFooter, IonGrid, IonHeader, IonIcon, IonImg, IonInfiniteScroll, IonInfiniteScrollContent, IonInput, IonItem, IonItemDivider, IonItemGroup, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList, IonListHeader, IonMenu, IonMenuButton, IonMenuToggle, IonNav, IonNavLink, IonNote, IonProgressBar, IonRadio, IonRadioGroup, IonRange, IonRefresher, IonRefresherContent, IonReorder, IonReorderGroup, IonRippleEffect, IonRow, IonSearchbar, IonSegment, IonSegmentButton, IonSelect, IonSelectOption, IonSkeletonText, IonSlide, IonSlides, IonSpinner, IonSplitPane, IonTabBar, IonTabButton, IonText, IonTextarea, IonThumbnail, IonTitle, IonToggle, IonToolbar } from './directives/proxies';
import { VirtualFooter } from './directives/virtual-scroll/virtual-footer';
import { VirtualHeader } from './directives/virtual-scroll/virtual-header';
import { VirtualItem } from './directives/virtual-scroll/virtual-item';
@@ -68,9 +67,6 @@ const DECLARATIONS = [
IonMenuToggle,
IonNav,
IonNavLink,
- IonNavPop,
- IonNavPush,
- IonNavSetRoot,
IonNote,
IonProgressBar,
IonRadio,
@@ -120,10 +116,7 @@ const DECLARATIONS = [
VirtualFooter,
VirtualHeader,
VirtualItem,
- IonVirtualScroll,
-
- // Deprecations
- CssUtilsDeprecations
+ IonVirtualScroll
];
@NgModule({
diff --git a/angular/src/providers/events.ts b/angular/src/providers/events.ts
deleted file mode 100644
index 609a8b9ef63..00000000000
--- a/angular/src/providers/events.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-import { Injectable } from '@angular/core';
-
-export type EventHandler = (...args: any[]) => any;
-@Injectable({
- providedIn: 'root',
-})
-export class Events {
- private c = new Map();
-
- constructor() {
- console.warn(`[DEPRECATION][Events]: The Events provider is deprecated and it will be removed in the next major release.
- - Use "Observables" for a similar pub/sub architecture: https://angular.io/guide/observables
- - Use "Redux" for advanced state management: https://ngrx.io`);
- }
- /**
- * Subscribe to an event topic. Events that get posted to that topic will trigger the provided handler.
- *
- * @param topic the topic to subscribe to
- * @param handler the event handler
- */
- subscribe(topic: string, ...handlers: EventHandler[]) {
- let topics = this.c.get(topic);
- if (!topics) {
- this.c.set(topic, topics = []);
- }
- topics.push(...handlers);
- }
-
- /**
- * Unsubscribe from the given topic. Your handler will no longer receive events published to this topic.
- *
- * @param topic the topic to unsubscribe from
- * @param handler the event handler
- *
- * @return true if a handler was removed
- */
- unsubscribe(topic: string, handler?: EventHandler): boolean {
- if (!handler) {
- return this.c.delete(topic);
- }
-
- const topics = this.c.get(topic);
- if (!topics) {
- return false;
- }
-
- // We need to find and remove a specific handler
- const index = topics.indexOf(handler);
-
- if (index < 0) {
- // Wasn't found, wasn't removed
- return false;
- }
- topics.splice(index, 1);
- if (topics.length === 0) {
- this.c.delete(topic);
- }
- return true;
- }
-
- /**
- * Publish an event to the given topic.
- *
- * @param topic the topic to publish to
- * @param eventData the data to send as the event
- */
- publish(topic: string, ...args: any[]): any[] | null {
- const topics = this.c.get(topic);
- if (!topics) {
- return null;
- }
- return topics.map(handler => {
- try {
- return handler(...args);
- } catch (e) {
- console.error(e);
- return null;
- }
- });
- }
-}
diff --git a/angular/src/providers/menu-controller.ts b/angular/src/providers/menu-controller.ts
index 68f508fc154..f8bc60fc378 100644
--- a/angular/src/providers/menu-controller.ts
+++ b/angular/src/providers/menu-controller.ts
@@ -48,18 +48,6 @@ export class MenuController {
return menuController.enable(shouldEnable, menuId);
}
- /**
- * Used to enable or disable the ability to swipe open the menu.
- * @param shouldEnable True if it should be swipe-able, false if not.
- * @param [menuId] Optionally get the menu by its id, or side.
- * @return Returns the instance of the menu, which is useful for chaining.
- * @deprecated Use swipeGesture() instead.
- */
- swipeEnable(shouldEnable: boolean, menuId?: string) {
- console.warn('[DEPRECATED][ion-menu-controller] swipeEnable() is deprecated. Use MenuController.swipeGesture() instead');
- return this.swipeGesture(shouldEnable, menuId);
- }
-
/**
* Used to enable or disable the ability to swipe open the menu.
* @param shouldEnable True if it should be swipe-able, false if not.
diff --git a/angular/test/test-app/src/app/providers/providers.component.ts b/angular/test/test-app/src/app/providers/providers.component.ts
index 9fb270e5168..7e6436d7ded 100644
--- a/angular/test/test-app/src/app/providers/providers.component.ts
+++ b/angular/test/test-app/src/app/providers/providers.component.ts
@@ -1,7 +1,7 @@
import { Component, NgZone } from '@angular/core';
import {
Platform, ModalController, AlertController, ActionSheetController,
- PopoverController, ToastController, Events, PickerController, MenuController,
+ PopoverController, ToastController, PickerController, MenuController,
LoadingController, NavController, DomController, Config
} from '@ionic/angular';
@@ -13,7 +13,6 @@ export class ProvidersComponent {
isLoaded = false;
isReady = false;
- isEvent = false;
isResumed = false;
isPaused = false;
isResized = false;
@@ -25,7 +24,6 @@ export class ProvidersComponent {
constructor(
actionSheetCtrl: ActionSheetController,
alertCtrl: AlertController,
- events: Events,
loadingCtrl: LoadingController,
menuCtrl: MenuController,
pickerCtrl: PickerController,
@@ -40,7 +38,7 @@ export class ProvidersComponent {
) {
// test all providers load
if (
- actionSheetCtrl && alertCtrl && events && loadingCtrl && menuCtrl && pickerCtrl &&
+ actionSheetCtrl && alertCtrl && loadingCtrl && menuCtrl && pickerCtrl &&
modalCtrl && platform && popoverCtrl && toastCtrl && navCtrl && domCtrl && config
) {
this.isLoaded = true;
@@ -69,13 +67,6 @@ export class ProvidersComponent {
this.isDesktop = platform.is('desktop');
this.isMobile = platform.is('mobile');
- // test events
- events.subscribe('topic', () => {
- this.isEvent = true;
- NgZone.assertInAngularZone();
- });
- events.publish('topic');
-
// test config
this.isTesting = config.getBoolean('_testing');
config.set('keyboardHeight', 12345);
diff --git a/core/api.txt b/core/api.txt
index e35a256247c..dcb44b77d54 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -19,6 +19,7 @@ ion-action-sheet,event,ionActionSheetDidDismiss,OverlayEventDetail,true
ion-action-sheet,event,ionActionSheetDidPresent,void,true
ion-action-sheet,event,ionActionSheetWillDismiss,OverlayEventDetail,true
ion-action-sheet,event,ionActionSheetWillPresent,void,true
+ion-action-sheet,css-prop,--backdrop-opacity
ion-action-sheet,css-prop,--background
ion-action-sheet,css-prop,--background-activated
ion-action-sheet,css-prop,--background-selected
@@ -57,6 +58,7 @@ ion-alert,event,ionAlertDidDismiss,OverlayEventDetail,true
ion-alert,event,ionAlertDidPresent,void,true
ion-alert,event,ionAlertWillDismiss,OverlayEventDetail,true
ion-alert,event,ionAlertWillPresent,void,true
+ion-alert,css-prop,--backdrop-opacity
ion-alert,css-prop,--background
ion-alert,css-prop,--height
ion-alert,css-prop,--max-height
@@ -70,14 +72,6 @@ ion-alert-controller,method,create,create(options: AlertOptions) => Promise Promise
ion-alert-controller,method,getTop,getTop() => Promise
-ion-anchor,shadow
-ion-anchor,prop,color,string | undefined,undefined,false,false
-ion-anchor,prop,href,string | undefined,undefined,false,false
-ion-anchor,prop,rel,string | undefined,undefined,false,false
-ion-anchor,prop,routerDirection,"back" | "forward" | "root",'forward',false,false
-ion-anchor,css-prop,--background
-ion-anchor,css-prop,--color
-
ion-app,none
ion-avatar,shadow
@@ -597,6 +591,7 @@ ion-loading,event,ionLoadingDidDismiss,OverlayEventDetail,true
ion-loading,event,ionLoadingDidPresent,void,true
ion-loading,event,ionLoadingWillDismiss,OverlayEventDetail,true
ion-loading,event,ionLoadingWillPresent,void,true
+ion-loading,css-prop,--backdrop-opacity
ion-loading,css-prop,--background
ion-loading,css-prop,--height
ion-loading,css-prop,--max-height
@@ -692,6 +687,7 @@ ion-modal,event,ionModalDidDismiss,OverlayEventDetail,true
ion-modal,event,ionModalDidPresent,void,true
ion-modal,event,ionModalWillDismiss,OverlayEventDetail,true
ion-modal,event,ionModalWillPresent,void,true
+ion-modal,css-prop,--backdrop-opacity
ion-modal,css-prop,--background
ion-modal,css-prop,--border-color
ion-modal,css-prop,--border-radius
@@ -736,16 +732,6 @@ ion-nav-link,prop,component,Function | HTMLElement | ViewController | null | str
ion-nav-link,prop,componentProps,undefined | { [key: string]: any; },undefined,false,false
ion-nav-link,prop,routerDirection,"back" | "forward" | "root",'forward',false,false
-ion-nav-pop,none
-
-ion-nav-push,none
-ion-nav-push,prop,component,Function | HTMLElement | ViewController | null | string | undefined,undefined,false,false
-ion-nav-push,prop,componentProps,undefined | { [key: string]: any; },undefined,false,false
-
-ion-nav-set-root,none
-ion-nav-set-root,prop,component,Function | HTMLElement | ViewController | null | string | undefined,undefined,false,false
-ion-nav-set-root,prop,componentProps,undefined | { [key: string]: any; },undefined,false,false
-
ion-note,shadow
ion-note,prop,color,string | undefined,undefined,false,false
ion-note,prop,mode,"ios" | "md",undefined,false,false
@@ -772,6 +758,7 @@ ion-picker,event,ionPickerDidDismiss,OverlayEventDetail,true
ion-picker,event,ionPickerDidPresent,void,true
ion-picker,event,ionPickerWillDismiss,OverlayEventDetail,true
ion-picker,event,ionPickerWillPresent,void,true
+ion-picker,css-prop,--backdrop-opacity
ion-picker,css-prop,--background
ion-picker,css-prop,--background-rgb
ion-picker,css-prop,--border-color
@@ -811,6 +798,7 @@ ion-popover,event,ionPopoverDidDismiss,OverlayEventDetail,true
ion-popover,event,ionPopoverDidPresent,void,true
ion-popover,event,ionPopoverWillDismiss,OverlayEventDetail,true
ion-popover,event,ionPopoverWillPresent,void,true
+ion-popover,css-prop,--backdrop-opacity
ion-popover,css-prop,--background
ion-popover,css-prop,--box-shadow
ion-popover,css-prop,--height
@@ -964,7 +952,7 @@ ion-searchbar,prop,inputmode,"decimal" | "email" | "none" | "numeric" | "search"
ion-searchbar,prop,mode,"ios" | "md",undefined,false,false
ion-searchbar,prop,placeholder,string,'Search',false,false
ion-searchbar,prop,searchIcon,string,'search',false,false
-ion-searchbar,prop,showCancelButton,boolean | string,'never',false,false
+ion-searchbar,prop,showCancelButton,"always" | "focus" | "never",'never',false,false
ion-searchbar,prop,spellcheck,boolean,false,false,false
ion-searchbar,prop,type,"email" | "number" | "password" | "search" | "tel" | "text" | "url",'search',false,false
ion-searchbar,prop,value,null | string | undefined,'',false,false
@@ -1057,7 +1045,6 @@ ion-select-option,prop,value,any,undefined,false,false
ion-skeleton-text,shadow
ion-skeleton-text,prop,animated,boolean,false,false,false
-ion-skeleton-text,prop,width,string | undefined,undefined,false,false
ion-skeleton-text,css-prop,--background
ion-skeleton-text,css-prop,--background-rgb
ion-skeleton-text,css-prop,--border-radius
@@ -1213,7 +1200,6 @@ ion-title,css-prop,--color
ion-toast,shadow
ion-toast,prop,animated,boolean,true,false,false
ion-toast,prop,buttons,(string | ToastButton)[] | undefined,undefined,false,false
-ion-toast,prop,closeButtonText,string | undefined,undefined,false,false
ion-toast,prop,color,string | undefined,undefined,false,false
ion-toast,prop,cssClass,string | string[] | undefined,undefined,false,false
ion-toast,prop,duration,number,0,false,false
@@ -1224,7 +1210,6 @@ ion-toast,prop,leaveAnimation,((Animation: Animation, baseEl: any, opts?: any) =
ion-toast,prop,message,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,showCloseButton,boolean,false,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 7df5c4f4087..7cb1da1cd6f 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -253,24 +253,6 @@ export namespace Components {
*/
'getTop': () => Promise;
}
- interface IonAnchor {
- /**
- * 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).
- */
- 'color'?: Color;
- /**
- * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
- */
- 'href': string | undefined;
- /**
- * Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
- */
- 'rel': string | undefined;
- /**
- * When using a router, it specifies the transition direction when navigating to another page using `href`.
- */
- 'routerDirection': RouterDirection;
- }
interface IonApp {}
interface IonAvatar {}
interface IonBackButton {
@@ -1662,27 +1644,6 @@ export namespace Components {
*/
'routerDirection': RouterDirection;
}
- interface IonNavPop {}
- interface IonNavPush {
- /**
- * Component to navigate to
- */
- 'component'?: NavComponent;
- /**
- * Data you want to pass to the component as props
- */
- 'componentProps'?: ComponentProps;
- }
- interface IonNavSetRoot {
- /**
- * Component you want to make root for the navigation stack
- */
- 'component'?: NavComponent;
- /**
- * Data you want to pass to the component as props
- */
- 'componentProps'?: ComponentProps;
- }
interface IonNote {
/**
* 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).
@@ -2227,7 +2188,7 @@ export namespace Components {
/**
* Sets the behavior for the cancel button. Defaults to `"never"`. Setting to `"focus"` shows the cancel button on focus. Setting to `"never"` hides the cancel button. Setting to `"always"` shows the cancel button regardless of focus state.
*/
- 'showCancelButton': boolean | string;
+ 'showCancelButton': 'never' | 'focus' | 'always';
/**
* If `true`, enable spellcheck on the input.
*/
@@ -2381,10 +2342,6 @@ export namespace Components {
* If `true`, the skeleton text will animate.
*/
'animated': boolean;
- /**
- * @deprecated Use CSS instead. The width of the skeleton text. If supplied, it will override the CSS style.
- */
- 'width'?: string;
}
interface IonSlide {}
interface IonSlides {
@@ -2500,7 +2457,7 @@ export namespace Components {
}
interface IonSplitPane {
/**
- * The content `id` of the split-pane's main content. This property can be used instead of the `[main]` attribute to select the `main` content of the split-pane.
+ * The content `id` of the split-pane's main content.
*/
'contentId'?: string;
/**
@@ -2720,10 +2677,6 @@ export namespace Components {
*/
'buttons'?: (ToastButton | string)[];
/**
- * @deprecated Use `buttons` instead. Text to display in the close button.
- */
- 'closeButtonText'?: string;
- /**
* 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).
*/
'color'?: Color;
@@ -2783,10 +2736,6 @@ export namespace Components {
*/
'present': () => Promise;
/**
- * @deprecated Use `buttons` instead. If `true`, the close button will be displayed.
- */
- 'showCloseButton': boolean;
- /**
* 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).
*/
'translucent': boolean;
@@ -2941,12 +2890,6 @@ declare global {
new (): HTMLIonAlertControllerElement;
};
- interface HTMLIonAnchorElement extends Components.IonAnchor, HTMLStencilElement {}
- var HTMLIonAnchorElement: {
- prototype: HTMLIonAnchorElement;
- new (): HTMLIonAnchorElement;
- };
-
interface HTMLIonAppElement extends Components.IonApp, HTMLStencilElement {}
var HTMLIonAppElement: {
prototype: HTMLIonAppElement;
@@ -3223,24 +3166,6 @@ declare global {
new (): HTMLIonNavLinkElement;
};
- interface HTMLIonNavPopElement extends Components.IonNavPop, HTMLStencilElement {}
- var HTMLIonNavPopElement: {
- prototype: HTMLIonNavPopElement;
- new (): HTMLIonNavPopElement;
- };
-
- interface HTMLIonNavPushElement extends Components.IonNavPush, HTMLStencilElement {}
- var HTMLIonNavPushElement: {
- prototype: HTMLIonNavPushElement;
- new (): HTMLIonNavPushElement;
- };
-
- interface HTMLIonNavSetRootElement extends Components.IonNavSetRoot, HTMLStencilElement {}
- var HTMLIonNavSetRootElement: {
- prototype: HTMLIonNavSetRootElement;
- new (): HTMLIonNavSetRootElement;
- };
-
interface HTMLIonNoteElement extends Components.IonNote, HTMLStencilElement {}
var HTMLIonNoteElement: {
prototype: HTMLIonNoteElement;
@@ -3515,7 +3440,6 @@ declare global {
'ion-action-sheet-controller': HTMLIonActionSheetControllerElement;
'ion-alert': HTMLIonAlertElement;
'ion-alert-controller': HTMLIonAlertControllerElement;
- 'ion-anchor': HTMLIonAnchorElement;
'ion-app': HTMLIonAppElement;
'ion-avatar': HTMLIonAvatarElement;
'ion-back-button': HTMLIonBackButtonElement;
@@ -3562,9 +3486,6 @@ declare global {
'ion-modal-controller': HTMLIonModalControllerElement;
'ion-nav': HTMLIonNavElement;
'ion-nav-link': HTMLIonNavLinkElement;
- 'ion-nav-pop': HTMLIonNavPopElement;
- 'ion-nav-push': HTMLIonNavPushElement;
- 'ion-nav-set-root': HTMLIonNavSetRootElement;
'ion-note': HTMLIonNoteElement;
'ion-picker': HTMLIonPickerElement;
'ion-picker-column': HTMLIonPickerColumnElement;
@@ -3748,24 +3669,6 @@ declare namespace LocalJSX {
'translucent'?: boolean;
}
interface IonAlertController {}
- interface IonAnchor {
- /**
- * 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).
- */
- 'color'?: Color;
- /**
- * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
- */
- 'href'?: string | undefined;
- /**
- * Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
- */
- 'rel'?: string | undefined;
- /**
- * When using a router, it specifies the transition direction when navigating to another page using `href`.
- */
- 'routerDirection'?: RouterDirection;
- }
interface IonApp {}
interface IonAvatar {}
interface IonBackButton {
@@ -4992,27 +4895,6 @@ declare namespace LocalJSX {
*/
'routerDirection'?: RouterDirection;
}
- interface IonNavPop {}
- interface IonNavPush {
- /**
- * Component to navigate to
- */
- 'component'?: NavComponent;
- /**
- * Data you want to pass to the component as props
- */
- 'componentProps'?: ComponentProps;
- }
- interface IonNavSetRoot {
- /**
- * Component you want to make root for the navigation stack
- */
- 'component'?: NavComponent;
- /**
- * Data you want to pass to the component as props
- */
- 'componentProps'?: ComponentProps;
- }
interface IonNote {
/**
* 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).
@@ -5547,7 +5429,7 @@ declare namespace LocalJSX {
/**
* Sets the behavior for the cancel button. Defaults to `"never"`. Setting to `"focus"` shows the cancel button on focus. Setting to `"never"` hides the cancel button. Setting to `"always"` shows the cancel button regardless of focus state.
*/
- 'showCancelButton'?: boolean | string;
+ 'showCancelButton'?: 'never' | 'focus' | 'always';
/**
* If `true`, enable spellcheck on the input.
*/
@@ -5720,10 +5602,6 @@ declare namespace LocalJSX {
* If `true`, the skeleton text will animate.
*/
'animated'?: boolean;
- /**
- * @deprecated Use CSS instead. The width of the skeleton text. If supplied, it will override the CSS style.
- */
- 'width'?: string;
}
interface IonSlide {}
interface IonSlides {
@@ -5828,7 +5706,7 @@ declare namespace LocalJSX {
}
interface IonSplitPane {
/**
- * The content `id` of the split-pane's main content. This property can be used instead of the `[main]` attribute to select the `main` content of the split-pane.
+ * The content `id` of the split-pane's main content.
*/
'contentId'?: string;
/**
@@ -6045,10 +5923,6 @@ declare namespace LocalJSX {
*/
'buttons'?: (ToastButton | string)[];
/**
- * @deprecated Use `buttons` instead. Text to display in the close button.
- */
- 'closeButtonText'?: string;
- /**
* 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).
*/
'color'?: Color;
@@ -6105,10 +5979,6 @@ declare namespace LocalJSX {
*/
'position'?: 'top' | 'bottom' | 'middle';
/**
- * @deprecated Use `buttons` instead. If `true`, the close button will be displayed.
- */
- 'showCloseButton'?: boolean;
- /**
* 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).
*/
'translucent'?: boolean;
@@ -6222,7 +6092,6 @@ declare namespace LocalJSX {
'ion-action-sheet-controller': IonActionSheetController;
'ion-alert': IonAlert;
'ion-alert-controller': IonAlertController;
- 'ion-anchor': IonAnchor;
'ion-app': IonApp;
'ion-avatar': IonAvatar;
'ion-back-button': IonBackButton;
@@ -6269,9 +6138,6 @@ declare namespace LocalJSX {
'ion-modal-controller': IonModalController;
'ion-nav': IonNav;
'ion-nav-link': IonNavLink;
- 'ion-nav-pop': IonNavPop;
- 'ion-nav-push': IonNavPush;
- 'ion-nav-set-root': IonNavSetRoot;
'ion-note': IonNote;
'ion-picker': IonPicker;
'ion-picker-column': IonPickerColumn;
@@ -6330,7 +6196,6 @@ declare module "@stencil/core" {
'ion-action-sheet-controller': LocalJSX.IonActionSheetController & JSXBase.HTMLAttributes;
'ion-alert': LocalJSX.IonAlert & JSXBase.HTMLAttributes;
'ion-alert-controller': LocalJSX.IonAlertController & JSXBase.HTMLAttributes;
- 'ion-anchor': LocalJSX.IonAnchor & JSXBase.HTMLAttributes;
'ion-app': LocalJSX.IonApp & JSXBase.HTMLAttributes;
'ion-avatar': LocalJSX.IonAvatar & JSXBase.HTMLAttributes;
'ion-back-button': LocalJSX.IonBackButton & JSXBase.HTMLAttributes;
@@ -6377,9 +6242,6 @@ declare module "@stencil/core" {
'ion-modal-controller': LocalJSX.IonModalController & JSXBase.HTMLAttributes;
'ion-nav': LocalJSX.IonNav & JSXBase.HTMLAttributes;
'ion-nav-link': LocalJSX.IonNavLink & JSXBase.HTMLAttributes;
- 'ion-nav-pop': LocalJSX.IonNavPop & JSXBase.HTMLAttributes;
- 'ion-nav-push': LocalJSX.IonNavPush & JSXBase.HTMLAttributes;
- 'ion-nav-set-root': LocalJSX.IonNavSetRoot & JSXBase.HTMLAttributes;
'ion-note': LocalJSX.IonNote & JSXBase.HTMLAttributes;
'ion-picker': LocalJSX.IonPicker & JSXBase.HTMLAttributes;
'ion-picker-column': LocalJSX.IonPickerColumn & JSXBase.HTMLAttributes;
diff --git a/core/src/components/action-sheet/action-sheet.ios.scss b/core/src/components/action-sheet/action-sheet.ios.scss
index 69f77b5340d..afe9f36cf2c 100644
--- a/core/src/components/action-sheet/action-sheet.ios.scss
+++ b/core/src/components/action-sheet/action-sheet.ios.scss
@@ -8,6 +8,7 @@
--background: #{$action-sheet-ios-background-color};
--background-selected: #{$action-sheet-ios-button-background-selected};
--background-activated: #{$action-sheet-ios-button-background-activated};
+ --backdrop-opacity: var(--ion-backdrop-opacity, 0.4);
text-align: $action-sheet-ios-text-align;
}
diff --git a/core/src/components/action-sheet/action-sheet.md.scss b/core/src/components/action-sheet/action-sheet.md.scss
index 79d577d9b55..f080453ea94 100644
--- a/core/src/components/action-sheet/action-sheet.md.scss
+++ b/core/src/components/action-sheet/action-sheet.md.scss
@@ -8,6 +8,7 @@
--background: #{$action-sheet-md-background-color};
--background-selected: #{var(--background, $action-sheet-md-button-background-selected)};
--background-activated: var(--background);
+ --backdrop-opacity: var(--ion-backdrop-opacity, 0.32);
}
.action-sheet-title {
diff --git a/core/src/components/action-sheet/action-sheet.scss b/core/src/components/action-sheet/action-sheet.scss
index b7230b5adbf..f93646cea3c 100644
--- a/core/src/components/action-sheet/action-sheet.scss
+++ b/core/src/components/action-sheet/action-sheet.scss
@@ -18,6 +18,8 @@
* @prop --min-height: Minimum height of the action sheet
* @prop --height: height of the action sheet
* @prop --max-height: Maximum height of the action sheet
+ *
+ * @prop --backdrop-opacity: Opacity of the backdrop
*/
--color: initial;
--min-width: auto;
diff --git a/core/src/components/action-sheet/animations/ios.enter.ts b/core/src/components/action-sheet/animations/ios.enter.ts
index 40fd7abda81..9e4363869d3 100644
--- a/core/src/components/action-sheet/animations/ios.enter.ts
+++ b/core/src/components/action-sheet/animations/ios.enter.ts
@@ -11,7 +11,7 @@ export const iosEnterAnimation = (baseEl: HTMLElement): IonicAnimation => {
backdropAnimation
.addElement(baseEl.querySelector('ion-backdrop')!)
- .fromTo('opacity', 0.01, 0.4);
+ .fromTo('opacity', 0.01, 'var(--backdrop-opacity)');
wrapperAnimation
.addElement(baseEl.querySelector('.action-sheet-wrapper')!)
diff --git a/core/src/components/action-sheet/animations/ios.leave.ts b/core/src/components/action-sheet/animations/ios.leave.ts
index 52e4ff45230..414ebfebfc0 100644
--- a/core/src/components/action-sheet/animations/ios.leave.ts
+++ b/core/src/components/action-sheet/animations/ios.leave.ts
@@ -11,7 +11,7 @@ export const iosLeaveAnimation = (baseEl: HTMLElement): IonicAnimation => {
backdropAnimation
.addElement(baseEl.querySelector('ion-backdrop')!)
- .fromTo('opacity', 0.4, 0);
+ .fromTo('opacity', 'var(--backdrop-opacity)', 0);
wrapperAnimation
.addElement(baseEl.querySelector('.action-sheet-wrapper')!)
diff --git a/core/src/components/action-sheet/animations/md.enter.ts b/core/src/components/action-sheet/animations/md.enter.ts
index 3ad476c8aa9..97288a10d36 100644
--- a/core/src/components/action-sheet/animations/md.enter.ts
+++ b/core/src/components/action-sheet/animations/md.enter.ts
@@ -11,7 +11,7 @@ export const mdEnterAnimation = (baseEl: HTMLElement): IonicAnimation => {
backdropAnimation
.addElement(baseEl.querySelector('ion-backdrop')!)
- .fromTo('opacity', 0.01, 0.32);
+ .fromTo('opacity', 0.01, 'var(--backdrop-opacity)');
wrapperAnimation
.addElement(baseEl.querySelector('.action-sheet-wrapper')!)
diff --git a/core/src/components/action-sheet/animations/md.leave.ts b/core/src/components/action-sheet/animations/md.leave.ts
index 468b79f5010..b3251b74f69 100644
--- a/core/src/components/action-sheet/animations/md.leave.ts
+++ b/core/src/components/action-sheet/animations/md.leave.ts
@@ -11,7 +11,7 @@ export const mdLeaveAnimation = (baseEl: HTMLElement): IonicAnimation => {
backdropAnimation
.addElement(baseEl.querySelector('ion-backdrop')!)
- .fromTo('opacity', 0.32, 0);
+ .fromTo('opacity', 'var(--backdrop-opacity)', 0);
wrapperAnimation
.addElement(baseEl.querySelector('.action-sheet-wrapper')!)
diff --git a/core/src/components/action-sheet/readme.md b/core/src/components/action-sheet/readme.md
index 708b67cc30a..f916b63d01d 100644
--- a/core/src/components/action-sheet/readme.md
+++ b/core/src/components/action-sheet/readme.md
@@ -321,6 +321,7 @@ Type: `Promise`
| Name | Description |
| ------------------------ | -------------------------------------------------- |
+| `--backdrop-opacity` | Opacity of the backdrop |
| `--background` | Background of the action sheet group |
| `--background-activated` | Background of the action sheet button when pressed |
| `--background-selected` | Background of the selected action sheet button |
diff --git a/core/src/components/action-sheet/test/basic/e2e.ts b/core/src/components/action-sheet/test/basic/e2e.ts
index 685541bbc1d..d96982cd3f2 100644
--- a/core/src/components/action-sheet/test/basic/e2e.ts
+++ b/core/src/components/action-sheet/test/basic/e2e.ts
@@ -34,6 +34,10 @@ test('action-sheet: basic, scroll without cancel', async () => {
await testActionSheet(DIRECTORY, '#scrollWithoutCancel');
});
+test('action-sheet: basic, custom backdrop', async () => {
+ await testActionSheet(DIRECTORY, '#customBackdrop');
+});
+
/**
* RTL Tests
*/
@@ -69,3 +73,7 @@ test('action-sheet:rtl: basic, scrollable options', async () => {
test('action-sheet:rtl: basic, scroll without cancel', async () => {
await testActionSheet(DIRECTORY, '#scrollWithoutCancel', true);
});
+
+test('action-sheet:rtl: basic, custom backdrop', async () => {
+ await testActionSheet(DIRECTORY, '#customBackdrop', true);
+});
diff --git a/core/src/components/action-sheet/test/basic/index.html b/core/src/components/action-sheet/test/basic/index.html
index 52bd855f5cf..73199c8e28e 100644
--- a/core/src/components/action-sheet/test/basic/index.html
+++ b/core/src/components/action-sheet/test/basic/index.html
@@ -28,6 +28,7 @@
No Backdrop Dismiss
Scrollable Options
Scroll Without Cancel
+ Custom Backdrop Opacity
@@ -49,6 +50,10 @@
--height: 325px;
}
+ .custom-backdrop {
+ --ion-backdrop-opacity: 1;
+ }
+
-
-
-
-
-
-
-
-
- Anchor - Basic
-
-
-
-
-
- A
-
-
-
- Anchor
-
-
-
- Underline Anchor
-
-
-
- Custom Anchor
-
-
-
- Dark Anchor
-
-
-
- Danger Anchor
-
-
-
- Dynamic Color
-
-
- Toggle Color
-
-
-
-
-
-
-
-
-
-
-