1810056 - Spotlight and friends' dismiss button lacks padding

Status: RESOLVED FIXED

(Firefox :: Messaging System, defect, P1)

Description

[Shane Hughes [:aminomancer]]

Compared to the prototype, our dismiss buttons are missing padding. This also seems to indicate that they were intended to be 12px, though I suppose that seems too small, so maybe the designer was just working with a different scaling factor. Basically, the button is 32px and the X icon inside it is 12px. So you've got a 12px icon with 10px padding.

Comment 1

[Shane Hughes [:aminomancer]]

Not sure if we want to make the icon 12px, that seems too small. Maybe we just want proportional padding. So if the padding is 10px for a 12px icon, then I guess we'd want 12.5px padding for our 15px icon. Probably wise to round that either down or up, whichever looks better

Comment 2

[Russell Chan]

Attachment: Bug 1810056 - Add padding for aboutwelcome/spotlight dismiss button. r=#omc-reviewers

Comment 3

[Russell Chan]

Attachment: Bug 1810056 - Add padding for aboutwelcome/spotlight dismiss button. r=#omc-reviewers

Comment 4

[Shane Hughes [:aminomancer]]

Hey Gabrielle! This isn't super urgent or anything, but we have a question about the size of the x icon in the dismiss button. In the figma prototype, the icon dimensions are 12px by 12px (with 10px padding). But in firefox, when we do a 12px icon, it comes out looking much smaller relative to the rest of the surface. I guess the device pixel ratio differs between figma and firefox somehow, so that 12px in figma appears larger than 12px in firefox.

The dismiss button we currently have on tree (based on the legacy spotlight design) is 15px. And that looks correct and proportional to the split multistage spotlight design. So, we were thinking we'd do a 15px icon with 12.5px padding (aspect ratio 12.5:15 is proportional to 10:12) which visually looks closest to the figma prototype to our eyes. But I figured we should ask before landing, to inquire whether there's anything special about the exact 12px value or if we're just aiming for visual fidelity. Thanks!

Comment 5

[Shane Hughes [:aminomancer]]

The issue with the icon size actually seems to be that the designer was working with the original "X" vector path, and made its dimensions 12px, but on tree we have a close button icon that's 14px in a 16px artbox. So the engineer chose 15px in order to compensate for the additional padding. At this point I think it makes sense to just clamp the button to 32px and make the "X" icon (a background image) 15px, with no button padding. If we want to make it perfectly mirror the Figma prototype, we could add a new "X" icon to the tree that is 12px in a 12px viewbox, and use that instead.

Comment 6

[Gabrielle Lussier [:glussier]]

(In reply to Shane Hughes [:aminomancer] from comment #5)

The issue with the icon size actually seems to be that the designer was working with the original "X" vector path, and made its dimensions 12px, but on tree we have a close button icon that's 14px in a 16px artbox. So the engineer chose 15px in order to compensate for the additional padding. At this point I think it makes sense to just clamp the button to 32px and make the "X" icon (a background image) 15px, with no button padding. If we want to make it perfectly mirror the Figma prototype, we could add a new "X" icon to the tree that is 12px in a 12px viewbox, and use that instead.

Love this solution 🙏🏼 Jules from design systems is also looking into how we can fix this for future experiments.

Comment 7

[Russell Chan]

Attachment: Dismiss button with size 16px

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/517cac60922d
Add padding for aboutwelcome/spotlight dismiss button. r=omc-reviewers,aminomancer

Comment 9

[Iulian Moraru]

https://hg.mozilla.org/mozilla-central/rev/517cac60922d