fjordllc / fjordllc/bootcamp

ヘッダーのドロップダウンと共通モーダルをStimulus化する

Open
#10,366 0 comments 0 reactions 1 assignee Claimed by @mikan-v7y View on GitHub
3
Dominant language
Ruby
Stars
296
Forks
80
Avg merge
3d 1h
Merged PRs (30d)
29

Description

## 概要

ヘッダーのドロップダウンと共通モーダルをStimulus controller化し、Turbo Driveの画面遷移でも安全に初期化・破棄できるようにする。

親Issue: #10196
関連Issue: #10359

## 方針

- ドロップダウンを要素単位のStimulus controllerへ移行する
- モーダルのtrigger / target / close操作をStimulus actionsで表現する
- document全体のイベントはconnect / disconnectで確実に登録・解除する
- 通知ベル固有の処理は#10359に残し、共通開閉処理だけを対象にする

## 受け入れ条件

- ユーザー、管理者、メンター、ヘルプの各メニューが正常に開閉する
- 画面外クリックとEscapeキーで閉じられる
- モーダルの開閉と複数triggerが正常に動く
- ARIA属性とフォーカスの既存挙動が維持または改善される
- Turboの再訪でイベントが二重登録されない
- `DOMContentLoaded` 前提の共通初期化が削除される
- 関連system testが追加・更新される
- `./bin/lint` が通る

## 関連コード

- `app/javascript/header-dropdown.js`
- `app/javascript/modal-switcher.js`
- `app/views/application/header/_header_links.html.slim`
- `app/views/application/_global_nav_helps.html.slim`

## Turboの段階導入について

Turbo Driveはサイト全体で一括して有効化せず、移行期間中はデフォルトで無効にする。Turboを利用する場合は、対応とテストが完了したリンク、フォーム、機能の範囲だけに`data-turbo="true"`を付けてオプトインする。Stimulus化では、Turboによる再訪や部分更新を考慮して`connect()` / `disconnect()`で初期化と後始末を管理する。

実装方法と確認項目は次のWikiを参照する。

- [Turbo Driveを必要な箇所だけ有効にする方法](https://github.com/fjordllc/bootcamp/wiki/Turbo-Drive%E3%82%92%E5%BF%85%E8%A6%81%E3%81%AA%E7%AE%87%E6%89%80%E3%81%A0%E3%81%91%E6%9C%89%E5%8A%B9%E3%81%AB%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95)

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.