From a25007f54f590a3e90a85fd9d0e6ffaa2f8b040c Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Tue, 4 Feb 2020 11:16:44 -0500
Subject: [PATCH] docs(react): update class usage to className (#20366)

---
 core/src/components/card/readme.md       |  4 ++--
 core/src/components/card/usage/react.md  |  4 ++--
 core/src/components/grid/readme.md       | 16 ++++++++--------
 core/src/components/grid/usage/react.md  | 16 ++++++++--------
 core/src/components/item/readme.md       |  4 ++--
 core/src/components/item/usage/react.md  |  4 ++--
 core/src/components/label/readme.md      |  2 +-
 core/src/components/label/usage/react.md |  2 +-
 core/src/components/menu/readme.md       |  2 +-
 core/src/components/menu/usage/react.md  |  2 +-
 10 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/core/src/components/card/readme.md b/core/src/components/card/readme.md
index 224ede7925..a30746c387 100644
--- a/core/src/components/card/readme.md
+++ b/core/src/components/card/readme.md
@@ -97,7 +97,7 @@ export const CardExample: React.FC = () => (
     </IonCard>
 
     <IonCard>
-      <IonItem href="#" class="ion-activated">
+      <IonItem href="#" className="ion-activated">
         <IonIcon name="wifi" slot="start" />
         <IonLabel>Card Link Item 1 activated</IonLabel>
       </IonItem>
@@ -107,7 +107,7 @@ export const CardExample: React.FC = () => (
         <IonLabel>Card Link Item 2</IonLabel>
       </IonItem>
 
-      <IonItem class="ion-activated">
+      <IonItem className="ion-activated">
         <IonIcon name="warning" slot="start" />
         <IonLabel>Card Button Item 1 activated</IonLabel>
       </IonItem>
diff --git a/core/src/components/card/usage/react.md b/core/src/components/card/usage/react.md
index 2c0b112413..0ac950432a 100644
--- a/core/src/components/card/usage/react.md
+++ b/core/src/components/card/usage/react.md
@@ -30,7 +30,7 @@ export const CardExample: React.FC = () => (
     </IonCard>
 
     <IonCard>
-      <IonItem href="#" class="ion-activated">
+      <IonItem href="#" className="ion-activated">
         <IonIcon name="wifi" slot="start" />
         <IonLabel>Card Link Item 1 activated</IonLabel>
       </IonItem>
@@ -40,7 +40,7 @@ export const CardExample: React.FC = () => (
         <IonLabel>Card Link Item 2</IonLabel>
       </IonItem>
 
-      <IonItem class="ion-activated">
+      <IonItem className="ion-activated">
         <IonIcon name="warning" slot="start" />
         <IonLabel>Card Button Item 1 activated</IonLabel>
       </IonItem>
diff --git a/core/src/components/grid/readme.md b/core/src/components/grid/readme.md
index cc6ca47a4d..7809da7f6c 100644
--- a/core/src/components/grid/readme.md
+++ b/core/src/components/grid/readme.md
@@ -250,9 +250,9 @@ export const GridExample: React.FC = () => (
       </IonRow>
 
       <IonRow>
-        <IonCol class="ion-align-self-start">ion-col start</IonCol>
-        <IonCol class="ion-align-self-center">ion-col center</IonCol>
-        <IonCol class="ion-align-self-end">ion-col end</IonCol>
+        <IonCol className="ion-align-self-start">ion-col start</IonCol>
+        <IonCol className="ion-align-self-center">ion-col center</IonCol>
+        <IonCol className="ion-align-self-end">ion-col end</IonCol>
         <IonCol>
           ion-col
           <br />#
@@ -260,10 +260,10 @@ export const GridExample: React.FC = () => (
         </IonCol>
       </IonRow>
 
-      <IonRow class="ion-align-items-start">
+      <IonRow className="ion-align-items-start">
         <IonCol>start ion-col</IonCol>
         <IonCol>start ion-col</IonCol>
-        <IonCol class="ion-align-self-end">start ion-col end</IonCol>
+        <IonCol className="ion-align-self-end">start ion-col end</IonCol>
         <IonCol>
           ion-col
           <br />#
@@ -271,7 +271,7 @@ export const GridExample: React.FC = () => (
         </IonCol>
       </IonRow>
 
-      <IonRow class="ion-align-items-center">
+      <IonRow className="ion-align-items-center">
         <IonCol>center ion-col</IonCol>
         <IonCol>center ion-col</IonCol>
         <IonCol>center ion-col</IonCol>
@@ -282,9 +282,9 @@ export const GridExample: React.FC = () => (
         </IonCol>
       </IonRow>
 
-      <IonRow class="ion-align-items-end">
+      <IonRow className="ion-align-items-end">
         <IonCol>end ion-col</IonCol>
-        <IonCol class="ion-align-self-start">end ion-col start</IonCol>
+        <IonCol className="ion-align-self-start">end ion-col start</IonCol>
         <IonCol>end ion-col</IonCol>
         <IonCol>
           ion-col
diff --git a/core/src/components/grid/usage/react.md b/core/src/components/grid/usage/react.md
index 04397a8558..6b4c695090 100644
--- a/core/src/components/grid/usage/react.md
+++ b/core/src/components/grid/usage/react.md
@@ -51,9 +51,9 @@ export const GridExample: React.FC = () => (
       </IonRow>
 
       <IonRow>
-        <IonCol class="ion-align-self-start">ion-col start</IonCol>
-        <IonCol class="ion-align-self-center">ion-col center</IonCol>
-        <IonCol class="ion-align-self-end">ion-col end</IonCol>
+        <IonCol className="ion-align-self-start">ion-col start</IonCol>
+        <IonCol className="ion-align-self-center">ion-col center</IonCol>
+        <IonCol className="ion-align-self-end">ion-col end</IonCol>
         <IonCol>
           ion-col
           <br />#
@@ -61,10 +61,10 @@ export const GridExample: React.FC = () => (
         </IonCol>
       </IonRow>
 
-      <IonRow class="ion-align-items-start">
+      <IonRow className="ion-align-items-start">
         <IonCol>start ion-col</IonCol>
         <IonCol>start ion-col</IonCol>
-        <IonCol class="ion-align-self-end">start ion-col end</IonCol>
+        <IonCol className="ion-align-self-end">start ion-col end</IonCol>
         <IonCol>
           ion-col
           <br />#
@@ -72,7 +72,7 @@ export const GridExample: React.FC = () => (
         </IonCol>
       </IonRow>
 
-      <IonRow class="ion-align-items-center">
+      <IonRow className="ion-align-items-center">
         <IonCol>center ion-col</IonCol>
         <IonCol>center ion-col</IonCol>
         <IonCol>center ion-col</IonCol>
@@ -83,9 +83,9 @@ export const GridExample: React.FC = () => (
         </IonCol>
       </IonRow>
 
-      <IonRow class="ion-align-items-end">
+      <IonRow className="ion-align-items-end">
         <IonCol>end ion-col</IonCol>
-        <IonCol class="ion-align-self-start">end ion-col start</IonCol>
+        <IonCol className="ion-align-self-start">end ion-col start</IonCol>
         <IonCol>end ion-col</IonCol>
         <IonCol>
           ion-col
diff --git a/core/src/components/item/readme.md b/core/src/components/item/readme.md
index 5330fd32cb..2d08cd4639 100644
--- a/core/src/components/item/readme.md
+++ b/core/src/components/item/readme.md
@@ -778,14 +778,14 @@ const Example: React.FC<{}> = () => (
       </IonItem>
 
       <IonItem>
-        <IonLabel class="ion-text-wrap">
+        <IonLabel className="ion-text-wrap">
         Multiline text that should wrap when it is too long
         to fit on one line in the item.
         </IonLabel>
       </IonItem>
 
       <IonItem>
-        <IonLabel class="ion-text-wrap">
+        <IonLabel className="ion-text-wrap">
           <IonText color="primary">
             <h3>H3 Primary Title</h3>
           </IonText>
diff --git a/core/src/components/item/usage/react.md b/core/src/components/item/usage/react.md
index beb1393847..976bc7b11e 100644
--- a/core/src/components/item/usage/react.md
+++ b/core/src/components/item/usage/react.md
@@ -67,14 +67,14 @@ const Example: React.FC<{}> = () => (
       </IonItem>
 
       <IonItem>
-        <IonLabel class="ion-text-wrap">
+        <IonLabel className="ion-text-wrap">
         Multiline text that should wrap when it is too long
         to fit on one line in the item.
         </IonLabel>
       </IonItem>
 
       <IonItem>
-        <IonLabel class="ion-text-wrap">
+        <IonLabel className="ion-text-wrap">
           <IonText color="primary">
             <h3>H3 Primary Title</h3>
           </IonText>
diff --git a/core/src/components/label/readme.md b/core/src/components/label/readme.md
index 047fbc2905..0f12dfeabe 100644
--- a/core/src/components/label/readme.md
+++ b/core/src/components/label/readme.md
@@ -90,7 +90,7 @@ export const LabelExample: React.FC = () => (
     </IonItem>
 
     <IonItem>
-      <IonLabel class="ion-text-wrap">
+      <IonLabel className="ion-text-wrap">
         Multi-line text that should wrap when it is too long
         to fit on one line in the item.
       </IonLabel>
diff --git a/core/src/components/label/usage/react.md b/core/src/components/label/usage/react.md
index 0c88c96097..9188f94414 100644
--- a/core/src/components/label/usage/react.md
+++ b/core/src/components/label/usage/react.md
@@ -20,7 +20,7 @@ export const LabelExample: React.FC = () => (
     </IonItem>
 
     <IonItem>
-      <IonLabel class="ion-text-wrap">
+      <IonLabel className="ion-text-wrap">
         Multi-line text that should wrap when it is too long
         to fit on one line in the item.
       </IonLabel>
diff --git a/core/src/components/menu/readme.md b/core/src/components/menu/readme.md
index 560429d9b1..a15ef885cb 100644
--- a/core/src/components/menu/readme.md
+++ b/core/src/components/menu/readme.md
@@ -228,7 +228,7 @@ export const MenuExample: React.FC = () => (
       </IonContent>
     </IonMenu>
 
-    <IonMenu side="start" menuId="custom" class="my-custom-menu">
+    <IonMenu side="start" menuId="custom" className="my-custom-menu">
       <IonHeader>
         <IonToolbar color="tertiary">
           <IonTitle>Custom Menu</IonTitle>
diff --git a/core/src/components/menu/usage/react.md b/core/src/components/menu/usage/react.md
index 681290598b..0cca2c05df 100644
--- a/core/src/components/menu/usage/react.md
+++ b/core/src/components/menu/usage/react.md
@@ -21,7 +21,7 @@ export const MenuExample: React.FC = () => (
       </IonContent>
     </IonMenu>
 
-    <IonMenu side="start" menuId="custom" class="my-custom-menu">
+    <IonMenu side="start" menuId="custom" className="my-custom-menu">
       <IonHeader>
         <IonToolbar color="tertiary">
           <IonTitle>Custom Menu</IonTitle>