From fa35305a4665d2e0fb4b3d364a91371fd4b06f39 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Fri, 19 Jul 2024 11:53:14 -0400
Subject: [PATCH 1/2] docs(radio): copy using-comparewith v7 demo to v8

---
 docs/api/radio.md                             |  4 +-
 .../angular/example_component_html.md         |  9 +++
 .../angular/example_component_ts.md           | 39 +++++++++++
 .../v8/radio/using-comparewith/demo.html      | 67 +++++++++++++++++++
 .../usage/v8/radio/using-comparewith/index.md | 25 +++++++
 .../v8/radio/using-comparewith/javascript.md  | 48 +++++++++++++
 .../usage/v8/radio/using-comparewith/react.md | 52 ++++++++++++++
 .../usage/v8/radio/using-comparewith/vue.md   | 54 +++++++++++++++
 8 files changed, 296 insertions(+), 2 deletions(-)
 create mode 100644 static/usage/v8/radio/using-comparewith/angular/example_component_html.md
 create mode 100644 static/usage/v8/radio/using-comparewith/angular/example_component_ts.md
 create mode 100644 static/usage/v8/radio/using-comparewith/demo.html
 create mode 100644 static/usage/v8/radio/using-comparewith/index.md
 create mode 100644 static/usage/v8/radio/using-comparewith/javascript.md
 create mode 100644 static/usage/v8/radio/using-comparewith/react.md
 create mode 100644 static/usage/v8/radio/using-comparewith/vue.md

diff --git a/docs/api/radio.md b/docs/api/radio.md
index d6ad9744e34..c22b839f24e 100644
--- a/docs/api/radio.md
+++ b/docs/api/radio.md
@@ -40,7 +40,7 @@ import LabelPlacement from '@site/static/usage/v8/radio/label-placement/index.md
 
 By default, the radio group uses strict equality (`===`) to determine if an option is selected. This can be overridden by providing a property name or a function to the `compareWith` property.
 
-import UsingComparewith from '@site/static/usage/v7/radio/using-comparewith/index.md';
+import UsingComparewith from '@site/static/usage/v8/radio/using-comparewith/index.md';
 
 <UsingComparewith />
 
@@ -110,7 +110,7 @@ Using the modern syntax involves removing the `ion-label` and passing the label
 import Migration from '@site/static/usage/v8/radio/migration/index.md';
 
 <Migration />
-  
+
 
 :::note
 In past versions of Ionic, `ion-item` was required for `ion-radio` to function properly. Starting in Ionic 7.0, `ion-radio` should only be used in an `ion-item` when the item is placed in an `ion-list`. Additionally, `ion-item` is no longer required for `ion-radio` to function properly.
