1942373 - Add support for badging to moz-button

Status: NEW

(Toolkit :: UI Widgets, enhancement, P3)

Description

[kpatenio]

Similarly to how toolbar buttons can display a badge to indicate an update, it would be great if we could add a similar capability to moz-button.

Possible use case: Review Checker icon badging on the sidebar
As the Review Checker team, we want to display a “dot” over the Review Checker tool icon whenever a user navigates to a supported product page with the RC sidebar panel closed, or the user is in that page with another tool panel open. If a product has information available, the badge is rendered to notify users. Otherwise, no badge is displayed.

Attributes
We'd like to propose adding an attribute to moz-button akin to badged=true and badged=false to control the badge's visibility.

Design
The badge design we have in mind currently is the green circular dot. The recomp team may want to consider support for other icons in future versions. I assume we want to consider bidi / LTR locales, light mode, dark mode, custom themes (since sidebar allows it), and HCM as well.

Timeline
Getting badge support within the Review Checker feature is desired for 137, which I understand may not be enough time (as of January 17, 2025). We're also auditing our backlog to determine what's in scope as 137 approaches. So with that in mind, we're definitely open to further conversations about timeline if 137 doesn't seem feasible.

Comment 1

[kpatenio]

Attachment: pdp_light_mode_badge_rc_icon.png

Comment 2

[kpatenio]

Attachment: dark_mode_rc_icon_badge.png

Comment 3

[kpatenio]

Attachment: light_mode_rc_icon_badge.png

Comment 4

[Mark Striemer [:mstriemer]]

The presence of the badged attribute should be enough, rather than needing to set it to true/false. That being said, I'm curious if we want to give this a different name, like attention or even badge (which could optionally take a string for buttons with text?).

The Firefox Inventory has more instances of badging that may be relevant as we discuss the correct solution

Comment 5

[Hanna Jones [:hjones]]

^looking at the inventory I've got a few questions we may want to discuss, though we might not need answers for a v1:

• Do we want to support those badges that look like warning icons? Do we have other kinds of badges e.g. ones that look like more like they are trying to communicate an error state (or would we want/need this in the future)? There's an example shown on the downloads toolbar button, and I think we might do something similar with the "application menu" toolbar button + maybe the unified extensions toolbar button if you have addons that are out of date/warrant some other kind of alert. If we do want to support more than one badge type, then I wonder if a more extensible API would be something like: badge="info|success|attention|warning|error" (probably not all of those - I'm just throwing out ideas for names). I suppose we could also just set badge still and it'll just use a default type, so maybe not something we have to decide for the initial implementation.
• Do we want to support different positions for the badge? Right now pinned tabs show the badge below the toolbarbutton icon (in non-vertical tab mode at least). We could do something like badgeposition="block-start/top|block-end/bottom or something really silly like badgeposition="start-start|start-center|start-end|end-start|end-center|end-end" 🫠 As I'm typing that out it looks/feels gross though, and it kind of sucks to have two properties just for badge display. Should we standardize on badges displaying in the top left/right corner? I wonder how much push back we would encounter if we try to change pinned tabs to establish a convention.
• Do we want to support badges on moz-buttons other than those that are type="icon ghost"? Enforcing that would be a little tricky, since it's also possible to just set type="ghost" and provide aniconSrc`. There's probably not much risk to supporting it for other button types, but it feels a bit weird if it's not something we want or need. Do we see or anticipate a use case for badging default|primary|destructive buttons?

Comment 6

[Mark Striemer [:mstriemer]]

The --attention-dot-color token's values should be considered when we're looking at this. It is currently set to a hard coded colour in brand, when there is a LWT installed (this seems like it should use AccentColor?) and when not using the "native theme". It could be nice to set this to a colour from our palette (or the upcoming palette with a comment as to what colour it maps to), and to consider when it should be set to a brand colour vs using system accent colour.

For now we could definitely add the badge boolean property to moz-button and we likely can support that API going forwards, and adding support for it to take text or have colour variants at a later time.

Comment 7

[Mark Striemer [:mstriemer]]

Katherine, is this something you'd be interested in adding to the moz-button? We can review the patch if you're wanting to put one up

Comment 8

[kpatenio]

(In reply to Mark Striemer [:mstriemer] from comment #7)

Katherine, is this something you'd be interested in adding to the moz-button? We can review the patch if you're wanting to put one up

Hi Mark, sorry for the delay. I'm interested, but I don't have the bandwidth at the moment to pick it up. I'd be happy to revisit this work once I've wrapped up my other tasks.

Comment 9

[Jules Simplicio [:jules]]

Documenting decisions we made after we met about this as a team:

• We'll only support this for type=icon moz-buttons
• We'll create an attention boolean prop to start
• The position of the attention dot is always on top right of the icon - you can't choose different positioning for now.