Supporting new properties and removing old ones

rugoncalves · rugoncalves · commit 32f66bd769f1 · 2025-09-09T17:00:50.000+02:00
diff --git a/core/api.txt b/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
diff --git a/core/src/components.d.ts b/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.
          */
diff --git a/core/src/components/col/col.scss b/core/src/components/col/col.scss
@@ -27,3 +27,36 @@
   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)));
+    margin-left: var(--margin-calc);
+}
+
+.rtl :host(
+  [class^="ion-grid-offset-col-"],
+  [class*=" ion-grid-offset-col-"]) {
+    margin-left: 0;
+    margin-right: var(--margin-calc);
+}
+
+$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};}
+}
diff --git a/core/src/components/col/col.tsx b/core/src/components/col/col.tsx
@@ -4,9 +4,7 @@ import { matchBreakpoint } from '@utils/media';
 
 import { getIonTheme } from '../../global/ionic-global';
 
-const win = typeof (window as any) !== 'undefined' ? (window as any) : undefined;
 // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
-const SUPPORTS_VARS = win && !!(win.CSS && win.CSS.supports && win.CSS.supports('--a: 0'));
 const BREAKPOINTS = ['', 'xs', 'sm', 'md', 'lg', 'xl'];
 
 /**
@@ -154,61 +152,40 @@ export class Col implements ComponentInterface {
     return matched;
   }
 
-  private getSizeClass(): string | undefined {
-    const colSize = this.getColumns('size');
+  private getStyleClass(property: string, className: string, acceptsAuto = false): string | undefined {
+    const colPropertyValue = this.getColumns(property);
 
     // If size wasn't set for any breakpoint
     // or if the user set the size without a value
     // it means we need to stick with the default and return
     // e.g. <ion-col size-md>
-    if (!colSize || colSize === '') {
+    if (!colPropertyValue || colPropertyValue === '') {
       return;
     }
 
-    if (colSize === 'auto') {
-      return 'ion-grid-auto';
+    if (acceptsAuto && colPropertyValue === 'auto') {
+      return 'ion-grid-col-auto';
     }
 
-    const colNum = parseInt(colSize);
+    const valueNumber = parseInt(colPropertyValue);
 
-    if(isNaN(colNum)) {
+    if (isNaN(valueNumber)) {
       return;
     }
 
-    return `ion-grid-col-${colSize}`;
+    return `${className}-col-${valueNumber}`;
   }
 
-  private getOrderClass(): string | undefined {
-    const colOrder = this.getColumns('order');
-
-    if (!colOrder || colOrder === '') {
-      return;
-    }
-
-    const colNum = parseInt(colOrder);
-
-    if (isNaN(colNum)) {
-      return;
-    }
-
-    return `ion-grid-order-${colOrder}`;
+  private getSizeClass(): string | undefined {
+    return this.getStyleClass('size', 'ion-grid', true);
   }
 
+  private getOrderClass(): string | undefined {
+    return this.getStyleClass('order', 'ion-grid-order');
+  }
 
   private getOffsetClass(): string | undefined {
-    const colOffset = this.getColumns('offset');
-
-    if (!colOffset || colOffset === '') {
-      return;
-    }
-
-    const colNum = parseInt(colOffset);
-
-    if (isNaN(colNum)) {
-      return;
-    }
-
-    return `ion-grid-offset-col-${colOffset}`;
+    return this.getStyleClass('offset', 'ion-grid-offset');
   }
 
   render() {
diff --git a/packages/angular/src/directives/proxies.ts b/packages/angular/src/directives/proxies.ts
@@ -572,14 +572,14 @@ export declare interface IonChip extends Components.IonChip {}
 
 
 @ProxyCmp({
-  inputs: ['mode', 'offset', 'offsetLg', 'offsetMd', 'offsetSm', 'offsetXl', 'offsetXs', 'pull', 'pullLg', 'pullMd', 'pullSm', 'pullXl', 'pullXs', 'push', 'pushLg', 'pushMd', 'pushSm', 'pushXl', 'pushXs', 'size', 'sizeLg', 'sizeMd', 'sizeSm', 'sizeXl', 'sizeXs', 'theme']
+  inputs: ['mode', 'offset', 'offsetLg', 'offsetMd', 'offsetSm', 'offsetXl', 'offsetXs', 'order', 'orderLg', 'orderMd', 'orderSm', 'orderXl', 'orderXs', 'size', 'sizeLg', 'sizeMd', 'sizeSm', 'sizeXl', 'sizeXs', 'theme']
 })
 @Component({
   selector: 'ion-col',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['mode', 'offset', 'offsetLg', 'offsetMd', 'offsetSm', 'offsetXl', 'offsetXs', 'pull', 'pullLg', 'pullMd', 'pullSm', 'pullXl', 'pullXs', 'push', 'pushLg', 'pushMd', 'pushSm', 'pushXl', 'pushXs', 'size', 'sizeLg', 'sizeMd', 'sizeSm', 'sizeXl', 'sizeXs', 'theme'],
+  inputs: ['mode', 'offset', 'offsetLg', 'offsetMd', 'offsetSm', 'offsetXl', 'offsetXs', 'order', 'orderLg', 'orderMd', 'orderSm', 'orderXl', 'orderXs', 'size', 'sizeLg', 'sizeMd', 'sizeSm', 'sizeXl', 'sizeXs', 'theme'],
 })
 export class IonCol {
   protected el: HTMLIonColElement;
diff --git a/packages/angular/standalone/src/directives/proxies.ts b/packages/angular/standalone/src/directives/proxies.ts
@@ -642,14 +642,14 @@ export declare interface IonChip extends Components.IonChip {}
 
 @ProxyCmp({
   defineCustomElementFn: defineIonCol,
-  inputs: ['mode', 'offset', 'offsetLg', 'offsetMd', 'offsetSm', 'offsetXl', 'offsetXs', 'pull', 'pullLg', 'pullMd', 'pullSm', 'pullXl', 'pullXs', 'push', 'pushLg', 'pushMd', 'pushSm', 'pushXl', 'pushXs', 'size', 'sizeLg', 'sizeMd', 'sizeSm', 'sizeXl', 'sizeXs', 'theme']
+  inputs: ['mode', 'offset', 'offsetLg', 'offsetMd', 'offsetSm', 'offsetXl', 'offsetXs', 'order', 'orderLg', 'orderMd', 'orderSm', 'orderXl', 'orderXs', 'size', 'sizeLg', 'sizeMd', 'sizeSm', 'sizeXl', 'sizeXs', 'theme']
 })
 @Component({
   selector: 'ion-col',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['mode', 'offset', 'offsetLg', 'offsetMd', 'offsetSm', 'offsetXl', 'offsetXs', 'pull', 'pullLg', 'pullMd', 'pullSm', 'pullXl', 'pullXs', 'push', 'pushLg', 'pushMd', 'pushSm', 'pushXl', 'pushXs', 'size', 'sizeLg', 'sizeMd', 'sizeSm', 'sizeXl', 'sizeXs', 'theme'],
+  inputs: ['mode', 'offset', 'offsetLg', 'offsetMd', 'offsetSm', 'offsetXl', 'offsetXs', 'order', 'orderLg', 'orderMd', 'orderSm', 'orderXl', 'orderXs', 'size', 'sizeLg', 'sizeMd', 'sizeSm', 'sizeXl', 'sizeXs', 'theme'],
   standalone: true
 })
 export class IonCol {
diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts
@@ -280,18 +280,12 @@ export const IonCol: StencilVueComponent<JSX.IonCol> = /*@__PURE__*/ defineConta
   'offsetMd',
   'offsetLg',
   'offsetXl',
-  'pull',
-  'pullXs',
-  'pullSm',
-  'pullMd',
-  'pullLg',
-  'pullXl',
-  'push',
-  'pushXs',
-  'pushSm',
-  'pushMd',
-  'pushLg',
-  'pushXl',
+  'order',
+  'orderXs',
+  'orderSm',
+  'orderMd',
+  'orderLg',
+  'orderXl',
   'size',
   'sizeXs',
   'sizeSm',