diff --git a/static/usage/v8/radio/using-comparewith/angular/example_component_html.md b/static/usage/v8/radio/using-comparewith/angular/example_component_html.md
new file mode 100644
index 00000000000..1e5e93819fa
--- /dev/null
+++ b/static/usage/v8/radio/using-comparewith/angular/example_component_html.md
@@ -0,0 +1,9 @@
+```html
+<ion-list>
+  <ion-radio-group [compareWith]="compareWith" (ionChange)="handleChange($event)">
+    <ion-item *ngFor="let food of foods; trackBy: trackItems">
+      <ion-radio [value]="food">{{ food.name }}</ion-radio>
+    </ion-item>
+  </ion-radio-group>
+</ion-list>
+```
diff --git a/static/usage/v8/radio/using-comparewith/angular/example_component_ts.md b/static/usage/v8/radio/using-comparewith/angular/example_component_ts.md
new file mode 100644
index 00000000000..d7f803aea0b
--- /dev/null
+++ b/static/usage/v8/radio/using-comparewith/angular/example_component_ts.md
@@ -0,0 +1,39 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  foods = [
+    {
+      id: 1,
+      name: 'Apples',
+      type: 'fruit',
+    },
+    {
+      id: 2,
+      name: 'Carrots',
+      type: 'vegetable',
+    },
+    {
+      id: 3,
+      name: 'Cupcakes',
+      type: 'dessert',
+    },
+  ];
+
+  compareWith(o1, o2) {
+    return o1.id === o2.id;
+  }
+
+  handleChange(ev) {
+    console.log('Current value:', JSON.stringify(ev.target.value));
+  }
+
+  trackItems(index: number, item: any) {
+    return item.id;
+  }
+}
+```
diff --git a/static/usage/v8/radio/using-comparewith/demo.html b/static/usage/v8/radio/using-comparewith/demo.html
new file mode 100644
index 00000000000..39805ea0b92
--- /dev/null
+++ b/static/usage/v8/radio/using-comparewith/demo.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Radio</title>
+    <link rel="stylesheet" href="../../common.css" />
+    <script src="../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@8/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@8/css/ionic.bundle.css" />
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-list>
+            <ion-radio-group></ion-radio-group>
+          </ion-list>
+        </div>
+      </ion-content>
+    </ion-app>
+
+    <script>
+      const foods = [
+        {
+          id: 1,
+          name: 'Apples',
+          type: 'fruit',
+        },
+        {
+          id: 2,
+          name: 'Carrots',
+          type: 'vegetable',
+        },
+        {
+          id: 3,
+          name: 'Cupcakes',
+          type: 'dessert',
+        },
+      ];
+
+      const compareWithFn = (o1, o2) => {
+        return o1.id === o2.id;
+      };
+
+      const radioGroupEl = document.querySelector('ion-radio-group');
+      radioGroupEl.compareWith = compareWithFn;
+
+      foods.forEach((option, i) => {
+        const radio = document.createElement('ion-radio');
+
+        radio.value = option;
+        radio.textContent = option.name;
+
+        const item = document.createElement('ion-item');
+        item.appendChild(radio);
+
+        radioGroupEl.appendChild(item);
+      });
+
+      radioGroupEl.addEventListener('ionChange', () => {
+        console.log('Current value:', JSON.stringify(radioGroupEl.value));
+      });
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v8/radio/using-comparewith/index.md b/static/usage/v8/radio/using-comparewith/index.md
new file mode 100644
index 00000000000..dc7eb552f4a
--- /dev/null
+++ b/static/usage/v8/radio/using-comparewith/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="8"
+  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/v8/radio/using-comparewith/demo.html"
+  showConsole={true}
+/>
diff --git a/static/usage/v8/radio/using-comparewith/javascript.md b/static/usage/v8/radio/using-comparewith/javascript.md
new file mode 100644
index 00000000000..8dd2130b3e8
--- /dev/null
+++ b/static/usage/v8/radio/using-comparewith/javascript.md
@@ -0,0 +1,48 @@
+```html
+<ion-list>
+  <ion-radio-group></ion-radio-group>
+</ion-list>
+
+<script>
+  const foods = [
+    {
+      id: 1,
+      name: 'Apples',
+      type: 'fruit',
+    },
+    {
+      id: 2,
+      name: 'Carrots',
+      type: 'vegetable',
+    },
+    {
+      id: 3,
+      name: 'Cupcakes',
+      type: 'dessert',
+    },
+  ];
+
+  const compareWithFn = (o1, o2) => {
+    return o1.id === o2.id;
+  };
+
+  const radioGroupEl = document.querySelector('ion-radio-group');
+  radioGroupEl.compareWith = compareWithFn;
+
+  foods.forEach((option, i) => {
+    const radio = document.createElement('ion-radio');
+
+    radio.value = option;
+    radio.textContent = option.name;
+
+    const item = document.createElement('ion-item');
+    item.appendChild(radio);
+
+    radioGroupEl.appendChild(item);
+  });
+
+  radioGroupEl.addEventListener('ionChange', () => {
+    console.log('Current value:', JSON.stringify(radioGroupEl.value));
+  });
+</script>
+```
diff --git a/static/usage/v8/radio/using-comparewith/react.md b/static/usage/v8/radio/using-comparewith/react.md
new file mode 100644
index 00000000000..dff3b4233a6
--- /dev/null
+++ b/static/usage/v8/radio/using-comparewith/react.md
@@ -0,0 +1,52 @@
+```tsx
+import React from 'react';
+import { IonItem, IonList, IonRadio, IonRadioGroup } from '@ionic/react';
+
+interface Food {
+  id: number;
+  name: string;
+  type: string;
+}
+
+const foods: Food[] = [
+  {
+    id: 1,
+    name: 'Apples',
+    type: 'fruit',
+  },
+  {
+    id: 2,
+    name: 'Carrots',
+    type: 'vegetable',
+  },
+  {
+    id: 3,
+    name: 'Cupcakes',
+    type: 'dessert',
+  },
+];
+
+const compareWith = (o1: Food, o2: Food) => {
+  return o1.id === o2.id;
+};
+
+function Example() {
+  return (
+    <IonList>
+      <IonRadioGroup
+        compareWith={compareWith}
+        onIonChange={(ev) => console.log('Current value:', JSON.stringify(ev.detail.value))}
+      >
+        {foods.map((food) => (
+          <IonItem>
+            <IonRadio key={food.id} value={food}>
+              {food.name}
+            </IonRadio>
+          </IonItem>
+        ))}
+      </IonRadioGroup>
+    </IonList>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v8/radio/using-comparewith/vue.md b/static/usage/v8/radio/using-comparewith/vue.md
new file mode 100644
index 00000000000..28518284654
--- /dev/null
+++ b/static/usage/v8/radio/using-comparewith/vue.md
@@ -0,0 +1,54 @@
+```html
+<template>
+  <ion-list>
+    <ion-radio-group :compareWith="compareWith" @ionChange="handleChange($event)">
+      <ion-item v-for="food in foods">
+        <ion-radio :value="food">{{ food.name }}</ion-radio>
+      </ion-item>
+    </ion-radio-group>
+  </ion-list>
+</template>
+
+<script lang="ts">
+  import { IonItem, IonList, IonRadio, IonRadioGroup } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: {
+      IonItem,
+      IonList,
+      IonRadio,
+      IonRadioGroup,
+    },
+    data() {
+      return {
+        foods: [
+          {
+            id: 1,
+            name: 'Apples',
+            type: 'fruit',
+          },
+          {
+            id: 2,
+            name: 'Carrots',
+            type: 'vegetable',
+          },
+          {
+            id: 3,
+            name: 'Cupcakes',
+            type: 'dessert',
+          },
+        ],
+      };
+    },
+    methods: {
+      compareWith(o1, o2) {
+        return o1.id === o2.id;
+      },
+      handleChange(ev) {
+        console.log('Current value:', JSON.stringify(ev.detail.value));
+      },
+    },
+  });
+</script>
+```

From 2ca7bc849a967c2049874b821bfc917efc021d51 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Fri, 19 Jul 2024 11:58:34 -0400
Subject: [PATCH 2/2] docs(toast): copy swipe-gesture v7 demo to v8

---
 docs/api/toast.md                             |  4 +--
 .../usage/v8/toast/swipe-gesture/angular.md   | 17 +++++++++
 static/usage/v8/toast/swipe-gesture/demo.html | 35 +++++++++++++++++++
 static/usage/v8/toast/swipe-gesture/index.md  | 19 ++++++++++
 .../v8/toast/swipe-gesture/javascript.md      | 17 +++++++++
 static/usage/v8/toast/swipe-gesture/react.md  | 27 ++++++++++++++
 static/usage/v8/toast/swipe-gesture/vue.md    | 23 ++++++++++++
 7 files changed, 140 insertions(+), 2 deletions(-)
 create mode 100644 static/usage/v8/toast/swipe-gesture/angular.md
 create mode 100644 static/usage/v8/toast/swipe-gesture/demo.html
 create mode 100644 static/usage/v8/toast/swipe-gesture/index.md
 create mode 100644 static/usage/v8/toast/swipe-gesture/javascript.md
 create mode 100644 static/usage/v8/toast/swipe-gesture/react.md
 create mode 100644 static/usage/v8/toast/swipe-gesture/vue.md

diff --git a/docs/api/toast.md b/docs/api/toast.md
index fc0ee71cd85..a111e574566 100644
--- a/docs/api/toast.md
+++ b/docs/api/toast.md
@@ -76,10 +76,10 @@ import PositionAnchor from '@site/static/usage/v8/toast/position-anchor/index.md
 
 Toasts can be swiped to dismiss by using the `swipeGesture` property. This feature is position-aware, meaning the direction that users need to swipe will change based on the value of the `position` property. Additionally, the distance users need to swipe may be impacted by the `positionAnchor` property.
 
-import SwipeGesture from '@site/static/usage/v7/toast/swipe-gesture/index.md';
+import SwipeGesture from '@site/static/usage/v8/toast/swipe-gesture/index.md';
 
 <SwipeGesture />
-  
+
 ## Layout
 
 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.
diff --git a/static/usage/v8/toast/swipe-gesture/angular.md b/static/usage/v8/toast/swipe-gesture/angular.md
new file mode 100644
index 00000000000..146007d0391
--- /dev/null
+++ b/static/usage/v8/toast/swipe-gesture/angular.md
@@ -0,0 +1,17 @@
+```html
+<ion-content class="ion-padding">
+  <ion-button id="open-toast">Open Toast</ion-button>
+  <ion-toast
+    message="This toast can be swiped to dismiss"
+    trigger="open-toast"
+    swipeGesture="vertical"
+    position="bottom"
+    positionAnchor="footer"
+  ></ion-toast>
+</ion-content>
+<ion-footer id="footer">
+  <ion-toolbar>
+    <ion-title>Footer</ion-title>
+  </ion-toolbar>
+</ion-footer>
+```
diff --git a/static/usage/v8/toast/swipe-gesture/demo.html b/static/usage/v8/toast/swipe-gesture/demo.html
new file mode 100644
index 00000000000..d2cebd4a95e
--- /dev/null
+++ b/static/usage/v8/toast/swipe-gesture/demo.html
@@ -0,0 +1,35 @@
+<!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@8/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@8/css/ionic.bundle.css" />
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-button id="open-toast">Open Toast</ion-button>
+          <ion-toast
+            message="This toast can be swiped to dismiss"
+            trigger="open-toast"
+            swipe-gesture="vertical"
+            position="bottom"
+            position-anchor="footer"
+          ></ion-toast>
+        </div>
+      </ion-content>
+
+      <ion-footer id="footer">
+        <ion-toolbar>
+          <ion-title>Footer</ion-title>
+        </ion-toolbar>
+      </ion-footer>
+    </ion-app>
+  </body>
+</html>
diff --git a/static/usage/v8/toast/swipe-gesture/index.md b/static/usage/v8/toast/swipe-gesture/index.md
new file mode 100644
index 00000000000..dfb56a081b9
--- /dev/null
+++ b/static/usage/v8/toast/swipe-gesture/index.md
@@ -0,0 +1,19 @@
+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
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular,
+  }}
+  src="usage/v8/toast/swipe-gesture/demo.html"
+  devicePreview={true}
+  includeIonContent={false}
+/>
diff --git a/static/usage/v8/toast/swipe-gesture/javascript.md b/static/usage/v8/toast/swipe-gesture/javascript.md
new file mode 100644
index 00000000000..2b7f79e79d4
--- /dev/null
+++ b/static/usage/v8/toast/swipe-gesture/javascript.md
@@ -0,0 +1,17 @@
+```html
+<ion-content class="ion-padding">
+  <ion-button id="open-toast">Open Toast</ion-button>
+  <ion-toast
+    message="This toast can be swiped to dismiss"
+    trigger="open-toast"
+    swipe-gesture="vertical"
+    position="bottom"
+    position-anchor="footer"
+  ></ion-toast>
+</ion-content>
+<ion-footer id="footer">
+  <ion-toolbar>
+    <ion-title>Footer</ion-title>
+  </ion-toolbar>
+</ion-footer>
+```
diff --git a/static/usage/v8/toast/swipe-gesture/react.md b/static/usage/v8/toast/swipe-gesture/react.md
new file mode 100644
index 00000000000..09bbd89e3fd
--- /dev/null
+++ b/static/usage/v8/toast/swipe-gesture/react.md
@@ -0,0 +1,27 @@
+```tsx
+import React from 'react';
+import { IonButton, IonContent, IonFooter, IonTitle, IonToast, IonToolbar } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonContent className="ion-padding">
+        <IonButton id="open-toast">Open Toast</IonButton>
+        <IonToast
+          message="This toast can be swiped to dismiss"
+          trigger="open-toast"
+          swipeGesture="vertical"
+          position="bottom"
+          positionAnchor="footer"
+        ></IonToast>
+      </IonContent>
+      <IonFooter id="footer">
+        <IonToolbar>
+          <IonTitle>Footer</IonTitle>
+        </IonToolbar>
+      </IonFooter>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v8/toast/swipe-gesture/vue.md b/static/usage/v8/toast/swipe-gesture/vue.md
new file mode 100644
index 00000000000..8aaf3583a98
--- /dev/null
+++ b/static/usage/v8/toast/swipe-gesture/vue.md
@@ -0,0 +1,23 @@
+```html
+<template>
+  <ion-content class="ion-padding">
+    <ion-button id="open-toast">Open Toast</ion-button>
+    <ion-toast
+      message="This toast can be swiped to dismiss"
+      trigger="open-toast"
+      swipe-gesture="vertical"
+      position="bottom"
+      position-anchor="footer"
+    ></ion-toast>
+  </ion-content>
+  <ion-footer id="footer">
+    <ion-toolbar>
+      <ion-title>Footer</ion-title>
+    </ion-toolbar>
+  </ion-footer>
+</template>
+
+<script setup lang="ts">
+  import { IonButton, IonContent, IonFooter, IonTitle, IonToast, IonToolbar } from '@ionic/vue';
+</script>
+```