Docs Search Dialog の UI 改善と挙動統一

Docs サイトの検索ダイアログが視覚的に洗練され、操作性が向上しました。間隔・アイコンサイズ・空状態の表現を統一し、検索クエリの発生元をトラッキングするロジックも加えています。

背景

検索ダイアログは、以前は余白が広くアイコンが過剰に大きく、結果一覧と空状態のビジュアルが一貫していませんでした。PR #2490 で大幅なリデザインが行われましたが、細部の調整が残っていました。本来期待される UI ガイドライン（コンパクトな間隔、統一されたフォントサイズ）に合わせるための最終タッチです。

技術的な変更

テンプレート調整として packages/webawesome/docs/_includes/search.njk のクラスを更新し、リスト項目の間隔を wa-gap-2xs に、アイコンに wa-font-size-m、タイトルに wa-font-size-s を付与しました。これにより、全体的にスッキリした配置となります。

@@ -19,68 +19,68 @@
-          <ul id="site-search-suggested-listbox" class="wa-stack wa-gap-3xs" role="presentation">
+          <ul id="site-search-suggested-listbox" class="wa-stack wa-gap-2xs" role="presentation">
@@
-                <wa-icon class="site-search-result-icon de-emphasize" name="block" variant="regular"
+                <wa-icon class="site-search-result-icon de-emphasize wa-font-size-m" name="block" variant="regular"
@@
-                  <div class="site-search-result-title wa-heading-m">Components</div>
+                  <div class="site-search-result-title wa-font-size-s">Components</div>

スクリプト拡張として packages/webawesome/docs/assets/scripts/search.js に lastQuerySource 変数を導入し、検索クエリが入力（typed）か選択（suggested）かを記録します。trackQuerySubmit の送信データに source フィールドを追加し、分析基盤でクエリ発生元を把握できるようにしました。

@@
-let lastTrackedQuery = '';
+let lastTrackedQuery = '';
+let lastQuerySource = 'typed';
@@
-    result_count: matches,
-    has_results: matches > 0,
-    result_selected: resultSelectedValue,
+    result_count: matches,
+    has_results: matches > 0,
+    result_selected: resultSelectedValue,
+    source: lastQuerySource,

表示ロジックでも emptyState 要素を取得し、show 関数で空状態の表示を管理できるようにしました。さらに、最近検索のリンク要素のクラスを wa-gap-s に変更し、アイコンサイズを wa-font-size-m に統一しました。

@@
-    a.className = 'wa-cluster wa-flex-nowrap wa-gap-m';
+    a.className = 'wa-cluster wa-flex-nowrap wa-gap-s';
@@
-      <wa-icon class="site-search-result-icon de-emphasize" name="clock-rotate-left" variant="regular" aria-hidden="true"></wa-icon>
+      <wa-icon class="site-search-result-icon de-emphasize wa-font-size-m" name="clock-rotate-left" variant="regular" aria-hidden="true"></wa-icon>
@@
-      <div class="site-search-result-title wa-heading-m"></div>
+      <div class="site-search-result-title wa-font-size-s"></div>

CSS 微調整として packages/webawesome/docs/assets/styles/search.css から不要な大きめフォントサイズ宣言を削除し、アイコンは全体で var(--wa-font-size-m) に委ねる形にしました。

@@
-    font-size: var(--wa-font-size-l);

設計判断

コンポーネント再利用の方針で、既存の wa-cluster 系ユーティリティを活用しつつ、間隔とサイズを微調整するだけに留めました。新しいコンポーネントを追加せず、既存クラスのスケール変更でデザイン統一を実現した点がポイントです。

トラッキングの拡張は、検索体験の改善に向けたデータ収集を意図しています。source フィールドはクエリ入力方法の可視化を可能にし、今後の UI 改善やヘルプコンテンツの最適化に活かせます。実装上は最小限の変数追加とオブジェクト拡張にとどめ、既存ロジックへの侵入度を低く保ちました。

まとめ

本 PR は Docs サイト検索ダイアログの UI と挙動を細部まで揃え、ユーザーが直感的に利用できるようにした変更です。間隔・アイコンサイズの統一、空状態の可視化、検索クエリの発生元トラッキングの追加により、デザイン一貫性と分析可能性が同時に向上しています。