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.
        */
@@ -3602,6 +3602,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.
        */
@@ -3610,10 +3614,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.
        */
@@ -3677,6 +3677,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.
        */
@@ -3685,10 +3689,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.
        */
@@ -4722,6 +4722,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.
        */
@@ -4734,10 +4738,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.
        */
@@ -4875,6 +4875,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.
        */
@@ -4888,10 +4892,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.
        */
@@ -5014,6 +5014,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.
        */
@@ -5030,10 +5034,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.
        */
@@ -5086,6 +5086,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).
        */
@@ -5103,10 +5107,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

@@ -64,7 +64,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.
@@ -226,7 +226,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

@@ -16,19 +16,19 @@ A button's `role` property can either be `destructive` or `cancel`. Buttons with
 
 ## Properties
 
-| Property                | Attribute                 | Description                                                                                                      | Type                  |
-| ----------------------- | ------------------------- | ---------------------------------------------------------------------------------------------------------------- | --------------------- |
-| `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`             |
-| `leaveAnimation`        | --                        | Animation to use when the action sheet is dismissed.                                                             | `AnimationBuilder`    |
-| `overlayId`             | `overlay-id`              | Unique ID to be used with the overlay. Internal only                                                             | `number`              |
-| `subHeader`             | `sub-header`              | Subtitle for the action sheet.                                                                                   | `string`              |
-| `translucent`           | `translucent`             | If true, the action sheet will be translucent. Defaults to `false`.                                              | `boolean`             |
-| `willAnimate`           | `will-animate`            | If true, the action sheet will animate. Defaults to `true`.                                                      | `boolean`             |
+| 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[]`   |
+| `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`             |
+| `leaveAnimation`  | --                 | Animation to use when the action sheet is dismissed.                                                             | `AnimationBuilder`    |
+| `overlayId`       | `overlay-id`       | Unique ID to be used with the overlay. Internal only                                                             | `number`              |
+| `subHeader`       | `sub-header`       | Subtitle for the action sheet.                                                                                   | `string`              |
+| `translucent`     | `translucent`      | If true, the action sheet will be translucent. Defaults to `false`.                                              | `boolean`             |
+| `willAnimate`     | `will-animate`     | If true, the action sheet will animate. Defaults to `true`.                                                      | `boolean`             |
 
 
 ## Events

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

@@ -81,7 +81,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`.
@@ -438,7 +438,7 @@ export class Alert implements OverlayInterface {
     }
 
     return [
-      <ion-backdrop tappable={this.enableBackdropDismiss}/>,
+      <ion-backdrop tappable={this.backdropDismiss}/>,
 
       <div class="alert-wrapper">