Page MenuHomePhabricator

Create mockups for RCFilters in Codex
Open, Stalled, Needs TriagePublic

Assigned To
None
Authored By
Samwalton9-WMF
Jan 3 2025, 2:43 PM
Referenced Files
F58390553: Mobile_ Mobile excluded.png
Feb 12 2025, 11:20 AM
F58390561: Mobile_ Colors.png
Feb 12 2025, 11:20 AM
F58390551: Desktop_ Excluded.png
Feb 12 2025, 11:20 AM
F58386227: Mobile- Active filters.png
Feb 11 2025, 3:08 PM
F58386207: Mobile-Highlighting.png
Feb 11 2025, 3:08 PM
F58386200: Mobile_Filter list.png
Feb 11 2025, 3:08 PM
F58386194: Mobile filters.png
Feb 11 2025, 3:08 PM
F58386181: Save filters.png
Feb 11 2025, 3:08 PM

Description

Screenshot 2025-01-03 at 14.02.01.png (350×1 px, 67 KB)

RCFilters is the filtering system used on Special:RecentChanges and Special:Watchlist. It enables editors to set filters on the edits being displayed below, such as 'bot edits', 'minor edits', and on projects with the ORES extension configured, whether the edits are likely to be good or bad. As our team is planning some Q3 work on RecentChanges, we want to explore migrating this UI to Codex, so that it is brought in line with other new software and - ultimately - the rest of the Wikimedia design system. We hope this will additionally make it more accessible and easier to use.

Below is an attempt to document the major features of RCFilters which will require Codex-ifying:

Filter UI
Users can select filters from three different lists - Filters, Namespaces, and Tags. Filters is the main list of edit types that can be filtered for. Selecting a filter will limit results to edits matching that property. Selecting multiple filters will combine them in an OR combination.

Screenshot 2025-01-03 at 14.34.16.png (1×1 px, 209 KB)

The main list of filters has approximately 20-30 options depending on context, and is currently divided into different sections (e.g. 'User registration and experience', 'Significance') to aid navigation.

The Namespaces and Tags filters are selected from separate lists. They work a little differently, providing an additional 'Exclude selected' button, which enables editors to not only filter for a selection, but to instead exclude that selection.

The Namespaces filter provides a list of all namespaces on the current wiki, with approximately 30 entries divided into pairs of matching namespace and corresponding discussion page. The Tags filter provides a list of all edit tags used on the current wiki, containing up to more than 100 entries

Screenshot 2025-01-03 at 14.35.09.png (1×1 px, 295 KB)
Namespaces
Screenshot 2025-01-03 at 14.35.32.png (1×1 px, 458 KB)
Tags

A 'Clear selected filters' button is provided to remove all active filters:

Screenshot 2025-01-03 at 14.43.31.png (534×682 px, 64 KB)

Highlight results
When selecting filters, editors can optionally highlight edits matching a filter condition with a colour, without removing all non-matching edits. 5 colours are provided.

Screenshot 2025-01-03 at 14.38.04.png (382×1 px, 85 KB)

Screenshot 2025-01-03 at 14.39.08.png (580×1 px, 376 KB)

Active filters
Selected filters are displayed prominently, so that editors know which filters are currently active. Highlight filters are displayed with a small colour dot.

Screenshot 2025-01-03 at 14.39.54.png (176×1 px, 54 KB)

Saved filters
Editors can save combinations of filters to easily switch between filter sets. The current combination of filters can be saved using the 'Save current filter settings' button and dialog, and can optionally select this combination as the default when opening RecentChanges or Watchlist:

Screenshot 2025-01-03 at 14.41.06.png (524×950 px, 72 KB)

If a saved filter combination is selected, its name appears above the list of filters:

Screenshot 2025-01-03 at 14.41.38.png (206×1 px, 57 KB)

Saved filters can be browsed in a list to easily switch between them:

Screenshot 2025-01-03 at 14.42.38.png (486×782 px, 43 KB)

Documentation

Designs
1. Filters2. Filter list3. Namespaces list4. Tags list5. Topics list6. Active filters & chips7. Save filters8. Mobile: Filters9. Mobile: Filters list10. Mobile: Highlighting11. Mobile: Active filters
Screenshot 2025-02-11 at 15.47.23.png (280×914 px, 30 KB)
Filters list.png (713×938 px, 67 KB)
Namespaces list.png (671×938 px, 33 KB)
Tags list.png (733×938 px, 61 KB)
Topics list.png (783×938 px, 44 KB)
Desktop_ Excluded.png (733×938 px, 64 KB)
Save filters.png (608×1 px, 172 KB)
Mobile filters.png (498×400 px, 18 KB)
Mobile_Filter list.png (936×401 px, 56 KB)
Mobile_ Colors.png (782×400 px, 36 KB)
Mobile_ Mobile excluded.png (920×400 px, 51 KB)

Updates to filters:
Desktop:

  1. Filters: All of the different options - 'Filters', 'Namespaces', 'Tags', 'Topics' (coming soon) are part of a toggle button group.
    • On default the 'Filters' will be toggled when opening the page.

2-5: When toggling on one of the filter options, a list with all the filter options will appear.

  • There won't be any checkboxes indicating selected filters; the selection will be visible by the change in the background color of the selected filter items.
  • One won't be able to navigate to the different filter groups via the filter list. The way to switch between the filter groups will be via the toggle button group.

6 . Active filters & chips: Tapping on the active chips will not display a tooltip with more information about the filter.

  • Options to highlight filters will be present as well as the option to 'exclude selected'. The excluded filters will now have a 'cancel' icon inside the chip indicating that it is excluded rather than the not.

7 . Save filters: Currently, the popup component T363375 is not part of codex. For now, a dialogue will be used for this flow.

Mobile:

  1. Mobile Filters: To have consistency across the desktop and mobile experience the same 'MultiSelectLookup' will be used for the filters, which will include the opportunity search for specific filters.
    • Similarly to desktop, the different filters will be selectable within a toggle button group.

9-11: The ability to highlight certain filters will be possible.

  • Similarly to desktop, excluded filters will be indicated with a 'cancel' icon inside the chip.

Event Timeline

I suggested to @OTichonova that we could use a Dialog as an alternative while implementing the Popup in T363375. It's not the ideal solution, but it could work as a temporary alternative for the Popup.
This is how it would look like:

image.png (424×1 px, 124 KB)
image.png (1×2 px, 234 KB)
PopupDialog

I suggested to @OTichonova that we could use a Dialog as an alternative while implementing the Popup in T363375. It's not the ideal solution, but it could work as a temporary alternative for the Popup.
This is how it would look like:

image.png (424×1 px, 124 KB)
image.png (1×2 px, 234 KB)
PopupDialog

Sharing what I mentioned in T385639: I don't think the Dialog UI needs to be a temporary solution here. In my opinion, this is not the best use case for a Popover when compared to some of the other examples in T363375.