feat(col): modernizing Grid component

BREAKING.md

@@ -18,6 +18,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver
   - [Button](#version-9x-button)
   - [Card](#version-9x-card)
   - [Chip](#version-9x-chip)
+  - [Grid](#version-9x-grid)
 
 <h2 id="version-9x-components">Components</h2>
 
@@ -32,3 +33,51 @@ This is a comprehensive list of the breaking changes introduced in the major ver
 <h4 id="version-9x-chip">Chip</h4>
 
 - The `border-radius` of the `ios` and `md` chip now defaults to `10px` and `8px`, respectively, instead of `16px` in accordance with the iOS and Material Design 3 guidelines. To revert to the previous appearance, set the `shape` to `"round"`, or override the `--border-radius` CSS variable to specify a different value.
+
+<h4 id="version-9x-grid">Grid</h4>
+- The properties `pull` and `push`, have been removed. The similar look can be achieved with the newly added property `order`.
+
+<h5>Example 1: Swap two columns</h5>
+
+**Version up to 8.x**
+```html
+<ion-grid>
+  <ion-row>
+    <ion-col push="4">1</ion-col>
+    <ion-col pull="4">2</ion-col>
+    <ion-col>3</ion-col>
+  </ion-row>
+</ion-grid>
+```
+**Version 9.x+**
+```html
+<ion-grid>
+  <ion-row>
+    <ion-col order="2">1</ion-col>
+    <ion-col order="1">2</ion-col>
+    <ion-col order="3">3</ion-col>
+  </ion-row>
+</ion-grid>
+```
+
+<h5>Example 2: Reorder columns with specific sizes</h5>
+To reorder two columns where column 1 has `size="9" push="3"` and column 2 has `size="3" pull="9"`:
+
+**Version up to 8.x**
+```html
+<ion-grid>
+  <ion-row>
+    <ion-col push="3">1</ion-col>
+    <ion-col pull="9">2</ion-col>
+  </ion-row>
+</ion-grid>
+```
+**Version 9.x+**
+```html
+<ion-grid>
+  <ion-row>
+    <ion-col order="2">1</ion-col>
+    <ion-col size="3" order="1">2</ion-col>
+  </ion-row>
+</ion-grid>
+```

core/api.txt

@@ -622,18 +622,12 @@ ion-col,prop,offsetMd,string | undefined,undefined,false,false
 ion-col,prop,offsetSm,string | undefined,undefined,false,false
 ion-col,prop,offsetXl,string | undefined,undefined,false,false
 ion-col,prop,offsetXs,string | undefined,undefined,false,false
-ion-col,prop,pull,string | undefined,undefined,false,false
-ion-col,prop,pullLg,string | undefined,undefined,false,false
-ion-col,prop,pullMd,string | undefined,undefined,false,false
-ion-col,prop,pullSm,string | undefined,undefined,false,false
-ion-col,prop,pullXl,string | undefined,undefined,false,false
-ion-col,prop,pullXs,string | undefined,undefined,false,false
-ion-col,prop,push,string | undefined,undefined,false,false
-ion-col,prop,pushLg,string | undefined,undefined,false,false
-ion-col,prop,pushMd,string | undefined,undefined,false,false
-ion-col,prop,pushSm,string | undefined,undefined,false,false
-ion-col,prop,pushXl,string | undefined,undefined,false,false
-ion-col,prop,pushXs,string | undefined,undefined,false,false
+ion-col,prop,order,string | undefined,undefined,false,false
+ion-col,prop,orderLg,string | undefined,undefined,false,false
+ion-col,prop,orderMd,string | undefined,undefined,false,false
+ion-col,prop,orderSm,string | undefined,undefined,false,false
+ion-col,prop,orderXl,string | undefined,undefined,false,false
+ion-col,prop,orderXs,string | undefined,undefined,false,false
 ion-col,prop,size,string | undefined,undefined,false,false
 ion-col,prop,sizeLg,string | undefined,undefined,false,false
 ion-col,prop,sizeMd,string | undefined,undefined,false,false

core/src/components.d.ts

@@ -928,53 +928,29 @@ export namespace Components {
          */
         "offsetXs"?: string;
         /**
-          * The amount to pull the column, in terms of how many columns it should shift to the start of the total available.
+          * The order of the column, in terms of where the column should position itself in the columns renderer. If no value is passed, the column order implicit value will be the order in the html structure.
          */
-        "pull"?: string;
+        "order"?: string;
         /**
-          * The amount to pull the column for lg screens, in terms of how many columns it should shift to the start of the total available.
+          * The order of the column for lg screens, in terms of where the column should position itself in the columns renderer. If no value is passed, the column order implicit value will be the order in the html structure.
          */
-        "pullLg"?: string;
+        "orderLg"?: string;
         /**
-          * The amount to pull the column for md screens, in terms of how many columns it should shift to the start of the total available.
+          * The order of the column for md screens, in terms of where the column should position itself in the columns renderer. If no value is passed, the column order implicit value will be the order in the html structure.
          */
-        "pullMd"?: string;
+        "orderMd"?: string;
         /**
-          * The amount to pull the column for sm screens, in terms of how many columns it should shift to the start of the total available.
+          * The order of the column for sm screens, in terms of where the column should position itself in the columns renderer. If no value is passed, the column order implicit value will be the order in the html structure.
          */
-        "pullSm"?: string;
+        "orderSm"?: string;
         /**
-          * The amount to pull the column for xl screens, in terms of how many columns it should shift to the start of the total available.
+          * The order of the column for xl screens, in terms of where the column should position itself in the columns renderer. If no value is passed, the column order implicit value will be the order in the html structure.
          */
-        "pullXl"?: string;
+        "orderXl"?: string;
         /**
-          * The amount to pull the column for xs screens, in terms of how many columns it should shift to the start of the total available.
+          * The order of the column for xs screens, in terms of where the column should position itself in the columns renderer. If no value is passed, the column order implicit value will be the order in the html structure.
          */
-        "pullXs"?: string;
-        /**
-          * The amount to push the column, in terms of how many columns it should shift to the end of the total available.
-         */
-        "push"?: string;
-        /**
-          * The amount to push the column for lg screens, in terms of how many columns it should shift to the end of the total available.
-         */
-        "pushLg"?: string;
-        /**
-          * The amount to push the column for md screens, in terms of how many columns it should shift to the end of the total available.
-         */
-        "pushMd"?: string;
-        /**
-          * The amount to push the column for sm screens, in terms of how many columns it should shift to the end of the total available.
-         */
-        "pushSm"?: string;
-        /**
-          * The amount to push the column for xl screens, in terms of how many columns it should shift to the end of the total available.
-         */
-        "pushXl"?: string;
-        /**
-          * The amount to push the column for xs screens, in terms of how many columns it should shift to the end of the total available.
-         */
-        "pushXs"?: string;
+        "orderXs"?: string;
         /**
           * The size of the column, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content.
          */
@@ -6862,53 +6838,29 @@ declare namespace LocalJSX {
          */
         "offsetXs"?: string;
         /**
-          * The amount to pull the column, in terms of how many columns it should shift to the start of the total available.
-         */
-        "pull"?: string;
-        /**
-          * The amount to pull the column for lg screens, in terms of how many columns it should shift to the start of the total available.
-         */
-        "pullLg"?: string;
-        /**
-          * The amount to pull the column for md screens, in terms of how many columns it should shift to the start of the total available.
-         */
-        "pullMd"?: string;
-        /**
-          * The amount to pull the column for sm screens, in terms of how many columns it should shift to the start of the total available.
-         */
-        "pullSm"?: string;
-        /**
-          * The amount to pull the column for xl screens, in terms of how many columns it should shift to the start of the total available.
-         */
-        "pullXl"?: string;
-        /**
-          * The amount to pull the column for xs screens, in terms of how many columns it should shift to the start of the total available.
-         */
-        "pullXs"?: string;
-        /**
-          * The amount to push the column, in terms of how many columns it should shift to the end of the total available.
+          * The order of the column, in terms of where the column should position itself in the columns renderer. If no value is passed, the column order implicit value will be the order in the html structure.
          */
-        "push"?: string;
+        "order"?: string;
         /**
-          * The amount to push the column for lg screens, in terms of how many columns it should shift to the end of the total available.
+          * The order of the column for lg screens, in terms of where the column should position itself in the columns renderer. If no value is passed, the column order implicit value will be the order in the html structure.
          */
-        "pushLg"?: string;
+        "orderLg"?: string;
         /**
-          * The amount to push the column for md screens, in terms of how many columns it should shift to the end of the total available.
+          * The order of the column for md screens, in terms of where the column should position itself in the columns renderer. If no value is passed, the column order implicit value will be the order in the html structure.
          */
-        "pushMd"?: string;
+        "orderMd"?: string;
         /**
-          * The amount to push the column for sm screens, in terms of how many columns it should shift to the end of the total available.
+          * The order of the column for sm screens, in terms of where the column should position itself in the columns renderer. If no value is passed, the column order implicit value will be the order in the html structure.
          */
-        "pushSm"?: string;
+        "orderSm"?: string;
         /**
-          * The amount to push the column for xl screens, in terms of how many columns it should shift to the end of the total available.
+          * The order of the column for xl screens, in terms of where the column should position itself in the columns renderer. If no value is passed, the column order implicit value will be the order in the html structure.
          */
-        "pushXl"?: string;
+        "orderXl"?: string;
         /**
-          * The amount to push the column for xs screens, in terms of how many columns it should shift to the end of the total available.
+          * The order of the column for xs screens, in terms of where the column should position itself in the columns renderer. If no value is passed, the column order implicit value will be the order in the html structure.
          */
-        "pushXs"?: string;
+        "orderXs"?: string;
         /**
           * The size of the column, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content.
          */

core/src/components/col/col.scss

@@ -4,6 +4,11 @@
 // --------------------------------------------------
 
 :host {
+  /**
+   * @prop --col-unit-size: The size of each Column unit.
+   */
+  --col-unit-size: calc((100% - (var(--ion-grid-columns, 12) - 1) * var(--ion-grid-gap)) / var(--ion-grid-columns, 12));
+
   /**
    * @prop --ion-grid-columns: The number of total Columns in the Grid
    * @prop --ion-grid-column-padding: Padding for the Column
@@ -27,3 +32,30 @@
   max-width: 100%;
   min-height: 1px; // Prevent columns from collapsing when empty
 }
+
+:host(.ion-grid-col-auto){
+  flex: 0 0 auto;
+}
+
+:host(
+  [class^="ion-grid-col-"], 
+  [class*=" ion-grid-col-"]) {
+    flex: 0 0
+      calc(var(--ion-grid-col-span) * var(--col-unit-size) + 
+      (var(--ion-grid-col-span) - 1) * var(--ion-grid-gap));
+}
+
+:host(
+  [class^="ion-grid-offset-col-"],
+  [class*=" ion-grid-offset-col-"]) {
+    --margin-calc: calc(var(--col-unit-size) * var(--ion-grid-col-margin) + (var(--ion-grid-gap) * var(--ion-grid-col-margin)));
+
+    @include margin-horizontal(var(--margin-calc), 0);
+}
+
+$max: 12;
+@for $i from 1 through $max {
+  .ion-grid-col-#{$i} { --ion-grid-col-span: #{$i}; }
+  .ion-grid-order-col-#{$i} { order: #{$i}; }
+  .ion-grid-offset-col-#{$i} { --ion-grid-col-margin: #{$i};}
+}