fix(popover): content sizing, scoped css

fixes #15237
fixes #15589
fixes #15331

core/src/components/content/content.scss

@@ -96,3 +96,10 @@
 .overscroll::after {
   top: -1px;
 }
+
+:host(.content-sizing) {
+  contain: none;
+}
+:host(.content-sizing) .inner-scroll {
+  position: relative;
+}

core/src/components/content/content.tsx

@@ -1,7 +1,7 @@
 import { Component, Element, Event, EventEmitter, Listen, Method, Prop, QueueApi } from '@stencil/core';
 
 import { Color, Config, Mode, ScrollBaseDetail, ScrollDetail } from '../../interface';
-import { createColorClasses } from '../../utils/theme';
+import { createColorClasses, hostContext } from '../../utils/theme';
 
 @Component({
   tag: 'ion-content',
@@ -272,6 +272,7 @@ export class Content {
     return {
       class: {
         ...createColorClasses(this.color),
+        'content-sizing': hostContext('ion-popover', this.el),
         'overscroll': this.forceOverscroll,
       },
       style: {

core/src/components/popover-controller/popover-controller.tsx

@@ -4,7 +4,7 @@ import { ComponentRef, OverlayController, PopoverOptions } from '../../interface
 import { createOverlay, dismissOverlay, getOverlay } from '../../utils/overlays';
 
 @Component({
-  tag: 'ion-popover-controller'
+  tag: 'ion-popover-controller',
 })
 export class PopoverController implements OverlayController {
 

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

@@ -16,8 +16,7 @@ export function iosEnterAnimation(AnimationC: Animation, baseEl: HTMLElement, ev
   const bodyHeight = window.innerHeight;
 
   // If ev was passed, use that for target element
-  const targetDim =
-    ev && ev.target && (ev.target as HTMLElement).getBoundingClientRect();
+  const targetDim = ev && ev.target && (ev.target as HTMLElement).getBoundingClientRect();
 
   const targetTop =
     targetDim != null && 'top' in targetDim
@@ -34,7 +33,7 @@ export function iosEnterAnimation(AnimationC: Animation, baseEl: HTMLElement, ev
   const arrowWidth = arrowDim.width;
   const arrowHeight = arrowDim.height;
 
-  if (targetDim != null) {
+  if (targetDim == null) {
     arrowEl.style.display = 'none';
   }
 

core/src/components/popover/popover.ios.scss

@@ -4,7 +4,7 @@
 // iOS Popover
 // --------------------------------------------------
 
-.popover-ios .popover-content {
+.popover-content {
   @include border-radius($popover-ios-border-radius);
 
   width: $popover-ios-width;
@@ -20,7 +20,7 @@
 // Popover Arrow
 // -----------------------------------------
 
-.popover-ios .popover-arrow {
+.popover-arrow {
   display: block;
   position: absolute;
 
@@ -30,7 +30,7 @@
   overflow: hidden;
 }
 
-.popover-ios .popover-arrow::after {
+.popover-arrow::after {
   @include position(3px, null, null, 3px);
   @include border-radius(3px);
 
@@ -47,20 +47,20 @@
   z-index: $z-index-overlay-wrapper;
 }
 
-.popover-ios.popover-bottom .popover-arrow {
+:host(.popover-bottom) .popover-arrow {
   top: auto;
   bottom: -10px;
 }
 
-.popover-ios.popover-bottom .popover-arrow::after {
+:host(.popover-bottom) .popover-arrow::after {
   top: -6px;
 }
 
 // Translucent Popover
 // -----------------------------------------
 
-.popover-translucent-ios .popover-content,
-.popover-translucent-ios .popover-arrow::after {
+:host(.popover-translucent) .popover-content,
+:host(.popover-translucent) .popover-arrow::after {
   background: $popover-ios-translucent-background-color;
   backdrop-filter: $popover-ios-translucent-filter;
 }

core/src/components/popover/popover.md.scss

@@ -4,7 +4,7 @@
 // Material Design Popover
 // --------------------------------------------------
 
-.popover-md .popover-content {
+.popover-content {
   @include border-radius($popover-md-border-radius);
   @include transform-origin(start, top);
 
@@ -19,7 +19,7 @@
   box-shadow: $popover-md-box-shadow;
 }
 
-.popover-md .popover-viewport {
+.popover-viewport {
   // opacity: 0;
   transition-delay: 100ms;
 }

core/src/components/popover/popover.scss

@@ -3,7 +3,7 @@
 // Popover
 // --------------------------------------------------
 
-ion-popover {
+:host {
   @include position(0, 0, 0, 0);
 
   display: flex;
@@ -29,9 +29,3 @@ ion-popover {
   overflow: auto;
   z-index: $z-index-overlay-wrapper;
 }
-
-.popover-content ion-content {
-  position: relative;
-
-  contain: none;
-}

core/src/components/popover/popover.tsx

@@ -16,7 +16,8 @@ import { mdLeaveAnimation } from './animations/md.leave';
   styleUrls: {
     ios: 'popover.ios.scss',
     md: 'popover.md.scss'
-  }
+  },
+  scoped: true
 })
 export class Popover implements OverlayInterface {
 
@@ -212,7 +213,6 @@ export class Popover implements OverlayInterface {
   }
 
   hostData() {
-    const themedClasses = this.translucent ? createThemedClasses(this.mode, 'popover-translucent') : {};
 
     return {
       style: {
@@ -220,9 +220,9 @@ export class Popover implements OverlayInterface {
       },
       'no-router': true,
       class: {
-        ...createThemedClasses(this.mode, 'popover'),
+        'popover-translucent': this.translucent,
+
         ...getClassMap(this.cssClass),
-        ...themedClasses,
       }
     };
   }