From 1710a08d843142057e4e91e9bbde17063618278b Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 14 Mar 2023 13:42:43 -0400
Subject: [PATCH] update usage

---
 static/usage/v7/input/migration/index.md    | 96 +++++++++++++--------
 static/usage/v7/textarea/migration/index.md | 96 +++++++++++++--------
 2 files changed, 120 insertions(+), 72 deletions(-)

diff --git a/static/usage/v7/input/migration/index.md b/static/usage/v7/input/migration/index.md
index 6423ae78f24..e28bf81ce00 100644
--- a/static/usage/v7/input/migration/index.md
+++ b/static/usage/v7/input/migration/index.md
@@ -53,15 +53,21 @@ import TabItem from '@theme/TabItem';
 </ion-item>
 
 <!-- After -->
-<ion-item>
-  <ion-input
-    label="Email:"
-    counter="true"
-    maxlength="100"
-    helper-text="Enter an email"
-    error-text="Please enter a valid email"
-  ></ion-input>
-</ion-item>
+
+<!--
+  Metadata such as counters and helper text should not 
+  be used when an input is in an item/list. If you need to 
+  provide more context on a input, consider using an ion-note
+  underneath the ion-list.
+-->
+
+<ion-input
+  label="Email:"
+  counter="true"
+  maxlength="100"
+  helper-text="Enter an email"
+  error-text="Please enter a valid email"
+></ion-input>
 ```
 </TabItem>
 <TabItem value="angular">
@@ -105,15 +111,21 @@ import TabItem from '@theme/TabItem';
 </ion-item>
 
 <!-- After -->
-<ion-item>
-  <ion-input
-    label="Email:"
-    [counter]="true"
-    maxlength="100"
-    helperText="Enter an email"
-    errorText="Please enter a valid email"
-  ></ion-input>
-</ion-item>
+
+<!--
+  Metadata such as counters and helper text should not 
+  be used when an input is in an item/list. If you need to 
+  provide more context on a input, consider using an ion-note
+  underneath the ion-list.
+-->
+
+<ion-input
+  label="Email:"
+  [counter]="true"
+  maxlength="100"
+  helperText="Enter an email"
+  errorText="Please enter a valid email"
+></ion-input>
 ```
 </TabItem>
 <TabItem value="react">
@@ -157,15 +169,21 @@ import TabItem from '@theme/TabItem';
 </IonItem>
 
 {/* After */}
-<IonItem>
-  <IonInput
-    label="Email:"
-    counter={true}
-    maxlength="100"
-    helperText="Enter an email"
-    errorText="Please enter a valid email"
-  ></IonInput>
-</IonItem>
+
+{/*
+  Metadata such as counters and helper text should not 
+  be used when an input is in an item/list. If you need to 
+  provide more context on a input, consider using an IonNote
+  underneath the IonList.
+*/}
+
+<IonInput
+  label="Email:"
+  counter={true}
+  maxlength="100"
+  helperText="Enter an email"
+  errorText="Please enter a valid email"
+></IonInput>
 ```
 </TabItem>
 <TabItem value="vue">
@@ -209,15 +227,21 @@ import TabItem from '@theme/TabItem';
 </ion-item>
 
 <!-- After -->
-<ion-item>
-  <ion-input
-    label="Email:"
-    :counter="true"
-    maxlength="100"
-    helper-text="Enter an email"
-    error-text="Please enter a valid email"
-  ></ion-input>
-</ion-item>
+
+<!--
+  Metadata such as counters and helper text should not 
+  be used when an input is in an item/list. If you need to 
+  provide more context on a input, consider using an ion-note
+  underneath the ion-list.
+-->
+
+<ion-input
+  label="Email:"
+  :counter="true"
+  maxlength="100"
+  helper-text="Enter an email"
+  error-text="Please enter a valid email"
+></ion-input>
 ```
 </TabItem>
 </Tabs>
diff --git a/static/usage/v7/textarea/migration/index.md b/static/usage/v7/textarea/migration/index.md
index 28207956484..6413224a286 100644
--- a/static/usage/v7/textarea/migration/index.md
+++ b/static/usage/v7/textarea/migration/index.md
@@ -53,15 +53,21 @@ import TabItem from '@theme/TabItem';
 </ion-item>
 
 <!-- After -->
-<ion-item>
-  <ion-textarea
-    label="Label:"
-    counter="true"
-    maxlength="100"
-    helper-text="Enter text"
-    error-text="Please enter text"
-  ></ion-textarea>
-</ion-item>
+
+<!--
+  Metadata such as counters and helper text should not 
+  be used when a textarea is in an item/list. If you need to 
+  provide more context on a textarea, consider using an ion-note
+  underneath the ion-list.
+-->
+
+<ion-textarea
+  label="Label:"
+  counter="true"
+  maxlength="100"
+  helper-text="Enter text"
+  error-text="Please enter text"
+></ion-textarea>
 ```
 </TabItem>
 <TabItem value="angular">
@@ -105,15 +111,21 @@ import TabItem from '@theme/TabItem';
 </ion-item>
 
 <!-- After -->
-<ion-item>
-  <ion-textarea
-    label="Label:"
-    [counter]="true"
-    maxlength="100"
-    helperText="Enter text"
-    errorText="Please enter text"
-  ></ion-textarea>
-</ion-item>
+
+<!--
+  Metadata such as counters and helper text should not 
+  be used when a textarea is in an item/list. If you need to 
+  provide more context on a textarea, consider using an ion-note
+  underneath the ion-list.
+-->
+
+<ion-textarea
+  label="Label:"
+  [counter]="true"
+  maxlength="100"
+  helperText="Enter text"
+  errorText="Please enter text"
+></ion-textarea>
 ```
 </TabItem>
 <TabItem value="react">
@@ -157,15 +169,21 @@ import TabItem from '@theme/TabItem';
 </IonItem>
 
 {/* After */}
-<IonItem>
-  <IonTextarea
-    label="Label:"
-    counter={true}
-    maxlength="100"
-    helperText="Enter text"
-    errorText="Please enter text"
-  ></IonTextarea>
-</IonItem>
+
+{/* 
+  Metadata such as counters and helper text should not 
+  be used when a textarea is in an item/list. If you need to 
+  provide more context on a textarea, consider using an IonNote
+  underneath the IonList.
+*/}
+
+<IonTextarea
+  label="Label:"
+  counter={true}
+  maxlength="100"
+  helperText="Enter text"
+  errorText="Please enter text"
+></IonTextarea>
 ```
 </TabItem>
 <TabItem value="vue">
@@ -209,15 +227,21 @@ import TabItem from '@theme/TabItem';
 </ion-item>
 
 <!-- After -->
-<ion-item>
-  <ion-textarea
-    label="Label:"
-    :counter="true"
-    maxlength="100"
-    helper-text="Enter text"
-    error-text="Please enter text"
-  ></ion-textarea>
-</ion-item>
+
+<!--
+  Metadata such as counters and helper text should not 
+  be used when a textarea is in an item/list. If you need to 
+  provide more context on a textarea, consider using an ion-note
+  underneath the ion-list.
+-->
+
+<ion-textarea
+  label="Label:"
+  :counter="true"
+  maxlength="100"
+  helper-text="Enter text"
+  error-text="Please enter text"
+></ion-textarea>
 ```
 </TabItem>
 </Tabs>