ボタングループのCSSカスタムプロパティをリファクタリング

#2044 で導入されたCSSベースのボタングループ実装に続き、内部カスタムプロパティの命名規則を整理するとともに、ボーダー幅をテーマ変数から動的に参照するよう改善されました。

背景

前PRである#2044では、JavaScriptによるDOM走査に依存していたボタングループのスタイリングを純粋なCSSで実現するリファクタリングが行われました。その際に導入された内部カスタムプロパティには --_wa-button-* という命名規則が採用され、グループ内ボタンのマージン計算にはハードコードされた 1px が使用されていました。

今回のPRはその後続対応として位置づけられており、内部カスタムプロパティの wa プレフィックス除去、ボーダー幅のテーマ変数への統一、そしてドキュメントに残っていたリファクタリング検証用のテスト例の削除が行われています。

技術的な変更

内部カスタムプロパティの命名規則が --_wa-button-* から --_button-* へと変更されました。この変更は button-group.styles.ts、button.styles.ts、button-group.test.ts の3ファイルにまたがって一斉に適用されています。

変更前:

:host([orientation='horizontal']) {
  --_wa-button-horizontal-indent: 1px;
  --_wa-button-horizontal-indent-outlined: calc(var(--wa-border-width-s) * -1);
}

変更後:

:host([orientation='horizontal']) {
  --_button-horizontal-indent: var(--wa-form-control-border-width);
  --_button-horizontal-indent-outlined: calc(var(--wa-form-control-border-width) * -1);
}

インデント量の計算に使用するトークンも --wa-border-width-s から --wa-form-control-border-width へ変更されました。これにより、グループ内ボタンのマージンがフォームコントロールのボーダー幅と連動し、テーマ変更が反映されるようになります。同様に button.styles.ts でも border-width: var(--wa-border-width-s) が border-width: var(--wa-form-control-border-width) に、border-style: var(--wa-border-style) が border-style: var(--wa-form-control-border-style) にそれぞれ更新されています。

テストコードにおいても、ハードコードされた 1px との直接比較が廃止されました。代わりに getComputedStyle で --wa-form-control-border-width の実際の値を取得し、それと照合する形に改められています。

// 変更前
Array.from(allButtons).every(button =>
  expect(button).to.have.style('--_wa-button-horizontal-indent', '1px')
);

// 変更後
Array.from(allButtons).every(button => {
  const themedIndent = getComputedStyle(button).getPropertyValue('--wa-form-control-border-width').trim();
  expect(button).to.have.style('--_button-horizontal-indent', themedIndent);
});

また awesome.css テーマファイルには、accent アピアランスのボタンをボタングループ内で outlined と同様に扱うルールが追加されました。

wa-button-group[orientation='horizontal'] {
  wa-button[appearance='accent'] {
    margin-inline-start: var(--_button-horizontal-indent-outlined);
  }
}
wa-button-group[orientation='vertical'] {
  wa-button[appearance='accent'] {
    margin-block-start: var(--_button-vertical-indent-outlined);
  }
}

設計判断

内部カスタムプロパティの命名規則を --_button-* に統一することで、プロパティ名から wa プレフィックスが除去されました。これにより、内部プロパティは --_* という一貫した規則のみで識別されます。

ボーダー幅のトークンを --wa-border-width-s から --wa-form-control-border-width へ変更した点は、PRのDescriptionに「ensures that it adapts to the theme instead of being hardcoded to 1px」と明記されています。ハードコードされた 1px をテーマ変数で置き換えることで、テーマのカスタマイズがボタンのボーダーとグループのマージン双方に一貫して反映されます。

まとめ

今回の変更は、前回のアーキテクチャ刷新に続く仕上げ作業として、内部プロパティの命名規則の整理とテーマ変数への一元化を行うものです。--_button-* という命名規則と --wa-form-control-border-width への統一により、テーマのカスタマイズ性が向上し、ボーダー幅の変更がボタンスタイル全体に一貫して適用されるようになっています。