feat(grid, row, col): add recipe and tokens (#31189)

Issue number: resolves internal

Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>

Author: thetaPC

BREAKING.md

@@ -19,6 +19,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)
+  - [Col](#version-9x-col)
   - [Content](#version-9x-content)
   - [Datetime](#version-9x-datetime)
   - [Grid](#version-9x-grid)
@@ -27,6 +28,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver
   - [Item Divider](#version-9x-item-divider)
   - [Menu Toggle](#version-9x-menu-toggle)
   - [Radio Group](#version-9x-radio-group)
+  - [Row](#version-9x-row)
   - [Spinner](#version-9x-spinner)
   - [Text](#version-9x-text)
   - [Textarea](#version-9x-textarea)
@@ -87,6 +89,25 @@ This is a comprehensive list of the breaking changes introduced in the major ver
 - Specific theme classes (e.g., `ion-chip.md`) are no longer supported. Style modifications based on the active theme must be implemented using theme tokens rather than direct class targeting.
 - 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 `IonChip.shape.round.border.radius` to specify a different value for global styles and `--ion-chip-shape-round-border-radius` for component-specific styles.
 
+<h4 id="version-9x-col">Col</h4>
+
+The following breaking changes apply to `ion-col`:
+
+1. `--ion-grid-column-padding-*` CSS variables have been replaced with per-side, per-breakpoint tokens in the `col` namespace. <sup>[1](#version-9x-col-padding-variables)</sup>
+2. Theme classes (`ion-col.md`, `ion-col.ios`) are no longer supported. <sup>[2](#version-9x-col-theme-classes)</sup>
+
+<h5 id="version-9x-col-padding-variables">Padding variables</h5>
+
+Column padding was a single value per breakpoint and is now set per-side, and the variables have moved from the `grid` namespace to the `col` namespace. Use the new token structure for global styles, or the corresponding CSS variable for component-specific overrides:
+
+| Old (8.x) | New token (global) | New CSS variable (component-specific) |
+|---|---|---|
+| `--ion-grid-column-padding-{bp}` | `IonCol.breakpoint.{bp}.padding.{top\|end\|bottom\|start}` | `--ion-col-breakpoint-{bp}-padding-{top\|end\|bottom\|start}` |
+
+<h5 id="version-9x-col-theme-classes">Theme classes</h5>
+
+Remove any instances that target the theme classes: `ion-col.md`, `ion-col.ios`.
+
 <h4 id="version-9x-content">Content</h4>
 
 The following breaking changes apply to `ion-content`:
@@ -141,9 +162,32 @@ Remove any instances that target the theme classes: `ion-content.md`, `ion-conte
 
 <h4 id="version-9x-grid">Grid</h4>
 
-- The properties `pull` and `push` have been deprecated and no longer work. A similar look can be achieved with the newly added property `order`.
+The following breaking changes apply to `ion-grid`:
+
+1. `--ion-grid-padding-*` CSS variables have been replaced with per-side, per-breakpoint tokens. <sup>[1](#version-9x-grid-padding-variables)</sup>
+2. `--ion-grid-width-*` CSS variables for the fixed grid have been replaced with per-breakpoint tokens. <sup>[2](#version-9x-grid-fixed-width-variables)</sup>
+3. The `push` and `pull` properties have been deprecated. <sup>[3](#version-9x-grid-deprecated-push-and-pull-properties)</sup>
+4. Theme classes (`ion-grid.md`, `ion-grid.ios`) are no longer supported. <sup>[4](#version-9x-grid-theme-classes)</sup>
+
+<h5 id="version-9x-grid-padding-variables">Padding variables</h5>
 
-<h5>Example 1: Swap two columns</h5>
+Grid padding was a single value per breakpoint and is now set per-side. Use the new token structure for global styles, or the corresponding CSS variable for component-specific overrides:
+
+| Old (8.x) | New token (global) | New CSS variable (component-specific) |
+|---|---|---|
+| `--ion-grid-padding-{bp}` | `IonGrid.breakpoint.{bp}.padding.{top\|end\|bottom\|start}` | `--ion-grid-breakpoint-{bp}-padding-{top\|end\|bottom\|start}` |
+
+<h5 id="version-9x-grid-fixed-width-variables">Fixed width variables</h5>
+
+| Old (8.x) | New token (global) | New CSS variable (component-specific) |
+|---|---|---|
+| `--ion-grid-width-{bp}` | `IonGrid.breakpoint.{bp}.width` | `--ion-grid-breakpoint-{bp}-width` |
+
+<h5 id="version-9x-grid-deprecated-push-and-pull-properties">Deprecated <code>push</code> and <code>pull</code> properties</h5>
+
+The `push` and `pull` properties have been disabled. They now log a deprecation warning and no longer affect layout. Use the `order` property to achieve a similar result.
+
+**Example 1: Swap two columns**
 
 **Version up to 8.x**
 
@@ -169,7 +213,7 @@ Remove any instances that target the theme classes: `ion-content.md`, `ion-conte
 </ion-grid>
 ```
 
-<h5>Example 2: Reorder columns with specific sizes</h5>
+**Example 2: Reorder columns with specific sizes**
 
 To reorder two columns where column 1 has `size="9" push="3"` and column 2 has `size="3" pull="9"`:
 
@@ -195,7 +239,7 @@ To reorder two columns where column 1 has `size="9" push="3"` and column 2 has `
 </ion-grid>
 ```
 
-<h5>Example 3: Push</h5>
+**Example 3: Push**
 
 ```html
 <ion-grid>
@@ -225,7 +269,7 @@ To reorder two columns where column 1 has `size="9" push="3"` and column 2 has `
 </ion-grid>
 ```
 
-<h5>Example 4: Push and Pull</h5>
+**Example 4: Push and Pull**
 
 ```html
 <ion-grid>
@@ -255,6 +299,10 @@ To reorder two columns where column 1 has `size="9" push="3"` and column 2 has `
 </ion-grid>
 ```
 
+<h5 id="version-9x-grid-theme-classes">Theme classes</h5>
+
+Remove any instances that target the theme classes: `ion-grid.md`, `ion-grid.ios`.
+
 <h4 id="version-9x-image">Image</h4>
 
 The following breaking changes apply to `ion-img`:
@@ -304,6 +352,16 @@ If you were targeting the internals of `ion-radio-group` in your CSS, you will n
 
 Additionally, the `radio-group-wrapper` div element has been removed, causing slotted elements to be direct children of the `ion-radio-group`.
 
+<h4 id="version-9x-row">Row</h4>
+
+The following breaking changes apply to `ion-row`:
+
+1. Theme classes (`ion-row.md`, `ion-row.ios`) are no longer supported. <sup>[1](#version-9x-row-theme-classes)</sup>
+
+<h5 id="version-9x-row-theme-classes">Theme classes</h5>
+
+Remove any instances that target the theme classes: `ion-row.md`, `ion-row.ios`.
+
 <h4 id="version-9x-spinner">Spinner</h4>
 
 - Component CSS variables have been removed. The component now utilizes the centralized Ionic Theming system. Global updates should be managed via the theme tokens file, while component-specific overrides are handled through localized CSS variables.

core/api.txt

@@ -781,15 +781,26 @@ ion-col,prop,sizeMd,string | undefined,undefined,false,false
 ion-col,prop,sizeSm,string | undefined,undefined,false,false
 ion-col,prop,sizeXl,string | undefined,undefined,false,false
 ion-col,prop,sizeXs,string | undefined,undefined,false,false
-ion-col,prop,theme,"ios" | "md" | "ionic",undefined,false,false
-ion-col,css-prop,--col-unit-size
-ion-col,css-prop,--ion-grid-column-padding
-ion-col,css-prop,--ion-grid-column-padding-lg
-ion-col,css-prop,--ion-grid-column-padding-md
-ion-col,css-prop,--ion-grid-column-padding-sm
-ion-col,css-prop,--ion-grid-column-padding-xl
-ion-col,css-prop,--ion-grid-column-padding-xs
-ion-col,css-prop,--ion-grid-columns
+ion-col,css-prop,--ion-col-breakpoint-lg-padding-bottom
+ion-col,css-prop,--ion-col-breakpoint-lg-padding-end
+ion-col,css-prop,--ion-col-breakpoint-lg-padding-start
+ion-col,css-prop,--ion-col-breakpoint-lg-padding-top
+ion-col,css-prop,--ion-col-breakpoint-md-padding-bottom
+ion-col,css-prop,--ion-col-breakpoint-md-padding-end
+ion-col,css-prop,--ion-col-breakpoint-md-padding-start
+ion-col,css-prop,--ion-col-breakpoint-md-padding-top
+ion-col,css-prop,--ion-col-breakpoint-sm-padding-bottom
+ion-col,css-prop,--ion-col-breakpoint-sm-padding-end
+ion-col,css-prop,--ion-col-breakpoint-sm-padding-start
+ion-col,css-prop,--ion-col-breakpoint-sm-padding-top
+ion-col,css-prop,--ion-col-breakpoint-xl-padding-bottom
+ion-col,css-prop,--ion-col-breakpoint-xl-padding-end
+ion-col,css-prop,--ion-col-breakpoint-xl-padding-start
+ion-col,css-prop,--ion-col-breakpoint-xl-padding-top
+ion-col,css-prop,--ion-col-breakpoint-xs-padding-bottom
+ion-col,css-prop,--ion-col-breakpoint-xs-padding-end
+ion-col,css-prop,--ion-col-breakpoint-xs-padding-start
+ion-col,css-prop,--ion-col-breakpoint-xs-padding-top
 
 ion-content,shadow
 ion-content,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
@@ -1043,19 +1054,32 @@ ion-gallery,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-grid,shadow
 ion-grid,prop,fixed,boolean,false,false,false
 ion-grid,prop,mode,"ios" | "md",undefined,false,false
-ion-grid,prop,theme,"ios" | "md" | "ionic",undefined,false,false
-ion-grid,css-prop,--ion-grid-padding
-ion-grid,css-prop,--ion-grid-padding-lg
-ion-grid,css-prop,--ion-grid-padding-md
-ion-grid,css-prop,--ion-grid-padding-sm
-ion-grid,css-prop,--ion-grid-padding-xl
-ion-grid,css-prop,--ion-grid-padding-xs
-ion-grid,css-prop,--ion-grid-width
-ion-grid,css-prop,--ion-grid-width-lg
-ion-grid,css-prop,--ion-grid-width-md
-ion-grid,css-prop,--ion-grid-width-sm
-ion-grid,css-prop,--ion-grid-width-xl
-ion-grid,css-prop,--ion-grid-width-xs
+ion-grid,css-prop,--ion-grid-breakpoint-lg-padding-bottom
+ion-grid,css-prop,--ion-grid-breakpoint-lg-padding-end
+ion-grid,css-prop,--ion-grid-breakpoint-lg-padding-start
+ion-grid,css-prop,--ion-grid-breakpoint-lg-padding-top
+ion-grid,css-prop,--ion-grid-breakpoint-lg-width
+ion-grid,css-prop,--ion-grid-breakpoint-md-padding-bottom
+ion-grid,css-prop,--ion-grid-breakpoint-md-padding-end
+ion-grid,css-prop,--ion-grid-breakpoint-md-padding-start
+ion-grid,css-prop,--ion-grid-breakpoint-md-padding-top
+ion-grid,css-prop,--ion-grid-breakpoint-md-width
+ion-grid,css-prop,--ion-grid-breakpoint-sm-padding-bottom
+ion-grid,css-prop,--ion-grid-breakpoint-sm-padding-end
+ion-grid,css-prop,--ion-grid-breakpoint-sm-padding-start
+ion-grid,css-prop,--ion-grid-breakpoint-sm-padding-top
+ion-grid,css-prop,--ion-grid-breakpoint-sm-width
+ion-grid,css-prop,--ion-grid-breakpoint-xl-padding-bottom
+ion-grid,css-prop,--ion-grid-breakpoint-xl-padding-end
+ion-grid,css-prop,--ion-grid-breakpoint-xl-padding-start
+ion-grid,css-prop,--ion-grid-breakpoint-xl-padding-top
+ion-grid,css-prop,--ion-grid-breakpoint-xl-width
+ion-grid,css-prop,--ion-grid-breakpoint-xs-padding-bottom
+ion-grid,css-prop,--ion-grid-breakpoint-xs-padding-end
+ion-grid,css-prop,--ion-grid-breakpoint-xs-padding-start
+ion-grid,css-prop,--ion-grid-breakpoint-xs-padding-top
+ion-grid,css-prop,--ion-grid-breakpoint-xs-width
+ion-grid,css-prop,--ion-grid-columns
 
 ion-header,none
 ion-header,prop,collapse,"condense" | "fade" | undefined,undefined,false,false
@@ -2255,8 +2279,7 @@ ion-router-outlet,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 
 ion-row,shadow
 ion-row,prop,mode,"ios" | "md",undefined,false,false
-ion-row,prop,theme,"ios" | "md" | "ionic",undefined,false,false
-ion-row,css-prop,--ion-grid-gap
+ion-row,css-prop,--ion-row-gap
 
 ion-searchbar,scoped
 ion-searchbar,prop,animated,boolean,false,false,false

core/src/components.d.ts

@@ -1043,10 +1043,6 @@ export namespace Components {
           * The size of the column for xs screens, 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.
          */
         "sizeXs"?: string;
-        /**
-          * The theme determines the visual appearance of the component.
-         */
-        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonContent {
         /**
@@ -1512,10 +1508,6 @@ export namespace Components {
           * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
-        /**
-          * The theme determines the visual appearance of the component.
-         */
-        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonHeader {
         /**
@@ -3463,7 +3455,7 @@ export namespace Components {
           * The mode determines the platform behaviors of the component.
           * @default getIonMode(this)
          */
-        "mode": "ios" | "md";
+        "mode": "md" | "ios";
         "setRouteId": (id: string, params: ComponentProps | undefined, direction: RouterDirection, animation?: AnimationBuilder) => Promise<RouteWrite>;
         "swipeHandler"?: SwipeGestureHandler;
         /**
@@ -3476,10 +3468,6 @@ export namespace Components {
           * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
-        /**
-          * The theme determines the visual appearance of the component.
-         */
-        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonSearchbar {
         /**
@@ -7062,10 +7050,6 @@ declare namespace LocalJSX {
           * The size of the column for xs screens, 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.
          */
         "sizeXs"?: string;
-        /**
-          * The theme determines the visual appearance of the component.
-         */
-        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonContent {
         /**
@@ -7520,10 +7504,6 @@ declare namespace LocalJSX {
           * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
-        /**
-          * The theme determines the visual appearance of the component.
-         */
-        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonHeader {
         /**
@@ -9511,7 +9491,7 @@ declare namespace LocalJSX {
           * The mode determines the platform behaviors of the component.
           * @default getIonMode(this)
          */
-        "mode"?: "ios" | "md";
+        "mode"?: "md" | "ios";
         "onIonNavDidChange"?: (event: IonRouterOutletCustomEvent<void>) => void;
         "onIonNavWillChange"?: (event: IonRouterOutletCustomEvent<void>) => void;
         "onIonNavWillLoad"?: (event: IonRouterOutletCustomEvent<void>) => void;
@@ -9526,10 +9506,6 @@ declare namespace LocalJSX {
           * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
-        /**
-          * The theme determines the visual appearance of the component.
-         */
-        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonSearchbar {
         /**
@@ -11229,7 +11205,7 @@ declare namespace LocalJSX {
         "target": string | undefined;
     }
     interface IonRouterOutletAttributes {
-        "mode": "ios" | "md";
+        "mode": "md" | "ios";
         "animated": boolean;
     }
     interface IonSearchbarAttributes {

core/src/components/action-sheet/test/translucent/action-sheet.e2e.ts-snapshots/action-sheet-translucent-ios-ltr-Mobile-Chrome-linux.png

@@ -14,10 +14,16 @@
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
 
     <style>
-      f {
-        display: block;
-        width: 100%;
+      .color-grid {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+      }
+
+      .color-block {
         height: 150px;
+
+        border: 5px solid transparent;
+        background-clip: padding-box;
       }
 
       .red {
@@ -77,19 +83,17 @@
         <button class="expand" id="scrollWithoutCancel" onclick="presentScrollNoCancel()">Scroll Without Cancel</button>
         <button class="expand" id="cancelOnly" onclick="presentCancelOnly()">Cancel Only</button>
 
-        <ion-grid>
-          <ion-row>
-            <ion-col size="4"><f class="red"></f></ion-col>
-            <ion-col size="4"><f class="green"></f></ion-col>
-            <ion-col size="4"><f class="blue"></f></ion-col>
-            <ion-col size="4"><f class="yellow"></f></ion-col>
-            <ion-col size="4"><f class="pink"></f></ion-col>
-            <ion-col size="4"><f class="purple"></f></ion-col>
-            <ion-col size="4"><f class="black"></f></ion-col>
-            <ion-col size="4"><f class="fuchsia"></f></ion-col>
-            <ion-col size="4"><f class="orange"></f></ion-col>
-          </ion-row>
-        </ion-grid>
+        <div class="color-grid">
+          <div class="color-block red"></div>
+          <div class="color-block green"></div>
+          <div class="color-block blue"></div>
+          <div class="color-block yellow"></div>
+          <div class="color-block pink"></div>
+          <div class="color-block purple"></div>
+          <div class="color-block black"></div>
+          <div class="color-block fuchsia"></div>
+          <div class="color-block orange"></div>
+        </div>
       </ion-content>
       <ion-action-sheet-controller></ion-action-sheet-controller>
     </ion-app>

core/src/components/action-sheet/test/translucent/action-sheet.e2e.ts-snapshots/action-sheet-translucent-ios-ltr-Mobile-Firefox-linux.png

@@ -0,0 +1,22 @@
+import type { IonPadding } from '../../themes/themes.interfaces';
+import { ION_GRID_BREAKPOINTS } from '../grid/grid.interface';
+
+export type IonColRecipe = {
+  breakpoint?: {
+    [K in IonColBreakpoint]?: {
+      padding?: IonPadding;
+    };
+  };
+};
+
+// TODO(FW-7285): Replace with global breakpoints
+export const ION_COL_BREAKPOINTS = ION_GRID_BREAKPOINTS;
+export type IonColBreakpoint = (typeof ION_COL_BREAKPOINTS)[number];
+
+export type IonColProperty = 'size' | 'order' | 'offset';
+
+export type IonColStyle = {
+  '--internal-col-margin'?: string;
+  '--internal-col-span'?: string;
+  order?: string;
+};