Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
e0a99ab
chore(docker): avoid shell interpretation and uncontrolled path expan…
thetaPC May 6, 2026
e0862e3
refactor(content, modal): update prefix for internal safe area variab…
thetaPC May 7, 2026
4670996
fix(input): scroll assist no longer fires duplicate click events (#31…
ShaneK May 8, 2026
e0ed00d
chore(deps): update dependency @capacitor/core to v8.3.2 (#31128)
renovate[bot] May 8, 2026
07675f9
fix(alert): switch to vertical layout when two buttons wrap (#31130)
ShaneK May 8, 2026
d4a550d
chore(deps): update dependency @capacitor/core to v8.3.3 (#31132)
renovate[bot] May 11, 2026
270bdf2
chore(deps): update playwright (#31122)
renovate[bot] May 11, 2026
f991d39
chore(deps): update dependency @capacitor/core to v8.3.4 (#31140)
renovate[bot] May 13, 2026
568ad1a
v8.8.7
Ionitron May 13, 2026
85909b8
chore(): update package lock files
Ionitron May 13, 2026
7334144
merge release-8.8.7 (#31146)
thetaPC May 13, 2026
c88c0de
fix(vue-router): prevent out-of-bounds index when popping across tabs…
ShaneK May 15, 2026
0182bba
fix(tabs): preserve query params and fragment from tab button href (#…
ShaneK May 20, 2026
fa4593d
fix(react): bind events properly for overlays rendered within a nav (…
ShaneK May 20, 2026
a0af982
v8.8.8
Ionitron May 20, 2026
7dfae0f
chore(): update package lock files
Ionitron May 20, 2026
95c48eb
merge release-8.8.8
ShaneK May 20, 2026
55e73a2
Merge remote-tracking branch 'origin/main' into sync-major-9.0-with-main
ShaneK May 21, 2026
b4a3dce
chore(): add updated snapshots
Ionitron May 21, 2026
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
25 changes: 25 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,31 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

## [8.8.8](https://github.com/ionic-team/ionic-framework/compare/v8.8.7...v8.8.8) (2026-05-20)


### Bug Fixes

* **react:** bind events properly for overlays rendered within a nav ([#31159](https://github.com/ionic-team/ionic-framework/issues/31159)) ([fa4593d](https://github.com/ionic-team/ionic-framework/commit/fa4593d8a4d61a583dbf6fa551cd846fe258624f)), closes [#27843](https://github.com/ionic-team/ionic-framework/issues/27843)
* **tabs:** preserve query params and fragment from tab button href ([#31154](https://github.com/ionic-team/ionic-framework/issues/31154)) ([0182bba](https://github.com/ionic-team/ionic-framework/commit/0182bba06d6171dd2faf80556fd2131abf03fa93)), closes [#25470](https://github.com/ionic-team/ionic-framework/issues/25470)
* **vue-router:** prevent out-of-bounds index when popping across tabs ([#31148](https://github.com/ionic-team/ionic-framework/issues/31148)) ([c88c0de](https://github.com/ionic-team/ionic-framework/commit/c88c0de3ade92469fa1f37e1b8220911adf113e0)), closes [#29413](https://github.com/ionic-team/ionic-framework/issues/29413)





## [8.8.7](https://github.com/ionic-team/ionic-framework/compare/v8.8.6...v8.8.7) (2026-05-13)


### Bug Fixes

* **alert:** switch to vertical layout when two buttons wrap ([#31130](https://github.com/ionic-team/ionic-framework/issues/31130)) ([07675f9](https://github.com/ionic-team/ionic-framework/commit/07675f9ed976867827301808dc7d9e857f8a33ae))
* **input:** scroll assist no longer fires duplicate click events ([#31124](https://github.com/ionic-team/ionic-framework/issues/31124)) ([4670996](https://github.com/ionic-team/ionic-framework/commit/4670996a41e406cc831f0982923d3bde7572eb88)), closes [#30412](https://github.com/ionic-team/ionic-framework/issues/30412)





## [8.8.6](https://github.com/ionic-team/ionic-framework/compare/v8.8.5...v8.8.6) (2026-05-06)


Expand Down
20 changes: 20 additions & 0 deletions core/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,26 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

## [8.8.8](https://github.com/ionic-team/ionic-framework/compare/v8.8.7...v8.8.8) (2026-05-20)

**Note:** Version bump only for package @ionic/core





## [8.8.7](https://github.com/ionic-team/ionic-framework/compare/v8.8.6...v8.8.7) (2026-05-13)


### Bug Fixes

* **alert:** switch to vertical layout when two buttons wrap ([#31130](https://github.com/ionic-team/ionic-framework/issues/31130)) ([07675f9](https://github.com/ionic-team/ionic-framework/commit/07675f9ed976867827301808dc7d9e857f8a33ae))
* **input:** scroll assist no longer fires duplicate click events ([#31124](https://github.com/ionic-team/ionic-framework/issues/31124)) ([4670996](https://github.com/ionic-team/ionic-framework/commit/4670996a41e406cc831f0982923d3bde7572eb88)), closes [#30412](https://github.com/ionic-team/ionic-framework/issues/30412)





## [8.8.6](https://github.com/ionic-team/ionic-framework/compare/v8.8.5...v8.8.6) (2026-05-06)


Expand Down
2 changes: 1 addition & 1 deletion core/Dockerfile
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
# Get Playwright
FROM mcr.microsoft.com/playwright:v1.58.2
FROM mcr.microsoft.com/playwright:v1.59.1

# Set the working directory
WORKDIR /ionic
52 changes: 26 additions & 26 deletions core/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 4 additions & 4 deletions core/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@ionic/core",
"version": "8.8.6",
"version": "8.8.8",
"description": "Base components for Ionic",
"engines": {
"node": ">= 16"
Expand Down Expand Up @@ -39,14 +39,14 @@
"tslib": "^2.1.0"
},
"devDependencies": {
"@axe-core/playwright": "^4.11.1",
"@axe-core/playwright": "^4.11.3",
"@capacitor/core": "^8.0.0",
"@capacitor/haptics": "^8.0.0",
"@capacitor/keyboard": "^8.0.0",
"@capacitor/status-bar": "^8.0.0",
"@ionic/eslint-config": "^0.3.0",
"@ionic/prettier-config": "^2.0.0",
"@playwright/test": "^1.58.2",
"@playwright/test": "^1.59.1",
"@rollup/plugin-node-resolve": "^8.4.0",
"@rollup/plugin-virtual": "^2.0.3",
"@stencil/angular-output-target": "^0.10.0",
Expand All @@ -67,7 +67,7 @@
"fs-extra": "^9.0.1",
"jest": "^29.7.0",
"jest-cli": "^29.7.0",
"playwright-core": "^1.58.2",
"playwright-core": "^1.59.1",
"prettier": "^2.6.1",
"rollup": "^2.26.4",
"sass": "^1.33.0",
Expand Down
9 changes: 5 additions & 4 deletions core/scripts/docker.mjs
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import chalk from 'chalk';
import { execa } from 'execa';
import * as fs from 'fs';
import { resolve } from 'path';
import chalk from 'chalk';

const removeNewline = (string) => {
return string.replace(/(\r\n|\n|\r)/gm, "");
Expand Down Expand Up @@ -29,11 +29,12 @@ const pwd = resolve('./');
* --init is recommended to avoid zombie processes: https://playwright.dev/docs/ci#docker
* --mount allow us to mount the local Ionic project inside of the Docker container so devs do not need to re-build the project in Docker.
*/
const args = ['run', '--rm', '--init', `-e DISPLAY=${display}`, `-v ${displayVolume}`, '--ipc=host', `--mount=type=bind,source=${pwd},target=/ionic`, 'ionic-playwright', 'npm run test.e2e --', ...process.argv.slice(2)];
const extraArgs = process.argv.slice(2);
const args = ['run', '--rm', '--init', '-e', `DISPLAY=${display}`, ...(displayVolume ? ['-v', displayVolume] : []), '--ipc=host', `--mount=type=bind,source=${pwd},target=/ionic`, 'ionic-playwright', 'npm', 'run', 'test.e2e', '--', ...extraArgs];

// Set the CI env variable so Playwright uses the CI config
if (process.env.CI) {
args.splice(1, 0, '-e CI=true');
args.splice(1, 0, '-e', 'CI=true');
/**
* Otherwise, we should let the session be interactive locally. This will
* not work on CI which is why we do not apply it there.
Expand All @@ -53,7 +54,7 @@ if (requestHeaded && !hasHeadedConfigFiles) {
console.warn(chalk.yellow.bold('\n⚠️ You are running tests in headed mode, but one or more of your headed config files was not found.\nPlease ensure that both docker-display.txt and docker-display-volume.txt have been created in the correct location.\n'));
}

const res = await execa('docker', args, { shell: true, stdio: 'inherit' });
const res = await execa('docker', args, { stdio: 'inherit' });

// If underlying scripts failed this whole process should fail too
process.exit(res.exitCode);
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
73 changes: 70 additions & 3 deletions core/src/components/alert/alert.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import type { ComponentInterface, EventEmitter } from '@stencil/core';
import { Component, Element, Event, Host, Listen, Method, Prop, Watch, forceUpdate, h } from '@stencil/core';
import { Component, Element, Event, Host, Listen, Method, Prop, State, Watch, forceUpdate, h } from '@stencil/core';
import { ENABLE_HTML_CONTENT_DEFAULT } from '@utils/config';
import type { Gesture } from '@utils/gesture';
import { createButtonActiveGesture } from '@utils/gesture/button-active';
Expand Down Expand Up @@ -57,8 +57,12 @@ export class Alert implements ComponentInterface, OverlayInterface {
private processedInputs: AlertInput[] = [];
private processedButtons: AlertButton[] = [];
private wrapperEl?: HTMLElement;
private buttonGroupEl?: HTMLElement;
private buttonGroupResizeObserver?: ResizeObserver;
private gesture?: Gesture;

@State() private isButtonGroupWrapped = false;

presented = false;
lastFocus?: HTMLElement;

Expand Down Expand Up @@ -302,6 +306,13 @@ export class Alert implements ComponentInterface, OverlayInterface {
this.processedButtons = buttons.map((btn) => {
return typeof btn === 'string' ? { text: btn, role: btn.toLowerCase() === 'cancel' ? 'cancel' : undefined } : btn;
});
/**
* Reset wrap state so the new button set can be re-evaluated. Without this,
* a previously-latched vertical layout would persist even if the new buttons
* fit horizontally.
*/
this.isButtonGroupWrapped = false;
this.checkButtonGroupWrap();
}

@Watch('inputs')
Expand Down Expand Up @@ -352,6 +363,12 @@ export class Alert implements ComponentInterface, OverlayInterface {
connectedCallback() {
prepareOverlay(this.el);
this.triggerChanged();
/**
* If the alert was previously connected and is being reattached, the
* ResizeObserver was disconnected. componentDidLoad only fires once per
* instance, so re-establish the observer here on reconnect.
*/
this.setupButtonGroupResizeObserver();
}

componentWillLoad() {
Expand All @@ -374,6 +391,9 @@ export class Alert implements ComponentInterface, OverlayInterface {
if (this.presented) {
cleanupRootFocusTrapAccessibility();
}

this.buttonGroupResizeObserver?.disconnect();
this.buttonGroupResizeObserver = undefined;
}

componentDidLoad() {
Expand All @@ -390,6 +410,8 @@ export class Alert implements ComponentInterface, OverlayInterface {
this.gesture.enable(true);
}

this.setupButtonGroupResizeObserver();

/**
* If alert was rendered with isOpen="true"
* then we should open alert immediately.
Expand Down Expand Up @@ -712,15 +734,60 @@ export class Alert implements ComponentInterface, OverlayInterface {
}
};

private setupButtonGroupResizeObserver() {
/**
* Re-evaluate vertical layout when the button group resizes so a 2-button
* group with long text wraps cleanly instead of leaving a stray right-edge
* border on the first button.
*/
if (!this.buttonGroupEl || typeof ResizeObserver === 'undefined') {
return;
}
this.buttonGroupResizeObserver?.disconnect();
this.buttonGroupResizeObserver = new ResizeObserver(() => this.checkButtonGroupWrap());
this.buttonGroupResizeObserver.observe(this.buttonGroupEl);
this.checkButtonGroupWrap();
}

private checkButtonGroupWrap() {
/**
* Defer the layout read out of the ResizeObserver callback so we don't
* force synchronous layout and avoid "ResizeObserver loop" warnings when
* applying the vertical-layout class itself triggers another resize.
*/
raf(() => {
/**
* Bail if the alert was disconnected after this raf was queued.
* `buttonGroupEl` persists across disconnect so the observer can be
* re-attached on reconnect; the observer reference is the disconnect
* sentinel.
*/
if (!this.buttonGroupResizeObserver) {
return;
}
const groupEl = this.buttonGroupEl;
if (!groupEl) {
return;
}
const buttons = Array.from(groupEl.querySelectorAll<HTMLElement>('.alert-button'));
if (buttons.length < 2) {
this.isButtonGroupWrapped = false;
return;
}
const firstTop = buttons[0].offsetTop;
this.isButtonGroupWrapped = buttons.some((btn) => btn.offsetTop !== firstTop);
});
}

private renderAlertButtons() {
const buttons = this.processedButtons;
const mode = getIonMode(this);
const alertButtonGroupClass = {
'alert-button-group': true,
'alert-button-group-vertical': buttons.length > 2,
'alert-button-group-vertical': buttons.length > 2 || this.isButtonGroupWrapped,
};
return (
<div class={alertButtonGroupClass}>
<div class={alertButtonGroupClass} ref={(el) => (this.buttonGroupEl = el)}>
{buttons.map((button) => (
<button
{...button.htmlAttributes}
Expand Down
Loading
Loading