Skip to content

Comments

feat: タスクテーブルのセルハイライト実装#119

Merged
LevelCapTech merged 2 commits intomainfrom
copilot/implement-task-table-cell-highlight
Feb 19, 2026
Merged

feat: タスクテーブルのセルハイライト実装#119
LevelCapTech merged 2 commits intomainfrom
copilot/implement-task-table-cell-highlight

Conversation

Copy link
Contributor

Copilot AI commented Feb 19, 2026 •
edited
Loading

概要（Summary）

本PR説明は P99 principal engineer として高密度・スキャン容易に記述する。
Task Table のセル選択/ホバー/行ハイライトを SSOT に準拠して実装し、優先順位（Selected > Hover > Row）を維持する。

  • ハイライトの可視化: SelectedCell/SelectedRow/Hover のクラスを追加
  • 優先度の担保: CSS selector で Selected > Hover > Row を明示
  • 回帰テスト: 選択セル/行の class 付与と非表示列の非ハイライトを検証

背景・経緯（Context / Facts）

変更のインデックス（どのファイルをどう変えたか）

diffの目次（ファイル×変更概要）を下記のテーブルに記載します。

ファイル 変更概要（1行）
src/components/task-list/task-list-table.tsx 選択セル/行の class 付与ロジックを追加
src/components/task-list/task-list-table.module.css Selected/Hover/Row のハイライト CSS を追加
src/test/task-list-table-highlight.test.tsx ハイライト回帰テストを追加

実装の要点（Diffから読み取りづらい“事実”）

「意図」ではなく、実装としての事実（何を追加/変更/削除したか、どこで分岐するか、どの入力がどこに流れるか）を短く記録します。

観点 記録
主要な追加/変更点（関数/クラス/モジュール単位） TaskListTableDefault で選択セル/行の class を付与、CSS で hover/selected/row を定義
振る舞いが変わる入口（API/CLI/画面/バッチ/イベント） Task Table セルのクリック選択/hover 表示
データ構造の変更点（型/スキーマ/テーブル/JSON） 変更なし
互換性の扱い（後方互換/破壊的変更/互換レイヤ） 後方互換（既存選択ロジック維持）

例（コード断片）

className={
  isSelected
    ? `${styles.taskListCell} ${styles.taskListCellSelected}`
    : styles.taskListCell
}

適用後に観測できる結果（観測ログ/確認ログ）

確認ログ（何を実行／何を目視したか）

確認項目 方法（実行/目視） 結果 根拠（ログ/URL/スクショ等）
セル選択で濃色+枠線表示 目視 ✅ https://github.com/user-attachments/assets/292dfc60-bcf7-41af-a53f-3e5d11057629
同一行の淡色背景表示 目視 ✅ https://github.com/user-attachments/assets/292dfc60-bcf7-41af-a53f-3e5d11057629

テストの実行状況（事実ログ）

チェック式ではなく、「何を走らせたか」と「結果」を記録します。

種別 対象（パス/テスト名） 実行方法（コマンド/CI） 結果 根拠（ログ/URL等）
unit src/test/task-list-table-highlight.test.tsx npm run test:unit ✅ ローカルログ
integration 該当なし 実行なし - -
e2e 該当なし 実行なし - -
lint/type src/**/* npm run test:lint / npm run test:build ✅ ローカルログ

エラーハンドリング・境界値の考慮事項（Error Handling / Boundary Conditions）

分類（error/boundary） ケース（入力/条件） 期待動作（仕様） 実装上の扱い（例外/戻り値/ログ/抑止） 確認方法（実行/目視/テスト） 結果 根拠（ログ/URL/スクショ等）
boundary viewing モード ハイライトなし class 付与を抑止 目視 ✅ スクショ
boundary 非表示列が選択対象 ハイライトなし columnId 未存在時に抑止 テスト ✅ unit テスト

影響範囲（どこに影響する／しないと言える根拠）

影響対象 結論 根拠
アプリケーション挙動 UI 表示のみ ハイライト用 class/CSS 追加
API契約（入力/出力/HTTP/エラー） 影響なし API変更なし
データ互換（スキーマ/マイグレーション/既存データ） 影響なし 型変更なし
パフォーマンス（CPU/IO/レイテンシ） 影響なし CSS 適用のみ
環境設定・デプロイ手順 影響なし 追加設定なし
監視・運用（ログ/メトリクス/アラート） 影響なし ログ追加なし

