docs(demos): add popover API demo, tweak e2e demo

references #5420

src/components/popover/popover.ts

@@ -15,6 +15,9 @@ const POPOVER_BODY_PADDING = 2;
  * @name Popover
  * @description
  *
+ *
+ *
+ * @demo /docs/v2/demos/popover/
  */
 export class Popover extends ViewController {
 

src/components/popover/test/basic/index.ts

@@ -59,27 +59,27 @@ import {App, Page, Popover, NavController, Content, NavParams} from '../../../..
   `,
 })
 class PopoverRadioPage {
-  background: string = 'white';
+  background: string;
   contentEle: any;
   textEle: any;
   fontFamily;
 
   colors = {
-    "white": {
-      "bg": "#fff",
-      "fg": "#000"
+    'white': {
+      'bg': 'rgb(255, 255, 255)',
+      'fg': 'rgb(0, 0, 0)'
     },
-    "tan": {
-      "bg": "#f9f1e4",
-      "fg": "#000"
+    'tan': {
+      'bg': 'rgb(249, 241, 228)',
+      'fg': 'rgb(0, 0, 0)'
     },
-    "grey": {
-      "bg": "#4c4b50",
-      "fg": "#fff"
+    'grey': {
+      'bg': 'rgb(76, 75, 80)',
+      'fg': 'rgb(255, 255, 255)'
     },
-    "black": {
-      "bg": "#000",
-      "fg": "#fff"
+    'black': {
+      'bg': 'rgb(0, 0, 0)',
+      'fg': 'rgb(255, 255, 255)'
     },
   };
 
@@ -91,12 +91,35 @@ class PopoverRadioPage {
     if (this.navParams.data) {
       this.contentEle = this.navParams.data.contentEle;
       this.textEle = this.navParams.data.textEle;
+
+      this.background = this.getColorName(this.contentEle.style.backgroundColor);
+      this.setFontFamily();
+    }
+  }
+
+  getColorName(background) {
+    let colorName = 'white';
+
+    if (!background) return 'white';
+
+    for(var key in this.colors) {
+      if (this.colors[key].bg == background) {
+        colorName = key;
+      }
+    }
+
+    return colorName;
+  }
+
+  setFontFamily() {
+    if (this.textEle.style.fontFamily) {
+      this.fontFamily = this.textEle.style.fontFamily.replace(/'/g, "");
     }
   }
 
   changeBackground(color) {
     this.background = color;
-    this.contentEle.style.background = this.colors[color].bg;
+    this.contentEle.style.backgroundColor = this.colors[color].bg;
     this.textEle.style.color = this.colors[color].fg;
   }
 
@@ -133,8 +156,6 @@ class E2EPage {
   @ViewChild('popoverContent', {read: ElementRef}) content: ElementRef;
   @ViewChild('popoverText', {read: ElementRef}) text: ElementRef;
 
-  popover: any;
-
   constructor(private nav: NavController) {
 
   }
@@ -164,10 +185,7 @@ class E2EPage {
   template: '<ion-nav [root]="root"></ion-nav>'
 })
 class E2EApp {
-  root;
-  constructor() {
-    this.root = E2EPage;
-  }
+  root = E2EPage;
 }
 
 document.body.innerHTML += '<link href="style.css" rel="stylesheet">'

src/components/popover/test/basic/style.css

@@ -14,6 +14,10 @@ ion-col {
   line-height: 18px;
 }
 
+.text-button .item-inner {
+  padding-right: 0;
+}
+
 .text-smaller {
   font-size: 12px;
 }
@@ -64,19 +68,19 @@ ion-col {
 }
 
 .dot-white {
-  background-color: #fff;
+  background-color: rgb(255,255,255);
 }
 
 .dot-tan {
-  background-color: #f9f1e4;
+  background-color: rgb(249,241,228);
 }
 
 .dot-grey {
-  background-color: #4c4b50;
+  background-color: rgb(76,75,80);
 }
 
 .dot-black {
-  background-color: #000;
+  background-color: rgb(0,0,0);
 }
 
 .dot.selected {