From 0060140625a54505d9a134c6493447efd2a901b5 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Mon, 13 Feb 2023 16:17:55 +0000
Subject: [PATCH 1/7] docs(toast): add v7 layout demos

---
 docs/api/toast.md                             |  9 +++-
 .../layout/angular/example_component_html.md  | 17 ++++++++
 .../layout/angular/example_component_ts.md    | 15 +++++++
 static/usage/v7/toast/layout/demo.html        | 42 +++++++++++++++++++
 static/usage/v7/toast/layout/index.md         | 25 +++++++++++
 static/usage/v7/toast/layout/javascript.md    | 18 ++++++++
 static/usage/v7/toast/layout/react.md         | 35 ++++++++++++++++
 static/usage/v7/toast/layout/vue.md           | 37 ++++++++++++++++
 8 files changed, 197 insertions(+), 1 deletion(-)
 create mode 100644 static/usage/v7/toast/layout/angular/example_component_html.md
 create mode 100644 static/usage/v7/toast/layout/angular/example_component_ts.md
 create mode 100644 static/usage/v7/toast/layout/demo.html
 create mode 100644 static/usage/v7/toast/layout/index.md
 create mode 100644 static/usage/v7/toast/layout/javascript.md
 create mode 100644 static/usage/v7/toast/layout/react.md
 create mode 100644 static/usage/v7/toast/layout/vue.md

diff --git a/docs/api/toast.md b/docs/api/toast.md
index 8d3c0ba3a4c..672676d26ff 100644
--- a/docs/api/toast.md
+++ b/docs/api/toast.md
@@ -55,12 +55,19 @@ The following example demonstrates how to use the `buttons` property to add a bu
 import ButtonsPlayground from '@site/static/usage/v7/toast/buttons/index.md';
 
 <ButtonsPlayground />
-  
 
 ## Positioning
 
 Toasts can be positioned at the top, bottom or middle of the viewport. The position can be passed upon creation. The possible values are `top`, `bottom` and `middle`. If the position is not specified, the toast will be displayed at the bottom of the viewport.
 
+## Layout
+
+Button containers within the toast can be displayed either inline with the message or stacked on separate lines using the `layout` property. The stacked layout should be used with buttons that have long text values. Additionally, buttons in a stacked toast layout can use a `side` value of either `start` or `end`, but not both.
+
+import StackedPlayground from '@site/static/usage/v7/toast/layout/index.md';
+
+<StackedPlayground />
+
 ## Icons
 
 An icon can be added next to the content inside of the toast. In general, icons in toasts should be used to add additional style or context, not to grab the user's attention or elevate the priority of the toast. If you wish to convey a higher priority message to the user or guarantee a response, we recommend using an [Alert](alert.md) instead.