依存関係とコストへの影響（Dependencies / Cost Impact）

観点 対象（ライブラリ/サービス/API 等） 変更内容（追加/更新/削除/呼出増減 等） 影響（課金/性能/運用） 影響量（増減の見積/測定値） 根拠（計測/ログ/設定/差分）
依存 なし 変更なし 影響なし 0 差分
コスト なし 変更なし 影響なし 0 差分

マイグレーション／ロールアウト（必要な場合のみ）

項目 記録
マイグレーション有無（DB/設定/データ） なし
手順（誰が/いつ/どこで/何を） 不要
ロールバック方針（戻し方の事実） CSS/class 追加分の revert
互換期間/段階移行（フラグ/二重書き/旧API維持 等） 不要

スコープ境界（触っていい／ダメ、非目標）

区分 範囲（パス/モジュール/設定など） 根拠
触ってよい範囲 task-list-table.tsx / task-list-table.module.css / highlight テスト SSOT
触ってはいけない範囲 選択/編集ロジックの挙動変更 仕様で禁止
非目標（このPRではやらないこと） 編集モード拡張 / 複数選択 / 仮想化変更 Issue 定義外

推論せず“質問に落とす”ための質問票（ADR/確認事項）

論点 / 質問 回答（事実のみ） 根拠（Issue/PR/Commit/ファイル等）
このPRで「決定」扱いにしたいことは何か？（なければ空欄） なし -
仕様上の未確定点（質問として列挙） なし SSOT
追加の観測が必要な点（ログ/メトリクス等） なし -
レビュー観点で迷う点（代替案がある等） なし -

セキュリティ自己確認（Security Self-Check）

観点 結論 根拠（差分/ログ/設定/スクショ等）
Secrets（鍵/トークン/パスワード混入） 問題なし CSS/TS のみ
入力検証（外部入力のバリデーション） 影響なし 入力経路追加なし
認可（権限チェック/境界） 影響なし UI 表示のみ
ログ（PII/秘密情報の出力） 影響なし ログ追加なし

実装と確認のログ（何を触って、何を確認したか）

項目 記録
触った主要箇所（パス/関数/クラス等） TaskListTableDefault / task-list-table.module.css / highlight テスト
実装メモ（変更意図ではなく事実） 選択セル/行の class 付与、hover/selected/row の CSS 定義、回帰テスト追加
実行した確認（コマンド/手動操作/ログ等） unit/lint/build 実行、UI 目視
既知の未確認点（あれば） なし

実行区分（AIが実行したこと／人間が追加で行うこと）

区分 タスク（何をする） 対象（どのサイト/システム） 実行場所（URL/画面/コマンド） 実行方法（どうやって） 入力（必要な情報） 出力（得られるもの/保存先） 証跡（ログ/URL/スクショ等）
AI ハイライト実装 リポジトリ src/components/task-list 直接編集 SSOT 差分 git diff
AI 回帰テスト追加 リポジトリ src/test 直接編集 SSOT テストファイル git diff
AI UI 目視確認 example http://localhost:3001 ブラウザ操作 なし スクショ https://github.com/user-attachments/assets/292dfc60-bcf7-41af-a53f-3e5d11057629
人間 PR説明のスクショ貼付 GitHub PR Description 手動貼付 スクショURL PR説明更新 追加後のPR

補足（Notes）

コードレビューフィードバック対応（Review Feedback Response）

このセクションは「追記」で管理します。

追記（今回分）

  • フィードバック（要約）：なし　対応（何を変えた）：-　対象（ファイル/行/Commit）：-　状態（対応済/保留/却下）：対応済

既存ログ（前回まで）

<<keep_existing_lines>>
Original prompt

This section details on the original issue you should resolve

<issue_title>[IMPLEMENT] Task Table セルハイライト（Selected / Hover / Row）を実装する</issue_title>
<issue_description>## 🎯 目的
DESIGN #109 で定義された Task Table セルハイライト仕様を実装する。

