Page MenuHomePhabricator

[MEX][SPIKE] Constraint violation indicators and tooltips should be shown
Open, Needs TriagePublic

Description

Context

The WikibaseQualityConstraints extension makes it possible to set up constraints on the values used in statements. It adds indicators and informative tooltips for values that don't match these constraints. They highlight values that might need attention, and guide users on how to fix them.

For example, here are two constraint indicators shown on the desktop view for Berlin (Q64)

image.png (501×971 px, 45 KB)

And this is what an expanded tooltip looks like:
image.png (490×696 px, 95 KB)

These indicators and tooltips are not currently shown in the mobile view of Wikidata. Since editing statements is not yet possible there, it makes sense that there are no helpful guides on *how* and *what* to edit.

For MEX...

UI

FIGMA FILE HERE

DISPLAY

Screenshot 2025-11-28 at 12.49.58.png (1×1 px, 131 KB)

  • When there are issues/suggestions, an icon appears on the main page 20px (spacing 125) from the label with the issue
  • Since the icons used on desktop are not on the codex library, we map them to:
    • Suggestions: Flag icon | Potential issues: Notice icon | Issues: Error icon (in error red) | Advanced issues: Labflask icon | Bad parameters: Alert icon (in alert yellow)

SINGULAR ISSUE - WHEN ICON IS TAPPED

Screenshot 2025-12-02 at 15.14.06.png (1×1 px, 206 KB)

Component: Pop over

  • On tap on the error icon on the main page, a popover appears
  • The error icon shows in front of the popover title which is is "issue"
  • useCloseButton component option is active, primary and secondary actions & useDefaultAction off (same as musical notation popover)
  • should the popover have so much content that is exceeds a height of 500px, it becomes scrollable
  • since the popover component does not offer a footer, we simply add the Help | Discuss (separated by 8px (spacing_50) then |, then further 8px (spacing_50) as the last thing in the text (see picture)

MULTIPLE ISSUES (including 1 issue plus advanced issues)

Screenshot 2025-12-02 at 15.14.38.png (1×2 px, 251 KB)

Pattern: Multistep dialog

  • on tap on the error icon, a multi-step dialog appears, titled "Issues" with 2 changes to the pattern:
    • we add an icon to the second title
    • we add the Help | Discuss (separated by 8px (spacing_50) then |, then further 8px (spacing_50) placed to replace of the footer text option of the component (because in this case, there is one)
  • the dialog is always 500px height and 292px width (component original size for when it is set for "mobile"
  • should the content be exceed the space in it's container space (245px) it needs to become scrollable in that section, with the footer - Help | Discuss - always visible below
  • Maximal 13 issues can be shown - because it is the max number of dots we can display in this width.

Screenshot 2025-12-02 at 15.14.56.png (1×1 px, 181 KB)

Related Objects

Event Timeline

Alice.moutinho updated the task description. (Show Details)
Alice.moutinho subscribed.
Alice.moutinho updated the task description. (Show Details)
Alice.moutinho updated the task description. (Show Details)

Task time notes:

  • If there are many issues (there can be several issues, several potential issues, several suggestions, and several advanced issues all at once), what should happen? How should the stepper behave?
  • Potential task splits:
    • one part in Wikibase (allow extensions to add stuff to the UI) and one part in WikibaseQualityConstraints (actually add constraint indicators to the UI)
    • one part in wbui2025 lib (save the constraint violation information somewhere – maybe a store?) and one part in the UI (display them)
    • one part to display the icons, one part to display the dialog after you click the icon
  • The icon / popover mechanism will also be used to display LilyPond / musical notation errors, see T407247

Next step: a spike to investigate the task a bit more and create appropriate subtasks (timebox ca. 4 hours).

ArthurTaylor renamed this task from [MEX] Constraint violation indicators and tooltips should be shown to [MEX][SPIKE] Constraint violation indicators and tooltips should be shown.Dec 2 2025, 10:37 AM

I have broken this implementation down into the tickets T411602, T411604, T411606, T411608 and T411609. Some parallelisation of the implementation is possible, though there are path dependencies between some tickets.

@Sarai-WMF Hi Sarai! i got your name (but not your contact) contact from the UX team :)

I am Alice the UX designer for Wikidata, and i have a codex question: The wikidata team will be "producing" the Multistep dialog in the scope of this ticket. Since it is not a component yet, we were wondering if we should contribute it as such for the codex library, so it is ready to use for everyone next time?

I am hoping you answer here, if it doesn't work in one week i will try slack :D Have a nice day!

Hey @Alice.moutinho. It's very nice to meet you! I shared your question with the Design system's steering committee in the #codex-design-system channel in Slack (see original message). The current plan is for Multi-step Dialog to remain a custom pattern instead of becoming a standalone system component. So there's no expectation for this element to be included in the library.
Michael Große, from the Growth team, chimed in to share a recent implementation of the Multi-step Dialog. They used it to present an onboarding quiz: ReviseToneOnboarding.vue. He thought that having access to an additional example could be useful for you.
I'm happy to help with any follow-up questions (Codex or otherwise) that you might have, but please keep in mind that the most effective way to get definitive answers will be to address the Design system's steering committee directly (by using the Slack channel linked above, or posting on Phabricator).

@Sarai-WMF Thank you very much for your quick and thorough reply and next time i will ask the steering committee. Have a great day!