diff --git a/static/usage/v7/toast/layout/angular/example_component_html.md b/static/usage/v7/toast/layout/angular/example_component_html.md
new file mode 100644
index 00000000000..1ab9c877cd6
--- /dev/null
+++ b/static/usage/v7/toast/layout/angular/example_component_html.md
@@ -0,0 +1,17 @@
+```html
+<ion-button id="open-inline-toast">Open Inline Toast</ion-button>
+<ion-button id="open-stacked-toast">Open Stacked Toast</ion-button>
+<ion-toast 
+  trigger="open-inline-toast" 
+  [duration]="3000"
+  [buttons]="toastButtons"
+  message="This is a toast with a long message and a button that appears on the same line."
+></ion-toast>
+<ion-toast
+  trigger="open-stacked-toast" 
+  [duration]="3000"
+  [buttons]="toastButtons"
+  message="This is a toast with a long message and a button that appears on the next line." 
+  layout="stacked"
+></ion-toast>
+```
\ No newline at end of file
diff --git a/static/usage/v7/toast/layout/angular/example_component_ts.md b/static/usage/v7/toast/layout/angular/example_component_ts.md
new file mode 100644
index 00000000000..fc3b99e4517
--- /dev/null
+++ b/static/usage/v7/toast/layout/angular/example_component_ts.md
@@ -0,0 +1,15 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  public toastButtons = [
+    {
+      text: 'Action With Long Text',
+    }
+  ];
+}
+```
\ No newline at end of file
diff --git a/static/usage/v7/toast/layout/demo.html b/static/usage/v7/toast/layout/demo.html
new file mode 100644
index 00000000000..ad1bdeaea06
--- /dev/null
+++ b/static/usage/v7/toast/layout/demo.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Toast</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Toast</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <ion-button id="open-inline-toast">Open Inline Toast</ion-button>
+      <ion-button id="open-stacked-toast">Open Stacked Toast</ion-button>
+      <ion-toast trigger="open-stacked-toast" duration="3000" message="This is a toast with a long message and a button that appears on the next line." layout="stacked"></ion-toast>
+      <ion-toast trigger="open-inline-toast" duration="3000" message="This is a toast with a long message and a button that appears on the same line."></ion-toast>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const toasts = document.querySelectorAll('ion-toast');
+
+    toasts.forEach((toast) => {
+      toast.buttons = [
+        {
+          text: 'Action With Long Text',
+        },
+      ];
+    });
+  </script>
+</body>
+
+</html>
diff --git a/static/usage/v7/toast/layout/index.md b/static/usage/v7/toast/layout/index.md
new file mode 100644
index 00000000000..26d799850e4
--- /dev/null
+++ b/static/usage/v7/toast/layout/index.md
@@ -0,0 +1,25 @@
+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_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  devicePreview
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/toast/layout/demo.html"
+/>
diff --git a/static/usage/v7/toast/layout/javascript.md b/static/usage/v7/toast/layout/javascript.md
new file mode 100644
index 00000000000..33f1257429f
--- /dev/null
+++ b/static/usage/v7/toast/layout/javascript.md
@@ -0,0 +1,18 @@
+```html
+<ion-button id="open-inline-toast">Open Inline Toast</ion-button>
+<ion-button id="open-stacked-toast">Open Stacked Toast</ion-button>
+<ion-toast trigger="open-inline-toast" duration="3000" message="This is a toast with a long message and a button that appears on the same line."></ion-toast>
+<ion-toast trigger="open-stacked-toast" duration="3000" message="This is a toast with a long message and a button that appears on the next line." layout="stacked"></ion-toast>
+
+<script>
+  const toasts = document.querySelectorAll('ion-toast');
+  
+  toasts.forEach((toast) => {
+    toast.buttons = [
+      {
+        text: 'Action With Long Text',
+      },
+    ];
+  });
+</script>
+```
diff --git a/static/usage/v7/toast/layout/react.md b/static/usage/v7/toast/layout/react.md
new file mode 100644
index 00000000000..5d52a666faf
--- /dev/null
+++ b/static/usage/v7/toast/layout/react.md
@@ -0,0 +1,35 @@
+```tsx
+import React from 'react';
+import { IonButton, IonToast } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonButton id="open-stacked-toast">Open Stacked Toast</IonButton>
+      <IonButton id="open-inline-toast">Open Inline Toast</IonButton>
+      <IonToast
+        trigger="open-inline-toast"
+        message="This is a toast with a long message and a button that appears on the same line."
+        duration={3000}
+        buttons={[
+          {
+            text: 'Action With Long Text',
+          }
+        ]}
+      ></IonToast>
+      <IonToast
+        trigger="open-stacked-toast"
+        message="This is a toast with a long message and a button that appears on the next line."
+        duration={3000}
+        buttons={[
+          {
+            text: 'Action With Long Text',
+          }
+        ]}
+        layout="stacked"
+      ></IonToast>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/toast/layout/vue.md b/static/usage/v7/toast/layout/vue.md
new file mode 100644
index 00000000000..5272c55f755
--- /dev/null
+++ b/static/usage/v7/toast/layout/vue.md
@@ -0,0 +1,37 @@
+```html
+<template>
+  <ion-button id="open-inline-toast">Open Inline Toast</ion-button>
+  <ion-button id="open-stacked-toast">Open Stacked Toast</ion-button>
+  <ion-toast 
+    trigger="open-inline-toast" 
+    :duration="3000"
+    :buttons="toastButtons"
+    message="This is a toast with a long message and a button that appears on the same line."
+  ></ion-toast>
+  <ion-toast
+    trigger="open-stacked-toast" 
+    :duration="3000"
+    :buttons="toastButtons"
+    message="This is a toast with a long message and a button that appears on the next line." 
+    layout="stacked"
+  ></ion-toast>
+</template>
+
+<script lang="ts">
+  import { IonButton, IonToast } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonButton, IonToast },
+    setup() {
+      const toastButtons = [
+        {
+          text: 'Action With Long Text'
+        }
+      ]
+
+      return toastButtons }
+    }
+  });
+</script>
+```

From 3d289476a4e5aada22edf3f5e4461c8659ba46c9 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Mon, 13 Feb 2023 16:30:33 +0000
Subject: [PATCH 2/7] add layout name to avoid confusion with inline toasts

---
 .../usage/v7/toast/layout/angular/example_component_html.md   | 4 ++--
 static/usage/v7/toast/layout/demo.html                        | 4 ++--
 static/usage/v7/toast/layout/javascript.md                    | 4 ++--
 static/usage/v7/toast/layout/react.md                         | 4 ++--
 static/usage/v7/toast/layout/vue.md                           | 4 ++--
 5 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/static/usage/v7/toast/layout/angular/example_component_html.md b/static/usage/v7/toast/layout/angular/example_component_html.md
