refactor(overlays): enableBackdropDismiss => backdropDismiss

core/src/components.d.ts

@@ -97,6 +97,10 @@ declare global {
     }
 
     interface IonActionSheet {
+      /**
+       * If true, the action sheet will be dismissed when the backdrop is clicked. Defaults to `true`.
+       */
+      'backdropDismiss': boolean;
       /**
        * An array of buttons for the action sheet.
        */
@@ -109,10 +113,6 @@ declare global {
        * Dismiss the action sheet overlay after it has been presented.
        */
       'dismiss': (data?: any, role?: string | undefined) => Promise<void>;
-      /**
-       * If true, the action sheet will be dismissed when the backdrop is clicked. Defaults to `true`.
-       */
-      'enableBackdropDismiss': boolean;
       /**
        * Animation to use when the action sheet is presented.
        */
@@ -175,6 +175,10 @@ declare global {
     }
 
     interface IonAlert {
+      /**
+       * If true, the alert will be dismissed when the backdrop is clicked. Defaults to `true`.
+       */
+      'backdropDismiss': boolean;
       /**
        * Array of buttons to be added to the alert.
        */
@@ -187,10 +191,6 @@ declare global {
        * Dismiss the alert overlay after it has been presented.
        */
       'dismiss': (data?: any, role?: string | undefined) => Promise<void>;
-      /**
-       * If true, the alert will be dismissed when the backdrop is clicked. Defaults to `true`.
-       */
-      'enableBackdropDismiss': boolean;
       /**
        * Animation to use when the alert is presented.
        */
@@ -1188,6 +1188,10 @@ declare global {
     }
 
     interface IonLoading {
+      /**
+       * If true, the loading indicator will be dismissed when the backdrop is clicked. Defaults to `false`.
+       */
+      'backdropDismiss': boolean;
       /**
        * Optional text content to display in the loading indicator.
        */
@@ -1204,10 +1208,6 @@ declare global {
        * Number of milliseconds to wait before dismissing the loading indicator.
        */
       'duration': number;
-      /**
-       * If true, the loading indicator will be dismissed when the backdrop is clicked. Defaults to `false`.
-       */
-      'enableBackdropDismiss': boolean;
       /**
        * Animation to use when the loading indicator is presented.
        */
@@ -1388,6 +1388,10 @@ declare global {
     }
 
     interface IonModal {
+      /**
+       * If true, the modal will be dismissed when the backdrop is clicked. Defaults to `true`.
+       */
+      'backdropDismiss': boolean;
       /**
        * The component to display inside of the modal.
        */
@@ -1405,10 +1409,6 @@ declare global {
        * Dismiss the modal overlay after it has been presented.
        */
       'dismiss': (data?: any, role?: string | undefined) => Promise<void>;
-      /**
-       * If true, the modal will be dismissed when the backdrop is clicked. Defaults to `true`.
-       */
-      'enableBackdropDismiss': boolean;
       /**
        * Animation to use when the modal is presented.
        */
@@ -1568,6 +1568,10 @@ declare global {
     }
 
     interface IonPicker {
+      /**
+       * If true, the picker will be dismissed when the backdrop is clicked. Defaults to `true`.
+       */
+      'backdropDismiss': boolean;
       /**
        * Array of buttons to be displayed at the top of the picker.
        */
@@ -1588,10 +1592,6 @@ declare global {
        * Number of milliseconds to wait before dismissing the picker.
        */
       'duration': number;
-      /**
-       * If true, the picker will be dismissed when the backdrop is clicked. Defaults to `true`.
-       */
-      'enableBackdropDismiss': boolean;
       /**
        * Animation to use when the picker is presented.
        */
@@ -1647,6 +1647,10 @@ declare global {
     }
 
     interface IonPopover {
+      /**
+       * If true, the popover will be dismissed when the backdrop is clicked. Defaults to `true`.
+       */
+      'backdropDismiss': boolean;
       /**
        * 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).
        */
@@ -1668,10 +1672,6 @@ declare global {
        * Dismiss the popover overlay after it has been presented.
        */
       'dismiss': (data?: any, role?: string | undefined) => Promise<void>;
-      /**
-       * If true, the popover will be dismissed when the backdrop is clicked. Defaults to `true`.
-       */
-      'enableBackdropDismiss': boolean;
       /**
        * Animation to use when the popover is presented.
        */
@@ -3578,6 +3578,10 @@ declare global {
     }
 
     export interface IonActionSheetAttributes extends HTMLAttributes {
+      /**
+       * If true, the action sheet will be dismissed when the backdrop is clicked. Defaults to `true`.
+       */
+      'backdropDismiss'?: boolean;
       /**
        * An array of buttons for the action sheet.
        */
@@ -3586,10 +3590,6 @@ declare global {
        * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
        */
       'cssClass'?: string | string[];
-      /**
-       * If true, the action sheet will be dismissed when the backdrop is clicked. Defaults to `true`.
-       */
-      'enableBackdropDismiss'?: boolean;
       /**
        * Animation to use when the action sheet is presented.
        */
@@ -3653,6 +3653,10 @@ declare global {
     }
 
     export interface IonAlertAttributes extends HTMLAttributes {
+      /**
+       * If true, the alert will be dismissed when the backdrop is clicked. Defaults to `true`.
+       */
+      'backdropDismiss'?: boolean;
       /**
        * Array of buttons to be added to the alert.
        */
@@ -3661,10 +3665,6 @@ declare global {
        * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
        */
       'cssClass'?: string | string[];
-      /**
-       * If true, the alert will be dismissed when the backdrop is clicked. Defaults to `true`.
-       */
-      'enableBackdropDismiss'?: boolean;
       /**
        * Animation to use when the alert is presented.
        */
@@ -4698,6 +4698,10 @@ declare global {
     }
 
     export interface IonLoadingAttributes extends HTMLAttributes {
+      /**
+       * If true, the loading indicator will be dismissed when the backdrop is clicked. Defaults to `false`.
+       */
+      'backdropDismiss'?: boolean;
       /**
        * Optional text content to display in the loading indicator.
        */
@@ -4710,10 +4714,6 @@ declare global {
        * Number of milliseconds to wait before dismissing the loading indicator.
        */
       'duration'?: number;
-      /**
-       * If true, the loading indicator will be dismissed when the backdrop is clicked. Defaults to `false`.
-       */
-      'enableBackdropDismiss'?: boolean;
       /**
        * Animation to use when the loading indicator is presented.
        */
@@ -4851,6 +4851,10 @@ declare global {
     }
 
     export interface IonModalAttributes extends HTMLAttributes {
+      /**
+       * If true, the modal will be dismissed when the backdrop is clicked. Defaults to `true`.
+       */
+      'backdropDismiss'?: boolean;
       /**
        * The component to display inside of the modal.
        */
@@ -4864,10 +4868,6 @@ declare global {
        */
       'cssClass'?: string | string[];
       'delegate'?: FrameworkDelegate;
-      /**
-       * If true, the modal will be dismissed when the backdrop is clicked. Defaults to `true`.
-       */
-      'enableBackdropDismiss'?: boolean;
       /**
        * Animation to use when the modal is presented.
        */
@@ -4990,6 +4990,10 @@ declare global {
     }
 
     export interface IonPickerAttributes extends HTMLAttributes {
+      /**
+       * If true, the picker will be dismissed when the backdrop is clicked. Defaults to `true`.
+       */
+      'backdropDismiss'?: boolean;
       /**
        * Array of buttons to be displayed at the top of the picker.
        */
@@ -5006,10 +5010,6 @@ declare global {
        * Number of milliseconds to wait before dismissing the picker.
        */
       'duration'?: number;
-      /**
-       * If true, the picker will be dismissed when the backdrop is clicked. Defaults to `true`.
-       */
-      'enableBackdropDismiss'?: boolean;
       /**
        * Animation to use when the picker is presented.
        */
@@ -5062,6 +5062,10 @@ declare global {
     }
 
     export interface IonPopoverAttributes extends HTMLAttributes {
+      /**
+       * If true, the popover will be dismissed when the backdrop is clicked. Defaults to `true`.
+       */
+      'backdropDismiss'?: boolean;
       /**
        * 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).
        */
@@ -5079,10 +5083,6 @@ declare global {
        */
       'cssClass'?: string | string[];
       'delegate'?: FrameworkDelegate;
-      /**
-       * If true, the popover will be dismissed when the backdrop is clicked. Defaults to `true`.
-       */
-      'enableBackdropDismiss'?: boolean;
       /**
        * Animation to use when the popover is presented.
        */

core/src/components/action-sheet/action-sheet-interface.ts

@@ -4,7 +4,7 @@ export interface ActionSheetOptions {
   subHeader?: string;
   cssClass?: string | string[];
   buttons: (ActionSheetButton | string)[];
-  enableBackdropDismiss?: boolean;
+  backdropDismiss?: boolean;
   translucent?: boolean;
 }
 

core/src/components/action-sheet/action-sheet.tsx

@@ -63,7 +63,7 @@ export class ActionSheet implements OverlayInterface {
   /**
    * If true, the action sheet will be dismissed when the backdrop is clicked. Defaults to `true`.
    */
-  @Prop() enableBackdropDismiss = true;
+  @Prop() backdropDismiss = true;
 
   /**
    * Title for the action sheet.
@@ -224,7 +224,7 @@ export class ActionSheet implements OverlayInterface {
     const buttons = allButtons.filter(b => b.role !== 'cancel');
 
     return [
-      <ion-backdrop tappable={this.enableBackdropDismiss}/>,
+      <ion-backdrop tappable={this.backdropDismiss}/>,
       <div class="action-sheet-wrapper" role="dialog">
         <div class="action-sheet-container">
           <div class="action-sheet-group">

core/src/components/action-sheet/readme.md

@@ -17,10 +17,10 @@ A button's `role` property can either be `destructive` or `cancel`. Buttons with
 ## Properties
 
 | Property          | Attribute          | Description                                                                                                      | Type                  |
-| ----------------------- | ------------------------- | ---------------------------------------------------------------------------------------------------------------- | --------------------- |
+| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------- | --------------------- |
+| `backdropDismiss` | `backdrop-dismiss` | If true, the action sheet will be dismissed when the backdrop is clicked. Defaults to `true`.                    | `boolean`             |
 | `buttons`         | --                 | An array of buttons for the action sheet.                                                                        | `ActionSheetButton[]` |
 | `cssClass`        | `css-class`        | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string | string[]`   |
-| `enableBackdropDismiss` | `enable-backdrop-dismiss` | If true, the action sheet will be dismissed when the backdrop is clicked. Defaults to `true`.                    | `boolean`             |
 | `enterAnimation`  | --                 | Animation to use when the action sheet is presented.                                                             | `AnimationBuilder`    |
 | `header`          | `header`           | Title for the action sheet.                                                                                      | `string`              |
 | `keyboardClose`   | `keyboard-close`   | If the actionSheet should close the keyboard                                                                     | `boolean`             |

core/src/components/action-sheet/test/basic/index.html

@@ -140,7 +140,7 @@
       const actionSheetController = document.querySelector('ion-action-sheet-controller');
       await actionSheetController.componentOnReady();
       const actionSheetElement = await actionSheetController.create({
-        enableBackdropDismiss: false,
+        backdropDismiss: false,
         buttons: [{
           text: 'Archive',
           handler: () => {

core/src/components/action-sheet/test/preview/index.html

@@ -135,7 +135,7 @@
       const actionSheetController = document.querySelector('ion-action-sheet-controller');
       await actionSheetController.componentOnReady();
       const actionSheetElement = await actionSheetController.create({
-        enableBackdropDismiss: false,
+        backdropDismiss: false,
         buttons: [{
           text: 'Archive',
           handler: () => {

core/src/components/action-sheet/test/translucent/index.html

@@ -97,7 +97,7 @@
       const actionSheetController = document.querySelector('ion-action-sheet-controller');
       await actionSheetController.componentOnReady();
       const actionSheetElement = await actionSheetController.create({
-        enableBackdropDismiss: false,
+        backdropDismiss: false,
         buttons: [{
           text: 'Archive',
           handler: () => {

core/src/components/alert/alert-interface.ts

@@ -8,7 +8,7 @@ export interface AlertOptions {
   mode?: string;
   inputs?: AlertInput[];
   buttons?: (AlertButton | string)[];
-  enableBackdropDismiss?: boolean;
+  backdropDismiss?: boolean;
   translucent?: boolean;
 }
 

core/src/components/alert/alert.tsx

@@ -80,7 +80,7 @@ export class Alert implements OverlayInterface {
   /**
    * If true, the alert will be dismissed when the backdrop is clicked. Defaults to `true`.
    */
-  @Prop() enableBackdropDismiss = true;
+  @Prop() backdropDismiss = true;
 
   /**
    * If true, the alert will be translucent. Defaults to `false`.
@@ -436,7 +436,7 @@ export class Alert implements OverlayInterface {
     }
 
     return [
-      <ion-backdrop tappable={this.enableBackdropDismiss}/>,
+      <ion-backdrop tappable={this.backdropDismiss}/>,
 
       <div class="alert-wrapper">
 

core/src/components/alert/readme.md

@@ -26,10 +26,10 @@ Alerts can also include several different inputs whose data can be passed back t
 ## Properties
 
 | Property          | Attribute          | Description                                                                                                      | Type                       |
-| ----------------------- | ------------------------- | ---------------------------------------------------------------------------------------------------------------- | -------------------------- |
+| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------- | -------------------------- |
+| `backdropDismiss` | `backdrop-dismiss` | If true, the alert will be dismissed when the backdrop is clicked. Defaults to `true`.                           | `boolean`                  |
 | `buttons`         | --                 | Array of buttons to be added to the alert.                                                                       | `(AlertButton | string)[]` |
 | `cssClass`        | `css-class`        | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string | string[]`        |
-| `enableBackdropDismiss` | `enable-backdrop-dismiss` | If true, the alert will be dismissed when the backdrop is clicked. Defaults to `true`.                           | `boolean`                  |
 | `enterAnimation`  | --                 | Animation to use when the alert is presented.                                                                    | `AnimationBuilder`         |
 | `header`          | `header`           | The main title in the heading of the alert.                                                                      | `string`                   |
 | `inputs`          | --                 | Array of input to show in the alert.                                                                             | `AlertInput[]`             |

core/src/components/backdrop/usage/angular.md

@@ -28,7 +28,7 @@ import { Component } from '@angular/core';
   styleUrls: ['./backdrop-example.css'],
 })
 export class BackdropExample {
-  enableBackdropDismiss = false;
+  backdropDismiss = false;
   showBackdrop = false;
   shouldPropagate = false;
 }

core/src/components/loading/loading.tsx

@@ -62,7 +62,7 @@ export class Loading implements OverlayInterface {
   /**
    * If true, the loading indicator will be dismissed when the backdrop is clicked. Defaults to `false`.
    */
-  @Prop() enableBackdropDismiss = false;
+  @Prop() backdropDismiss = false;
 
   /**
    * If true, a backdrop will be displayed behind the loading indicator. Defaults to `true`.

core/src/components/loading/readme.md

@@ -19,12 +19,11 @@ The loading indicator can be dismissed automatically after a specific amount of
 ## Properties
 
 | Property          | Attribute          | Description                                                                                                                            | Type                |
-| ----------------------- | ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | ------------------- |
+| ----------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------- | ------------------- |
+| `backdropDismiss` | `backdrop-dismiss` | If true, the loading indicator will be dismissed when the backdrop is clicked. Defaults to `false`.                                    | `boolean`           |
 | `content`         | `content`          | Optional text content to display in the loading indicator.                                                                             | `string`            |
 | `cssClass`        | `css-class`        | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.                       | `string | string[]` |
-| `dismissOnPageChange`   | `dismiss-on-page-change`  | If true, the loading indicator will dismiss when the page changes. Defaults to `false`.                                                | `boolean`           |
 | `duration`        | `duration`         | Number of milliseconds to wait before dismissing the loading indicator.                                                                | `number`            |
-| `enableBackdropDismiss` | `enable-backdrop-dismiss` | If true, the loading indicator will be dismissed when the backdrop is clicked. Defaults to `false`.                                    | `boolean`           |
 | `enterAnimation`  | --                 | Animation to use when the loading indicator is presented.                                                                              | `AnimationBuilder`  |
 | `keyboardClose`   | `keyboard-close`   | If true, the loading will blur any inputs and hide the keyboard                                                                        | `boolean`           |
 | `leaveAnimation`  | --                 | Animation to use when the loading indicator is dismissed.                                                                              | `AnimationBuilder`  |

core/src/components/loading/test/basic/index.html

@@ -25,7 +25,7 @@
         <ion-button expand="block" onclick="presentLoadingWithOptions({duration: 2000, content: 'Please wait...', spinner: 'hide'})">Show Loading with no spinner</ion-button>
         <ion-button expand="block" onclick="presentLoadingWithOptions({duration: 5000, content: 'Please wait...', translucent: true})">Show Loading with translucent</ion-button>
         <ion-button expand="block" onclick="presentLoadingWithOptions({duration: 5000, content: 'Please wait...', translucent: true, cssClass: 'custom-class custom-loading'})">Show Loading with cssClass</ion-button>
-        <ion-button expand="block" onclick="presentLoadingWithOptions({enableBackdropDismiss: true})">Show Backdrop Click Loading</ion-button>
+        <ion-button expand="block" onclick="presentLoadingWithOptions({backdropDismiss: true})">Show Backdrop Click Loading</ion-button>
 
         <ion-loading-controller></ion-loading-controller>
 

core/src/components/loading/test/preview/index.html

@@ -25,7 +25,7 @@
         <ion-button expand="block" onclick="presentLoadingWithOptions({duration: 2000, content: 'Please wait...', spinner: 'hide'})">Show Loading with no spinner</ion-button>
         <ion-button expand="block" onclick="presentLoadingWithOptions({duration: 5000, content: 'Please wait...', translucent: true})">Show Loading with translucent</ion-button>
         <ion-button expand="block" onclick="presentLoadingWithOptions({duration: 5000, content: 'Please wait...', translucent: true, cssClass: 'custom-class custom-loading'})">Show Loading with cssClass</ion-button>
-        <ion-button expand="block" onclick="presentLoadingWithOptions({enableBackdropDismiss: true})">Show Backdrop Click Loading</ion-button>
+        <ion-button expand="block" onclick="presentLoadingWithOptions({backdropDismiss: true})">Show Backdrop Click Loading</ion-button>
 
         <ion-loading-controller></ion-loading-controller>
 

core/src/components/modal/modal-interface.ts

@@ -4,7 +4,7 @@ export interface ModalOptions {
   component: ComponentRef;
   componentProps?: ComponentProps;
   showBackdrop?: boolean;
-  enableBackdropDismiss?: boolean;
+  backdropDismiss?: boolean;
   enterAnimation?: AnimationBuilder;
   leaveAnimation?: AnimationBuilder;
   cssClass?: string | string[];

core/src/components/modal/modal.tsx

@@ -63,7 +63,7 @@ export class Modal implements OverlayInterface {
   /**
    * If true, the modal will be dismissed when the backdrop is clicked. Defaults to `true`.
    */
-  @Prop() enableBackdropDismiss = true;
+  @Prop() backdropDismiss = true;
 
   /**
    * If true, a backdrop will be displayed behind the modal. Defaults to `true`.
@@ -209,7 +209,7 @@ export class Modal implements OverlayInterface {
     const dialogClasses = createThemedClasses(this.mode, 'modal-wrapper');
 
     return [
-      <ion-backdrop visible={this.showBackdrop} tappable={this.enableBackdropDismiss}/>,
+      <ion-backdrop visible={this.showBackdrop} tappable={this.backdropDismiss}/>,
       <div role="dialog" class={dialogClasses}></div>
     ];
   }

core/src/components/modal/readme.md

@@ -15,12 +15,12 @@ Modals can be created using a [Modal Controller](../../modal-controller/ModalCon
 ## Properties
 
 | Property          | Attribute          | Description                                                                                                      | Type                |
-| ----------------------- | ------------------------- | ---------------------------------------------------------------------------------------------------------------- | ------------------- |
+| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------- | ------------------- |
+| `backdropDismiss` | `backdrop-dismiss` | If true, the modal will be dismissed when the backdrop is clicked. Defaults to `true`.                           | `boolean`           |
 | `componentProps`  | --                 | The data to pass to the modal component.                                                                         | `ComponentProps`    |
 | `component`       | `component`        | The component to display inside of the modal.                                                                    | `ComponentRef`      |
 | `cssClass`        | `css-class`        | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string | string[]` |
 | `delegate`        | --                 |                                                                                                                  | `FrameworkDelegate` |
-| `enableBackdropDismiss` | `enable-backdrop-dismiss` | If true, the modal will be dismissed when the backdrop is clicked. Defaults to `true`.                           | `boolean`           |
 | `enterAnimation`  | --                 | Animation to use when the modal is presented.                                                                    | `AnimationBuilder`  |
 | `keyboardClose`   | `keyboard-close`   |                                                                                                                  | `boolean`           |
 | `leaveAnimation`  | --                 | Animation to use when the modal is dismissed.                                                                    | `AnimationBuilder`  |

core/src/components/picker/picker-interface.ts

@@ -10,7 +10,7 @@ export interface PickerOptions {
   buttons?: PickerButton[];
   columns?: PickerColumn[];
   cssClass?: string | string[];
-  enableBackdropDismiss?: boolean;
+  backdropDismiss?: boolean;
 }
 
 export interface PickerColumn {

core/src/components/picker/picker.tsx

@@ -76,7 +76,7 @@ export class Picker implements OverlayInterface {
   /**
    * If true, the picker will be dismissed when the backdrop is clicked. Defaults to `true`.
    */
-  @Prop() enableBackdropDismiss = true;
+  @Prop() backdropDismiss = true;
 
   /**
    * If true, the picker will animate. Defaults to `true`.
@@ -270,7 +270,7 @@ export class Picker implements OverlayInterface {
     return [
       <ion-backdrop
         visible={this.showBackdrop}
-        tappable={this.enableBackdropDismiss}
+        tappable={this.backdropDismiss}
       />,
 
       <div class="picker-wrapper" role="dialog">

core/src/components/picker/readme.md

@@ -10,12 +10,12 @@ A Picker is a dialog that displays a row of buttons and columns underneath. It a
 ## Properties
 
 | Property          | Attribute          | Description                                                                                                      | Type                |
-| ----------------------- | ------------------------- | ---------------------------------------------------------------------------------------------------------------- | ------------------- |
+| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------- | ------------------- |
+| `backdropDismiss` | `backdrop-dismiss` | If true, the picker will be dismissed when the backdrop is clicked. Defaults to `true`.                          | `boolean`           |
 | `buttons`         | --                 | Array of buttons to be displayed at the top of the picker.                                                       | `PickerButton[]`    |
 | `columns`         | --                 | Array of columns to be displayed in the picker.                                                                  | `PickerColumn[]`    |
 | `cssClass`        | `css-class`        | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string | string[]` |
 | `duration`        | `duration`         | Number of milliseconds to wait before dismissing the picker.                                                     | `number`            |
-| `enableBackdropDismiss` | `enable-backdrop-dismiss` | If true, the picker will be dismissed when the backdrop is clicked. Defaults to `true`.                          | `boolean`           |
 | `enterAnimation`  | --                 | Animation to use when the picker is presented.                                                                   | `AnimationBuilder`  |
 | `keyboardClose`   | `keyboard-close`   | If the keyboard should be able to close the picker. Defaults to true.                                            | `boolean`           |
 | `leaveAnimation`  | --                 | Animation to use when the picker is dismissed.                                                                   | `AnimationBuilder`  |

core/src/components/popover/popover-interface.ts

@@ -4,7 +4,7 @@ export interface PopoverOptions {
   component: ComponentRef;
   componentProps?: ComponentProps;
   showBackdrop?: boolean;
-  enableBackdropDismiss?: boolean;
+  backdropDismiss?: boolean;
   translucent?: boolean;
   enterAnimation?: AnimationBuilder;
   leaveAnimation?: AnimationBuilder;

core/src/components/popover/popover.tsx

@@ -74,7 +74,7 @@ export class Popover implements OverlayInterface {
   /**
    * If true, the popover will be dismissed when the backdrop is clicked. Defaults to `true`.
    */
-  @Prop() enableBackdropDismiss = true;
+  @Prop() backdropDismiss = true;
 
   /**
    * The event to pass to the popover animation.
@@ -233,7 +233,7 @@ export class Popover implements OverlayInterface {
     const wrapperClasses = createThemedClasses(this.mode, 'popover-wrapper');
 
     return [
-      <ion-backdrop tappable={this.enableBackdropDismiss}/>,
+      <ion-backdrop tappable={this.backdropDismiss}/>,
       <div class={wrapperClasses}>
         <div class="popover-arrow"></div>
         <div class="popover-content"></div>

core/src/components/popover/readme.md

@@ -17,13 +17,13 @@ To present a popover, call the `present` method on a popover instance. In order
 ## Properties
 
 | Property          | Attribute          | Description                                                                                                                                                                                                                                                            | Type                |
-| ----------------------- | ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- |
+| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- |
+| `backdropDismiss` | `backdrop-dismiss` | If true, the popover will be dismissed when the backdrop is clicked. Defaults to `true`.                                                                                                                                                                               | `boolean`           |
 | `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). | `Color`             |
 | `componentProps`  | --                 | The data to pass to the popover component.                                                                                                                                                                                                                             | `ComponentProps`    |
 | `component`       | `component`        | The component to display inside of the popover.                                                                                                                                                                                                                        | `ComponentRef`      |
 | `cssClass`        | `css-class`        | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.                                                                                                                                                       | `string | string[]` |
 | `delegate`        | --                 |                                                                                                                                                                                                                                                                        | `FrameworkDelegate` |
-| `enableBackdropDismiss` | `enable-backdrop-dismiss` | If true, the popover will be dismissed when the backdrop is clicked. Defaults to `true`.                                                                                                                                                                               | `boolean`           |
 | `enterAnimation`  | --                 | Animation to use when the popover is presented.                                                                                                                                                                                                                        | `AnimationBuilder`  |
 | `event`           | --                 | The event to pass to the popover animation.                                                                                                                                                                                                                            | `any`               |
 | `keyboardClose`   | `keyboard-close`   |                                                                                                                                                                                                                                                                        | `boolean`           |