feat(header): add translucent progressive effect for ionic theme - #31467
Open
os-davidlourenco wants to merge 7 commits into
Open
os-davidlourenco wants to merge 7 commits into
os-davidlourenco wants to merge 7 commits into
Conversation
Sync `next` with `main`. This is the first sync since `main` crossed the v9 boundary (`main` is 9.0.2, `next` was 8.8.19), so it is much larger than a routine sync: 123 commits and 256 conflicts. ## Resolution policy `main` wins for code, `next` wins for styling. Where the two could not both be kept, `main`'s render tree and component logic were taken and `next`'s theme-aware styling was layered on top. ## Notable resolutions - **`ion-select` / `ion-input` / `ion-textarea`** diverged on render tree, not style. Took `main`'s v9 structure (`.select-start` / `.select-control` / `.select-end`, `StartContainerController`, boolean `autocorrect`, floating labels that no longer float for slotted content) since BREAKING.md documents `part="inner"` as removed. Kept `next`'s theme-aware derived values (`getFill()`, `getShape()`, `getSize()`, `getLabelPlacement()`, the `theme` class map, the theme-aware clear icon). The ionic-theme outline hook (`<div class="input-outline">` etc.) is gone from these three and needs re-adding against the new DOM as part of the ionic-modular work. - **`picker-legacy` / `picker-legacy-column`**: accepted `main`'s removal. Also dropped `ion-picker-legacy` from `OVERLAY_FOCUS_TRAP_SELECTOR` and from the Vue overlay container list. - **`packages/react` `proxies.ts` -> `components.ts`**: `main` deleted `proxies.ts` with the react-output-target 1.5.0 upgrade. Ported `next`'s `IonDivider` / `IonGallery` / `IonGalleryItem` into the generated `components.ts` format, and updated the `build-core` archive path. - **Angular standalone**: `main` moved `packages/angular/standalone/` to `packages/angular/src/standalone/` with per-component files. Added `ion-divider.ts`, `ion-gallery.ts`, `ion-gallery-item.ts` and registered them. - **Angular lazy `proxies.ts`**: 83 conflicts. 79 resolved as `next`'s `inputs` line plus `main`'s added `outputs` / `standalone: false`. Four by hand: dropped `IonPickerLegacy`, `ion-select-option` inputs are the union, `ion-tab` keeps `main`'s required `tab` input plus `next`'s `mode` / `theme`. - **`datetime`**: `next` moved the color rules into `datetime.native.scss` while `main` rewrote them in the shared file for the removal of the default `color` prop. Kept `next`'s file split and ported `main`'s `ion-color(primary, base)` default plus `:host(.ion-color)` override into the native theme. - **`alert.common.scss`**: rename detection appended `main`'s copy of the label-placement and justify rules on top of `next`'s identical copy. Removed the duplicate. - **`select.tsx`**: the merge left two identical copies of `wrapSelectTextNodes`. Removed one. - **BREAKING.md**: rebuilt as the union of both v9 sections. All 15 component subsections alphabetized, `next`'s Textarea Shadow DOM note folded into `main`'s Textarea section, TOC regenerated. - **Snapshots**: 193 conflicting baselines took `next`'s, matching the precedent set in 17ab188. Eight orphaned `textarea` fill Firefox baselines stayed deleted since `next`'s fill spec is LTR-only and has no non-custom shaped cases. - **`core/package-lock.json`**: regenerated from `main`'s lockfile against the merged `package.json`. `@playwright/test` stays at 1.62.1 to match the CI image. ## Verification - `tsc --noEmit` on `core/src` is clean (spec-file errors are pre-existing tsconfig noise, present on untouched files too). - `stencil test --spec`: 86 suites, 819 tests, all passing. - No conflict markers anywhere; lockfile version/resolved/integrity fields are consistent. - Scanned every merged source file for duplicated blocks and duplicate class members, which is how the two duplication bugs above were found. ## Before merging - [X] **Snapshots must be regenerated.** All 193 baselines are `next`'s and none of them match the merged code. Run `npm run test.e2e.docker.update-snapshots` - [x] **Regenerate the derived files from a real build** rather than trusting the hand merges: `core/api.txt`, `core/src/components.d.ts`, and the framework proxy files - Merge with a regular merge commit, not a squash --------- Co-authored-by: OS-jacobbell <228905018+OS-jacobbell@users.noreply.github.com> Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com> Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com> Co-authored-by: Sean Perkins <13732623+sean-perkins@users.noreply.github.com> Co-authored-by: ionitron <hi@ionicframework.com> Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: droc101 <37421449+droc101@users.noreply.github.com> Co-authored-by: adahlberg-sprocket-sports <85965520+adahlberg-sprocket-sports@users.noreply.github.com> Co-authored-by: Claude Fable 5 <noreply@anthropic.com> Co-authored-by: ptmkenny <1451472+ptmkenny@users.noreply.github.com> Co-authored-by: Zac Smucker-Bryan <111775722+Zac-Smucker-Bryan@users.noreply.github.com> Co-authored-by: Eric Hechavarria <34724684+EricHech@users.noreply.github.com> Co-authored-by: LucasArray <29403436+LucasArray@users.noreply.github.com> Co-authored-by: Alexander Harding <noreply@harding.dev> Co-authored-by: Alexander Harding <2166114+aeharding@users.noreply.github.com> Co-authored-by: Liam DeBeasi <2721089+liamdebeasi@users.noreply.github.com> Co-authored-by: Ren yiwei <85666259+SSDWGG@users.noreply.github.com> Co-authored-by: ptmkenny <github@ptmkenny.com> Co-authored-by: Victor Turansky <victor.turansky@gmail.com> Co-authored-by: chuhuang-itch <chuhuangvio25@gmail.com>
Issue number: internal --------- <!-- 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 new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Update reference to outsystems-design-tokens 2.3.0 - Fix usages on affected scss partials, due to differences on tokens names anda values. ## 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. --> ## 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: Claude Opus 5 (1M context) <noreply@anthropic.com> Co-authored-by: ionitron <hi@ionicframework.com>
…#31418) ## What is the current behavior? Several components use Phosphor Icons by default only for the `ionic` theme. ## What is the new behavior? - Removes the Phosphor Icon defaults for the `ionic` theme, instead replacing them with whatever icon `md` uses - This reverts most of the code in 08fc0b9 - Phosphor Icon svgs can be set directly by any app consuming Ionic Framework using the config, or passed to `ion-icon` as a [font](https://ionicframework.com/docs/api/icon#font-icons). - Adds the missing config properties for icons which were removed: - Checkbox: `checkboxCheckedIcon` and `checkboxIndeterminateIcon` - Refresher: `refresherArrowIcon` - Select Modal: `selectModalCancelIcon` ## Does this introduce a breaking change? - [x] Yes - [ ] No <h4 id="version-10x-checkbox">Checkbox</h4> - The `container` CSS shadow part is now the element that wraps the checkmark instead of the `svg` element that draws it. The part still controls the checkbox's size, border, and background, so existing styles for those properties are unaffected. SVG-specific properties such as `fill`, `stroke` and `stroke-width` no longer have any effect through `::part(container)` because `container` is no longer an SVG element. To set the color of the checkmark, use the `icon` part instead: ```diff - ion-checkbox::part(container) { - stroke: purple; - } + ion-checkbox::part(icon) { + color: purple; + } ``` The `--checkmark-color` CSS variable can also be used to set the checkmark color. Both `::part(icon)` and `--checkmark-color` apply to the default checkmark as well as to an icon set with the `checkboxCheckedIcon` or `checkboxIndeterminateIcon` global config options. In contrast, the `mark` part only applies to states that do not have a configured icon. Setting `color` on the `container` part has no effect because the icon sets its own color. To change the thickness of the default checkmark, use the `--checkmark-width` CSS variable or set `stroke-width` on the `mark` part. These apply to each state (`checked` and `indeterminate`) unless an icon is configured for that state. For example, when `checkboxCheckedIcon` is configured, these properties do not apply to the checked state but continue to apply to the indeterminate state. Similarly, when `checkboxIndeterminateIcon` is configured, they do not apply to the indeterminate state but continue to apply to the checked state. For a configured Ionicon drawn with a stroke, set `--ionicon-stroke-width` on the `icon` part. For a configured SVG, set `stroke-width` on the `icon` part; this applies unless the SVG sets its own `stroke-width`. --------- Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
brandyscarney
approved these changes
Sep 25, 2026
brandyscarney
left a comment
Member
There was a problem hiding this comment.
Looks good! I will leave a comment on the Jira ticket!
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
5 participants
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.
Issue number: resolves internal
What is the current behavior?
The translucent in Ionic theme only applies an opacity to the entire header.
What is the new behavior?
On the Ionic theme, a translucent header now uses a progressive blur instead of a single uniform blur.
Content scrolling behind
ion-header translucentis heavily blurred near the top of the header and eases to no blur toward the bottom.iOS and MD translucent headers are unchanged. The
translucentAPI is unchanged.Does this introduce a breaking change?
Other information