フォームコントロールのサイズスケールを5段階に拡張(xs/s/m/l/xl)
WebAwesomeのフォームコントロール群が従来の3段階(small/medium/large)から5段階(xs/s/m/l/xl)のサイズスケールへ拡張されました。旧来の長形式値は非推奨となりつつも後方互換性が維持されており、段階的な移行が可能な設計になっています。
背景
#1605 で提起されていた、UIコントロールのサイズ選択肢の不足が今回の変更の直接の動機です。従来の small/medium/large の3段階では、ナビゲーションバーの小さなアイコンボタンから強調されたコールアウトまで、多様なUIコンテキストに対応しきれませんでした。
対象となったコンポーネントは広範囲に渡ります:
-
wa-button/wa-button-group wa-callout-
wa-checkbox/wa-radio/wa-radio-group wa-color-picker-
wa-input/wa-number-input/wa-textarea wa-selectwa-sliderwa-switchwa-tagwa-rating
新しいサイズスケールの採用により、デザインシステム全体でより細かい粒度のサイズ制御が可能になります。
技術的な変更
サイズ値の表記が短縮形に統一され、xs・s・m・l・xl の5段階が正式なAPIとして確立されました。旧来の長形式(small/medium/large)は引き続き動作しますが、コンソール警告を発するdeprecated扱いとなっています。スタイルシート側では4.0までの後方互換性のために small|medium|large の属性参照も維持されます。
ドキュメントやサンプルコード全体で値の置き換えが行われています:
変更前:
<wa-button size="small">Small</wa-button>
<wa-button size="medium">Medium</wa-button>
<wa-button size="large">Large</wa-button>
変更後:
<wa-button size="xs">Extra Small</wa-button>
<wa-button size="s">Small</wa-button>
<wa-button size="m">Medium</wa-button>
<wa-button size="l">Large</wa-button>
<wa-button size="xl">Extra Large</wa-button>
CSSユーティリティクラス側でも .wa-size-[s|m|l] から .wa-size-[xs|s|m|l|xl] へとドキュメントが更新されており、属性とクラスの両方でサイズ指定が統一されています。また、ビジュアルテストファイル(visual-tests/alignment.njk・visual-tests/size.njk)にも xs と xl の検証ケースが追加され、新サイズが正式にテストカバレッジに含まれました。
設計判断
短縮形への移行と後方互換性の両立が今回の設計上の核心です。旧値を即時廃止するのではなく「コンソール警告つきのdeprecation」とすることで、既存のコードベースを即座に壊さずに移行を促す戦略が取られています。スタイルシートには4.0まで旧属性セレクタを残すとPRに明記されており、将来のメジャーバージョンでのクリーンアップを見据えた段階的廃止の意図が読み取れます。
短縮形(s/m/l)はCSSユーティリティクラス(.wa-size-s 等)の命名規則と既に一致しており、今回の変更で属性値とクラス名の表記が揃ったことになります。この一貫性はAPIの学習コストを下げる効果があります。
まとめ
今回の変更は単なる値の追加にとどまらず、コンポーネントAPIの表記体系をCSSユーティリティクラスと統一する意味も持ちます。旧値のdeprecationとスタイルシートの後方互換維持を組み合わせた設計により、既存ユーザーへの影響を最小化しながら、より表現力の高いサイズスケールへの移行路が整備されました。