docs(many): remove legacy form control syntax from v7 playgrounds (#3140)

Author: averyjohnston

docs/api/item.md

@@ -236,17 +236,6 @@ import CSSProps from '@site/static/usage/v7/item/theming/css-properties/index.md
 
 <CSSProps />
 
-
-### Input Highlight
-
-Items containing an input will highlight the bottom border of the input with a different color when focused, valid, or invalid. By default, `md` items have a highlight with a height set to `2px` and `ios` has no highlight (technically the height is set to `0`). The height can be changed using the `--highlight-height` CSS property. To turn off the highlight, set this variable to `0`.
-
-The highlight color changes based on the item state, but all of the states use Ionic colors by default. When focused, the input highlight will use the `primary` color. If the input is valid it will use the `success` color, and invalid inputs will use the `danger` color. This can be customized using the provided CSS properties.
-
-import InputHighlight from '@site/static/usage/v7/item/theming/input-highlight/index.md';
-
-<InputHighlight />
-
 ## Guidelines
 
 The following guidelines will help ensure your list items are easy to understand and use.

docs/api/label.md

@@ -17,8 +17,9 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="scoped" />
 
-Label is a wrapper element that can be used in combination with `ion-item`, `ion-input`, `ion-toggle`, and more. The position of the label inside of an item can be inline, fixed, stacked, or floating.
+Label is an element used primarily to add text content to [Item](./item.md) components. Label can also be used inside of form control components such as [Input](./input.md) or [Radio](./radio.md) when specifying the visible label, but it is not required.
 
+The position of the label inside of an item can be inline, fixed, stacked, or floating.
 
 ## Basic Usage
 
@@ -32,12 +33,6 @@ import Item from '@site/static/usage/v7/label/item/index.md';
 
 <Item />
 
-## Input Labels
-
-import Input from '@site/static/usage/v7/label/input/index.md';
-
-<Input />
-
 ## Theming
 
 ### Colors

static/usage/v7/backdrop/basic/angular.md

@@ -8,8 +8,7 @@
   </ion-header>
   <ion-content class="ion-padding">
     <ion-item>
-      <ion-checkbox slot="start"></ion-checkbox>
-      <ion-label>Checkbox</ion-label>
+      <ion-checkbox>Checkbox</ion-checkbox>
     </ion-item>
     <ion-button expand="block">Button</ion-button>
   </ion-content>

static/usage/v7/backdrop/basic/demo.html

@@ -21,8 +21,7 @@
         </ion-header>
         <ion-content class="ion-padding">
           <ion-item>
-            <ion-checkbox slot="start"></ion-checkbox>
-            <ion-label>Checkbox</ion-label>
+            <ion-checkbox>Checkbox</ion-checkbox>
           </ion-item>
           <ion-button expand="block">Button</ion-button>
         </ion-content>

static/usage/v7/backdrop/basic/javascript.md

@@ -8,8 +8,7 @@
   </ion-header>
   <ion-content class="ion-padding">
     <ion-item>
-      <ion-checkbox slot="start"></ion-checkbox>
-      <ion-label>Checkbox</ion-label>
+      <ion-checkbox>Checkbox</ion-checkbox>
     </ion-item>
     <ion-button expand="block">Button</ion-button>
   </ion-content>

static/usage/v7/backdrop/basic/react.md

@@ -8,7 +8,6 @@ import {
   IonContent,
   IonItem,
   IonCheckbox,
-  IonLabel,
   IonButton,
 } from '@ionic/react';
 
@@ -24,8 +23,7 @@ function Example() {
         </IonHeader>
         <IonContent className="ion-padding">
           <IonItem>
-            <IonCheckbox slot="start"></IonCheckbox>
-            <IonLabel>Checkbox</IonLabel>
+            <IonCheckbox>Checkbox</IonCheckbox>
           </IonItem>
           <IonButton expand="block">Button</IonButton>
         </IonContent>

static/usage/v7/backdrop/basic/vue.md

@@ -9,8 +9,7 @@
     </ion-header>
     <ion-content class="ion-padding">
       <ion-item>
-        <ion-checkbox slot="start"></ion-checkbox>
-        <ion-label>Checkbox</ion-label>
+        <ion-checkbox>Checkbox</ion-checkbox>
       </ion-item>
       <ion-button expand="block">Button</ion-button>
     </ion-content>
@@ -25,13 +24,12 @@
     IonContent,
     IonItem,
     IonCheckbox,
-    IonLabel,
     IonButton,
   } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
-    components: { IonBackdrop, IonHeader, IonToolbar, IonTitle, IonContent, IonItem, IonCheckbox, IonLabel, IonButton },
+    components: { IonBackdrop, IonHeader, IonToolbar, IonTitle, IonContent, IonItem, IonCheckbox, IonButton },
   });
 </script>
 ```