テキスト整列ユーティリティの追加とクラス名フラット化

2026年06月03日 02:59 JST shoelace-style/webawesome

https://github.com/shoelace-style/webawesome/pull/2403

WebAwesome v3.7.0 では、テキスト配置を行うユーティリティクラスが四つ新規追加され、既存のラップ系ユーティリティの名前が平坦化されました。これにより、書字方向に依存しない論理的な text‑align が簡潔なクラス名で利用でき、同時に過去のクラス名は互換性を保ちつつ段階的に廃止できます。

背景

WebAwesome のテキスト系ユーティリティは従来、wa-text-wrap-* のようにプロパティ名を前置した冗長な命名が主流でした。PR #2404 のレビューで「wa-text-{property}-{value} は可読性が低い」という指摘があり、主要デザインシステム（Bootstrap、Tailwind 等）を調査した結果、値だけで表すフラットな名前空間 が広く採用されていることが判明しました。そこで、wa-text-* という単一プレフィックスに統一し、text-align 用の logical 値（start/end）を追加する方向へ設計がシフトしました。

技術的な変更

新規テキスト配置ユーティリティ

wa-text-start – text-align: start
wa-text-center – text-align: center
wa-text-end – text-align: end
wa-text-justify – text-align: justify

これらは 論理的 な text-align 値を使用し、文書の direction が ltr でも rtl でも自動的に適切な配置に切り替わります。実装は packages/webawesome/src/styles/utilities/text.css に新しいセレクタ .wa-text-start 〜 .wa-text-justify を追加する形で行われ、他のユーティリティと同様に @supports でフォールバックが提供されます。

ラップユーティリティのクラス名フラット化

wa-text-wrap-nowrap → wa-text-nowrap
wa-text-wrap-balance → wa-text-balance
wa-text-wrap-pretty → wa-text-pretty

元の wa-text-wrap-* は エイリアス として残存し、ドキュメント上は「deprecated」マークが付与されています。text.css では新しいクラス名と旧クラス名の両方に同一の text-wrap ルールが適用され、互換性が維持されています。

ドキュメント更新

docs/docs/utilities/text.md に Alignment セクションが新設され、各クラスのプレビューが掲載されました。
旧ラップ系クラスの表は新しい名前に差し替え、エイリアス情報と廃止告知を追記しました。
docs/docs/resources/changelog.md では新規クラスとクラス名変更がリスト化され、バージョン 3.7.0 の変更点として明示されています。

設計判断

今回の変更は 「フラット命名」 を採用することで、クラス名の長さと冗長さを削減し、UI 開発時の可読性を向上させました。設計上のトレードオフとしては、既存ユーザーへの影響を最小化するために旧クラス名をエイリアスとして残した点です。このアプローチは後方互換性を保ちつつ、将来的なメジャーリリースでのクラス名統廃合を容易にします。また、text-align に logical 値を採用したことは、国際化対応を自動化する設計上の利点を提供します。UI フレームワーク全体で命名規則を統一する方針が明確に示されたと言えます。

まとめ

本 PR は、テキスト配置ユーティリティの追加とクラス名の平坦化という二本柱で、可読性・国際化・後方互換性 を同時に高めました。新しい wa-text-* 系は論理的 text-align をシンプルに適用でき、旧ラップ系クラスはエイリアスとして残すことで既存実装への影響を回避しています。これにより、開発者はより直感的にテキストユーティリティを使用でき、次期メジャーでのクラス名整理もスムーズに進むでしょう。