From a0c0228acbf038e2e49cc663e6832deb0d8626db Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Tue, 26 Apr 2016 13:33:12 -0400
Subject: [PATCH] fix(grid): add ion-grid element which wraps the rows/cols and
 adds padding

update tests to use new ion-grid element

references #6238
---
 ionic/components/card/test/advanced/main.html | 116 +++--
 ionic/components/grid/grid.scss               |  20 +-
 ionic/components/grid/test/basic/main.html    | 470 +++++++++---------
 3 files changed, 306 insertions(+), 300 deletions(-)

diff --git a/ionic/components/card/test/advanced/main.html b/ionic/components/card/test/advanced/main.html
index 57b3d4eba52..1d4b87ae252 100644
--- a/ionic/components/card/test/advanced/main.html
+++ b/ionic/components/card/test/advanced/main.html
@@ -19,20 +19,22 @@
       </p>
     </ion-card-content>
 
-    <ion-row>
-      <ion-col no-padding>
-        <button clear small>
-          <ion-icon name="star"></ion-icon>
-          Star
-        </button>
-      </ion-col>
-      <ion-col no-padding text-right>
-        <button clear small class="activated">
-          <ion-icon name="share"></ion-icon>
-          Activated
-        </button>
-      </ion-col>
-    </ion-row>
+    <ion-grid>
+      <ion-row>
+        <ion-col no-padding>
+          <button clear small>
+            <ion-icon name="star"></ion-icon>
+            Star
+          </button>
+        </ion-col>
+        <ion-col no-padding text-right>
+          <button clear small class="activated">
+            <ion-icon name="share"></ion-icon>
+            Activated
+          </button>
+        </ion-col>
+      </ion-row>
+    </ion-grid>
 
   </ion-card>
 
@@ -55,26 +57,28 @@ <h2>Card With An Inset Picture</h2>
       <p>Hello. I am a paragraph.</p>
     </ion-card-content>
 
-    <ion-row>
-      <ion-col no-padding>
-        <button clear small>
-          <ion-icon name="star"></ion-icon>
-          Favorite
-        </button>
-      </ion-col>
-      <ion-col no-padding text-center>
-        <button clear small>
-          <ion-icon name="musical-notes"></ion-icon>
-          Listen
-        </button>
-      </ion-col>
-      <ion-col no-padding text-right>
-        <button clear small danger class="activated">
-          <ion-icon name="share"></ion-icon>
-          Activated
-        </button>
-      </ion-col>
-    </ion-row>
+    <ion-grid>
+      <ion-row>
+        <ion-col no-padding>
+          <button clear small>
+            <ion-icon name="star"></ion-icon>
+            Favorite
+          </button>
+        </ion-col>
+        <ion-col no-padding text-center>
+          <button clear small>
+            <ion-icon name="musical-notes"></ion-icon>
+            Listen
+          </button>
+        </ion-col>
+        <ion-col no-padding text-right>
+          <button clear small danger class="activated">
+            <ion-icon name="share"></ion-icon>
+            Activated
+          </button>
+        </ion-col>
+      </ion-row>
+    </ion-grid>
   </ion-card>
 
   <ion-card>
@@ -87,27 +91,29 @@ <h2>Card With An Inset Picture</h2>
       This card was breaking the border radius.
     </ion-card-content>
 
-    <ion-row>
-      <ion-col no-padding>
-        <button clear small dark>
-          <ion-icon name="star"></ion-icon>
-          Favorite
-        </button>
-      </ion-col>
-
-      <ion-col no-padding text-center>
-        <button clear small dark>
-          <ion-icon name="musical-notes"></ion-icon>
-          Listen
-        </button>
-      </ion-col>
-      <ion-col no-padding text-right>
-        <button clear small dark>
-          <ion-icon name="share-alt"></ion-icon>
-          Share
-        </button>
-      </ion-col>
-    </ion-row>
+    <ion-grid>
+      <ion-row>
+        <ion-col no-padding>
+          <button clear small dark>
+            <ion-icon name="star"></ion-icon>
+            Favorite
+          </button>
+        </ion-col>
+
+        <ion-col no-padding text-center>
+          <button clear small dark>
+            <ion-icon name="musical-notes"></ion-icon>
+            Listen
+          </button>
+        </ion-col>
+        <ion-col no-padding text-right>
+          <button clear small dark>
+            <ion-icon name="share-alt"></ion-icon>
+            Share
+          </button>
+        </ion-col>
+      </ion-row>
+    </ion-grid>
 
   </ion-card>
 
