From 243f67362f25699bdb373be6b72cb9c14dc95a32 Mon Sep 17 00:00:00 2001
From: Amanda Smith <90629384+amandaesmith3@users.noreply.github.com>
Date: Fri, 18 Feb 2022 13:39:03 -0600
Subject: [PATCH] fix(popover): default alignment to 'center' for ios mode
 (#24815)

---
 core/api.txt                            | 2 +-
 core/src/components.d.ts                | 6 +++---
 core/src/components/popover/popover.tsx | 7 ++++++-
 core/src/components/popover/readme.md   | 2 +-
 4 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/core/api.txt b/core/api.txt
index 82b9846d8ce..08e3a24d302 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -877,7 +877,7 @@ ion-picker,css-prop,--min-width
 ion-picker,css-prop,--width
 
 ion-popover,shadow
-ion-popover,prop,alignment,"center" | "end" | "start",'start',false,false
+ion-popover,prop,alignment,"center" | "end" | "start" | undefined,undefined,false,false
 ion-popover,prop,animated,boolean,true,false,false
 ion-popover,prop,arrow,boolean,true,false,false
 ion-popover,prop,backdropDismiss,boolean,true,false,false
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index c2ef6546f09..70f6286e1cf 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -1848,9 +1848,9 @@ export namespace Components {
     }
     interface IonPopover {
         /**
-          * Describes how to align the popover content with the `reference` point.
+          * Describes how to align the popover content with the `reference` point. Defaults to `'center'` for `ios` mode, and `'start'` for `md` mode.
          */
-        "alignment": PositionAlign;
+        "alignment"?: PositionAlign;
         /**
           * If `true`, the popover will animate.
          */
@@ -5485,7 +5485,7 @@ declare namespace LocalJSX {
     }
     interface IonPopover {
         /**
-          * Describes how to align the popover content with the `reference` point.
+          * Describes how to align the popover content with the `reference` point. Defaults to `'center'` for `ios` mode, and `'start'` for `md` mode.
          */
         "alignment"?: PositionAlign;
         /**
diff --git a/core/src/components/popover/popover.tsx b/core/src/components/popover/popover.tsx
index 2dd5c250857..0b4fafcf0a0 100644
--- a/core/src/components/popover/popover.tsx
+++ b/core/src/components/popover/popover.tsx
@@ -189,8 +189,9 @@ export class Popover implements ComponentInterface, PopoverInterface {
 
   /**
    * Describes how to align the popover content with the `reference` point.
+   * Defaults to `'center'` for `ios` mode, and `'start'` for `md` mode.
    */
-  @Prop() alignment: PositionAlign = 'start';
+  @Prop({ mutable: true }) alignment?: PositionAlign;
 
   /**
    * If `true`, the popover will display an arrow
@@ -292,6 +293,10 @@ export class Popover implements ComponentInterface, PopoverInterface {
     this.popoverId = (this.el.hasAttribute('id')) ? this.el.getAttribute('id')! : `ion-popover-${this.popoverIndex}`;
 
     this.parentPopover = this.el.closest(`ion-popover:not(#${this.popoverId})`) as HTMLIonPopoverElement | null;
+
+    if (this.alignment === undefined) {
+      this.alignment = getIonMode(this) === 'ios' ? 'center' : 'start';
+    }
   }
 
   componentDidLoad() {
diff --git a/core/src/components/popover/readme.md b/core/src/components/popover/readme.md
index 0f2d09926e7..52f38e51e0c 100644
--- a/core/src/components/popover/readme.md
+++ b/core/src/components/popover/readme.md
@@ -953,7 +953,7 @@ export default {
 
 | Property          | Attribute           | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | Type                                                         | Default     |
 | ----------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ | ----------- |
-| `alignment`       | `alignment`         | Describes how to align the popover content with the `reference` point.                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `"center" \| "end" \| "start"`                               | `'start'`   |
+| `alignment`       | `alignment`         | Describes how to align the popover content with the `reference` point. Defaults to `'center'` for `ios` mode, and `'start'` for `md` mode.                                                                                                                                                                                                                                                                                                                                                                                   | `"center" \| "end" \| "start" \| undefined`                  | `undefined` |
 | `animated`        | `animated`          | If `true`, the popover will animate.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `boolean`                                                    | `true`      |
 | `arrow`           | `arrow`             | If `true`, the popover will display an arrow that points at the `reference` when running in `ios` mode on mobile. Does not apply in `md` mode or on desktop.                                                                                                                                                                                                                                                                                                                                                                 | `boolean`                                                    | `true`      |
 | `backdropDismiss` | `backdrop-dismiss`  | If `true`, the popover will be dismissed when the backdrop is clicked.                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `boolean`                                                    | `true`      |