index 1ab9c877cd6..0554ce23978 100644
--- a/static/usage/v7/toast/layout/angular/example_component_html.md
+++ b/static/usage/v7/toast/layout/angular/example_component_html.md
@@ -1,6 +1,6 @@
 ```html
-<ion-button id="open-inline-toast">Open Inline Toast</ion-button>
-<ion-button id="open-stacked-toast">Open Stacked Toast</ion-button>
+<ion-button id="open-inline-toast">Open Inline Layout Toast</ion-button>
+<ion-button id="open-stacked-toast">Open Stacked Layout Toast</ion-button>
 <ion-toast 
   trigger="open-inline-toast" 
   [duration]="3000"
diff --git a/static/usage/v7/toast/layout/demo.html b/static/usage/v7/toast/layout/demo.html
index ad1bdeaea06..aad8f14e691 100644
--- a/static/usage/v7/toast/layout/demo.html
+++ b/static/usage/v7/toast/layout/demo.html
@@ -19,8 +19,8 @@
       </ion-toolbar>
     </ion-header>
     <ion-content class="ion-padding">
-      <ion-button id="open-inline-toast">Open Inline Toast</ion-button>
-      <ion-button id="open-stacked-toast">Open Stacked Toast</ion-button>
+      <ion-button id="open-inline-toast">Open Inline Layout Toast</ion-button>
+      <ion-button id="open-stacked-toast">Open Stacked Layout Toast</ion-button>
       <ion-toast trigger="open-stacked-toast" duration="3000" message="This is a toast with a long message and a button that appears on the next line." layout="stacked"></ion-toast>
       <ion-toast trigger="open-inline-toast" duration="3000" message="This is a toast with a long message and a button that appears on the same line."></ion-toast>
     </ion-content>
diff --git a/static/usage/v7/toast/layout/javascript.md b/static/usage/v7/toast/layout/javascript.md
index 33f1257429f..ed8794cd870 100644
--- a/static/usage/v7/toast/layout/javascript.md
+++ b/static/usage/v7/toast/layout/javascript.md
@@ -1,6 +1,6 @@
 ```html
-<ion-button id="open-inline-toast">Open Inline Toast</ion-button>
-<ion-button id="open-stacked-toast">Open Stacked Toast</ion-button>
+<ion-button id="open-inline-toast">Open Inline Layout Toast</ion-button>
+<ion-button id="open-stacked-toast">Open Stacked Layout Toast</ion-button>
 <ion-toast trigger="open-inline-toast" duration="3000" message="This is a toast with a long message and a button that appears on the same line."></ion-toast>
 <ion-toast trigger="open-stacked-toast" duration="3000" message="This is a toast with a long message and a button that appears on the next line." layout="stacked"></ion-toast>
 
