From 23ce7c787c60e87ccce35d5005483b8503b32cbe Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Mon, 27 Jan 2020 14:23:22 -0500
Subject: [PATCH] docs(grid): update usage to correct CSS utility classes
 (#20312)

resolves #20302
---
 core/src/components/grid/readme.md           | 50 ++++++++++----------
 core/src/components/grid/usage/angular.md    | 16 +++----
 core/src/components/grid/usage/javascript.md | 16 +++----
 core/src/components/grid/usage/react.md      | 16 +++----
 core/src/components/grid/usage/vue.md        | 16 +++----
 core/src/components/modal/readme.md          |  2 +-
 core/src/components/modal/usage/vue.md       |  2 +-
 7 files changed, 59 insertions(+), 59 deletions(-)

diff --git a/core/src/components/grid/readme.md b/core/src/components/grid/readme.md
index cfcfe366ed..cc6ca47a4d 100644
--- a/core/src/components/grid/readme.md
+++ b/core/src/components/grid/readme.md
@@ -5,7 +5,7 @@ The grid is a powerful mobile-first flexbox system for building custom layouts.
 
 It is composed of three units — a grid, [row(s)](../row) and [column(s)](../col). Columns will expand to fill the row, and will resize to fit additional columns. It is based on a 12 column layout with different breakpoints based on the screen size. The number of columns can be customized using CSS.
 
-See [Grid Layout](/docs/layout/grid) for more information.
+See the [Responsive Grid documentation](/docs/layout/grid) for more information.
 
 <!-- Auto Generated Below -->
 
@@ -86,13 +86,13 @@ See [Grid Layout](/docs/layout/grid) for more information.
   </ion-row>
 
   <ion-row>
-    <ion-col align-self-start>
+    <ion-col class="ion-align-self-start">
       ion-col [start]
     </ion-col>
-    <ion-col align-self-center>
+    <ion-col class="ion-align-self-center">
       ion-col [center]
     </ion-col>
-    <ion-col align-self-end>
+    <ion-col class="ion-align-self-end">
       ion-col [end]
     </ion-col>
     <ion-col>
@@ -102,14 +102,14 @@ See [Grid Layout](/docs/layout/grid) for more information.
     </ion-col>
   </ion-row>
 
-  <ion-row align-items-start>
+  <ion-row class="ion-align-items-start">
     <ion-col>
       [start] ion-col
     </ion-col>
     <ion-col>
       [start] ion-col
     </ion-col>
-    <ion-col align-self-end>
+    <ion-col class="ion-align-self-end">
       [start] ion-col [end]
     </ion-col>
     <ion-col>
@@ -119,7 +119,7 @@ See [Grid Layout](/docs/layout/grid) for more information.
     </ion-col>
   </ion-row>
 
-  <ion-row align-items-center>
+  <ion-row class="ion-align-items-center">
     <ion-col>
       [center] ion-col
     </ion-col>
@@ -136,11 +136,11 @@ See [Grid Layout](/docs/layout/grid) for more information.
     </ion-col>
   </ion-row>
 
-  <ion-row align-items-end>
+  <ion-row class="ion-align-items-end">
     <ion-col>
       [end] ion-col
     </ion-col>
-    <ion-col align-self-start>
+    <ion-col class="ion-align-self-start">
       [end] ion-col [start]
     </ion-col>
     <ion-col>
@@ -250,9 +250,9 @@ export const GridExample: React.FC = () => (
       </IonRow>
 
       <IonRow>
-        <IonCol align-self-start>ion-col start</IonCol>
-        <IonCol align-self-center>ion-col center</IonCol>
-        <IonCol align-self-end>ion-col end</IonCol>
+        <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>
           ion-col
           <br />#
@@ -260,10 +260,10 @@ export const GridExample: React.FC = () => (
         </IonCol>
       </IonRow>
 
-      <IonRow align-items-start>
+      <IonRow class="ion-align-items-start">
         <IonCol>start ion-col</IonCol>
         <IonCol>start ion-col</IonCol>
-        <IonCol align-self-end>start ion-col end</IonCol>
+        <IonCol class="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 align-items-center>
+      <IonRow class="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 align-items-end>
+      <IonRow class="ion-align-items-end">
         <IonCol>end ion-col</IonCol>
-        <IonCol align-self-start>end ion-col start</IonCol>
+        <IonCol class="ion-align-self-start">end ion-col start</IonCol>
         <IonCol>end ion-col</IonCol>
         <IonCol>
           ion-col
@@ -412,13 +412,13 @@ export const GridExample: React.FC = () => (
     </ion-row>
 
     <ion-row>
-      <ion-col align-self-start>
+      <ion-col class="ion-align-self-start">
         ion-col [start]
       </ion-col>
-      <ion-col align-self-center>
+      <ion-col class="ion-align-self-center">
         ion-col [center]
       </ion-col>
-      <ion-col align-self-end>
+      <ion-col class="ion-align-self-end">
         ion-col [end]
       </ion-col>
       <ion-col>
@@ -428,14 +428,14 @@ export const GridExample: React.FC = () => (
       </ion-col>
     </ion-row>
 
-    <ion-row align-items-start>
+    <ion-row class="ion-align-items-start">
       <ion-col>
         [start] ion-col
       </ion-col>
       <ion-col>
         [start] ion-col
       </ion-col>
-      <ion-col align-self-end>
+      <ion-col class="ion-align-self-end">
         [start] ion-col [end]
       </ion-col>
       <ion-col>
@@ -445,7 +445,7 @@ export const GridExample: React.FC = () => (
       </ion-col>
     </ion-row>
 
-    <ion-row align-items-center>
+    <ion-row class="ion-align-items-center">
       <ion-col>
         [center] ion-col
       </ion-col>
@@ -462,11 +462,11 @@ export const GridExample: React.FC = () => (
       </ion-col>
     </ion-row>
 
-    <ion-row align-items-end>
+    <ion-row class="ion-align-items-end">
       <ion-col>
         [end] ion-col
       </ion-col>
-      <ion-col align-self-start>
+      <ion-col class="ion-align-self-start">
         [end] ion-col [start]
       </ion-col>
       <ion-col>
diff --git a/core/src/components/grid/usage/angular.md b/core/src/components/grid/usage/angular.md
index 310eb8d938..704c0a655b 100644
--- a/core/src/components/grid/usage/angular.md
+++ b/core/src/components/grid/usage/angular.md
@@ -70,13 +70,13 @@
   </ion-row>
 
   <ion-row>
-    <ion-col align-self-start>
+    <ion-col class="ion-align-self-start">
       ion-col [start]
     </ion-col>
-    <ion-col align-self-center>
+    <ion-col class="ion-align-self-center">
       ion-col [center]
     </ion-col>
-    <ion-col align-self-end>
+    <ion-col class="ion-align-self-end">
       ion-col [end]
     </ion-col>
     <ion-col>
@@ -86,14 +86,14 @@
     </ion-col>
   </ion-row>
 
-  <ion-row align-items-start>
+  <ion-row class="ion-align-items-start">
     <ion-col>
       [start] ion-col
     </ion-col>
     <ion-col>
       [start] ion-col
     </ion-col>
-    <ion-col align-self-end>
+    <ion-col class="ion-align-self-end">
       [start] ion-col [end]
     </ion-col>
     <ion-col>
@@ -103,7 +103,7 @@
     </ion-col>
   </ion-row>
 
-  <ion-row align-items-center>
+  <ion-row class="ion-align-items-center">
     <ion-col>
       [center] ion-col
     </ion-col>
@@ -120,11 +120,11 @@
     </ion-col>
   </ion-row>
 
-  <ion-row align-items-end>
+  <ion-row class="ion-align-items-end">
     <ion-col>
       [end] ion-col
     </ion-col>
-    <ion-col align-self-start>
+    <ion-col class="ion-align-self-start">
       [end] ion-col [start]
     </ion-col>
     <ion-col>
diff --git a/core/src/components/grid/usage/javascript.md b/core/src/components/grid/usage/javascript.md
index 310eb8d938..704c0a655b 100644
--- a/core/src/components/grid/usage/javascript.md
+++ b/core/src/components/grid/usage/javascript.md
@@ -70,13 +70,13 @@
   </ion-row>
 
   <ion-row>
-    <ion-col align-self-start>
+    <ion-col class="ion-align-self-start">
       ion-col [start]
     </ion-col>
-    <ion-col align-self-center>
+    <ion-col class="ion-align-self-center">
       ion-col [center]
     </ion-col>
-    <ion-col align-self-end>
+    <ion-col class="ion-align-self-end">
       ion-col [end]
     </ion-col>
     <ion-col>
@@ -86,14 +86,14 @@
     </ion-col>
   </ion-row>
 
-  <ion-row align-items-start>
+  <ion-row class="ion-align-items-start">
     <ion-col>
       [start] ion-col
     </ion-col>
     <ion-col>
       [start] ion-col
     </ion-col>
-    <ion-col align-self-end>
+    <ion-col class="ion-align-self-end">
       [start] ion-col [end]
     </ion-col>
     <ion-col>
@@ -103,7 +103,7 @@
     </ion-col>
   </ion-row>
 
-  <ion-row align-items-center>
+  <ion-row class="ion-align-items-center">
     <ion-col>
       [center] ion-col
     </ion-col>
@@ -120,11 +120,11 @@
     </ion-col>
   </ion-row>
 
-  <ion-row align-items-end>
+  <ion-row class="ion-align-items-end">
     <ion-col>
       [end] ion-col
     </ion-col>
-    <ion-col align-self-start>
+    <ion-col class="ion-align-self-start">
       [end] ion-col [start]
     </ion-col>
     <ion-col>
diff --git a/core/src/components/grid/usage/react.md b/core/src/components/grid/usage/react.md
index fba5465875..04397a8558 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 align-self-start>ion-col start</IonCol>
-        <IonCol align-self-center>ion-col center</IonCol>
-        <IonCol align-self-end>ion-col end</IonCol>
+        <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>
           ion-col
           <br />#
@@ -61,10 +61,10 @@ export const GridExample: React.FC = () => (
         </IonCol>
       </IonRow>
 
-      <IonRow align-items-start>
+      <IonRow class="ion-align-items-start">
         <IonCol>start ion-col</IonCol>
         <IonCol>start ion-col</IonCol>
-        <IonCol align-self-end>start ion-col end</IonCol>
+        <IonCol class="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 align-items-center>
+      <IonRow class="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 align-items-end>
+      <IonRow class="ion-align-items-end">
         <IonCol>end ion-col</IonCol>
-        <IonCol align-self-start>end ion-col start</IonCol>
+        <IonCol class="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/vue.md b/core/src/components/grid/usage/vue.md
index 96547bd35f..c52b259805 100644
--- a/core/src/components/grid/usage/vue.md
+++ b/core/src/components/grid/usage/vue.md
@@ -71,13 +71,13 @@
     </ion-row>
 
     <ion-row>
-      <ion-col align-self-start>
+      <ion-col class="ion-align-self-start">
         ion-col [start]
       </ion-col>
-      <ion-col align-self-center>
+      <ion-col class="ion-align-self-center">
         ion-col [center]
       </ion-col>
-      <ion-col align-self-end>
+      <ion-col class="ion-align-self-end">
         ion-col [end]
       </ion-col>
       <ion-col>
@@ -87,14 +87,14 @@
       </ion-col>
     </ion-row>
 
-    <ion-row align-items-start>
+    <ion-row class="ion-align-items-start">
       <ion-col>
         [start] ion-col
       </ion-col>
       <ion-col>
         [start] ion-col
       </ion-col>
-      <ion-col align-self-end>
+      <ion-col class="ion-align-self-end">
         [start] ion-col [end]
       </ion-col>
       <ion-col>
@@ -104,7 +104,7 @@
       </ion-col>
     </ion-row>
 
-    <ion-row align-items-center>
+    <ion-row class="ion-align-items-center">
       <ion-col>
         [center] ion-col
       </ion-col>
@@ -121,11 +121,11 @@
       </ion-col>
     </ion-row>
 
-    <ion-row align-items-end>
+    <ion-row class="ion-align-items-end">
       <ion-col>
         [end] ion-col
       </ion-col>
-      <ion-col align-self-start>
+      <ion-col class="ion-align-self-start">
         [end] ion-col [start]
       </ion-col>
       <ion-col>
diff --git a/core/src/components/modal/readme.md b/core/src/components/modal/readme.md
index b1169ee2cb..516d958dcc 100644
--- a/core/src/components/modal/readme.md
+++ b/core/src/components/modal/readme.md
@@ -387,7 +387,7 @@ export default {
 ```html
 <template>
   <ion-page class="ion-page">
-    <ion-content class="ion-content" padding>
+    <ion-content class="ion-content ion-padding">
       <ion-button @click="openModal">Open Modal</ion-button>
     </ion-content>
   </ion-page>
diff --git a/core/src/components/modal/usage/vue.md b/core/src/components/modal/usage/vue.md
index a928fe2919..fec97ab5ce 100644
--- a/core/src/components/modal/usage/vue.md
+++ b/core/src/components/modal/usage/vue.md
@@ -30,7 +30,7 @@ export default {
 ```html
 <template>
   <ion-page class="ion-page">
-    <ion-content class="ion-content" padding>
+    <ion-content class="ion-content ion-padding">
       <ion-button @click="openModal">Open Modal</ion-button>
     </ion-content>
   </ion-page>