Repository navigation
chore(git): merge FW-7285 into ionic-modular - #31571
Merged
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Adds the `xxl` breakpoint to `ion-grid` and `ion-col`. --------- Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Adds a shared breakpoints utility that resolves the screen breakpoints from config, validating each value and falling back to the default per key. The `xs` screen breakpoint defaults to `0` and cannot be changed. --------- Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Issue number: internal
---------
## What is the current behavior?
The previous PR in this stack added the `screenBreakpoints` config
option and the `@utils/breakpoints` helpers, but nothing consumes them
yet.
`ion-grid` gets its responsive padding and fixed widths purely from
`@media` queries, with the thresholds compiled into the CSS. `ion-col`
only expresses per-breakpoint values through breakpoint-suffixed
properties (`size-xs` through `size-xl`, plus the `order-*` and
`offset-*` equivalents). Neither reads the configured breakpoints, and
neither can target `xxl`.
`ion-grid` also declared its own `ION_GRID_BREAKPOINTS` /
`IonGridBreakpoint` (carrying a `TODO(FW-7285)`) rather than using the
shared type.
## What is the new behavior?
- Grid and column padding and fixed widths now follow the
`screenBreakpoints` config. They change at the configured widths rather
than at thresholds fixed when the framework was built, so moving a
breakpoint moves the layout with it.
- The default fixed widths assume the default thresholds. Lowering a
threshold without lowering its width leaves the grid wider than the
screen, where `max-width: 100%` clamps it and it is no longer fixed. Set
the matching `--ion-grid-breakpoint-*-width` variables alongside the
config.
- `ion-col` accepts an object of breakpoint values for `size`, `order`
and `offset`: `col.size = { xs: 12, md: 6 }`. This is resolved against
the configured breakpoints. `xxl` is added to this object. An empty
string or `null` at a breakpoint resets that column to the default flex
layout.
- All suffixed properties are **deprecated**, but not removed. They
still work and log a deprecation warning. If both forms are set for the
same property, the object form wins and the suffixed ones are ignored
with a warning. They will be removed in a future major release.
- `ION_GRID_BREAKPOINTS` / `IonGridBreakpoint` and `ION_COL_BREAKPOINTS`
/ `IonColBreakpoint` are replaced by the shared `ScreenBreakpoint`.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
The `size`, `order`, and `offset` prop types have been widened from
`string | undefined` to `BreakpointMap<string | number | null> | number
| string | undefined`. The suffixed properties continue to work as
before.
`BREAKING.md` has been updated under 10.x with migration guidance for
these deprecations. The `push`/`pull` entry has also been moved from the
Grid section to Col, where the properties are defined.
## Other information
[Preview](https://ionic-framework-git-fw-7285-3-grid-col-ionic1.vercel.app/src/components/grid/test/breakpoints/)
---------
Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
The gallery now uses the shared screen breakpoints and respects the `screenBreakpoints` config. Breakpoints are still matched against the gallery's own width rather than the width of the screen, which is now noted in the properties. --------- Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Issue number: internal --------- ## What is the current behavior? The `when` property accepts a CSS media query, a boolean, or one of the shortcut expressions `"xs"` through `"xl"` and `"never"`. The shortcuts map to fixed widths that cannot be changed. The default value is `'(min-width: 992px)'`. ## What is the new behavior? - The shortcuts resolve through the global screen breakpoints, so changing a breakpoint with the `screenBreakpoints` config also changes the width at which the split pane appears. - `"xxl"` is now a supported shortcut. - The default value is now the `"lg"` shortcut. It resolves to the same `992px` unless `lg` is configured otherwise. - Media queries, booleans and `"never"` behave exactly as before. ## Does this introduce a breaking change? - [x] Yes - [ ] No The default value of `when` changed from `'(min-width: 992px)'` to `'lg'`. The default behavior is unchanged, but code that reads or compares `when` against the old literal needs updating. ## Other information [Preview](https://ionic-framework-git-fw-7285-5-split-pane-ionic1.vercel.app/src/components/split-pane/test/when/) --------- Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
brandyscarney
force-pushed
the
FW-7285
branch
from
October 14, 2026 14:12
54aff65 to
c4a1a40
Compare
brandyscarney
changed the title
brandyscarney
marked this pull request as ready for review
October 14, 2026 14:31
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.