Skip to content

feat: project foldable toolbar navigation and actions - #212

Closed
rdlabo wants to merge 11 commits into
feat/adaptive-tabsfrom
feat/foldable-back-button
Closed

rdlabo wants to merge 11 commits into
feat/adaptive-tabsfrom
feat/foldable-back-button

Conversation

@rdlabo

@rdlabo rdlabo commented Sep 21, 2026 •

Copy link
Copy Markdown
Contributor

Summary

  • project the active fixed-toolbar ion-back-button into the physical right-side foldable rail
  • project a single eligible toolbar action as an independent circular control and multiple actions as a shared vertical group, matching SwiftUI on iPhone Duo
  • render icon-plus-text actions as compact rail icons while retaining their accessible names
  • leave text-only toolbar actions in the original Web toolbar
  • keep ion-menu, ion-modal, and ion-popover toolbars under their own surface ownership
  • delegate projected clicks to the currently active Ionic source control and reject stale controls during route transitions
  • restore every source on suspension, teardown, route ownership changes, or foldable opt-out

Architecture

Projection is owned by the document-level Native UI Shell lifecycle rather than ion-tabs. It therefore works in applications with or without tabs. Ionic controls remain the source of truth for state, behavior, disabled state, labels, and accessibility.

The original eligible controls are hidden only while owned. Interactive Web clones are placed in the physical right rail in both LTR and RTL. This remains a Web-first implementation and does not require native projection for pointer interaction.

The rail uses the 46pt SwiftUI toolbar control width measured from the 3x iPhone Duo simulator. One action is projected directly as a button; only groups with multiple actions retain a shared capsule.

Stack

  1. feat: support iPhone Duo with vertical bars #213 — demo foldable toggle
  2. feat(layout): support foldable safe-area layout #209 — foldable safe-area layout
  3. feat(tabs): add foldable vertical tab bar #208 — foldable vertical tab bar
  4. feat: project foldable toolbar navigation and actions #212 — foldable toolbar navigation and actions

Base: feat/adaptive-tabs

Verification

  • TypeScript and CSS builds
  • foldable projection unit test
  • five Playwright interaction and ownership tests
  • LTR and RTL back-navigation image regressions
  • toolbar-actions image regression showing text-only Cancel in the header and Back/icon actions in the rail
  • downstream tab-drag and split-pane baselines updated with the latest tab rail and projected toolbar controls

@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 5 potential issues.

Devin Review

Comment thread src/native/foldable-web.ts Outdated
Comment thread src/native/foldable-web.ts Outdated
Comment thread src/native/foldable-web.ts Outdated
Comment thread src/native/foldable-web.ts Outdated
Comment thread src/native/foldable-web.ts Outdated
@rdlabo
rdlabo force-pushed the feat/adaptive-tabs branch 2 times, most recently from 76fb6e2 to ced2fea Compare September 22, 2026 02:14
@rdlabo
rdlabo force-pushed the feat/foldable-back-button branch from 431ebf9 to 28f7778 Compare September 22, 2026 02:19
@rdlabo
rdlabo force-pushed the feat/foldable-back-button branch from 28f7778 to 8003f99 Compare September 22, 2026 02:21
@rdlabo
rdlabo force-pushed the feat/foldable-back-button branch 4 times, most recently from 51a6ec9 to 27b2bbc Compare September 22, 2026 03:45
@rdlabo
rdlabo force-pushed the feat/foldable-back-button branch from 27b2bbc to d041b69 Compare September 22, 2026 04:05
@rdlabo rdlabo changed the title feat: project foldable back navigation feat: project foldable toolbar navigation and actions Sep 22, 2026
@rdlabo

rdlabo commented Sep 22, 2026

Copy link
Copy Markdown
Contributor Author

Consolidated into #213. The foldable toolbar/back projection commits are now part of the head branch, so this intermediate stacked PR is no longer needed.

@rdlabo rdlabo closed this Sep 22, 2026
@rdlabo

rdlabo commented Sep 22, 2026

Copy link
Copy Markdown
Contributor Author

Consolidated into #213; its foldable toolbar and back-projection commits are now included in the Web foldable PR.

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