feat(grid, row, col): add recipe and tokens#31189
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
github-actions
Bot
added
package: core
| --col-unit-size: calc( | ||
| (100% - (var(--ion-grid-columns, 12) - 1) * var(--ion-grid-gap, 0px)) / var(--ion-grid-columns, 12) | ||
| --internal-col-unit-size: calc( | ||
| (100% - (var(--ion-grid-columns, 12) - 1) * var(--ion-row-gap, 0px)) / var(--ion-grid-columns, 12) |
There was a problem hiding this comment.
I changed --ion-grid-gap to --ion-row-gap since the value is adding the gap on row, not gap. No need to add it to the breaking changes since this variable was introduced in next.
There was a problem hiding this comment.
This was added for Mobile UI so we likely need a follow-up ticket for them to update it if they are using it.
| } | ||
|
|
||
| :host(.ion-grid-col-auto) { | ||
| :host(.col-auto) { |
There was a problem hiding this comment.
No need to add it to the breaking changes since this class was introduced in next.
| $grid-col-number: 12; | ||
|
|
||
| @for $i from 1 through $grid-col-number { | ||
| :host(.ion-grid-col--#{$i}) { | ||
| --ion-grid-col-span: #{$i}; | ||
| } | ||
|
|
||
| :host(.ion-grid-order-col--#{$i}) { | ||
| order: #{$i}; | ||
| } | ||
|
|
||
| :host(.ion-grid-offset-col--#{$i}) { | ||
| --ion-grid-col-margin: #{$i}; | ||
| } |
There was a problem hiding this comment.
Previously, a @for 1 through 12 loop generated a fixed set of per-column classes (ion-grid-col--1…--12, plus order/offset variants), each hardcoding the span/order/offset multiplier. Because the loop ran at Sass compile time, the supported column count was capped at 12 — yet the width math already divided by the runtime --ion-grid-columns, so a grid with more than 12 columns (e.g. --ion-grid-columns: 16 + size="16") produced a class with no matching rule, leaving --internal-col-span unset and invalidating the calc(). col.tsx now writes the span, offset, and order as inline custom properties from the parsed attribute value, so any column count composes with the --ion-grid-columns divisor without a build-time class cap. The generated classes (and $grid-col-number) are no longer needed.
| shadow: true, | ||
| }) | ||
| export class Col implements ComponentInterface { | ||
| private resizeTimeout: ReturnType<typeof setTimeout> | null = null; |
There was a problem hiding this comment.
Added a debounced window-resize handler so the column re-renders when the viewport crosses a responsive breakpoint — Stencil won't re-render on media-query changes on its own, so getColumns()'s matchBreakpoint() result would otherwise go stale. resizeTimeout holds the debounce handle so rapid resize events collapse into a single forceUpdate, and so the pending timer can be cleared in disconnectedCallback. This mirrors the established pattern in other components such as ion-content, which uses the same resizeTimeout + debounced forceUpdate approach on window resize.
| </ion-row> | ||
| </ion-grid> | ||
|
|
||
| <h2 class="ion-padding-start">Offset</h2> |
There was a problem hiding this comment.
These were removed because the same copy exists in the basic test.
| }; | ||
| }; | ||
|
|
||
| columns?: number; |
There was a problem hiding this comment.
Should this be a prop instead to match ion-gallery? I think we should to be consistent. If so, then a new ticket should be created to do the overhaul.
There was a problem hiding this comment.
Yes. Grid needs a complete overhaul.
| @@ -0,0 +1,3 @@ | |||
| export type IonRowRecipe = { | |||
| gap?: string; | |||
There was a problem hiding this comment.
Should this be a prop instead to match ion-gallery? I think we should to be consistent. If so, then a new ticket should be created to do the overhaul.
There was a problem hiding this comment.
Yes. Grid needs a complete overhaul.
|
|
||
| @ProxyCmp({ | ||
| 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'] | ||
| 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'] |
There was a problem hiding this comment.
I think we should convert order and offset to accept an object like how columns does with ion-gallery. This would allow us to set the breakpoints through one value instead. Thoughts? I can create a ticket if we agree.
There was a problem hiding this comment.
Yes. Grid needs a complete overhaul.
There was a problem hiding this comment.
I replaced ion-grid to native grid so we don't have to always update snapshots if ion-grid changed.
| f { | ||
| display: block; | ||
| width: 100%; | ||
| .color-grid { |
There was a problem hiding this comment.
I replaced ion-grid to native grid so we don't have to always update snapshots if ion-grid changed.
| <ion-col size="6"><f class="orange"></f></ion-col> | ||
| </ion-row> | ||
| </ion-grid> | ||
| <div class="color-grid"> |
There was a problem hiding this comment.
I replaced ion-grid to native grid so we don't have to always update snapshots if ion-grid changed.
There was a problem hiding this comment.
I replaced ion-grid to native grid so we don't have to always update snapshots if ion-grid changed.
| translucent variant) is visible over varied colors. Uses native CSS | ||
| grid instead of ion-grid so this page's snapshots don't churn when | ||
| grid/row/col change. */ | ||
| .color-grid { |
There was a problem hiding this comment.
I replaced ion-grid to native grid so we don't have to always update snapshots if ion-grid changed.
3 participants
Issue number: resolves internal
What is the current behavior?
ion-grid,ion-row, andion-coldo not fragment styles based on themes.What is the new behavior?
ion-grid,ion-row, andion-colto Modular Ionic.IonGridRecipe,IonColRecipe, andIonRowRecipe, plus per-theme token defaults in the ios, md, and ionic theme files.--ion-grid-breakpoint-*/--ion-col-breakpoint-*naming, and adds--ion-row-gapfor row spacing.ion-colspans adjustable:size,offset, andorderare written as inline custom properties (--internal-col-span,--internal-col-margin,order) so any--ion-grid-columnsvalue resolves correctly, removing the build-time 12-column cap.col-size,col-auto, andcol-offset, and addsIonColProperty/IonColStyletypes.Does this introduce a breaking change?
This PR introduces breaking changes to how
ion-grid,ion-row,ion-colare styled.Migration Path:
--ion-grid-padding-{bp}IonGrid.breakpoint.{bp}.padding.{top|end|bottom|start}--ion-grid-breakpoint-{bp}-padding-{top|end|bottom|start}--ion-grid-width-{bp}IonGrid.breakpoint.{bp}.width--ion-grid-breakpoint-{bp}-widthcolnamespace and now per-side:--ion-grid-column-padding-{bp}IonCol.breakpoint.{bp}.padding.{top|end|bottom|start}--ion-col-breakpoint-{bp}-padding-{top|end|bottom|start}Other information
Previews