fix: align toolbar and modal button geometry with system controls - #263
Conversation
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
| padding-top: 0; | ||
| // The system's modal safe area places the 44px control 16px below the | ||
| // content edge, with or without a sheet drag indicator. | ||
| padding-top: 6px; |
There was a problem hiding this comment.
🔍 モーダルの上余白は端末種別ではなく画面寸法で切り替わる
幅768px以上かつ高さ600px以上なら上余白は0px、それ以外は6pxです。横向きや分割表示で想定する配置を確認してください。
Was this helpful? React with 👍 or 👎 to provide feedback.
|
/update-screenshots |
|
✅ Screenshots have been updated successfully! The new screenshots have been committed to this PR. |
|
/update-screenshots |
|
✅ Screenshots have been updated successfully! The new screenshots have been committed to this PR. |
Playwright test results
Details
Flaky testschromium › vertical-bars-back-button.spec.ts › Web search follows vertical tabs before native projection and restores its source |
|
📊 Ionic 9 Playwright Test Report View the detailed Ionic 9 report: https://rdlabo-dev.github.io/ionic-theme-ios27/pr-263/ Ionic 8 runs against the same screenshots in a separate matrix job. View both results in the workflow run. |
|
/update-screenshots |
|
✅ Screenshots have been updated successfully! The new screenshots have been committed to this PR. |
|
/update-screenshots |
|
✅ Screenshots have been updated successfully! The new screenshots have been committed to this PR. |
Native toolbar geometry comparisonMeasured on the same iPhone 17 Pro simulator (iOS 27.0). The multiple-clear-button groups now follow native toolbar spacing. Files’ Back/Forward controls and Calendar’s Search/Add controls both have 16pt between their button frames.
For a controlled comparison, the standard SwiftUI
The icons themselves are unchanged in size. The group is wider because its internal layout now follows the native baseline. A small subpoint difference remains; this is not a claim of exact pixel equality for arbitrary icons. |
|
/update-screenshots |
|
✅ Screenshots have been updated successfully! The new screenshots have been committed to this PR. |
再レビュー（head:
|
ケース（slot="start"） |
main | PR |
|---|---|---|
| 非表示の menu だけを含む group の次の group | x=40 | x=16 |
| 空の group をはさんだ 2 group の間隔 | — | 12px |
非表示の back button／.ios-theme-native-ui-shell-prehidden の子だけを含む group の次 |
— | x=16 |
| 空の opt-out group の後に 2 group | — | 16 / 12px（間隔が維持される） |
| visible な opt-out group と通常 group | — | 12px + 12px（standalone の余白が維持される） |
start/secondary、primary/end、end の 2 group |
— | 外側 16px／間隔 12px |
:nth-child(1 of …)と、:has()を入れ子にしたセレクタが WebKit でも有効なことを確認しました。生成された 14 ルールはすべて CSSOM に読み込まれ、レイアウトも Chromium と一致しています。ion-buttonsに新しく付けたdisplay: noneが Native UI Shell の要素の読み取りと干渉しないか、コードで確認しました。withoutPrehide()は対象要素と祖先のクラスを外します。unprojected()は data-native-ui-shell の marker を外します。そのため、子を読み取るあいだは親の group が表示状態に戻ります。- group 自体を読み取るのは、group 全体が持ち主になる経路だけです。この経路では子に prehidden が付かないので、問題になる経路は見つかりませんでした。ただし実機では確認していません。
.back-button-has-icon-onlyの TODO（v2.0.0）、PR 説明の更新、デモの 14 ケースとスクリーンショットも確認しました。
任意
- Nit: 要素を含まずテキストだけの
<ion-buttons>テキスト</ion-buttons>も、:not(:has(> …))に当てはまるためdisplay: noneになります。Ionic の想定する使い方ではないので、気にならなければこのままで構いません。 - この PR とは別件（main と同じ挙動）: 非表示の
ion-menu-buttonと一緒に置いたion-buttonには、:has(ion-menu-button.menu-button-hidden)の除外によってガラスの背景が付きません。デモの「hidden child and visible child」で、Save だけ背景がないのはこのためです。
|
/update-screenshots |
|
ℹ️ No screenshot changes detected. The current screenshots are already up to date. |
Co-Authored-By: rdlabo <sakakibara@rdlabo.jp>
Co-Authored-By: rdlabo <sakakibara@rdlabo.jp>
npm beta publishedCI passed for the merge commit npm install @rdlabo/ionic-theme-ios27@1.2.0-beta.pr263.sha154af91ad6d7 |
1 participant
Toolbar actions have inconsistent outer insets and spacing when individual buttons and
ion-buttonsshare a toolbar side. Multiple clear-button groups are more compact than the standard native toolbar layout, and card/sheet modal headers place controls too close to the top edge.Align toolbar typography, grouped action sizing, outer insets and adjacent-action spacing with the measured native baseline. Multiple clear-button groups use 16px between their inner controls, matching standard SwiftUI toolbar groups. Handle Ionic’s visual slot order (
start+secondary,primary+end) and exclude hidden back buttons and sources moved to native Vertical Bars from adjacent-action spacing. Preserve optional back-button text, small/large sizes, opted-out controls and source CSS geometry used by Native UI Shell.Card/sheet headers place 44px controls 16px below the content edge. At the existing large-viewport breakpoint, non-sheet modal headers retain a 10px inset; sheet headers retain the 16px inset. Ionic’s own modal presentation remains in control, including landscape layouts.
Production changes are confined to two SCSS files, and updated screenshot baselines are included. No Swift changes or additional test files are included. Existing screenshot coverage remains the visual guardrail.
Validation: root lint and diff checks; 12 existing native projection/browser tests; 11-scene CLI XCTest comparison of main and this branch with Native UI Shell enabled on iPhone 17 Pro; iPhone/iPad layout measurements; focused checks for single/multiple actions, RTL and excluded groups. Temporary diagnostic code remains outside the repository. The native toolbar comparison includes standard-app screenshots and a same-icon SwiftUI baseline; small subpoint differences remain.
Empty groups and groups containing only hidden children no longer contribute toolbar spacing. The toolbar demo at
/main/index/toolbarincludes 14 spacing examples covering both sides, hidden and empty groups, standalone buttons, and paired slots for screenshot coverage.