Skip to content

fix: preserve native vertical tab corners during Web handoff - #328

Merged
rdlabo merged 2 commits into
mainfrom
fix/vertical-tab-highlight-radius
Oct 24, 2026
Merged

rdlabo merged 2 commits into
mainfrom
fix/vertical-tab-highlight-radius

Conversation

@rdlabo

@rdlabo rdlabo commented Oct 24, 2026 •

Copy link
Copy Markdown
Contributor

Native-to-Web handoffs of Duo vertical tabs preserved the native rectangles but kept fixed CSS corner radii. Preserve the measured native corner radius in the same geometry response, including an explicit zero; older native binaries retain a capsule fallback. Also remove the horizontal tab icon margin that shifted vertical icons up by 1 pt.

Validation:

  • 10 Chromium/WebKit handoff and invalidation tests passed, covering omitted, explicit and zero radii, partial handoff and fade cleanup.
  • Two native geometry tests passed; workspace lint and iOS simulator build passed.
  • Compared 12 Duo captures across light/dark and first/middle selection using real Native → Web → Native handoffs. Icon centers now align. Background/material/tint differences remain; this does not claim complete pixel equivalence.
  • Supervisor and OSS acceptance reviews approved this scope. The supervisor caught missing screenshot updates; CI regenerated eight affected vertical-tab images, verified them against Ionic 8, and the supervisor approved the image changes. Horizontal tabs, drag labels and other component baselines are unchanged. Final required PR checks must pass before publishing beta.

This PR is for beta validation. Expanded/pressed-state and left/RTL native pixel equivalence are not claimed as verified.

@rdlabo

rdlabo commented Oct 24, 2026

Copy link
Copy Markdown
Contributor Author

/update-screenshots

@github-actions

Copy link
Copy Markdown
Contributor

✅ Screenshots have been updated successfully!

The new screenshots have been committed to this PR.

@github-actions

github-actions Bot commented Oct 24, 2026 •

Copy link
Copy Markdown
Contributor

Playwright test results

passed  502 passed
flaky  1 flaky

Details

stats  503 tests across 26 suites
duration  4 minutes, 14 seconds
commit  90f7c77
info  This detailed result covers Ionic 9 only. Ionic 8 runs against the same screenshots in a separate matrix job; check the workflow run for both results. To update the screenshots, comment with /update-screenshots.

Flaky tests

chromium › native-ui.spec.ts › Duo card modal sends one native presentation clock instead of moving frames

@github-actions

Copy link
Copy Markdown
Contributor

📊 Ionic 9 Playwright Test Report

View the detailed Ionic 9 report after GitHub Pages deployment completes: https://rdlabo-dev.github.io/ionic-theme-ios27/pr-328/

Ionic 8 runs against the same screenshots in a separate matrix job. View both results in the workflow run.

@rdlabo

rdlabo commented Oct 24, 2026

Copy link
Copy Markdown
Contributor Author

/beta

@rdlabo
rdlabo merged commit 23377fb into main Oct 24, 2026
16 checks passed
@github-actions

Copy link
Copy Markdown
Contributor

npm beta published

CI passed for the merge commit 23377fb8137a. Install the immutable version with:

npm install @rdlabo/ionic-theme-ios27@2.0.3-beta.pr328.sha23377fb8137a @rdlabo/capacitor-native-ui@2.0.3-beta.pr328.sha23377fb8137a

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant