feat(grid): modernizing component (#30658)

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
The existing grid component (`ion-grid`, `ion-row`, and `ion-col`) in
Ionic was developed several years ago and has not received significant
updates since then. As a result, it does not leverage modern CSS
features. For example, the gutter (spacing) between columns is
implemented using the border property, which is an outdated technique.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- `--ion-grid-gap`: this new CSS variable, will indicate the gap size in
the grid. Defaults to `0px` - the current value.
- `ion-col`: has a new way to calculate the width of the column.
Additionally a new property `order` (and responsive variants) was added,
and will control the order of the column.
- `ion-row`: uses the newly introduced custom property `--ion-grid-gap`.
This property will indicate the gap size in the grid.

## Does this introduce a breaking change?
- [x] Yes
- [ ] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->
The properties `pull` and `push` from `ion-col`, have been removed. The
functionality achieved with them, is now achieved with the new property
`order` and the existing `size`. More information and migration examples
can be read in `BREAKING.md` file.

## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

---------

Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>
Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Shane <shane@shanessite.net>
This commit is contained in:
rug
2025-09-17 11:10:54 +02:00
committed by GitHub
parent 9f546ede3d
commit 3cc0353d6b
45 changed files with 498 additions and 85 deletions

View File

@ -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', 'pull', 'pullLg', 'pullMd', 'pullSm', 'pullXl', 'pullXs', 'push', 'pushLg', 'pushMd', 'pushSm', 'pushXl', 'pushXs', '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', 'pull', 'pullLg', 'pullMd', 'pullSm', 'pullXl', 'pullXs', 'push', 'pushLg', 'pushMd', 'pushSm', 'pushXl', 'pushXs', 'size', 'sizeLg', 'sizeMd', 'sizeSm', 'sizeXl', 'sizeXs', 'theme'],
standalone: true
})
export class IonCol {