fix: animate vertical tab bar selection and dragging - #226
Conversation
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
| reducedMotion.addEventListener('change', update); | ||
| const placementObserver = new win.MutationObserver(update); | ||
| if (verticalBarsRoot) placementObserver.observe(verticalBarsRoot, { attributes: true, attributeFilter: ['class'] }); | ||
| placementObserver.observe(targetElement, { attributes: true, attributeFilter: ['class'] }); |
There was a problem hiding this comment.
🟡 タブバー移動後のジェスチャー方向が配置と一致しない
縦レールのタブバーを ion-tabs の外へ移すと、表示だけが横配置に戻ります。親要素の変更は監視されないため、縦方向のジェスチャーが残り、横方向のドラッグでタブを切り替えられません。
Learn more
CSS と登録時の配置判定は、タブバーが ion-tabs の直接の子かどうかに依存します。監視対象はアプリとタブバー自身の class 属性のみで、親子関係の変更では更新が走りません。
Example: 縦レールのタブバーを ion-tabs から通常の div に移すと、バーは横向きですがドラッグ判定は縦向きのままです。
Recommended fix: 親子関係の変更も検知して配置を再計算してください。移動後の CSS とジェスチャー方向が一致することをテストしてください。
Was this helpful? React with 👍 or 👎 to provide feedback.
| const cdp = await page.context().newCDPSession(page); | ||
| await cdp.send('Input.dispatchTouchEvent', { type: 'touchStart', touchPoints: [{ x, y }] }); |
There was a problem hiding this comment.
🔍 タッチテストのブラウザー依存性
新しいタッチテストは CDP を直接使用します。現在の Chromium 専用設定では動作しますが、他のブラウザーを追加する際はスキップ条件が必要です。
Was this helpful? React with 👍 or 👎 to provide feedback.
Playwright test results
Details
|
|
/update-screenshots |
|
📊 Ionic 9 Playwright Test Report View the detailed Ionic 9 report: https://rdlabo-dev.github.io/ionic-theme-ios27/pr-226/ Ionic 8 runs against the same screenshots in a separate matrix job. View both results in the workflow run. |
|
✅ Screenshots have been updated successfully! The new screenshots have been committed to this PR. |
|
/update-screenshots |
|
ℹ️ No screenshot changes detected. The current screenshots are already up to date. |
npm beta publishedCI passed for the merge commit npm install @rdlabo/ionic-theme-ios27@1.2.0-beta.pr226.shaa2e125f11160 |
1 participant
Vertical tab bars currently disable the optional glass selection effect. This change adapts the existing native-measured tab motion to the vertical axis, adding tap transfer, press/release deformation, and touch/mouse drag tracking on either rail edge.
The effect follows CSS eligibility, respects reduced motion and theme opt-outs, and refreshes when the bar is reparented. Horizontal bars retain their existing behavior. Regression coverage includes selection, cancellation, dynamic opt-out/restoration, movement between horizontal and vertical placement, and updated rail screenshots generated in CI.
Validation:
git diff --checkpassed.The screenshot updater workflow fix is isolated in #227. This PR contains only the tab implementation, tests, and their baselines.