text‑transform ベースのテキストユーティリティを追加
text‑transform 系のユーティリティクラス wa-text-uppercase、wa-text-lowercase、wa-text-capitalize が新たに導入されました。これにより、テキストの大文字化・小文字化・単語先頭大文字化を CSS クラスだけで簡潔に適用できるようになります。ドキュメントとスタイルシートも同時に拡充され、利用者は既存の wa-text- 系ユーティリティと統一的な命名で組み合わせられます。
背景
既存の wa-text- 系ユーティリティはテキスト揃えや折り返しに限定され、文字ケースの変換はプロジェクトごとにカスタム CSS を書く必要がありました。PR の説明では、汎用的に使える 3 つの変換（大文字・小文字・先頭大文字）だけを提供し、full-width などのニッチなケースは除外すると明言されています。さらに、直前の #2403 で採用された「フラットな wa-text- 命名規則」を踏まえ、クラス名はプロパティ名を省略して値だけで表す形に統一されました。これにより、利用者は wa-text-uppercase のように直感的にクラスを選択でき、学習コストが低減します。
技術的な変更
CSS 定義が packages/webawesome/src/styles/utilities/text.css に追加され、各クラスが標準 CSS の text-transform プロパティを設定します。
.wa-text-uppercase {
text-transform: uppercase;
}
.wa-text-lowercase {
text-transform: lowercase;
}
.wa-text-capitalize {
text-transform: capitalize;
}
ドキュメントは packages/webawesome/docs/docs/utilities/text.md に Transform セクションを新設し、テーブル形式でプレビュー例を掲載しました。また、アクセシビリティに関する注意書きも添えられ、視認性への配慮が明示されています。
## Transform
Use these classes to change the case of text. They apply standard CSS `text-transform` values.
| Class Name | Preview |
| -------------------- | --------------------------------------------------------- |
| `wa-text-uppercase` | <div class="wa-text-uppercase">Five boxing wizards</div> |
| `wa-text-lowercase` | <div class="wa-text-lowercase">Five boxing wizards</div> |
| `wa-text-capitalize` | <div class="wa-text-capitalize">Five boxing wizards</div> |
:::info
Large blocks of uppercase text are harder for everyone to read and especially difficult for folks with dyslexia. Reserve it for buttons, badges, or short headings.
:::
** changelog** も packages/webawesome/docs/docs/resources/changelog.md に追記され、リリース情報として新ユーティリティが明示されています。
:::added
- Added the `wa-text-uppercase` text utility class for transforming text to uppercase
- Added the `wa-text-lowercase` text utility class for transforming text to lowercase
- Added the `wa-text-capitalize` text utility class for capitalizing the first letter of each word
:::
設計判断
今回の主要な設計判断は フラットなクラス名への統一 です。レビューでは wa-text-transform-uppercase などプロパティ名を含む冗長な名称が指摘され、wa-text-{value} のシンプルな形へ変更されました。この方針は、#2403 で決定された命名規則と整合性を保ち、全テキストユーティリティが同一パターンで扱えるようにする狙いがあります。加えて、wa-text-none のような none 値 は意味が曖昧で利用シーンが限定的と判断され、当面は除外しましたが、実装は軽量であるため将来的に需要が出た際には容易に再導入可能です。これらの判断は、シンプルさと拡張性のバランスを取るためのトレードオフとして明示されています。
まとめ
wa-text-uppercase、wa-text-lowercase、wa-text-capitalize の 3 クラスが追加され、テキストケース変換がユーティリティクラスだけで完結できるようになりました。フラットな命名規則と none の除外は、コードベースの一貫性と将来的な拡張性を両立させる設計判断です。ドキュメントと changelog への追記により、利用者は即座に新機能を把握し、適切な場面で活用できるようになります。