Skip to content

fix: restore mode-specific projection when native rail is unavailable - #232

Merged
rdlabo merged 2 commits into
refactor/foldable-device-statefrom
fix/native-edge-null-projection
Sep 28, 2026
Merged

rdlabo merged 2 commits into
refactor/foldable-device-statefrom
fix/native-edge-null-projection

Conversation

@rdlabo

@rdlabo rdlabo commented Sep 28, 2026 •

Copy link
Copy Markdown
Contributor

Native vertical projection previously accepted both an unregistered nativeEdge and explicit null, even though neither confirms a native rail. Require a reported edge matching the requested placement before handing vertical controls to native rendering.

While the edge is unknown or null, verticalBarsOnly keeps the requested Web rail; the full Native UI Shell temporarily restores its ordinary horizontal layout. Preserve the requested placement for recovery when an edge arrives. Omitting nativeEdge after a report preserves the last supplied value, including null. Update the demo's mode state and API documentation accordingly.

Validation:

  • 62 unit tests and four focused E2E scenarios passed for null/unregistered edges in both modes, including recovery and operation continuity. E2E uses a mocked native bridge.
  • Theme build and formatting checks passed.
  • Before the initial-state follow-up, all 90 Native UI Shell E2E tests, demo production build, and demo lint passed.
  • The GitHub Actions run for the earlier commit on refactor: delegate device state to capacitor-foldable #230 failed card/chip screenshot comparisons. Playwright traces show external ionicframework.com/docs/img/demos/ images failing with net::ERR_BLOCKED_BY_ORB; this remains unresolved and screenshot baselines were not changed.

This PR is stacked onto #230 (refactor/foldable-device-state).

@devin-ai-integration devin-ai-integration Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Devin Review found 1 potential issue.

Devin Review

Comment thread src/native/index.ts
Comment on lines +121 to +123
const requested = app.classList.contains('ios-theme-vertical-bars') || app.hasAttribute(horizontalFallbackAttribute);
const suspended = requested && nativePlacements.get(app)?.edge === null;
if (app.hasAttribute(horizontalFallbackAttribute) !== suspended) app.toggleAttribute(horizontalFallbackAttribute, suspended);

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟡 ネイティブレール不在時にクラス操作でモードを解除できない

通常モードで nativeEdge が null の間、有効化クラスは消え、退避属性だけが残ります。アプリがクラスを外しても無効化できず、レール復帰時に意図せず再有効化されます。

Learn more

アプリは ion-app の .ios-theme-vertical-bars クラスでもレールを有効化できます。説明 にもこの方法が示されています。通常モードで nativeEdge: null を受けると、監視処理がクラスを外して退避属性だけで要求を保持します。この状態でアプリが classList.remove('ios-theme-vertical-bars') を呼んでもクラスは既になく、監視処理には解除が伝わりません。その後エッジが復帰すると、残った退避属性を要求と見なしてレールが再有効化されます。

Example: ion-app にクラスを付けていたアプリが、レール不在時に設定画面から classList.remove('ios-theme-vertical-bars') を実行します。表示は変わらず退避属性が残り、次のエッジ通知でレールが戻ります。期待されるのはモードの解除です。

Recommended fix: 要求状態と実効クラスを分離し、公開したクラス操作でも解除を検出できる状態管理にしてください。クラスが既にない状態での classList.remove は MutationObserver で検出できないため、クラスを常に要求の目印として維持できる CSS 制御、または要求を変更する明示的 API への契約変更を検討してください。

Devin Review


Was this helpful? React with 👍 or 👎 to provide feedback.

@rdlabo
rdlabo merged commit d550822 into refactor/foldable-device-state Sep 28, 2026
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