docs(popover): add nested playground

docs/api/popover.md

@@ -106,9 +106,13 @@ import ControllerExample from '@site/static/usage/popover/presenting/controller/
 Popovers are presented at the root of your application so they overlay your entire app. This behavior applies to both inline popovers and popovers presented from a controller. As a result, custom popover styles can not be scoped to a particular component as they will not apply to the popover. Instead, styles must be applied globally. For most developers, placing the custom styles in `global.css` is sufficient.
 
 :::note
- If you are building an Ionic Angular app, the styles need to be added to a global stylesheet file. Read [Style Placement](#style-placement) in the Angular section below for more information.
+ If you are building an Ionic Angular app, the styles need to be added to a global stylesheet file.
 :::
 
+import Styling from '@site/static/usage/popover/customization/styling/index.md';
+
+<Styling />
+
 
 ## Positioning
 
@@ -124,13 +128,25 @@ Regardless of what you choose for your reference point, you can position a popov
 
 The `alignment` property allows you to line up an edge of your popover with a corresponding edge on your trigger element. The exact edge that is used depends on the value of the `side` property. 
 
+### Side and Alignment Demo
+
+import Positioning from '@site/static/usage/popover/customization/positioning/index.md';
+
+<Positioning />
+
 ### Offsets
 
 If you need finer grained control over the positioning of your popover you can use the `--offset-x` and `--offset-y` CSS Variables. For example, `--offset-x: 10px` will move your popover content to the right by `10px`.
 
 ## Sizing
 
-When making dropdown menus, you may want to have the width of the popover match the width of the trigger element. Doing this without knowing the trigger width ahead of time is tricky. You can set the `size` property to `'cover'` and Ionic Framework will ensure that the width of the popover matches the width of your trigger element. If you are using the `popoverController`, you must provide an event via the `event` option and Ionic Framework will use `event.target` as the reference element.
+When making dropdown menus, you may want to have the width of the popover match the width of the trigger element. Doing this without knowing the trigger width ahead of time is tricky. You can set the `size` property to `'cover'` and Ionic Framework will ensure that the width of the popover matches the width of your trigger element.
+
+If you are using the `popoverController`, you must provide an event via the `event` option and Ionic Framework will use `event.target` as the reference element. See the [controller demo](#controller-popovers) for an example of this pattern.
+
+import Sizing from '@site/static/usage/popover/customization/sizing/index.md';
+
+<Sizing />
 
 ## Nested Popovers
 
@@ -142,6 +158,10 @@ You can use the `dismissOnSelect` property to automatically close the popover wh
  Nested popovers cannot be created when using the `popoverController` because the popover is automatically added to the root of your application when the `create` method is called.
 :::
 
+import NestedPopover from '@site/static/usage/popover/nested/index.md';
+
+<NestedPopover />
+
 
 ## Interfaces
 

static/usage/popover/customization/positioning/angular/angular_css.md

@@ -0,0 +1,12 @@
+```css
+ion-popover {
+  --width: 80px;
+}
+
+.container {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  padding: 80px;
+}
+```

static/usage/popover/customization/positioning/angular/angular_html.md

@@ -0,0 +1,31 @@
+```html
+<div class="container">
+  <ion-button id="top-center">Side=Top, Alignment=Center</ion-button>
+  <ion-popover trigger="top-center" side="top" alignment="center">
+    <ng-template>
+      <ion-content class="ion-padding">Hello World!</ion-content>
+    </ng-template>
+  </ion-popover>
+
+  <ion-button id="bottom-start">Side=Bottom, Alignment=Start</ion-button>
+  <ion-popover trigger="bottom-start" side="bottom" alignment="start">
+    <ng-template>
+      <ion-content class="ion-padding">Hello World!</ion-content>
+    </ng-template>
+  </ion-popover>
+
+  <ion-button id="left-start">Side=Left, Alignment=Start</ion-button>
+  <ion-popover trigger="left-start" side="left" alignment="start">
+    <ng-template>  
+      <ion-content class="ion-padding">Hello World!</ion-content>
+    </ng-template>
+  </ion-popover>
+
+  <ion-button id="right-end">Side=Right, Alignment=End</ion-button>
+  <ion-popover trigger="right-end" side="right" alignment="end">
+    <ng-template>
+      <ion-content class="ion-padding">Hello World!</ion-content>
+    </ng-template>
+  </ion-popover>
+</div>
+```

static/usage/popover/customization/positioning/angular/angular_ts.md

@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: 'app.component.html',
+  styleUrls: ['app.component.css']
+})
+export class AppComponent { }
+
+```

static/usage/popover/customization/positioning/demo.html

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Popover</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-direction: column;
+    }
+
+    ion-popover {
+      --width: 80px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-button id="top-center">Side=Top, Alignment=Center</ion-button>
+        <ion-popover trigger="top-center" side="top" alignment="center">
+          <ion-content class="ion-padding">Hello World!</ion-content>
+        </ion-popover>
+
+        <ion-button id="bottom-start">Side=Bottom, Alignment=Start</ion-button>
+        <ion-popover trigger="bottom-start" side="bottom" alignment="start">
+          <ion-content class="ion-padding">Hello World!</ion-content>
+        </ion-popover>
+
+        <ion-button id="left-start">Side=Left, Alignment=Start</ion-button>
+        <ion-popover trigger="left-start" side="left" alignment="start">
+          <ion-content class="ion-padding">Hello World!</ion-content>
+        </ion-popover>
+
+        <ion-button id="right-end">Side=Right, Alignment=End</ion-button>
+        <ion-popover trigger="right-end" side="right" alignment="end">
+          <ion-content class="ion-padding">Hello World!</ion-content>
+        </ion-popover>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>

static/usage/popover/customization/positioning/index.md

@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+
+import reactTS from './react/react_ts.md';
+import reactCSS from './react/react_css.md';
+
+import angularHTML from './angular/angular_html.md';
+import angularCSS from './angular/angular_css.md';
+import angularTS from './angular/angular_ts.md';
+
+<Playground
+  size="400px"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': reactTS,
+        'src/main.css': reactCSS
+      }
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/app.component.html': angularHTML,
+        'src/app/app.component.css': angularCSS,
+        'src/app/app.component.ts': angularTS
+      }
+    }
+  }}
+  src="usage/popover/customization/positioning/demo.html"
+/>

static/usage/popover/customization/positioning/javascript.md

@@ -0,0 +1,36 @@
+```html
+<div class="container">
+  <ion-button id="top-center">Side=Top, Alignment=Center</ion-button>
+  <ion-popover trigger="top-center" side="top" alignment="center">
+    <ion-content class="ion-padding">Hello World!</ion-content>
+  </ion-popover>
+
+  <ion-button id="bottom-start">Side=Bottom, Alignment=Start</ion-button>
+  <ion-popover trigger="bottom-start" side="bottom" alignment="start">
+    <ion-content class="ion-padding">Hello World!</ion-content>
+  </ion-popover>
+
+  <ion-button id="left-start">Side=Left, Alignment=Start</ion-button>
+  <ion-popover trigger="left-start" side="left" alignment="start">
+    <ion-content class="ion-padding">Hello World!</ion-content>
+  </ion-popover>
+
+  <ion-button id="right-end">Side=Right, Alignment=End</ion-button>
+  <ion-popover trigger="right-end" side="right" alignment="end">
+    <ion-content class="ion-padding">Hello World!</ion-content>
+  </ion-popover>
+</div>
+
+<style>
+  ion-popover {
+    --width: 80px;
+  }
+
+  .container {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    padding: 80px;
+  }
+</style>
+```

static/usage/popover/customization/positioning/react/react_css.md

@@ -0,0 +1,12 @@
+```css
+ion-popover {
+  --width: 80px;
+}
+
+.container {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  padding: 80px;
+}
+```

static/usage/popover/customization/positioning/react/react_ts.md

@@ -0,0 +1,33 @@
+```tsx
+import React from 'react';
+import { IonButton, IonContent, IonPopover } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <div className="container">
+      <IonButton id="top-center">Side=Top, Alignment=Center</IonButton>
+      <IonPopover trigger="top-center" side="top" alignment="center">
+        <IonContent class="ion-padding">Hello World!</IonContent>
+      </IonPopover>
+
+      <IonButton id="bottom-start">Side=Bottom, Alignment=Start</IonButton>
+      <IonPopover trigger="bottom-start" side="bottom" alignment="start">
+        <IonContent class="ion-padding">Hello World!</IonContent>
+      </IonPopover>
+
+      <IonButton id="left-start">Side=Left, Alignment=Start</IonButton>
+      <IonPopover trigger="left-start" side="left" alignment="start">
+        <IonContent class="ion-padding">Hello World!</IonContent>
+      </IonPopover>
+
+      <IonButton id="right-end">Side=Right, Alignment=End</IonButton>
+      <IonPopover trigger="right-end" side="right" alignment="end">
+        <IonContent class="ion-padding">Hello World!</IonContent>
+      </IonPopover>
+    </div>
+  );
+}
+export default Example;
+```

static/usage/popover/customization/positioning/vue.md

@@ -0,0 +1,47 @@
+```html
+<template>
+  <div class="container">
+    <ion-button id="top-center">Side=Top, Alignment=Center</ion-button>
+    <ion-popover trigger="top-center" side="top" alignment="center">
+      <ion-content class="ion-padding">Hello World!</ion-content>
+    </ion-popover>
+
+    <ion-button id="bottom-start">Side=Bottom, Alignment=Start</ion-button>
+    <ion-popover trigger="bottom-start" side="bottom" alignment="start">
+      <ion-content class="ion-padding">Hello World!</ion-content>
+    </ion-popover>
+
+    <ion-button id="left-start">Side=Left, Alignment=Start</ion-button>
+    <ion-popover trigger="left-start" side="left" alignment="start">
+      <ion-content class="ion-padding">Hello World!</ion-content>
+    </ion-popover>
+
+    <ion-button id="right-end">Side=Right, Alignment=End</ion-button>
+    <ion-popover trigger="right-end" side="right" alignment="end">
+      <ion-content class="ion-padding">Hello World!</ion-content>
+    </ion-popover>
+  </div>
+</template>
+
+<script lang="ts">
+  import { IonButton, IonContent, IonPopover } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonButton, IonContent, IonPopover },
+  });
+</script>
+
+<style>
+  ion-popover {
+    --width: 80px;
+  }
+
+  .container {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    padding: 80px;
+  }
+</style>
+```

static/usage/popover/customization/sizing/angular.md

@@ -0,0 +1,15 @@
+```html
+<ion-button id="auto-trigger">Size=Auto</ion-button>
+<ion-popover trigger="auto-trigger" size="auto">
+  <ng-template>
+    <ion-content class="ion-padding">Hello!</ion-content>
+  </ng-template>
+</ion-popover>
+
+<ion-button id="cover-trigger">Size=Cover</ion-button>
+<ion-popover trigger="cover-trigger" size="cover">
+  <ng-template>
+    <ion-content class="ion-padding">Hello!</ion-content>
+  </ng-template>
+</ion-popover>
+```

static/usage/popover/customization/sizing/demo.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Popover</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-button id="auto-trigger">Size=Auto</ion-button>
+        <ion-popover trigger="auto-trigger" size="auto">
+          <ion-content class="ion-padding">Hello!</ion-content>
+        </ion-popover>
+
+        <ion-button id="cover-trigger">Size=Cover</ion-button>
+        <ion-popover trigger="cover-trigger" size="cover">
+          <ion-content class="ion-padding">Hello!</ion-content>
+        </ion-popover>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>

static/usage/popover/customization/sizing/index.md

@@ -0,0 +1,12 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  size="300px"
+  code={{ javascript, react, vue, angular }}
+  src="usage/popover/customization/sizing/demo.html"
+/>