Page MenuHomePhabricator

Basic topic selection: Use standard transitions
Closed, ResolvedPublic

Description

In T368422, an initial version was implemented to support basic topic selection in order to customize translation suggestions. The "Adjust suggestions view" provides a list of topics for users to select. This is intended to work similar to a Codex dialog component. However, currently it uses a non-standard transition: it appears flying from below the viewport and goes away flying up (not going to the same place where it came from):

Following the Codex dialog component and the current Codex support for transitions, it seems that the standard is for elements to fade in/out.


It is not clear what motivated the use of the current transition. If there is a reason for this to show form below the viewport, we can consider keeping it but adjusting the way the elements disappear by flying back to the bottom too.

Derived Requirement

Ensure that the "Adjust suggestions view" in the basic topic selection uses standard transitions for appearing and disappearing. These transitions should follow the Codex dialog component's fade-in and fade-out behavior. If a reason exists for using the current transition (flying from below the viewport), adjust it to ensure consistency by making the element disappear by flying back to the bottom.

Test Steps

Test Case 1: Verify Standard Fade-in and Fade-out Transition for "Adjust Suggestions View"

  1. Navigate to the translation suggestions interface.
  2. Open the "Adjust suggestions view" by selecting the corresponding option.
  3. AC1: Confirm that the "Adjust suggestions view" fades into the viewport smoothly, following Codex dialog component standards.

QA Results - Test Mobile ContentTranslation

ACStatusDetails
1T380380#10464362

Related Objects

View Standalone Graph
This task is connected to more than 200 other tasks. Only direct parents and subtasks are shown here. Use View Standalone Graph to show more of the graph.

Event Timeline

@Pginer-WMF Do you also expect the "fade" transition when the viewport is small and the dialog is fullscreen?

SBisson triaged this task as Medium priority.
SBisson moved this task from Backlog to In-progress on the LPL Hypothesis board.

Change #1093388 had a related patch set uploaded (by Sbisson; author: Sbisson):

[mediawiki/extensions/ContentTranslation@master] SuggestionsFiltersDialog: transition=fade

https://gerrit.wikimedia.org/r/1093388

@Pginer-WMF Do you also expect the "fade" transition when the viewport is small and the dialog is fullscreen?

Yes. I think it makes sense to apply the same approach.

Change #1093388 merged by jenkins-bot:

[mediawiki/extensions/ContentTranslation@master] SuggestionsFiltersDialog: transition=fade

https://gerrit.wikimedia.org/r/1093388

Change #1104703 had a related patch set uploaded (by Sbisson; author: Sbisson):

[mediawiki/extensions/ContentTranslation@master] CX3 Build 0.2.0+20241216

https://gerrit.wikimedia.org/r/1104703

Change #1104703 merged by jenkins-bot:

[mediawiki/extensions/ContentTranslation@master] CX3 Build 0.2.0+20241216

https://gerrit.wikimedia.org/r/1104703

@SBisson Confirm that the "Adjust suggestions view" fades into and out of the viewport smoothly, following Codex dialog component standards. I will move this to sign-off. Thanks for all your work!

Test Result - Mobile Special:ContentTranslation

Status: ✅ PASS
Environment: Mobile Special:ContentTranslation
OS: macOS Sequoia 15.2
Browser: Chrome 132
Device: MBA
Emulated Device: NA

Test Artifact(s):

https://ig.m.wikipedia.org/w/index.php?title=Special:ContentTranslation&active-list=suggestions&from=en&to=ig&filter-type=automatic&filter-id=previous-edits

Test Steps

Test Case 1: Verify Standard Fade-in and Fade-out Transition for "Adjust Suggestions View"

  1. Navigate to the translation suggestions interface.
  2. Open the "Adjust suggestions view" by selecting the corresponding option.
  3. AC1: Confirm that the "Adjust suggestions view" fades into the viewport smoothly, following Codex dialog component standards.

2025-01-14_12-54-05.mp4.gif (582×906 px, 551 KB)

GMikesell-WMF updated Other Assignee, removed: GMikesell-WMF.
GMikesell-WMF updated the task description. (Show Details)
GMikesell-WMF moved this task from Needs QA to Design Signoff on the LPL Hypothesis board.