From f16b9b97bd777338d6b63723458ba3555ee28ab6 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Mon, 20 Mar 2023 13:11:31 -0400
Subject: [PATCH 1/2] docs(item): migrate inputs example to v7

---
 static/usage/v7/item/inputs/angular.md    | 34 ++++++----------
 static/usage/v7/item/inputs/demo.html     | 42 +++++++++----------
 static/usage/v7/item/inputs/javascript.md | 38 ++++++++----------
 static/usage/v7/item/inputs/react.md      | 46 +++++++++++----------
 static/usage/v7/item/inputs/vue.md        | 49 +++++++++++++----------
 5 files changed, 101 insertions(+), 108 deletions(-)

diff --git a/static/usage/v7/item/inputs/angular.md b/static/usage/v7/item/inputs/angular.md
index 013e672ae99..de80b8a0d9b 100644
--- a/static/usage/v7/item/inputs/angular.md
+++ b/static/usage/v7/item/inputs/angular.md
@@ -1,40 +1,33 @@
 ```html
 <ion-item>
-  <ion-label>Default Input</ion-label>
-  <ion-input placeholder="Enter text"></ion-input>
+  <ion-input label="Default Input" placeholder="Enter text"></ion-input>
 </ion-item>
 
 <ion-item>
-  <ion-label position="fixed">Fixed Input</ion-label>
-  <ion-input placeholder="Enter text"></ion-input>
+  <ion-input label="Fixed Input" label-placement="fixed" placeholder="Enter text"></ion-input>
 </ion-item>
 
 <ion-item>
-  <ion-label position="stacked">Stacked Input</ion-label>
-  <ion-input placeholder="Enter text"></ion-input>
+  <ion-input label="Stacked Input" label-placement="stacked" placeholder="Enter text"></ion-input>
 </ion-item>
 
 <ion-item>
-  <ion-label position="floating">Floating Input</ion-label>
-  <ion-input placeholder="Enter text"></ion-input>
+  <ion-input label="Floating Input" label-placement="floating" placeholder="Enter text"></ion-input>
 </ion-item>
 
 <ion-item fill="outline">
-  <ion-label position="floating">Floating Input: Outline (MD only)</ion-label>
-  <ion-input placeholder="Enter text"></ion-input>
+  <ion-input label="Floating Input: Outline (MD only)" label-placement="floating" placeholder="Enter text"></ion-input>
 </ion-item>
 
 <ion-item fill="solid">
-  <ion-label position="floating">Floating Input: Solid (MD only)</ion-label>
-  <ion-input placeholder="Enter text"></ion-input>
+  <ion-input label="Floating Input: Solid (MD only)" label-placement="floating" placeholder="Enter text"></ion-input>
 </ion-item>
 
 <ion-item>
-  <ion-label>Select</ion-label>
-  <ion-select placeholder="Make a Selection">
+  <ion-select label="Select" placeholder="Make a Selection">
     <ion-select-option value="">No Game Console</ion-select-option>
     <ion-select-option value="nes">NES</ion-select-option>
-    <ion-select-option value="n64">Nintendo64</ion-select-option>
+    <ion-select-option value="n64" selected>Nintendo64</ion-select-option>
     <ion-select-option value="ps">PlayStation</ion-select-option>
     <ion-select-option value="genesis">Sega Genesis</ion-select-option>
     <ion-select-option value="saturn">Sega Saturn</ion-select-option>
@@ -43,17 +36,16 @@
 </ion-item>
 
 <ion-item>
-  <ion-label>Toggle</ion-label>
-  <ion-toggle slot="end"></ion-toggle>
+  <ion-toggle> Toggle </ion-toggle>
 </ion-item>
 
 <ion-item>
-  <ion-label>Checkbox</ion-label>
-  <ion-checkbox slot="end"></ion-checkbox>
+  <ion-checkbox> Checkbox </ion-checkbox>
 </ion-item>
 
 <ion-item>
-  <ion-label position="stacked">Range</ion-label>
-  <ion-range></ion-range>
+  <ion-range label-placement="start">
+    <div slot="label">Range</div>
+  </ion-range>
 </ion-item>
 ```
