fix(popover): default alignment to 'center' for ios mode (#24815)

ionic-team · Feb 18, 2022 · 243f673 · 243f673
1 parent 0a8f443
commit 243f673
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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`      |