fix(popover): ensure arrow always points to trigger el

core/src/components/popover/animations/ios.enter.ts

@@ -30,7 +30,7 @@ export const iosEnterAnimation = (baseEl: HTMLElement, opts?: any): Animation =>
     originY: 'top'
   }
 
-  const results = getPopoverPosition(isRTL, contentWidth, contentHeight, arrowWidth, arrowHeight, reference, side, align, defaultPosition, trigger, ev);
+  const results = getPopoverPosition(isRTL, contentWidth, contentHeight, arrowWidth, arrowHeight, reference, side, align, defaultPosition, size, trigger, ev);
 
   const padding = size === 'cover' ? 0 : POPOVER_IOS_BODY_PADDING;
   const margin = size === 'cover' ? 0 : 25;

core/src/components/popover/animations/md.enter.ts

@@ -29,7 +29,7 @@ export const mdEnterAnimation = (baseEl: HTMLElement, opts?: any): Animation =>
     originY: 'top'
   }
 
-  const results = getPopoverPosition(isRTL, contentWidth, contentHeight, 0, 0, reference, side, align, defaultPosition, trigger, ev);
+  const results = getPopoverPosition(isRTL, contentWidth, contentHeight, 0, 0, reference, side, align, defaultPosition, size, trigger, ev);
 
   const padding = size === 'cover' ? 0 : POPOVER_MD_BODY_PADDING;
 

core/src/components/popover/test/arrow/e2e.ts

@@ -1,44 +1,37 @@
 import { newE2EPage } from '@stencil/core/testing';
 
-test('popover - arrow side: top', async () => {
-  await testPopover('top', false);
-});
-
-test('popover - arrow side: right', async () => {
-  await testPopover('right', false);
-});
-
-test('popover - arrow side: bottom', async () => {
-  await testPopover('bottom', false);
-});
-
-test('popover - arrow side: left', async () => {
-  await testPopover('left', false);
-});
-
-test('popover - arrow side: start', async () => {
-  await testPopover('start'), false;
-});
-
-test('popover - arrow side: end', async () => {
-  await testPopover('end', false);
-});
-
-test('popover - arrow side: start, rtl', async () => {
-  await testPopover('start', false, true);
-});
-
-test('popover - arrow side: end, rtl', async () => {
-  await testPopover('end', false, true);
-});
-
+const popoverNames =  [
+  'top-auto',
+  'right-auto',
+  'bottom-auto',
+  'left-auto',
+  'start-auto',
+  'end-auto',
+  'bottom-auto-center',
+  'bottom-auto-end',
+  'top-cover',
+  'right-cover',
+  'bottom-cover',
+  'left-cover',
+  'start-cover',
+  'end-cover',
+  'bottom-cover-center',
+  'bottom-cover-end'
+];
+
+for (const popoverName of popoverNames) {
+  test(`popover - arrow - ${popoverName}`, async () => {
+    await testPopover(popoverName, false);
+    await testPopover(popoverName, true);
+  });
+}
 
