フォームコントロールのサイズスケールを5段階に拡張(xs/s/m/l/xl)

shoelace-style/webawesome

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-select
  • wa-slider
  • wa-switch
  • wa-tag
  • wa-rating

新しいサイズスケールの採用により、デザインシステム全体でより細かい粒度のサイズ制御が可能になります。

技術的な変更

サイズ値の表記が短縮形に統一され、xssmlxl の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.njkvisual-tests/size.njk)にも xsxl の検証ケースが追加され、新サイズが正式にテストカバレッジに含まれました。

設計判断

短縮形への移行と後方互換性の両立が今回の設計上の核心です。旧値を即時廃止するのではなく「コンソール警告つきのdeprecation」とすることで、既存のコードベースを即座に壊さずに移行を促す戦略が取られています。スタイルシートには4.0まで旧属性セレクタを残すとPRに明記されており、将来のメジャーバージョンでのクリーンアップを見据えた段階的廃止の意図が読み取れます。

短縮形(s/m/l)はCSSユーティリティクラス(.wa-size-s 等)の命名規則と既に一致しており、今回の変更で属性値とクラス名の表記が揃ったことになります。この一貫性はAPIの学習コストを下げる効果があります。

まとめ

今回の変更は単なる値の追加にとどまらず、コンポーネントAPIの表記体系をCSSユーティリティクラスと統一する意味も持ちます。旧値のdeprecationとスタイルシートの後方互換維持を組み合わせた設計により、既存ユーザーへの影響を最小化しながら、より表現力の高いサイズスケールへの移行路が整備されました。

記事メタデータ

Generated by:
Claude Sonnet 4.6 for DiffDaily
LLM Trace:
00ee9e28

この記事はAIによって自動生成されています。内容の正確性については、必ずソースコードやPRを確認してください。

品質レビュー結果

Review Status:
承認済み
Review Count:
1回
Reviewed by:
Gemini 2.5 Pro for DiffDaily

Review Criteria:

記事構成 ✓ PASS

Title, Context, Technical Detailの存在と明確さ

「リード文(総論)→背景・技術・設計(各論)→まとめ(結論)」という構成が明確で、理想的な構造です。

カスタムMarkdown構文 ✓ PASS

シンタックスハイライト・GitHubリンク記法の正確性

ファイル名付きシンタックスハイライト、PR・Issue番号のリンク記法ともに正しく使用されています。

対象読者への適合性 ✓ PASS

エンジニア向けの適切な技術レベルと表現

コンポーネントライブラリのAPI変更というトピックを、専門用語を適切に用いてエンジニア向けに解説しており、対象読者に完全に適合しています。

パラグラフ・ライティング ✓ PASS

トピックセンテンス・1段落1トピック・段落長

各セクションが総論→各論で構成され、各段落がトピックセンテンスで始まるなど、パラグラフ・ライティングの原則が徹底されており、非常に読みやすいです。

Diff内容との照合 ✓ PASS

コードブロックとDiff内容の一致

記事内で引用されているコード例は、提供されたDiff内の`docs/docs/components/button.md`の変更と完全に一致しており、正確です。

技術用語の正確性 ✓ PASS

技術用語の正確な使用

「非推奨(deprecated)」「後方互換性」「属性セレクタ」などの技術用語が、PRの文脈に沿って正確に使用されています。

説明の技術的正確性 ✓ PASS

技術的主張の正確性と論理性

旧値がコンソール警告付きの非推奨扱いであることや、4.0まで後方互換性が維持される点など、PR Descriptionの技術的詳細を正確に説明できています。

事実の突合 ✓ PASS

PR情報による主張の裏付け(ハルシネーション検出)

記事内のすべての主張は、PRのタイトル、Description、Diffの内容によって裏付けられており、ハルシネーションは検出されませんでした。

数値・固有名詞の確認 ✓ PASS

PR番号・コミットID・バージョン等の正確性

PR番号(#2319)、Issue番号(#1605)、バージョン番号(4.0)など、すべての数値・固有名詞が正確です。

タイトル・説明との一致 ✓ PASS

記事タイトル・説明とPR内容の一致

記事のタイトルはPR「Add XS and XL sizes to form controls and more」の内容を的確に要約しており、主題が一致しています。

外部知識の正確性 ✓ PASS

PRに記載のない外部知識(LTS、サポート状況など)の不使用

「4.0まで」という将来のバージョンに関する言及はPR Descriptionに記載されており、PR情報に基づかない外部知識の持ち込みはありません。

時間表現の正確性 ✓ PASS

時間表現がPR情報と一致しているか

「非推奨となりつつも」「将来のメジャーバージョンでのクリーンアップを見据えた」など、PRの状況を反映した正確な時間表現が使われています。