`wa-color-picker`に`placement`属性を追加し、画面端での切れ問題を解消

<wa-color-picker>にplacement属性が追加され、カラーピッカーのポップアップ表示位置をユーザーが明示的に指定できるようになりました。これにより、画面右端などに配置したカラーピッカーが画面外にはみ出すバグを回避できます。

背景

ウィンドウの右端付近に<wa-color-picker>を配置した場合、ポップアップが画面外にはみ出して操作不能になる問題が#2099で報告されていました。

この問題の根本原因は、ポップアップの配置が内部的に"bottom-start"へハードコードされており、開発者がレイアウト上の制約に応じて配置方向を調整する手段がなかったことにあります。placement属性の追加によって、エッジケースでの配置を開発者が制御できるようになりました。

技術的な変更

color-picker.tsにplacementプロパティが追加され、値は<wa-popup>がサポートする12方向をすべてカバーします。デフォルト値は従来の動作を踏襲した'bottom-start'です。

追加されたプロパティの型定義は以下の通りです：

@property({ reflect: true }) placement:
  | 'top'
  | 'top-start'
  | 'top-end'
  | 'bottom'
  | 'bottom-start'
  | 'bottom-end'
  | 'right'
  | 'right-start'
  | 'right-end'
  | 'left'
  | 'left-start'
  | 'left-end' = 'bottom-start';

テンプレート側では、ハードコードされていた文字列リテラルをプロパティ参照に置き換えるだけの最小限の変更が施されています：

変更前:

<wa-popup
  class="color-popup"
  anchor="trigger"
  placement="bottom-start"
  distance="0"
  skidding="0"
  flip

変更後:

<wa-popup
  class="color-popup"
  anchor="trigger"
  placement=${this.placement}
  distance="0"
  skidding="0"
  flip

reflect: trueが指定されているため、placement属性はHTMLの属性とJavaScriptプロパティの両方から操作可能です。また、<wa-popup>には既にflipオプションが有効化されており、指定したplacementが最優先されつつも、ビューポート内に収まるよう自動調整される仕組みはこれまで通り維持されます。

設計判断

この変更により、<wa-popup>が持つ既存のflip機能と組み合わせることで、開発者は優先的な配置を指定しつつ、ビューポートからはみ出す場合には自動的に位置が調整される、という挙動を実現できます。ドキュメントにも「実際の配置はビューポート内に収まるよう変動することがある」と明記されており、placementはあくまで「優先配置」として機能することが示されています。

デフォルト値を'bottom-start'に設定することで、既存の動作が完全に維持されます。既存の<wa-color-picker>を使用しているコードへの影響はありません。

まとめ

本PRは、ハードコードされた配置設定を属性として公開するという最小限の変更で、画面端でのレイアウト崩壊を解消しました。flipによる自動調整と明示的なplacement指定の組み合わせにより、エッジケースへの対応を開発者の責任範囲に開放しながら、デフォルト動作の後方互換性も完全に保っています。