fix(grid): add ion-grid element which wraps the rows/cols and adds padding

update tests to use new ion-grid element

references #6238

Author: brandyscarney

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>
 

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;