diff --git a/static/usage/v7/toast/layout/react.md b/static/usage/v7/toast/layout/react.md
index 5d52a666faf..1e0516bf382 100644
--- a/static/usage/v7/toast/layout/react.md
+++ b/static/usage/v7/toast/layout/react.md
@@ -5,8 +5,8 @@ import { IonButton, IonToast } from '@ionic/react';
 function Example() {
   return (
     <>
-      <IonButton id="open-stacked-toast">Open Stacked Toast</IonButton>
-      <IonButton id="open-inline-toast">Open Inline Toast</IonButton>
+      <IonButton id="open-stacked-toast">Open Stacked Layout Toast</IonButton>
+      <IonButton id="open-inline-toast">Open Inline Layout Toast</IonButton>
       <IonToast
         trigger="open-inline-toast"
         message="This is a toast with a long message and a button that appears on the same line."
diff --git a/static/usage/v7/toast/layout/vue.md b/static/usage/v7/toast/layout/vue.md
index 5272c55f755..cf0f3072d1a 100644
--- a/static/usage/v7/toast/layout/vue.md
+++ b/static/usage/v7/toast/layout/vue.md
@@ -1,7 +1,7 @@
 ```html
 <template>
-  <ion-button id="open-inline-toast">Open Inline Toast</ion-button>
-  <ion-button id="open-stacked-toast">Open Stacked Toast</ion-button>
+  <ion-button id="open-inline-toast">Open Inline Layout Toast</ion-button>
+  <ion-button id="open-stacked-toast">Open Stacked Layout Toast</ion-button>
   <ion-toast 
     trigger="open-inline-toast" 
     :duration="3000"

From f788b2875b8d7d111e91d782fc587a2c2bb3b5f4 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Mon, 13 Feb 2023 11:39:04 -0500
Subject: [PATCH 3/7] add v6 toast demo

---
 .../layout/angular/example_component_html.md  |  4 ++
 .../layout/angular/example_component_ts.md    | 40 ++++++++++++
 static/usage/v6/toast/layout/demo.html        | 62 +++++++++++++++++++
 static/usage/v6/toast/layout/index.md         | 24 +++++++
 static/usage/v6/toast/layout/javascript.md    | 33 ++++++++++
 static/usage/v6/toast/layout/react.md         | 41 ++++++++++++
 static/usage/v6/toast/layout/vue.md           | 45 ++++++++++++++
 versioned_docs/version-v6/api/toast.md        |  8 +++
 8 files changed, 257 insertions(+)
 create mode 100644 static/usage/v6/toast/layout/angular/example_component_html.md
 create mode 100644 static/usage/v6/toast/layout/angular/example_component_ts.md
 create mode 100644 static/usage/v6/toast/layout/demo.html
 create mode 100644 static/usage/v6/toast/layout/index.md
 create mode 100644 static/usage/v6/toast/layout/javascript.md
 create mode 100644 static/usage/v6/toast/layout/react.md
 create mode 100644 static/usage/v6/toast/layout/vue.md

diff --git a/static/usage/v6/toast/layout/angular/example_component_html.md b/static/usage/v6/toast/layout/angular/example_component_html.md
new file mode 100644
index 00000000000..de4e6bee93e
--- /dev/null
+++ b/static/usage/v6/toast/layout/angular/example_component_html.md
@@ -0,0 +1,4 @@
+```html
+<ion-button (click)="presentInlineToast()">Open Inline Layout Toast</ion-button>
+<ion-button (click)="presentStackedToast()">Click Stacked Layout Toast</ion-button>
+```
\ No newline at end of file
diff --git a/static/usage/v6/toast/layout/angular/example_component_ts.md b/static/usage/v6/toast/layout/angular/example_component_ts.md
new file mode 100644
index 00000000000..25d2846dadf
--- /dev/null
+++ b/static/usage/v6/toast/layout/angular/example_component_ts.md
@@ -0,0 +1,40 @@
+```ts
+import { Component } from '@angular/core';
+import { ToastController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+
+  constructor(private toastController: ToastController) {}
+  
+  async presentToast(opts) {
+    const toast = await this.toastController.create(opts);
+  
+    await toast.present();
+  }
+  
+  async presentInlineToast() {
+    await this.presentToast({
+      duration: 3000,
+      message: "This is a toast with a long message and a button that appears on the same line.",
+      buttons: [
+        { text: 'Action With Long Text'}
+      ]
+    });
+  }
+  
+  async presentStackedToast() {
+    await this.presentToast({
+      duration: 3000,
+      message: "This is a toast with a long message and a button that appears on the next line.",
+      buttons: [
+        { text: 'Action With Long Text'}
+      ],
+      layout: "stacked"
+    });
+  }
+}
+```
\ No newline at end of file
diff --git a/static/usage/v6/toast/layout/demo.html b/static/usage/v6/toast/layout/demo.html
new file mode 100644
index 00000000000..4684335584f
--- /dev/null
+++ b/static/usage/v6/toast/layout/demo.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Toast</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.5.3-dev.11676303024.114a8ff3/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.5.3-dev.11676303024.114a8ff3/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Toast</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <ion-button onclick="presentInlineToast()">Open Inline Layout Toast</ion-button>
+      <ion-button onclick="presentStackedToast()">Click Stacked Layout Toast</ion-button>
+    </ion-content>
+  </ion-app>
+
+  <script type="module">
+    import { toastController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@6.5.3-dev.11676303024.114a8ff3/dist/ionic/index.esm.js';
+    window.toastController = toastController;
+  </script>
+
+  <script>
+    async function presentToast(opts) {
+      const toast = await toastController.create(opts);
+
+      await toast.present();
+    }
+
+    async function presentInlineToast() {
+      await presentToast({
+        duration: 3000,
+        message: "This is a toast with a long message and a button that appears on the same line.",
+        buttons: [
+          { text: 'Action With Long Text'}
+        ]
+      });
+    }
+
+    async function presentStackedToast() {
+      await presentToast({
+        duration: 3000,
+        message: "This is a toast with a long message and a button that appears on the next line.",
+        buttons: [
+          { text: 'Action With Long Text'}
+        ],
+        layout: "stacked"
+      });
+    }
+  </script>
+</body>
+
+</html>
diff --git a/static/usage/v6/toast/layout/index.md b/static/usage/v6/toast/layout/index.md
new file mode 100644
index 00000000000..7f420b26af4
--- /dev/null
+++ b/static/usage/v6/toast/layout/index.md
@@ -0,0 +1,24 @@
+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_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  devicePreview
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v6/toast/layout/demo.html"
+/>
diff --git a/static/usage/v6/toast/layout/javascript.md b/static/usage/v6/toast/layout/javascript.md
new file mode 100644
index 00000000000..f7a6e6f5fb9
--- /dev/null
+++ b/static/usage/v6/toast/layout/javascript.md
@@ -0,0 +1,33 @@
+```html
+<ion-button onclick="presentInlineToast()">Open Inline Layout Toast</ion-button>
+<ion-button onclick="presentStackedToast()">Click Stacked Layout Toast</ion-button>
+
+<script>
+  async function presentToast(opts) {
+    const toast = await toastController.create(opts);
+  
+    await toast.present();
+  }
+  
+  async function presentInlineToast() {
+    await presentToast({
+      duration: 3000,
+      message: "This is a toast with a long message and a button that appears on the same line.",
+      buttons: [
+        { text: 'Action With Long Text'}
+      ]
+    });
+  }
+  
+  async function presentStackedToast() {
+    await presentToast({
+      duration: 3000,
+      message: "This is a toast with a long message and a button that appears on the next line.",
+      buttons: [
+        { text: 'Action With Long Text'}
+      ],
+      layout: "stacked"
+    });
+  }
+</script>
+```
diff --git a/static/usage/v6/toast/layout/react.md b/static/usage/v6/toast/layout/react.md
new file mode 100644
index 00000000000..0055df05117
--- /dev/null
+++ b/static/usage/v6/toast/layout/react.md
@@ -0,0 +1,41 @@
+```tsx
+import React from 'react';
+import { IonButton, useIonToast } from '@ionic/react';
+
+function Example() {
+  const [presentToast] = useIonToast();
+
+  return (
+    <>
+      <IonButton
+        onClick={() => {
+          presentToast({
+            duration: 3000,
+            message: "This is a toast with a long message and a button that appears on the next line.",
+            buttons: [
+              { text: 'Action With Long Text'}
+            ]
+          })
+        }}
+      >
+        Open Inline Layout Toast
+      </IonButton>
+      <IonButton
+        onClick={() => {
+          presentToast({
+            duration: 3000,
+            message: "This is a toast with a long message and a button that appears on the next line.",
+            buttons: [
+              { text: 'Action With Long Text'}
+            ],
+            layout: "stacked"
+          })
+        }}
+      >
+        Open Stacked Layout Toast
+      </IonButton>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v6/toast/layout/vue.md b/static/usage/v6/toast/layout/vue.md
new file mode 100644
index 00000000000..a8b5d522e88
--- /dev/null
+++ b/static/usage/v6/toast/layout/vue.md
@@ -0,0 +1,45 @@
+```html
+<template>
+  <ion-button @click="presentInlineToast()">Open Inline Layout Toast</ion-button>
+  <ion-button @click="presentStackedToast()">Click Stacked Layout Toast</ion-button>
+</template>
+
+<script lang="ts">
+  import { IonButton, toastController } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonButton },
+    setup() {
+      const presentToast = async (opts) => {
+        const toast = await toastController.create(opts);
+      
+        await toast.present();
+      }
+      
+      const presentInlineToast = async () => {
+        await presentToast({
+          duration: 3000,
+          message: "This is a toast with a long message and a button that appears on the same line.",
+          buttons: [
+            { text: 'Action With Long Text'}
+          ]
+        });
+      }
+      
+      const presentStackedToast = async () => {
+        await presentToast({
+          duration: 3000,
+          message: "This is a toast with a long message and a button that appears on the next line.",
+          buttons: [
+            { text: 'Action With Long Text'}
+          ],
+          layout: "stacked"
+        });
+      }
+      
+      return { presentInlineToast, presentStackedToast }
+    }
+  });
+</script>
+```
diff --git a/versioned_docs/version-v6/api/toast.md b/versioned_docs/version-v6/api/toast.md
index de515e72bbb..701305d039b 100644
--- a/versioned_docs/version-v6/api/toast.md
+++ b/versioned_docs/version-v6/api/toast.md
@@ -99,6 +99,14 @@ import ButtonsPlayground from '@site/static/usage/v6/toast/buttons/index.md';
 
 <ButtonsPlayground />
 
+## Layout
+
+Button containers within the toast can be displayed either inline with the message or stacked on separate lines using the `layout` property. The stacked layout should be used with buttons that have long text values. Additionally, buttons in a stacked toast layout can use a `side` value of either `start` or `end`, but not both.
+
+import StackedPlayground from '@site/static/usage/v6/toast/layout/index.md';
+
+<StackedPlayground />
+
 ## Icons
 
 An icon can be added next to the content inside of the toast. In general, icons in toasts should be used to add additional style or context, not to grab the user's attention or elevate the priority of the toast. If you wish to convey a higher priority message to the user or guarantee a response, we recommend using an [Alert](alert.md) instead.

From b519cdc90801b59bd0c8b8145597fa83b85ca026 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Mon, 13 Feb 2023 12:16:55 -0500
Subject: [PATCH 4/7] refactor(toast): rename inline to baseline

---
 docs/api/toast.md                                           | 2 +-
 .../usage/v6/toast/layout/angular/example_component_html.md | 2 +-
 .../usage/v6/toast/layout/angular/example_component_ts.md   | 2 +-
 static/usage/v6/toast/layout/demo.html                      | 4 ++--
 static/usage/v6/toast/layout/javascript.md                  | 4 ++--
 static/usage/v6/toast/layout/react.md                       | 2 +-
 static/usage/v6/toast/layout/vue.md                         | 6 +++---
 .../usage/v7/toast/layout/angular/example_component_html.md | 2 +-
 static/usage/v7/toast/layout/demo.html                      | 2 +-
 static/usage/v7/toast/layout/javascript.md                  | 2 +-
 static/usage/v7/toast/layout/react.md                       | 2 +-
 static/usage/v7/toast/layout/vue.md                         | 2 +-
 versioned_docs/version-v6/api/toast.md                      | 2 +-
 13 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/docs/api/toast.md b/docs/api/toast.md
index 672676d26ff..bf74e97cdd6 100644
--- a/docs/api/toast.md
+++ b/docs/api/toast.md
@@ -62,7 +62,7 @@ Toasts can be positioned at the top, bottom or middle of the viewport. The posit
 
 ## Layout
 
-Button containers within the toast can be displayed either inline with the message or stacked on separate lines using the `layout` property. The stacked layout should be used with buttons that have long text values. Additionally, buttons in a stacked toast layout can use a `side` value of either `start` or `end`, but not both.
+Button containers within the toast can be displayed either on the same line as the message or stacked on separate lines using the `layout` property. The stacked layout should be used with buttons that have long text values. Additionally, buttons in a stacked toast layout can use a `side` value of either `start` or `end`, but not both.
 
 import StackedPlayground from '@site/static/usage/v7/toast/layout/index.md';
 
diff --git a/static/usage/v6/toast/layout/angular/example_component_html.md b/static/usage/v6/toast/layout/angular/example_component_html.md
index de4e6bee93e..8bd086f7ba5 100644
--- a/static/usage/v6/toast/layout/angular/example_component_html.md
+++ b/static/usage/v6/toast/layout/angular/example_component_html.md
@@ -1,4 +1,4 @@
 ```html
-<ion-button (click)="presentInlineToast()">Open Inline Layout Toast</ion-button>
+<ion-button (click)="presentBaselineToast()">Open Baseline Layout Toast</ion-button>
 <ion-button (click)="presentStackedToast()">Click Stacked Layout Toast</ion-button>
 ```
\ No newline at end of file
diff --git a/static/usage/v6/toast/layout/angular/example_component_ts.md b/static/usage/v6/toast/layout/angular/example_component_ts.md
index 25d2846dadf..e9957b30292 100644
--- a/static/usage/v6/toast/layout/angular/example_component_ts.md
+++ b/static/usage/v6/toast/layout/angular/example_component_ts.md
@@ -16,7 +16,7 @@ export class ExampleComponent {
     await toast.present();
   }
   
-  async presentInlineToast() {
+  async presentBaselineToast() {
     await this.presentToast({
       duration: 3000,
       message: "This is a toast with a long message and a button that appears on the same line.",
diff --git a/static/usage/v6/toast/layout/demo.html b/static/usage/v6/toast/layout/demo.html
index 4684335584f..f34ee0f6f0b 100644
--- a/static/usage/v6/toast/layout/demo.html
+++ b/static/usage/v6/toast/layout/demo.html
@@ -19,7 +19,7 @@
       </ion-toolbar>
     </ion-header>
     <ion-content class="ion-padding">
-      <ion-button onclick="presentInlineToast()">Open Inline Layout Toast</ion-button>
+      <ion-button onclick="presentBaselineToast()">Open Baseline Layout Toast</ion-button>
       <ion-button onclick="presentStackedToast()">Click Stacked Layout Toast</ion-button>
     </ion-content>
   </ion-app>
@@ -36,7 +36,7 @@
       await toast.present();
     }
 
-    async function presentInlineToast() {
+    async function presentBaselineToast() {
       await presentToast({
         duration: 3000,
         message: "This is a toast with a long message and a button that appears on the same line.",
diff --git a/static/usage/v6/toast/layout/javascript.md b/static/usage/v6/toast/layout/javascript.md
index f7a6e6f5fb9..2350799f7e1 100644
--- a/static/usage/v6/toast/layout/javascript.md
+++ b/static/usage/v6/toast/layout/javascript.md
@@ -1,5 +1,5 @@
 ```html
-<ion-button onclick="presentInlineToast()">Open Inline Layout Toast</ion-button>
+<ion-button onclick="presentBaselineToast()">Open Baseline Layout Toast</ion-button>
 <ion-button onclick="presentStackedToast()">Click Stacked Layout Toast</ion-button>
 
 <script>
@@ -9,7 +9,7 @@
     await toast.present();
   }
   
-  async function presentInlineToast() {
+  async function presentBaselineToast() {
     await presentToast({
       duration: 3000,
       message: "This is a toast with a long message and a button that appears on the same line.",
diff --git a/static/usage/v6/toast/layout/react.md b/static/usage/v6/toast/layout/react.md
index 0055df05117..68813f1eb1f 100644
--- a/static/usage/v6/toast/layout/react.md
+++ b/static/usage/v6/toast/layout/react.md
@@ -18,7 +18,7 @@ function Example() {
           })
         }}
       >
-        Open Inline Layout Toast
+        Open Baseline Layout Toast
       </IonButton>
       <IonButton
         onClick={() => {
diff --git a/static/usage/v6/toast/layout/vue.md b/static/usage/v6/toast/layout/vue.md
index a8b5d522e88..4047d22b6da 100644
--- a/static/usage/v6/toast/layout/vue.md
+++ b/static/usage/v6/toast/layout/vue.md
@@ -1,6 +1,6 @@
 ```html
 <template>
-  <ion-button @click="presentInlineToast()">Open Inline Layout Toast</ion-button>
+  <ion-button @click="presentBaselineToast()">Open Baseline Layout Toast</ion-button>
   <ion-button @click="presentStackedToast()">Click Stacked Layout Toast</ion-button>
 </template>
 
@@ -17,7 +17,7 @@
         await toast.present();
       }
       
-      const presentInlineToast = async () => {
+      const presentBaselineToast = async () => {
         await presentToast({
           duration: 3000,
           message: "This is a toast with a long message and a button that appears on the same line.",
@@ -38,7 +38,7 @@
         });
       }
       
-      return { presentInlineToast, presentStackedToast }
+      return { presentBaselineToast, presentStackedToast }
     }
   });
 </script>
diff --git a/static/usage/v7/toast/layout/angular/example_component_html.md b/static/usage/v7/toast/layout/angular/example_component_html.md
index 0554ce23978..6f33423b8a5 100644
--- a/static/usage/v7/toast/layout/angular/example_component_html.md
+++ b/static/usage/v7/toast/layout/angular/example_component_html.md
@@ -1,5 +1,5 @@
 ```html
-<ion-button id="open-inline-toast">Open Inline Layout Toast</ion-button>
+<ion-button id="open-inline-toast">Open Baseline Layout Toast</ion-button>
 <ion-button id="open-stacked-toast">Open Stacked Layout Toast</ion-button>
 <ion-toast 
   trigger="open-inline-toast" 
diff --git a/static/usage/v7/toast/layout/demo.html b/static/usage/v7/toast/layout/demo.html
index aad8f14e691..86d2dedafb4 100644
--- a/static/usage/v7/toast/layout/demo.html
+++ b/static/usage/v7/toast/layout/demo.html
@@ -19,7 +19,7 @@
       </ion-toolbar>
     </ion-header>
     <ion-content class="ion-padding">
-      <ion-button id="open-inline-toast">Open Inline Layout Toast</ion-button>
+      <ion-button id="open-inline-toast">Open Baseline Layout Toast</ion-button>
       <ion-button id="open-stacked-toast">Open Stacked Layout Toast</ion-button>
       <ion-toast trigger="open-stacked-toast" duration="3000" message="This is a toast with a long message and a button that appears on the next line." layout="stacked"></ion-toast>
       <ion-toast trigger="open-inline-toast" duration="3000" message="This is a toast with a long message and a button that appears on the same line."></ion-toast>
diff --git a/static/usage/v7/toast/layout/javascript.md b/static/usage/v7/toast/layout/javascript.md
index ed8794cd870..1ac30c76931 100644
--- a/static/usage/v7/toast/layout/javascript.md
+++ b/static/usage/v7/toast/layout/javascript.md
@@ -1,5 +1,5 @@
 ```html
-<ion-button id="open-inline-toast">Open Inline Layout Toast</ion-button>
+<ion-button id="open-inline-toast">Open Baseline Layout Toast</ion-button>
 <ion-button id="open-stacked-toast">Open Stacked Layout Toast</ion-button>
 <ion-toast trigger="open-inline-toast" duration="3000" message="This is a toast with a long message and a button that appears on the same line."></ion-toast>
 <ion-toast trigger="open-stacked-toast" duration="3000" message="This is a toast with a long message and a button that appears on the next line." layout="stacked"></ion-toast>
diff --git a/static/usage/v7/toast/layout/react.md b/static/usage/v7/toast/layout/react.md
index 1e0516bf382..f760997bf69 100644
--- a/static/usage/v7/toast/layout/react.md
+++ b/static/usage/v7/toast/layout/react.md
@@ -6,7 +6,7 @@ function Example() {
   return (
     <>
       <IonButton id="open-stacked-toast">Open Stacked Layout Toast</IonButton>
-      <IonButton id="open-inline-toast">Open Inline Layout Toast</IonButton>
+      <IonButton id="open-inline-toast">Open Baseline Layout Toast</IonButton>
       <IonToast
         trigger="open-inline-toast"
         message="This is a toast with a long message and a button that appears on the same line."
diff --git a/static/usage/v7/toast/layout/vue.md b/static/usage/v7/toast/layout/vue.md
index cf0f3072d1a..bbd103574c3 100644
--- a/static/usage/v7/toast/layout/vue.md
+++ b/static/usage/v7/toast/layout/vue.md
@@ -1,6 +1,6 @@
 ```html
 <template>
-  <ion-button id="open-inline-toast">Open Inline Layout Toast</ion-button>
+  <ion-button id="open-inline-toast">Open Baseline Layout Toast</ion-button>
   <ion-button id="open-stacked-toast">Open Stacked Layout Toast</ion-button>
   <ion-toast 
     trigger="open-inline-toast" 
diff --git a/versioned_docs/version-v6/api/toast.md b/versioned_docs/version-v6/api/toast.md
index 701305d039b..b0915d8cf8c 100644
--- a/versioned_docs/version-v6/api/toast.md
+++ b/versioned_docs/version-v6/api/toast.md
@@ -101,7 +101,7 @@ import ButtonsPlayground from '@site/static/usage/v6/toast/buttons/index.md';
 
 ## Layout
 
-Button containers within the toast can be displayed either inline with the message or stacked on separate lines using the `layout` property. The stacked layout should be used with buttons that have long text values. Additionally, buttons in a stacked toast layout can use a `side` value of either `start` or `end`, but not both.
+Button containers within the toast can be displayed either on the same line as the message or stacked on separate lines using the `layout` property. The stacked layout should be used with buttons that have long text values. Additionally, buttons in a stacked toast layout can use a `side` value of either `start` or `end`, but not both.
 
 import StackedPlayground from '@site/static/usage/v6/toast/layout/index.md';
 

From 9ba3bb90a189f8ed3cac4e7170b712155647af00 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Wed, 15 Feb 2023 16:33:17 +0000
Subject: [PATCH 5/7] add types

---
 static/usage/v6/toast/layout/angular/example_component_ts.md | 3 ++-
 static/usage/v6/toast/layout/vue.md                          | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/static/usage/v6/toast/layout/angular/example_component_ts.md b/static/usage/v6/toast/layout/angular/example_component_ts.md
index e9957b30292..6e8c63a9b58 100644
--- a/static/usage/v6/toast/layout/angular/example_component_ts.md
+++ b/static/usage/v6/toast/layout/angular/example_component_ts.md
@@ -1,6 +1,7 @@
 ```ts
 import { Component } from '@angular/core';
 import { ToastController } from '@ionic/angular';
+import type { ToastOptions } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
@@ -10,7 +11,7 @@ export class ExampleComponent {
 
   constructor(private toastController: ToastController) {}
   
-  async presentToast(opts) {
+  async presentToast(opts: ToastOptions) {
     const toast = await this.toastController.create(opts);
   
     await toast.present();
diff --git a/static/usage/v6/toast/layout/vue.md b/static/usage/v6/toast/layout/vue.md
index 4047d22b6da..5b884ea7caf 100644
--- a/static/usage/v6/toast/layout/vue.md
+++ b/static/usage/v6/toast/layout/vue.md
@@ -6,12 +6,13 @@
 
 <script lang="ts">
   import { IonButton, toastController } from '@ionic/vue';
+  import type { ToastOptions } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
     components: { IonButton },
     setup() {
-      const presentToast = async (opts) => {
+      const presentToast = async (opts: ToastOptions) => {
         const toast = await toastController.create(opts);
       
         await toast.present();

From e328f423d93771a2ede5f0412dc1cd312bb9bf08 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Wed, 15 Feb 2023 16:33:37 +0000
Subject: [PATCH 6/7] remove public

---
 static/usage/v7/toast/layout/angular/example_component_ts.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/static/usage/v7/toast/layout/angular/example_component_ts.md b/static/usage/v7/toast/layout/angular/example_component_ts.md
index fc3b99e4517..4070a210849 100644
--- a/static/usage/v7/toast/layout/angular/example_component_ts.md
+++ b/static/usage/v7/toast/layout/angular/example_component_ts.md
@@ -6,7 +6,7 @@ import { Component } from '@angular/core';
   templateUrl: 'example.component.html',
 })
 export class ExampleComponent {
-  public toastButtons = [
+  toastButtons = [
     {
       text: 'Action With Long Text',
     }

From e7db496a7d09fb8e3448f33569ced615fe64f818 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Thu, 16 Feb 2023 14:38:49 -0500
Subject: [PATCH 7/7] remove dev build

---
 static/usage/v6/toast/layout/demo.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/static/usage/v6/toast/layout/demo.html b/static/usage/v6/toast/layout/demo.html
index f34ee0f6f0b..dbeb624b0fb 100644
--- a/static/usage/v6/toast/layout/demo.html
+++ b/static/usage/v6/toast/layout/demo.html
@@ -7,8 +7,8 @@
   <title>Toast</title>
   <link rel="stylesheet" href="../../../common.css" />
   <script src="../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.5.3-dev.11676303024.114a8ff3/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.5.3-dev.11676303024.114a8ff3/css/ionic.bundle.css" />
+  <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>