refactor(ui): DownloadButton の inline-flex ラッパー span を削除する

[fumtas1k]

背景

PR #236 (#231) の再レビューで Should-fix #2 として指摘:

src/components/ui/DownloadButton.tsx:55: inline-flex ラッパー span が冗長です。ActionButton 自身が inline-flex items-center を持つため、<DownloadIcon /> {label} を直接 children に置けば 1 段削減できます（gap が必要なら ActionButton 側 className か <span> 区切り文字で代替）。

現状:

<ActionButton ...>
  <span style={{ display: 'inline-flex', alignItems: 'center', gap: '0.375rem' }}>
    <DownloadIcon />
    {label}
  </span>
</ActionButton>

ActionButton の button 要素に既に inline-flex items-center が付いているため、children 直下の SVG とテキストは flex item として並ぶ。間隔 (gap: 0.375rem) のためだけに span を 1 段噛ませているのが冗長。

ゴール

DownloadButton から wrapping span を撤廃し、<DownloadIcon /> と label を ActionButton の直接 children にする。アイコンとテキストの間隔は別途確保する。

アプローチ案

案 A: ActionButton 側に gap を追加

ActionButton の className に gap-1.5 (= 0.375rem) を追加。全 variant の見た目に影響するため要確認:

• 現在の各 ActionButton 利用箇所 (CountInput / ConfigConverter / qr-ticket/VerifyTab / qr-ticket/GenerateTab) は children を 1 つしか渡していないため gap が空回りする → 視覚的に変化なし、安全
• DownloadButton ラッパー経由のみ children 2 個になり、gap が効く

案 B: ActionButton に className pass-through を追加

ActionButton API を拡張して className マージを許可。<ActionButton className="gap-1.5"> のように呼び側で gap を指定。柔軟だが API 表面が増える。

案 C: DownloadIcon に marginRight を持たせる

marginRight: '0.375rem' を icon の inline style に追加。「icon は常に label を従える」前提を icon に押し付ける形になり、責務漏れがやや気になる。

案 D: 別途仕切り文字 {' '} か   で代替

シンプルだが、CSS gap に比べて柔軟性に欠ける。レビュアーも候補として挙げている。

推奨

案 A（ActionButton 側に gap を追加）が最も筋が良い。理由:

• 既存利用箇所への副作用が無い（children 1 個 = gap 空回り）
• DownloadButton から wrapping span を綺麗に除去できる
• 将来別の ActionButton 利用箇所が children 2+ になった場合も自然に動く
• ActionButton API は変えない

ただし docs/ui-conventions.md 2 章「ボタン高さの揃え」など隣接 UI 規約との整合は要確認。

関連

• PR refactor(ui): DownloadButton を ActionButton の特殊化として再構成 (#231) #236 (refactor(ui): DownloadButton を ActionButton の特殊化として再構成 (#162 follow-up) #231) review Should-fix refactor: デザインシステム整備・コード品質改善 #2
• refactor(ui): ActionButton 全 variant の hover 表現を CSS 変数経由 <style> で統合する #238 (ActionButton 全 variant の hover 表現統合) — このとき ActionButton の className を触るので併せて対応するのが効率的

優先度

低。視覚・機能的には問題なく動作している。コード明瞭化のための整理。#238 とまとめて対応するのが効率的。

[fumtas1k]

#238 と同 PR で統合対応推奨

#238 (ActionButton 全 variant hover 表現を CSS 変数経由 <style> で統合) と本 issue の修正範囲が同 commit に収まるため、1 PR で同時対応するのが効率的です。

詳細は #238 のコメント参照。本 issue の対応案 A（ActionButton 側に gap を追加して <span> ラッパー除去）は #238 の .btn-action クラス改修と同 commit にすると自然です。

PR 1.5 (#261) で @layer components の .btn-action 定義が確立されたため実装地盤は整っています。

[fumtas1k]

PR #335 で 案 A (ActionButton に gap-1.5 追加) を試したが、/tools/qr-ticket の VRT で 723 pixels (0.07%) の diff を検出し、user 視覚評価で design 劣化 と判定 (+ 行を追加 周辺の間隔が広く見える) のため受け入れ不可。

評価結果

案	結果
案 A (ActionButton に gap-1.5 追加)	PR #335 で実装→ visual regression で revert
案 B (className pass-through)	API 表面 +1 のコスト
案 C (DownloadIcon に marginRight)	icon に label-spacing 責務、semantic mismatch
案 D (仕切り文字)	hacky

結論: won't fix

issue 本文評価 "低。視覚・機能的には問題なく動作している" の通り、現状の DownloadButton wrapping span は 見た目正常で機能不全なし。cosmetic な refactor のために visual regression リスクを取る ROI なしのため close。将来 ActionButton に類似要件 (children 2+) が増えた段階で API 拡張 (案 B) を再検討。

関連 PR: #335 (close)
review-driven 起源: PR #236 (#231) Should-fix #2