本 Issue は上記設計書を唯一の仕様源（SSOT）とする。
設計に未記載の仕様は追加しない。

🧱 実装スコープ

In Scope

  • SelectedCell（濃色＋2px相当強調）
  • HoveredCell（Selected より弱い強調）
  • SelectedRow（淡色背景）
  • 優先順位の担保: Selected > Hover > Row
  • 既存選択ロジックの維持（挙動変更禁止）

Out of Scope

  • 編集モード仕様追加
  • 未選択モード仕様変更
  • 複数選択 / 範囲選択
  • 仮想化構造変更

📂 想定変更ファイル

  • src/components/task-list/task-list-table.tsx
  • src/components/task-list/task-list-table.module.css
  • src/test/task-list-table-highlight.test.tsx（新規）

🧠 実装方針（設計準拠）

  • editingState を SSOT として選択セル・行を算出
  • hover は React state を持たず CSS :hover で実装
  • 枠線は box-shadow（レイアウト崩れ防止）
  • CSS Modules で優先度を明示的に制御

✅ Done 定義

  • SelectedCell が濃色で表示される
  • HoveredCell が弱い強調で表示される
  • SelectedRow が淡色表示される
  • 優先順位が維持される（Selected > Hover > Row）
  • 既存テストがすべて通過
  • lint / build / unit test 成功
  • WCAG 2.1 コントラスト確認

🔁 ロールバック

CSS class 追加部分を revert すれば復元可能（非破壊変更）。

Fixes LevelCapTech/gantt-task-react-custom#109</issue_description>

Comments on the Issue (you are @copilot in this section)

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

@LevelCapTech
fix: タスクテーブルのセルハイライト実装
1c9f02d 
選択セル/行とホバーのハイライトを追加し、
回帰テストでクラス付与を検証した。

Co-authored-by: LevelCapTech <99854263+LevelCapTech@users.noreply.github.com>
Copilot AI changed the title [WIP] Implement cell highlights for task table feat: タスクテーブルのセルハイライト実装 Feb 19, 2026
Copilot AI requested a review from LevelCapTech February 19, 2026 05:48
@LevelCapTech LevelCapTech marked this pull request as ready for review February 19, 2026 05:51
@LevelCapTech LevelCapTech added the ✨ 新機能 新しい機能の提案や要求に適用します。新規アイデアや機能拡張に関するイシューやプルリクエスト。 label Feb 19, 2026
@LevelCapTech LevelCapTech requested a review from Copilot February 19, 2026 05:52
Copilot AI reviewed Feb 19, 2026
View reviewed changes
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull request overview

This PR implements visual cell highlighting for the Task Table, adding distinct visual feedback for selected cells, hovered cells, and selected rows. The implementation follows the design specification (SSOT) defined in .github/copilot/plans/109-task-table-cell-highlight.md and maintains existing selection/editing behavior while only adding visual styling.

Changes:

  • Added CSS classes for selected cells (taskListCellSelected), selected rows (taskListTableRowSelected), and hover state with proper priority handling (Selected > Hover > Row)
  • Enhanced TaskListTableDefault component to apply selection classes based on editingState with validation for column visibility
  • Added regression tests to verify highlight behavior and edge cases (non-visible columns)

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.

File Description
src/test/task-list-table-highlight.test.tsx New test file verifying selected cell/row class application and non-visible column handling
src/components/task-list/task-list-table.tsx Added hasValidSelection logic and conditional class names for selected cells and rows
src/components/task-list/task-list-table.module.css Added CSS for selected/hover states using box-shadow to avoid layout shifts

@LevelCapTech LevelCapTech merged commit 61802eb into main Feb 19, 2026
7 checks passed
@LevelCapTech LevelCapTech deleted the copilot/implement-task-table-cell-highlight branch February 19, 2026 06:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot Copilot left review comments

+1 more reviewer

@LevelCapTech LevelCapTech LevelCapTech approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

@LevelCapTech LevelCapTech

Copilot code review Copilot

Labels

✨ 新機能 新しい機能の提案や要求に適用します。新規アイデアや機能拡張に関するイシューやプルリクエスト。

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[IMPLEMENT] Task Table セルハイライト（Selected / Hover / Row）を実装する

2 participants

@LevelCapTech