Open Bug 1942110 Opened 28 days ago Updated 2 days ago

Support icons in moz-box-item

Categories

(Toolkit :: UI Widgets, enhancement)

enhancement

Tracking

()

People

(Reporter: mstriemer, Unassigned)

References

(Blocks 1 open bug)

Details

(Whiteboard: [recomp])

The moz-box-item element should support setting an icon with the iconsrc attribute. We may want to support some other attribute or a blank iconsrc to allow setting the icon through CSS; this attribute should be consistent with other elements that support iconsrc.

We have conflicting mocks for this, confirm the design with UX before implementing this

If we implement icon support as part of the base class in bug 1946596 then this may be a dupe. Jules do we want the description to flow under the icon or to be indented and only go under the label (like what we do with our input elements)? I think the search shortcuts might have been the exception where the description was nested under the icon, but now it looks like a third option where the icon is vertically centered next to the label and description 🤔

Flags: needinfo?(jules)

Great inconsistency find y'all. Let's flow that description under the icon. I fixed that in the Figma too.

Unfortunately we still have the second variant which is what Hanna pointed out above. For things like Search, we noticed 16x16 icon was too tiny since we're using favicons (they tend to be detailed). So I came up with a variant that takes 24x24 favicons and in that case its almost like Label + description are their own div, and image is separate. Funnily enough in this variant I kept the other icons (bookmark, etc) at 16x16 cuz I didn't want to stretch that. That's kinda of an annoying combination eh? And I should probably come up with one standard.

Is having a variant with slightly larger image + different layout a deal breaker? The UX feels better due to the favicon issue above, so I'd like to push for it if possible.

Flags: needinfo?(jules)
You need to log in before you can comment on or make changes to this bug.