Page MenuHomePhabricator

Badge: Add Badge component to Codex
Open, Needs TriagePublic

Assigned To
None
Authored By
RHo
Apr 20 2021, 5:28 PM
Referenced Files
F26220991: image.png
Apr 26 2021, 3:01 PM
F34428716: Screenshot 2021-04-26 at 16.44.09.png
Apr 26 2021, 2:48 PM
F34408808: image.png
Apr 20 2021, 7:11 PM
F34408686: image.png
Apr 20 2021, 5:28 PM
F34408690: image.png
Apr 20 2021, 5:28 PM
F34408701: image.png
Apr 20 2021, 5:28 PM
F34408699: image.png
Apr 20 2021, 5:28 PM
F34408683: image.png
Apr 20 2021, 5:28 PM
Tokens
"Like" token, awarded by Volker_E.

Description

Background

Define and add the badge indicator component in Codex.

Description

Small indicator of status or count.

User stories

Add at least one user story.

History

Describe or link to prior discussions related to this component

Known use cases

Some examples in use right now:
  1. Notification and alerts count badges:
image.png (82×178 px, 2 KB)
Vector
image.png (130×698 px, 12 KB)
Minerva
image.png (108×620 px, 8 KB)
Content translation
  1. Notifications by wiki (number in the RHS)

image.png (262×646 px, 17 KB)

  1. Message read/unread status badges (blue dot to indicate unread)
image.png (104×794 px, 12 KB)
Minerva
Potential additional use-cases:
image.png (280×206 px, 8 KB)
Badge count for the number of other languages.
image.png (178×570 px, 12 KB)
Count within the tab (new messages on watched Talk pages)

Existing implementations

These artifacts are listed for historical context. The figma spec, linked below, is the source of truth for the new component.

Wikimedia community:

  • OOUI: -
  • Vue: -

External libraries:

  • Add links to any examples from external libraries

Codex implementation

Component task owners

  • Designer: add the main designer's name
  • Developer: add the main developer's name

Open questions

  • List any current open questions here

Design spec

Once a component spec sheet has been created in Figma, remove the note stating that the spec is missing and link to the spec below.

A component spec sheet has not been created yet.

Component spec sheet
Anatomy

Designer should list the structure and properties of the component.

Style

Designer should list the visual features of the component.

Interaction

Designer should list interaction specifications.

Documentation

Designer should describe how the component should be documented, including configurable and standalone demos.


Acceptance criteria

Minimum viable product

This task covers the minimum viable product (MVP) version of this component. MVP includes basic layout, default states, and most important functionality.

MVP scope

  • List all parts of the MVP scope for this component

Design

  • Design the Figma spec sheet and add a link to it in this task
  • Update the component in the Figma library. This step will be done by a DST member.

Code

  • Implement the component in Codex

Future work

  • If applicable, list future work that should be done for this component after the MVP is implemented as part of this task. You should open new, standalone tasks for all future work.

Event Timeline

Quick experiment with rounded badges:

image.png (82×152 px, 2 KB)

999 is the max as far as I remember…?!

There's this element in the header of the results table of Wikidata's Query service tool that could be also considered a badge (since it somehow describes a status):

Screenshot 2021-04-26 at 16.44.09.png (84×177 px, 3 KB)

Do you agree it qualifies as such? Should badges contain other than a max number of numeric characters? Will keep an eye on similar instances

I think it's a thin line between badges and certain types of notifications. Thinking along the lines of Echo's “You have new messages” link

image.png (146×566 px, 21 KB)

A max char number is a good anchor point for the separation of both. Another one could be that a badge is accompanying an already clickable element, while a notification is lone-standing.

@Sarai-WMDE Do you have a screenshot in bigger context of above's element?

Agree with @Volker_E about the badge being an accompanying element and typically containing numeric characters/count or an icon/dot only. Referring to some other guidelines (iOS, Material, and Atlassian which refer to them as 'supplementary' elements.

A max char number is a good anchor point for the separation of both. Another one could be that a badge is accompanying an already clickable element, while a notification is lone-standing.

The latter is a very good distinction point. However, I'm not sure whether the concept of "notification" really applies in the case of the shared lone-standing instance: although it could be argued that it describes the system's status, no follow-up action from the user is required/necessary. This could also be a case of component misuse.

@Sarai-WMDE Do you have a screenshot in bigger context of above's element?

The link added in the comment above (adding it here again) takes you to a premade query in the Query service, running it (using the ▶️ button) will display the results table, which contains said "badge"/"notification" with a summary of the results.

AnneT renamed this task from Define and add a badge component to the DSG to Badge: Add Badge component to Codex.Mar 1 2023, 4:39 PM
AnneT moved this task from Proposed New Components to Planned New Components on the Codex board.
AnneT removed a subscriber: STH.