1966430 - Support adding images to moz-promo

Status: RESOLVED FIXED

(Toolkit :: UI Widgets, task)

Description

[Hanna Jones [:hjones]]

One of the main differences between moz-promo and moz-message-bar is that consumers will have the ability to add their own images/iconography to the message and will have more control over where the image is positioned.

This bug covers the work involved in adding image support as well as making it possible to change the position of the image. We'll need to support images at the start, end, and possibly in the center of the promo. In the center case the image will be positioned below the text.

There are a couple of ways we could go about this. What I think we'll want to do is support an imageSrc with a default position (maybe start) as well as an imagePosition property/attr that can be configured to change that position. We've done something similar for moz-button in bug 1948106.

Based on the current designs, it looks like we'll want the image to be background cover so that it doesn’t scale but shows more as the promo grows (at least in the start and end cases).

Comment 1

[Tim Giles [:tgiles]]

Attachment: Bug 1966430 - Add support for images in moz-promo. r=#recomp-reviewers

These changes add support for using an image in the moz-promo element.
The image is set using "imageSrc" and you can place the image using
"imageAlignment". The valid values are "start", "end", and "center".

The image used in the promo is currently using "background-image" in
order to get the resizing to behave more like the expected behavior,
however the design for this element is not finalized. This means this
image could change to using <img> if that better suits our need.

The stories added show the various configurations of the image and
alignment, as well as a square image and a rectangular image.

The "test_moz_promo.html" was updated to assert this new image support.

Comment 2

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/c78cf1daaeec
https://hg.mozilla.org/integration/autoland/rev/360e4a4f1525
Add support for images in moz-promo. r=reusable-components-reviewers,desktop-theme-reviewers,hjones

Comment 3

[Serban Stanca [:SerbanS]]

https://hg.mozilla.org/mozilla-central/rev/360e4a4f1525