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` |