ボタンから `line-height` を除去し、複雑なコンテンツの表示崩れを解消

ボタンの line-height に設定されていた計算式が、複雑なコンテンツを内包する場合にレイアウト崩れを引き起こしていました。wa-button とネイティブボタンの両方からこのプロパティを削除し、inline-flex コンテナ本来のセンタリング機能に委ねる形に整理されました。

背景

ボタンのスタイルには line-height: calc(var(--wa-form-control-height) - var(--wa-form-control-border-width) * 2) という計算式が設定されており、複雑なコンテンツをボタン内に配置した場合にこの line-height が意図しない高さの拡張を引き起こし、ビジュアルの崩れにつながっていました。

PR 添付のスクリーンショットを見ると、変更前はボタンの高さが余分に膨らんでいる様子が確認できます。ボタンはすでに inline-flex コンテナとして定義されており、子要素を縦横両方向でセンタリングする能力を持っています。PRでは「ボタンは inline-flex コンテナとして既に両方向でコンテンツをセンタリングしているため、line-height は必要ない」と説明されています。

技術的な変更

変更は2ファイルで各1行の削除のみで構成されており、追加行はありません。

button.styles.ts（wa-button コンポーネント）の変更:

     font-family: inherit;
     font-size: inherit;
     font-weight: var(--wa-font-weight-action);
-    line-height: calc(var(--wa-form-control-height) - var(--wa-form-control-border-width) * 2);
     height: var(--wa-form-control-height);
     width: 100%;

native.css（ネイティブボタン）の変更:

       font-family: inherit;
       font-size: var(--wa-form-control-value-font-size);
       font-weight: var(--wa-font-weight-action);
-      line-height: calc(var(--wa-form-control-height) - var(--border-width) * 2);
       text-decoration: none;
       vertical-align: middle;
       white-space: nowrap;

height: var(--wa-form-control-height) によるボタン高さの制御は維持されており、外形寸法は変わりません。line-height の削除によって、テキスト単独のシンプルなボタンでも inline-flex のセンタリングが引き続き機能します。

設計判断

wa-button コンポーネントとネイティブボタンの 両方を同時に修正 する方針が採られました。

button.styles.ts と native.css の2ファイルを同一PRで変更することで、カスタムコンポーネントとネイティブ要素間のスタイル一貫性が保たれています。変更内容はプロパティの削除のみであり、代替値への置き換えは行われていません。

まとめ

inline-flex によるセンタリングが既に機能している状況では、line-height の計算式は複雑なコンテンツで副作用を生む要因になっていました。今回の1行削除×2ファイルという最小限の変更は、wa-button とネイティブボタン双方の表示一貫性を同時に改善しています。