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)
And this is what an expanded tooltip looks like:
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
DISPLAY
- 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
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)
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.