-const testPopover = async (side, isRTL = false) => {
+const testPopover = async (popoverName, isRTL = false) => {
   const rtl = isRTL ? '&rtl=true' : '';
   const page = await newE2EPage({ url: `/src/components/popover/test/arrow?ionic:_testing=true${rtl}` });
 
-  const POPOVER_CLASS = `${side}-popover`;
-  const TRIGGER_ID = `${side}-trigger`;
+  const POPOVER_CLASS = `${popoverName}-popover`;
+  const TRIGGER_ID = `${popoverName}-trigger`;
   const screenshotCompares = [];
 
   const trigger = await page.find(`#${TRIGGER_ID}`);

core/src/components/popover/test/arrow/index.html

@@ -11,13 +11,18 @@
   <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
   <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
   <style>
+  #content {
+    --padding-top: 100px;
+    --padding-bottom: 100px;
+    --padding-start: 100px;
+    --padding-end: 100px;
+  }
+
   .grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-row-gap: 20px;
     grid-column-gap: 20px;
-
-    padding: 200px;
   }
   .grid-item {
     margin: 0 auto;
@@ -47,87 +52,151 @@
       </ion-toolbar>
     </ion-header>
 
-    <ion-content class="ion-padding" id="content">
+    <ion-content id="content">
+      <h1>Size: Auto</h1>
+      <div class="grid">
+        <div class="grid-item">
+          <h2>Top</h2>
+          <ion-button id="top-auto-trigger">Click to Open</ion-button>
+          <ion-popover class="top-auto-popover" trigger="top-auto-trigger" side="top">
+            <ion-content class="ion-padding">
+              Hello World
+            </ion-content>
+          </ion-popover>
+        </div>
+        <div class="grid-item">
+          <h2>Right</h2>
+          <ion-button id="right-auto-trigger">Click to Open</ion-button>
+          <ion-popover class="right-auto-popover" trigger="right-auto-trigger" side="right">
+            <ion-content class="ion-padding">
+              Hello World
+            </ion-content>
+          </ion-popover>
+        </div>
+        <div class="grid-item">
+          <h2>Bottom</h2>
+          <ion-button id="bottom-auto-trigger">Click to Open</ion-button>
+          <ion-popover class="bottom-auto-popover" trigger="bottom-auto-trigger" side="bottom">
+            <ion-content class="ion-padding">
+              Hello World
+            </ion-content>
+          </ion-popover>
+        </div>
+        <div class="grid-item">
+          <h2>Left</h2>
+          <ion-button id="left-auto-trigger">Click to Open</ion-button>
+          <ion-popover class="left-auto-popover" trigger="left-auto-trigger" side="left">
+            <ion-content class="ion-padding">
+              Hello World
+            </ion-content>
+          </ion-popover>
+        </div>
+        <div class="grid-item">
+          <h2>Start</h2>
+          <ion-button id="start-auto-trigger">Click to Open</ion-button>
+          <ion-popover class="start-auto-popover" trigger="start-auto-trigger" side="start">
+            <ion-content class="ion-padding">
+              Hello World
+            </ion-content>
+          </ion-popover>
+        </div>
+        <div class="grid-item">
+          <h2>End</h2>
+          <ion-button id="end-auto-trigger">Click to Open</ion-button>
+          <ion-popover class="end-auto-popover" trigger="end-auto-trigger" side="end">
+            <ion-content class="ion-padding">
+              Hello World
+            </ion-content>
+          </ion-popover>
+        </div>
+        <div class="grid-item">
+          <h2>Bottom, center-aligned</h2>
+          <ion-button id="bottom-auto-center-trigger">Click to Open</ion-button>
+          <ion-popover class="bottom-auto-center-popover" trigger="bottom-auto-center-trigger" side="bottom" alignment="center">
+            <ion-content class="ion-padding">
+              Hello World
+            </ion-content>
+          </ion-popover>
+        </div>
+        <div class="grid-item">
+          <h2>Bottom, end-aligned</h2>
+          <ion-button id="bottom-auto-end-trigger">Click to Open</ion-button>
+          <ion-popover class="bottom-auto-end-popover" trigger="bottom-auto-end-trigger" side="bottom" alignment="end">
+            <ion-content class="ion-padding">
+              Hello World
+            </ion-content>
+          </ion-popover>
+        </div>
+      </div>
+      <h1>Size: Cover</h1>
       <div class="grid">
         <div class="grid-item">
           <h2>Top</h2>
-          <ion-button id="top-trigger">Click to Open</ion-button>
-          <ion-popover
-            class="top-popover"
-            trigger="top-trigger"
-            side="top"
-            size="cover"
-          >
+          <ion-button id="top-cover-trigger">Click to Open</ion-button>
+            <ion-popover class="top-cover-popover" trigger="top-cover-trigger" side="top" size="cover">
             <ion-content class="ion-padding">
               Hello World
             </ion-content>
           </ion-popover>
         </div>
         <div class="grid-item">
           <h2>Right</h2>
-          <ion-button id="right-trigger">Click to Open</ion-button>
-          <ion-popover
-            class="right-popover"
-            trigger="right-trigger"
-            side="right"
-            size="cover"
-          >
+          <ion-button id="right-cover-trigger">Click to Open</ion-button>
+            <ion-popover class="right-cover-popover" trigger="right-cover-trigger" side="right" size="cover">
             <ion-content class="ion-padding">
               Hello World
             </ion-content>
           </ion-popover>
         </div>
         <div class="grid-item">
           <h2>Bottom</h2>
-          <ion-button id="bottom-trigger">Click to Open</ion-button>
-          <ion-popover
-            class="bottom-popover"
-            trigger="bottom-trigger"
-            side="bottom"
-            size="cover"
-          >
+          <ion-button id="bottom-cover-trigger">Click to Open</ion-button>
+            <ion-popover class="bottom-cover-popover" trigger="bottom-cover-trigger" side="bottom" size="cover">
             <ion-content class="ion-padding">
               Hello World
             </ion-content>
           </ion-popover>
         </div>
         <div class="grid-item">
           <h2>Left</h2>
-          <ion-button id="left-trigger">Click to Open</ion-button>
-          <ion-popover
-            class="left-popover"
-            trigger="left-trigger"
-            side="left"
-            size="cover"
-          >
+          <ion-button id="left-cover-trigger">Click to Open</ion-button>
+            <ion-popover class="left-cover-popover" trigger="left-cover-trigger" side="left" size="cover">
             <ion-content class="ion-padding">
               Hello World
             </ion-content>
           </ion-popover>
         </div>
         <div class="grid-item">
           <h2>Start</h2>
-          <ion-button id="start-trigger">Click to Open</ion-button>
-          <ion-popover
-            class="start-popover"
-            trigger="start-trigger"
-            side="start"
-            size="cover"
-          >
+          <ion-button id="start-cover-trigger">Click to Open</ion-button>
+            <ion-popover class="start-cover-popover" trigger="start-cover-trigger" side="start" size="cover">
             <ion-content class="ion-padding">
               Hello World
             </ion-content>
           </ion-popover>
         </div>
         <div class="grid-item">
           <h2>End</h2>
-          <ion-button id="end-trigger">Click to Open</ion-button>
-          <ion-popover
-            class="end-popover"
-            trigger="end-trigger"
-            side="end"
-            size="cover"
-          >
+          <ion-button id="end-cover-trigger">Click to Open</ion-button>
+            <ion-popover class="end-cover-popover" trigger="end-cover-trigger" side="end" size="cover">
+            <ion-content class="ion-padding">
+              Hello World
+            </ion-content>
+          </ion-popover>
+        </div>
+        <div class="grid-item">
+          <h2>Bottom, center-aligned</h2>
+          <ion-button id="bottom-cover-center-trigger">Click to Open</ion-button>
+          <ion-popover class="bottom-cover-center-popover" trigger="bottom-cover-center-trigger" side="bottom" alignment="center" size="cover">
+            <ion-content class="ion-padding">
+              Hello World
+            </ion-content>
+          </ion-popover>
+        </div>
+        <div class="grid-item">
+          <h2>Bottom, end-aligned</h2>
+          <ion-button id="bottom-cover-end-trigger">Click to Open</ion-button>
+          <ion-popover class="bottom-cover-end-popover" trigger="bottom-cover-end-trigger" side="bottom" alignment="end" size="cover">
             <ion-content class="ion-padding">
               Hello World
             </ion-content>
@@ -137,22 +206,6 @@ <h2>End</h2>
     </ion-content>
 
   </ion-app>
-
-  <script>
-  class ListPage extends HTMLElement {
-    constructor() {
-      super();
-
-      this.innerHTML = `
-      <ion-content class="ion-padding">
-        Hello
-      </ion-content>
-      `;
-    }
-  }
-
-  customElements.define('list-page', ListPage);
-  </script>
 </body>
 
 </html>