Support icons in moz-box-item
Categories
(Toolkit :: UI Widgets, 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
- description is nested under label https://www.figma.com/design/2b02v18AppIpsTceWac2T3/Settings-Desktop?node-id=1641-17970&m=dev
- description is nested under icon https://www.figma.com/design/2b02v18AppIpsTceWac2T3/Settings-Desktop?node-id=2947-98504&m=dev
Updated•28 days ago
|
Comment 1•6 days ago
|
||
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 🤔
Comment 2•2 days ago
|
||
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.
Description
•