docs(react, vue): update Quickstart page to use modern checkbox syntax (

#3415)
ionic-team · Feb 5, 2024 · 54c7142 · 54c7142
1 parent 9269385
commit 54c7142
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 21 deletions.
diff --git a/docs/react/quickstart.md b/docs/react/quickstart.md
@@ -171,7 +171,7 @@ When creating your own pages, don't forget to have `IonPage` be the root compone
 Our current content is relatively simple but does not contain anything that could be used in a real app, so let's change that.
 
 :::note
-For brevity, we're excluding repeating part of our component, like the function declaration or import statements for other components.
+For brevity, we're excluding repeating parts of our component, like the function declaration or import statements for other components.
 :::
 
 ```tsx
@@ -180,11 +180,10 @@ For brevity, we're excluding repeating part of our component, like the function
   <IonContent>
     <IonList>
       <IonItem>
-        <IonCheckbox slot="start" />
-        <IonLabel>
+        <IonCheckbox labelPlacement="end" justify="start">
           <h1>Create Idea</h1>
           <IonNote>Run Idea by Brandy</IonNote>
-        </IonLabel>
+        </IonCheckbox>
         <IonBadge color="success" slot="end">
           5 Days
         </IonBadge>
@@ -198,20 +197,17 @@ Here in our `IonContent`, we're adding an `IonList` and a much more involved `Io
 
 ```tsx
 <IonItem>
-  <IonCheckbox slot="start" />
-  <IonLabel>
+  <IonCheckbox labelPlacement="end" justify="start">
     <h1>Create Idea</h1>
     <IonNote>Run Idea by Brandy</IonNote>
-  </IonLabel>
+  </IonCheckbox>
   <IonBadge color="success" slot="end">
     5 Days
   </IonBadge>
 </IonItem>
 ```
 
-Item is important as it clearly shows the mix of React concepts and Web Component concepts. The first clear example of a React concept is self-closing tags for React Components in `IonCheckbox`. This is just a simpler way of writing components that do not contain any child content.
-
-From the Web Components side, we have a special attribute called `slot`. This is key for letting the `IonItem` know where to place the `IonCheckbox` when it renders. This is not a React API, but a web standards API.
+Looking at our code, we have a special attribute called `slot`. This is key for letting the `IonItem` know where to place the `IonBadge` when it renders. This is not a React API, but a web standards API, and it is used in many Ionic Framework components. (For more information on slots, [see the MDN docs here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot).)
 
 Let's look at another component from Ionic, FAB. Floating Action Buttons are a nice way to provide a main action that is elevated from the rest of an app. For this FAB, we'll need three components: a FAB, a FAB Button, and an Icon.
 

diff --git a/docs/vue/quickstart.md b/docs/vue/quickstart.md
@@ -282,12 +282,11 @@ For brevity, we are excluding repeating parts of our component, like the functio
     <ion-content>
       <ion-list>
         <ion-item>
-          <ion-checkbox slot="start"></ion-checkbox>
-          <ion-label>
+          <ion-checkbox label-placement="end" justify="start">
             <h1>Create Idea</h1>
             <ion-note>Run Idea By Brandy</ion-note>
-          </ion-label>
-          <ion-badge color="success" slot="end"> 5 Days </ion-badge>
+          </ion-checkbox>
+          <ion-badge color="success" slot="end">5 Days</ion-badge>
         </ion-item>
       </ion-list>
     </ion-content>
@@ -301,7 +300,6 @@ For brevity, we are excluding repeating parts of our component, like the functio
     IonContent,
     IonHeader,
     IonItem,
-    IonLabel,
     IonList,
     IonNote,
     IonPage,
@@ -315,16 +313,15 @@ Here in our `IonContent`, we are adding an `IonList` and a much more involved `I
 
 ```html
 <ion-item>
-  <ion-checkbox slot="start"></ion-checkbox>
-  <ion-label>
+  <ion-checkbox label-placement="end" justify="start">
     <h1>Create Idea</h1>
     <ion-note>Run Idea By Brandy</ion-note>
-  </ion-label>
-  <ion-badge color="success" slot="end"> 5 Days </ion-badge>
+  </ion-checkbox>
+  <ion-badge color="success" slot="end">5 Days</ion-badge>
 </ion-item>
 ```
 
-Looking at our code, we have a special attribute called slot. This is key for letting the `IonItem` know where to place the `IonCheckbox` when it renders. This is not a Vue API, but a web standards API. Additionally, this is different from the slots API you may recall from Vue 2.
+Looking at our code, we have a special attribute called `slot`. This is key for letting the `IonItem` know where to place the `IonBadge` when it renders. This is not a Vue API, but a web standards API, and it is used across many Ionic Framework components. Additionally, this is different from the slots API you may recall from Vue 2. (For more information on slots, [see the MDN docs here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot).)
 
 Let's look at another component from Ionic Framework, FAB. Floating Action Buttons are a nice way to provide a main action that is elevated from the rest of an app. For this FAB, we will need three components: a FAB, a FAB Button, and an Icon.
 
@@ -353,7 +350,6 @@ Let's look at another component from Ionic Framework, FAB. Floating Action Butto
     IonHeader,
     IonIcon,
     IonItem,
-    IonLabel,
     IonList,
     IonNote,
     IonPage,