diff --git a/static/usage/v7/item/inputs/demo.html b/static/usage/v7/item/inputs/demo.html
index 4ab92196b2e..b2dd5ae9599 100644
--- a/static/usage/v7/item/inputs/demo.html
+++ b/static/usage/v7/item/inputs/demo.html
@@ -7,8 +7,8 @@
   <title>Item</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" />
+  <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" />
 
   <style>
     .container {
@@ -22,38 +22,33 @@
     <ion-content>
       <div class="container">
         <ion-item>
-          <ion-label>Default Input</ion-label>
-          <ion-input placeholder="Enter text"></ion-input>
+          <ion-input label="Default Input" placeholder="Enter text"></ion-input>
         </ion-item>
 
         <ion-item>
-          <ion-label position="fixed">Fixed Input</ion-label>
-          <ion-input placeholder="Enter text"></ion-input>
+          <ion-input label="Fixed Input" label-placement="fixed" placeholder="Enter text"></ion-input>
         </ion-item>
 
         <ion-item>
-          <ion-label position="stacked">Stacked Input</ion-label>
-          <ion-input placeholder="Enter text"></ion-input>
+          <ion-input label="Stacked Input" label-placement="stacked" placeholder="Enter text"></ion-input>
         </ion-item>
 
         <ion-item>
-          <ion-label position="floating">Floating Input</ion-label>
-          <ion-input placeholder="Enter text"></ion-input>
+          <ion-input label="Floating Input" label-placement="floating" placeholder="Enter text"></ion-input>
         </ion-item>
 
         <ion-item fill="outline">
-          <ion-label position="floating">Floating Input: Outline (MD only)</ion-label>
-          <ion-input placeholder="Enter text"></ion-input>
+          <ion-input label="Floating Input: Outline (MD only)" label-placement="floating"
+            placeholder="Enter text"></ion-input>
         </ion-item>
 
         <ion-item fill="solid">
-          <ion-label position="floating">Floating Input: Solid (MD only)</ion-label>
-          <ion-input placeholder="Enter text"></ion-input>
+          <ion-input label="Floating Input: Solid (MD only)" label-placement="floating"
+            placeholder="Enter text"></ion-input>
         </ion-item>
 
         <ion-item>
-          <ion-label>Select</ion-label>
-          <ion-select placeholder="Make a Selection">
+          <ion-select label="Select" placeholder="Make a Selection">
             <ion-select-option value="">No Game Console</ion-select-option>
             <ion-select-option value="nes">NES</ion-select-option>
             <ion-select-option value="n64" selected>Nintendo64</ion-select-option>
@@ -65,18 +60,21 @@
         </ion-item>
 
         <ion-item>
-          <ion-label>Toggle</ion-label>
-          <ion-toggle slot="end"></ion-toggle>
+          <ion-toggle>
+            Toggle
+          </ion-toggle>
         </ion-item>
 
         <ion-item>
-          <ion-label>Checkbox</ion-label>
-          <ion-checkbox slot="end"></ion-checkbox>
+          <ion-checkbox>
+            Checkbox
+          </ion-checkbox>
         </ion-item>
 
         <ion-item>
-          <ion-label position="stacked">Range</ion-label>
-          <ion-range></ion-range>
+          <ion-range label-placement="start">
+            <div slot="label">Range</div>
+          </ion-range>
         </ion-item>
       </div>
     </ion-content>
diff --git a/static/usage/v7/item/inputs/javascript.md b/static/usage/v7/item/inputs/javascript.md
index 013e672ae99..92758a2b4cd 100644
--- a/static/usage/v7/item/inputs/javascript.md
+++ b/static/usage/v7/item/inputs/javascript.md
@@ -1,40 +1,33 @@
 ```html
 <ion-item>
-  <ion-label>Default Input</ion-label>
-  <ion-input placeholder="Enter text"></ion-input>
+  <ion-input label="Default Input" placeholder="Enter text"></ion-input>
 </ion-item>
 
 <ion-item>
-  <ion-label position="fixed">Fixed Input</ion-label>
-  <ion-input placeholder="Enter text"></ion-input>
+  <ion-input label="Fixed Input" label-placement="fixed" placeholder="Enter text"></ion-input>
 </ion-item>
 
 <ion-item>
-  <ion-label position="stacked">Stacked Input</ion-label>
-  <ion-input placeholder="Enter text"></ion-input>
+  <ion-input label="Stacked Input" label-placement="stacked" placeholder="Enter text"></ion-input>
 </ion-item>
 
 <ion-item>
-  <ion-label position="floating">Floating Input</ion-label>
-  <ion-input placeholder="Enter text"></ion-input>
+  <ion-input label="Floating Input" label-placement="floating" placeholder="Enter text"></ion-input>
 </ion-item>
 
 <ion-item fill="outline">
-  <ion-label position="floating">Floating Input: Outline (MD only)</ion-label>
-  <ion-input placeholder="Enter text"></ion-input>
+  <ion-input label="Floating Input: Outline (MD only)" label-placement="floating" placeholder="Enter text"></ion-input>
 </ion-item>
 
 <ion-item fill="solid">
-  <ion-label position="floating">Floating Input: Solid (MD only)</ion-label>
-  <ion-input placeholder="Enter text"></ion-input>
+  <ion-input label="Floating Input: Solid (MD only)" label-placement="floating" placeholder="Enter text"></ion-input>
 </ion-item>
 
 <ion-item>
-  <ion-label>Select</ion-label>
-  <ion-select placeholder="Make a Selection">
+  <ion-select label="Select" placeholder="Make a Selection">
     <ion-select-option value="">No Game Console</ion-select-option>
     <ion-select-option value="nes">NES</ion-select-option>
-    <ion-select-option value="n64">Nintendo64</ion-select-option>
+    <ion-select-option value="n64" selected>Nintendo64</ion-select-option>
     <ion-select-option value="ps">PlayStation</ion-select-option>
     <ion-select-option value="genesis">Sega Genesis</ion-select-option>
     <ion-select-option value="saturn">Sega Saturn</ion-select-option>
@@ -43,17 +36,20 @@
 </ion-item>
 
 <ion-item>
-  <ion-label>Toggle</ion-label>
-  <ion-toggle slot="end"></ion-toggle>
+  <ion-toggle>
+    <div>Toggle</div>
+  </ion-toggle>
 </ion-item>
 
 <ion-item>
-  <ion-label>Checkbox</ion-label>
-  <ion-checkbox slot="end"></ion-checkbox>
+  <ion-checkbox>
+    <div>Checkbox</div>
+  </ion-checkbox>
 </ion-item>
 
 <ion-item>
-  <ion-label position="stacked">Range</ion-label>
-  <ion-range></ion-range>
+  <ion-range label-placement="start">
+    <div slot="label">Range</div>
+  </ion-range>
 </ion-item>
 ```
diff --git a/static/usage/v7/item/inputs/react.md b/static/usage/v7/item/inputs/react.md
index 0cb6523f053..bebb35a474c 100644
--- a/static/usage/v7/item/inputs/react.md
+++ b/static/usage/v7/item/inputs/react.md
@@ -1,46 +1,49 @@
 ```tsx
 import React from 'react';
-import { IonCheckbox, IonInput, IonItem, IonLabel, IonRange, IonSelect, IonSelectOption, IonToggle } from '@ionic/react';
+import { IonCheckbox, IonInput, IonItem, IonRange, IonSelect, IonSelectOption, IonToggle } from '@ionic/react';
 
 function Example() {
   return (
     <>
       <IonItem>
-        <IonLabel>Default Input</IonLabel>
-        <IonInput placeholder="Enter text"></IonInput>
+        <IonInput label="Default Input" placeholder="Enter text"></IonInput>
       </IonItem>
 
       <IonItem>
-        <IonLabel position="fixed">Fixed Input</IonLabel>
-        <IonInput placeholder="Enter text"></IonInput>
+        <IonInput label="Fixed Input" label-placement="fixed" placeholder="Enter text"></IonInput>
       </IonItem>
 
       <IonItem>
-        <IonLabel position="stacked">Stacked Input</IonLabel>
-        <IonInput placeholder="Enter text"></IonInput>
+        <IonInput label="Stacked Input" label-placement="stacked" placeholder="Enter text"></IonInput>
       </IonItem>
 
       <IonItem>
-        <IonLabel position="floating">Floating Input</IonLabel>
-        <IonInput placeholder="Enter text"></IonInput>
+        <IonInput label="Floating Input" label-placement="floating" placeholder="Enter text"></IonInput>
       </IonItem>
 
       <IonItem fill="outline">
-        <IonLabel position="floating">Floating Input: Outline (MD only)</IonLabel>
-        <IonInput placeholder="Enter text"></IonInput>
+        <IonInput
+          label="Floating Input: Outline (MD only)"
+          label-placement="floating"
+          placeholder="Enter text"
+        ></IonInput>
       </IonItem>
 
       <IonItem fill="solid">
-        <IonLabel position="floating">Floating Input: Solid (MD only)</IonLabel>
-        <IonInput placeholder="Enter text"></IonInput>
+        <IonInput
+          label="Floating Input: Solid (MD only)"
+          label-placement="floating"
+          placeholder="Enter text"
+        ></IonInput>
       </IonItem>
 
       <IonItem>
-        <IonLabel>Select</IonLabel>
-        <IonSelect placeholder="Make a Selection">
+        <IonSelect label="Select" placeholder="Make a Selection">
           <IonSelectOption value="">No Game Console</IonSelectOption>
           <IonSelectOption value="nes">NES</IonSelectOption>
-          <IonSelectOption value="n64">Nintendo64</IonSelectOption>
+          <IonSelectOption value="n64" selected={true}>
+            Nintendo64
+          </IonSelectOption>
           <IonSelectOption value="ps">PlayStation</IonSelectOption>
           <IonSelectOption value="genesis">Sega Genesis</IonSelectOption>
           <IonSelectOption value="saturn">Sega Saturn</IonSelectOption>
@@ -49,18 +52,17 @@ function Example() {
       </IonItem>
 
       <IonItem>
-        <IonLabel>Toggle</IonLabel>
-        <IonToggle slot="end"></IonToggle>
+        <IonToggle>Toggle</IonToggle>
       </IonItem>
 
       <IonItem>
-        <IonLabel>Checkbox</IonLabel>
-        <IonCheckbox slot="end"></IonCheckbox>
+        <IonCheckbox>Checkbox</IonCheckbox>
       </IonItem>
 
       <IonItem>
-        <IonLabel position="stacked">Range</IonLabel>
-        <IonRange></IonRange>
+        <IonRange label-placement="start">
+          <div slot="label">Range</div>
+        </IonRange>
       </IonItem>
     </>
   );
diff --git a/static/usage/v7/item/inputs/vue.md b/static/usage/v7/item/inputs/vue.md
index 7dc085a7a4d..95150978536 100644
--- a/static/usage/v7/item/inputs/vue.md
+++ b/static/usage/v7/item/inputs/vue.md
@@ -1,41 +1,38 @@
 ```html
 <template>
   <ion-item>
-    <ion-label>Default Input</ion-label>
-    <ion-input placeholder="Enter text"></ion-input>
+    <ion-input label="Default Input" placeholder="Enter text"></ion-input>
   </ion-item>
 
   <ion-item>
-    <ion-label position="fixed">Fixed Input</ion-label>
-    <ion-input placeholder="Enter text"></ion-input>
+    <ion-input label="Fixed Input" label-placement="fixed" placeholder="Enter text"></ion-input>
   </ion-item>
 
   <ion-item>
-    <ion-label position="stacked">Stacked Input</ion-label>
-    <ion-input placeholder="Enter text"></ion-input>
+    <ion-input label="Stacked Input" label-placement="stacked" placeholder="Enter text"></ion-input>
   </ion-item>
 
   <ion-item>
-    <ion-label position="floating">Floating Input</ion-label>
-    <ion-input placeholder="Enter text"></ion-input>
+    <ion-input label="Floating Input" label-placement="floating" placeholder="Enter text"></ion-input>
   </ion-item>
 
   <ion-item fill="outline">
-    <ion-label position="floating">Floating Input: Outline (MD only)</ion-label>
-    <ion-input placeholder="Enter text"></ion-input>
+    <ion-input
+      label="Floating Input: Outline (MD only)"
+      label-placement="floating"
+      placeholder="Enter text"
+    ></ion-input>
   </ion-item>
 
   <ion-item fill="solid">
-    <ion-label position="floating">Floating Input: Solid (MD only)</ion-label>
-    <ion-input placeholder="Enter text"></ion-input>
+    <ion-input label="Floating Input: Solid (MD only)" label-placement="floating" placeholder="Enter text"></ion-input>
   </ion-item>
 
   <ion-item>
-    <ion-label>Select</ion-label>
-    <ion-select placeholder="Make a Selection">
+    <ion-select label="Select" placeholder="Make a Selection">
       <ion-select-option value="">No Game Console</ion-select-option>
       <ion-select-option value="nes">NES</ion-select-option>
-      <ion-select-option value="n64">Nintendo64</ion-select-option>
+      <ion-select-option value="n64" selected>Nintendo64</ion-select-option>
       <ion-select-option value="ps">PlayStation</ion-select-option>
       <ion-select-option value="genesis">Sega Genesis</ion-select-option>
       <ion-select-option value="saturn">Sega Saturn</ion-select-option>
@@ -44,23 +41,31 @@
   </ion-item>
 
   <ion-item>
-    <ion-label>Toggle</ion-label>
-    <ion-toggle slot="end"></ion-toggle>
+    <ion-toggle> Toggle </ion-toggle>
   </ion-item>
 
   <ion-item>
-    <ion-label>Checkbox</ion-label>
-    <ion-checkbox slot="end"></ion-checkbox>
+    <ion-checkbox> Checkbox </ion-checkbox>
   </ion-item>
 
   <ion-item>
-    <ion-label position="stacked">Range</ion-label>
-    <ion-range></ion-range>
+    <ion-range label-placement="start">
+      <div slot="label">Range</div>
+    </ion-range>
   </ion-item>
 </template>
 
 <script lang="ts">
-  import { IonCheckbox, IonInput, IonItem, IonLabel, IonRange, IonSelect, IonSelectOption, IonToggle } from '@ionic/vue';
+  import {
+    IonCheckbox,
+    IonInput,
+    IonItem,
+    IonLabel,
+    IonRange,
+    IonSelect,
+    IonSelectOption,
+    IonToggle,
+  } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({

From 2d46a9efa0ffedc31907b5010291140d7f21fe72 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Mon, 20 Mar 2023 13:25:10 -0400
Subject: [PATCH 2/2] chore: remove selected flag

---
 static/usage/v7/item/inputs/angular.md    | 2 +-
 static/usage/v7/item/inputs/demo.html     | 2 +-
 static/usage/v7/item/inputs/javascript.md | 2 +-
 static/usage/v7/item/inputs/react.md      | 4 +---
 static/usage/v7/item/inputs/vue.md        | 2 +-
 5 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/static/usage/v7/item/inputs/angular.md b/static/usage/v7/item/inputs/angular.md
index de80b8a0d9b..a45e76ebc73 100644
--- a/static/usage/v7/item/inputs/angular.md
+++ b/static/usage/v7/item/inputs/angular.md
@@ -27,7 +27,7 @@
   <ion-select label="Select" placeholder="Make a Selection">
     <ion-select-option value="">No Game Console</ion-select-option>
     <ion-select-option value="nes">NES</ion-select-option>
-    <ion-select-option value="n64" selected>Nintendo64</ion-select-option>
+    <ion-select-option value="n64">Nintendo64</ion-select-option>
     <ion-select-option value="ps">PlayStation</ion-select-option>
     <ion-select-option value="genesis">Sega Genesis</ion-select-option>
     <ion-select-option value="saturn">Sega Saturn</ion-select-option>
diff --git a/static/usage/v7/item/inputs/demo.html b/static/usage/v7/item/inputs/demo.html
index b2dd5ae9599..a79017c5500 100644
--- a/static/usage/v7/item/inputs/demo.html
+++ b/static/usage/v7/item/inputs/demo.html
@@ -51,7 +51,7 @@
           <ion-select label="Select" placeholder="Make a Selection">
             <ion-select-option value="">No Game Console</ion-select-option>
             <ion-select-option value="nes">NES</ion-select-option>
-            <ion-select-option value="n64" selected>Nintendo64</ion-select-option>
+            <ion-select-option value="n64">Nintendo64</ion-select-option>
             <ion-select-option value="ps">PlayStation</ion-select-option>
             <ion-select-option value="genesis">Sega Genesis</ion-select-option>
             <ion-select-option value="saturn">Sega Saturn</ion-select-option>
diff --git a/static/usage/v7/item/inputs/javascript.md b/static/usage/v7/item/inputs/javascript.md
index 92758a2b4cd..74558c5191a 100644
--- a/static/usage/v7/item/inputs/javascript.md
+++ b/static/usage/v7/item/inputs/javascript.md
@@ -27,7 +27,7 @@
   <ion-select label="Select" placeholder="Make a Selection">
     <ion-select-option value="">No Game Console</ion-select-option>
     <ion-select-option value="nes">NES</ion-select-option>
-    <ion-select-option value="n64" selected>Nintendo64</ion-select-option>
+    <ion-select-option value="n64">Nintendo64</ion-select-option>
     <ion-select-option value="ps">PlayStation</ion-select-option>
     <ion-select-option value="genesis">Sega Genesis</ion-select-option>
     <ion-select-option value="saturn">Sega Saturn</ion-select-option>
diff --git a/static/usage/v7/item/inputs/react.md b/static/usage/v7/item/inputs/react.md
index bebb35a474c..6f3cf757c68 100644
--- a/static/usage/v7/item/inputs/react.md
+++ b/static/usage/v7/item/inputs/react.md
@@ -41,9 +41,7 @@ function Example() {
         <IonSelect label="Select" placeholder="Make a Selection">
           <IonSelectOption value="">No Game Console</IonSelectOption>
           <IonSelectOption value="nes">NES</IonSelectOption>
-          <IonSelectOption value="n64" selected={true}>
-            Nintendo64
-          </IonSelectOption>
+          <IonSelectOption value="n64">Nintendo64</IonSelectOption>
           <IonSelectOption value="ps">PlayStation</IonSelectOption>
           <IonSelectOption value="genesis">Sega Genesis</IonSelectOption>
           <IonSelectOption value="saturn">Sega Saturn</IonSelectOption>
diff --git a/static/usage/v7/item/inputs/vue.md b/static/usage/v7/item/inputs/vue.md
index 95150978536..6ce71990b7e 100644
--- a/static/usage/v7/item/inputs/vue.md
+++ b/static/usage/v7/item/inputs/vue.md
@@ -32,7 +32,7 @@
     <ion-select label="Select" placeholder="Make a Selection">
       <ion-select-option value="">No Game Console</ion-select-option>
       <ion-select-option value="nes">NES</ion-select-option>
-      <ion-select-option value="n64" selected>Nintendo64</ion-select-option>
+      <ion-select-option value="n64">Nintendo64</ion-select-option>
       <ion-select-option value="ps">PlayStation</ion-select-option>
       <ion-select-option value="genesis">Sega Genesis</ion-select-option>
       <ion-select-option value="saturn">Sega Saturn</ion-select-option>