diff --git a/ionic/components/grid/grid.scss b/ionic/components/grid/grid.scss
index 341b523ca6f..165b50e84a5 100644
--- a/ionic/components/grid/grid.scss
+++ b/ionic/components/grid/grid.scss
@@ -45,22 +45,25 @@ $grid-responsive-lg-break:        1023px !default; // smaller than landscape tab
   }
 }
 
-
-ion-row {
+ion-grid {
   display: flex;
 
+  flex-direction: column;
+
   padding: ($grid-padding-width / 2);
 
   width: 100%;
+}
+
+ion-row {
+  display: flex;
+
+  width: 100%;
 
   &[wrap] {
     flex-wrap: wrap;
   }
 
-  &[flush] {
-    padding: 0;
-  }
-
   &[top] {
     align-items: flex-start;
   }
@@ -82,11 +85,6 @@ ion-row {
   }
 }
 
-ion-row + ion-row {
-  margin-top: ($grid-padding-width / 2) * -1;
-  padding-top: 0;
-}
-
 ion-col {
   display: block;
 
diff --git a/ionic/components/grid/test/basic/main.html b/ionic/components/grid/test/basic/main.html
index 8e2453a5b0e..f7b9f8f1132 100644
--- a/ionic/components/grid/test/basic/main.html
+++ b/ionic/components/grid/test/basic/main.html
@@ -1,251 +1,253 @@
 <ion-toolbar><ion-title>Grid</ion-title></ion-toolbar>
 
 <ion-content class="grid-demo">
-  <ion-row>
-    <ion-col>
-      <div>
-        ion-col
-      </div>
-    </ion-col>
-    <ion-col>
-      <div>
-        ion-col
-      </div>
-    </ion-col>
-    <ion-col>
-      <div>
-        ion-col
-      </div>
-    </ion-col>
-    <ion-col>
-      <div>
-        ion-col
-      </div>
-    </ion-col>
-  </ion-row>
+  <ion-grid>
+    <ion-row>
+      <ion-col>
+        <div>
+          ion-col
+        </div>
+      </ion-col>
+      <ion-col>
+        <div>
+          ion-col
+        </div>
+      </ion-col>
+      <ion-col>
+        <div>
+          ion-col
+        </div>
+      </ion-col>
+      <ion-col>
+        <div>
+          ion-col
+        </div>
+      </ion-col>
+    </ion-row>
 
-  <ion-row>
-    <ion-col width-50>
-      <div>
-        ion-col[width-50]
-      </div>
-    </ion-col>
-    <ion-col>
-      <div>
-        ion-col
-      </div>
-    </ion-col>
-    <ion-col>
-      <div>
-        ion-col
-      </div>
-    </ion-col>
-  </ion-row>
+    <ion-row>
+      <ion-col width-50>
+        <div>
+          ion-col[width-50]
+        </div>
+      </ion-col>
+      <ion-col>
+        <div>
+          ion-col
+        </div>
+      </ion-col>
+      <ion-col>
+        <div>
+          ion-col
+        </div>
+      </ion-col>
+    </ion-row>
 
-  <ion-row>
-    <ion-col width-25>
-      <div>
-        ion-col[width-25]
-      </div>
-    </ion-col>
-    <ion-col>
-      <div>
-        ion-col
-      </div>
-    </ion-col>
-    <ion-col width-25>
-      <div>
-        ion-col[width-25]
-      </div>
-    </ion-col>
-  </ion-row>
+    <ion-row>
+      <ion-col width-25>
+        <div>
+          ion-col[width-25]
+        </div>
+      </ion-col>
+      <ion-col>
+        <div>
+          ion-col
+        </div>
+      </ion-col>
+      <ion-col width-25>
+        <div>
+          ion-col[width-25]
+        </div>
+      </ion-col>
+    </ion-row>
 
-  <ion-row>
-    <ion-col width-25>
-      <div>
-        ion-col[width-25]
-      </div>
-    </ion-col>
-    <ion-col width-25 offset-25>
-      <div>
-        ion-col[width-25][offset-25]
-      </div>
-    </ion-col>
-  </ion-row>
+    <ion-row>
+      <ion-col width-25>
+        <div>
+          ion-col[width-25]
+        </div>
+      </ion-col>
+      <ion-col width-25 offset-25>
+        <div>
+          ion-col[width-25][offset-25]
+        </div>
+      </ion-col>
+    </ion-row>
 
-  <ion-row>
-    <ion-col>
-      <div>
-        ion-col
-      </div>
-    </ion-col>
-    <ion-col>
-      <div>
-        ion-col<br>#
-      </div>
-    </ion-col>
-    <ion-col>
-      <div>
-        ion-col<br>#<br>#
-      </div>
-    </ion-col>
-    <ion-col>
-      <div>
-        ion-col<br>#<br>#<br>#
-      </div>
-    </ion-col>
-  </ion-row>
+    <ion-row>
+      <ion-col>
+        <div>
+          ion-col
+        </div>
+      </ion-col>
+      <ion-col>
+        <div>
+          ion-col<br>#
+        </div>
+      </ion-col>
+      <ion-col>
+        <div>
+          ion-col<br>#<br>#
+        </div>
+      </ion-col>
+      <ion-col>
+        <div>
+          ion-col<br>#<br>#<br>#
+        </div>
+      </ion-col>
+    </ion-row>
 
-  <ion-row>
-    <ion-col top>
-      <div>
-        ion-col[top]
-      </div>
-    </ion-col>
-    <ion-col center>
-      <div>
-        ion-col[center]
-      </div>
-    </ion-col>
-    <ion-col bottom>
-      <div>
-        ion-col[bottom]
-      </div>
-    </ion-col>
-    <ion-col>
-      <div>
-        ion-col<br>#<br>#
-      </div>
-    </ion-col>
-  </ion-row>
+    <ion-row>
+      <ion-col top>
+        <div>
+          ion-col[top]
+        </div>
+      </ion-col>
+      <ion-col center>
+        <div>
+          ion-col[center]
+        </div>
+      </ion-col>
+      <ion-col bottom>
+        <div>
+          ion-col[bottom]
+        </div>
+      </ion-col>
+      <ion-col>
+        <div>
+          ion-col<br>#<br>#
+        </div>
+      </ion-col>
+    </ion-row>
 
-  <ion-row top>
-    <ion-col>
-      <div>
-        [top] ion-col
-      </div>
-    </ion-col>
-    <ion-col>
-      <div>
-        [top] ion-col
-      </div>
-    </ion-col>
-    <ion-col bottom>
-      <div>
-        [top] ion-col[bottom]
-      </div>
-    </ion-col>
-    <ion-col>
-      <div>
-        ion-col<br>#<br>#
-      </div>
-    </ion-col>
-  </ion-row>
+    <ion-row top>
+      <ion-col>
+        <div>
+          [top] ion-col
+        </div>
+      </ion-col>
+      <ion-col>
+        <div>
+          [top] ion-col
+        </div>
+      </ion-col>
+      <ion-col bottom>
+        <div>
+          [top] ion-col[bottom]
+        </div>
+      </ion-col>
+      <ion-col>
+        <div>
+          ion-col<br>#<br>#
+        </div>
+      </ion-col>
+    </ion-row>
 
-  <ion-row center>
-    <ion-col>
-      <div>
-        [center] ion-col
-      </div>
-    </ion-col>
-    <ion-col>
-      <div>
-        [center] ion-col
-      </div>
-    </ion-col>
-    <ion-col>
-      <div>
-        [center] ion-col
-      </div>
-    </ion-col>
-    <ion-col>
-      <div>
-        ion-col<br>#<br>#
-      </div>
-    </ion-col>
-  </ion-row>
+    <ion-row center>
+      <ion-col>
+        <div>
+          [center] ion-col
+        </div>
+      </ion-col>
+      <ion-col>
+        <div>
+          [center] ion-col
+        </div>
+      </ion-col>
+      <ion-col>
+        <div>
+          [center] ion-col
+        </div>
+      </ion-col>
+      <ion-col>
+        <div>
+          ion-col<br>#<br>#
+        </div>
+      </ion-col>
+    </ion-row>
 
-  <ion-row bottom>
-    <ion-col>
-      <div>
-        [bottom] ion-col
-      </div>
-    </ion-col>
-    <ion-col top>
-      <div>
-        [bottom] ion-col[top]
-      </div>
-    </ion-col>
-    <ion-col>
-      <div>
-        [bottom] ion-col
-      </div>
-    </ion-col>
-    <ion-col>
-      <div>
-        ion-col<br>#<br>#
-      </div>
-    </ion-col>
-  </ion-row>
+    <ion-row bottom>
+      <ion-col>
+        <div>
+          [bottom] ion-col
+        </div>
+      </ion-col>
+      <ion-col top>
+        <div>
+          [bottom] ion-col[top]
+        </div>
+      </ion-col>
+      <ion-col>
+        <div>
+          [bottom] ion-col
+        </div>
+      </ion-col>
+      <ion-col>
+        <div>
+          ion-col<br>#<br>#
+        </div>
+      </ion-col>
+    </ion-row>
 
-  <ion-row responsive-sm>
-    <ion-col>
-      <div>
-        [responsive-sm] ion-col
-      </div>
-    </ion-col>
-    <ion-col>
-      <div>
-        [responsive-sm] ion-col
-      </div>
-    </ion-col>
-    <ion-col>
-      <div>
-        [responsive-sm] ion-col
-      </div>
-    </ion-col>
-    <ion-col>
-      <div>
-        [responsive-sm] ion-col
-      </div>
-    </ion-col>
-  </ion-row>
+    <ion-row responsive-sm>
+      <ion-col>
+        <div>
+          [responsive-sm] ion-col
+        </div>
+      </ion-col>
+      <ion-col>
+        <div>
+          [responsive-sm] ion-col
+        </div>
+      </ion-col>
+      <ion-col>
+        <div>
+          [responsive-sm] ion-col
+        </div>
+      </ion-col>
+      <ion-col>
+        <div>
+          [responsive-sm] ion-col
+        </div>
+      </ion-col>
+    </ion-row>
 
-  <ion-row responsive-md>
-    <ion-col>
-      <div>
-        [responsive-md] ion-col
-      </div>
-    </ion-col>
-    <ion-col>
-      <div>
-        [responsive-md] ion-col
-      </div>
-    </ion-col>
-    <ion-col>
-      <div>
-        [responsive-md] ion-col
-      </div>
-    </ion-col>
-    <ion-col>
-      <div>
-        [responsive-md] ion-col
-      </div>
-    </ion-col>
-  </ion-row>
+    <ion-row responsive-md>
+      <ion-col>
+        <div>
+          [responsive-md] ion-col
+        </div>
+      </ion-col>
+      <ion-col>
+        <div>
+          [responsive-md] ion-col
+        </div>
+      </ion-col>
+      <ion-col>
+        <div>
+          [responsive-md] ion-col
+        </div>
+      </ion-col>
+      <ion-col>
+        <div>
+          [responsive-md] ion-col
+        </div>
+      </ion-col>
+    </ion-row>
 
-  <ion-row responsive-lg>
-    <ion-col width-50 offset-25>
-      <div>
-        [responsive-lg] ion-col[width-50][offset-25]
-      </div>
-    </ion-col>
-    <ion-col width-25>
-      <div>
-        [responsive-lg] ion-col[width-25]
-      </div>
-    </ion-col>
-  </ion-row>
+    <ion-row responsive-lg>
+      <ion-col width-50 offset-25>
+        <div>
+          [responsive-lg] ion-col[width-50][offset-25]
+        </div>
+      </ion-col>
+      <ion-col width-25>
+        <div>
+          [responsive-lg] ion-col[width-25]
+        </div>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
 
 </ion-content>