Fix button icon centering on Firefox for xs size

Firefox rendered the slotted <wa-icon> inside a <wa-button size="xs"> off‑centre, breaking visual symmetry for small icon‑only buttons.

背景

Firefox’s rendering of xs‑size icon buttons was misaligned because the label flex container only centered its children vertically.

The original styles defined .is-icon-button .label { display: flex; } and .label::slotted(wa-icon) { align-self: center; }, which aligns the icon along the cross‑axis (vertical) but leaves the inline axis (horizontal) uncontrolled, causing a few‑pixel shift in Firefox.

Consequently, developers resorted to the workaround <wa-icon auto-width> to force the host to match the SVG’s intrinsic width, a pattern that broke the unified API surface.

技術的な変更

The fix adds justify-content: center to the label flex container, ensuring horizontal centering of the slotted icon host.

@@ -278,6 +278,11 @@ export default css`

   .is-icon-button .label {
     display: flex;
+    /* Center the slotted icon horizontally so the icon sits in the
+       middle of the square label regardless of the icon host's
+       intrinsic width. Without this, Firefox renders the icon off-
+       centre at small sizes (e.g. size="xs"). */
+    justify-content: center;
   }

   .label::slotted(wa-icon) {

The added comment explains the rationale and references the Firefox‑specific symptom.

With justify-content: center, the label now aligns the icon host along both axes, matching Chromium‑based browsers’ behaviour while keeping the existing align-self: center for vertical alignment.

No other files change, and the component’s API remains untouched; the auto-width attribute is no longer required for correct rendering.

設計判断

The change prefers adjusting existing layout rules over introducing new attributes.

By extending the .is‑icon‑button .label rule, the fix leverages the component’s existing flex‑based layout, minimizing CSS surface area and preserving backward compatibility.

Alternative approaches, such as adding a new auto-width‑style flag or creating a browser‑specific stylesheet, were rejected to keep the component’s API stable and avoid branching logic.

Thus, the chosen solution adheres to the library’s design principle of incremental CSS adjustments that do not alter public component contracts.

まとめ

Adding justify-content: center resolves the Firefox‑only misalignment of xs‑size icon buttons without affecting other browsers or requiring developer workarounds, illustrating a minimal‑impact layout fix that respects existing component semantics.