1921482 - moz-button icon should be stable when adding or removing a label

Status: NEW

(Toolkit :: UI Widgets, defect, P3)

Description

[Mark Striemer [:mstriemer]]

Now that the icon variant of moz-button can have a label, it would be good for the icon to always be positioned with the same padding in both the labelled and unlabelled versions.

Currently the unlabelled version is 32x32 with the icon centred, this looks great! The labelled version has the icon positioned as if it were text, this also looks great! However, when an icon has text added to it, due to some responsive change most likely such as expanding its container so the text now fits, then the positioning changes, this does not look great as the icon will shift a few pixels :(

This was handled in a few places in a recent sidebar change and specifically for a moz-button

The general idea would be to position the unlabelled icon in the centre of the button using padding, rather than relying on flexbox. This means when we add a label we can keep the same padding and the icon won't shift.

.button-background[type~=icon],
.button-background:has(img) {
  /* Use this regardless of if we are labelled or not so the icon doesn't shift */
  padding-inline: calc((var(--button-size-icon) - var(--icon-size-default)) / 2 - var(--border-width));
}

Comment 1

[Mark Kennedy [:mark]]

Attachment: Bug 1921482 - Fix moz-button icon alignment when adding or removing a label r=#recomp-reviewers

• Move alignment fix from custom sidebar implementation into moz-button

Comment 2

[Mark Kennedy [:mark]]

Hey Mark! After team discussion, it appears this causes some visual changes to the buttons that are not desired at the moment. The patch also raised some concerns about performance. So unassigning myself for now until we decide on a path forward.