Page MenuHomePhabricator

Implement v1 of Suggestion feedback flow
Closed, ResolvedPublic

Description

This ticket holds the work of implementing v1 of the Edit Suggestion feedback flow.

V2 will happen in T401739.

Requirements

  • Update the Suggestion card to include the ••• affordance (F71589938)
  • Within the ••• affordance will be the following copy + links:
    • [[mw:VisualEditor/Suggestion_Mode|About suggestions]]
    • [[mw:Talk:VisualEditor/Suggestion_Mode/Feedback|Report a problem]] with this suggestion.
  • Both links, when people tap/click them, should see said pages opened in new tabs
  • When people tap/click the [[mw:Talk:VisualEditor/Suggestion_Mode/Feedback|Report a problem]] and navigate to said talk page, they should see the new topic tool automatically opened

Event Timeline

Change #1235195 had a related patch set uploaded (by DLynch; author: DLynch):

[mediawiki/extensions/VisualEditor@master] Editcheck: add an overflow menu to suggestion cards to link to feedback

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

Change #1235196 had a related patch set uploaded (by DLynch; author: DLynch):

[mediawiki/extensions/VisualEditor@master] Editcheck: move the suggestion feedback button into the card title

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

I noticed some challenges around the buttons being prone to wrapping in languages that've got longer translations than English, so I've implemented that placement, and also an adjustment to it that'll put it in the title bar instead.

VariantDesktopMobilePatchdemo?
Actions
cleanshot_2026-01-29_at_18.14.12_2x.png (436×640 px, 39 KB)
cleanshot_2026-01-29_at_18.17.54_2x.png (638×810 px, 76 KB)
Patchdemo
Header
cleanshot_2026-01-29_at_20.55.50_2x.png (372×628 px, 40 KB)
cleanshot_2026-01-29_at_20.54.42_2x.png (520×808 px, 68 KB)
Patchdemo

The report a problem link will open the new topic tool, with the title prefilled to something akin to addReference on enwiki/Sandbox

@DLynch thank you for flagging this case and looking for possible solutions. Since all primary actions live at the bottom of the card, I think the most appropriate place for the “More actions” MenuButton is there as well, grouped with the rest of the actions. This way, the primary and secondary actions would stack vertically when space is limited, with the “More actions” button aligning with the second action.

Captura de pantalla 2026-01-30 a las 11.49.49.png (608×1 px, 141 KB)

In addition, to avoid competing with the main actions, the MenuButton would use a quiet button style, keeping it visually secondary to the primary and secondary actions.

In addition, to avoid competing with the main actions, the MenuButton would use a quiet button style, keeping it visually secondary to the primary and secondary actions.

Sorry, I used older pictures I copied in from slack, not ones that reflect the current state on those patchdemos — the frameless style is being used in either case. (The titlebar variant does confuse it, because in the screenshot it’s shown with the menu open and so it has a focus highlight.)

Change #1235196 abandoned by DLynch:

[mediawiki/extensions/VisualEditor@master] Editcheck: move the suggestion feedback button into the card title

Reason:

Going with adjusting the spacing for actions instead

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

Screenshots of the inline variant with the updated paddings:

CleanShot 2026-01-30 at 13.21.02@2x.png (396×644 px, 33 KB)

CleanShot 2026-01-30 at 13.21.47@2x.png (506×658 px, 48 KB)

The patchdemo is recreated with this new version: https://22b08c493e.catalyst.wmcloud.org/wiki/Douglas%20Adams?veaction=edit&ecenable=experimental,suggestions

(There's also a new adjustment to the padding for the action buttons in general that stops them from touching when they wrap to new lines, but that's not specific to this variant.)

Change #1235195 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Editcheck: add an overflow menu to suggestion cards to link to feedback

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

@DLynch thank you, it looks good. Just an observation: please remove the externalLink icon from the dropdown menu to follow the design specifications. We will avoid including more icons in this menu, especially if the icon is repeated in both menu items.

Captura de pantalla 2026-01-22 a las 13.04.46.png (1×2 px, 446 KB)

And, for the mobile version, I recommend displaying the menu above the button instead, which I guess it will happen when this red message is not there. But sharing just in case.

Captura de pantalla 2026-02-02 a las 12.33.29.png (666×375 px, 133 KB)

please remove the externalLink icon from the dropdown menu to follow the design specifications.

It seemed useful to add an indicator that it'd open a new tab, to avoid causing hesitation about losing your edit, though if you don't think that'll come up for people I can take those out.

Change #1235854 had a related patch set uploaded (by DLynch; author: DLynch):

[mediawiki/extensions/VisualEditor@master] Edit check: remove icons from suggestion feedback, tweak mobile alignment

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

Change #1235854 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Edit check: remove icons from suggestion feedback, tweak mobile alignment

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

I was thinking of commenting on those icons myself. To me they indicate "this is an external link," not "this will open in a new tab".

To me they indicate "this is an external link," not "this will open in a new tab".

Technically they're also that, since they both send you off to metawiki.

El T415936#11575253, @DLynch escribió:

please remove the externalLink icon from the dropdown menu to follow the design specifications.

It seemed useful to add an indicator that it'd open a new tab, to avoid causing hesitation about losing your edit, though if you don't think that'll come up for people I can take those out.

Adding visual indicators increases cognitive load and visual noise, and distracts from primary editing tasks. In addition, we usually use the externalLink icon just within the external links text, not as a decorative menu item icon. I would suggest keeping this as simple as possible for now and avoiding additional icons unless we see a clear user need. If we later observe confusion or hesitation in user feedback or metrics, we can always use this icon or other alternative solutions.

What remaining decisions are there for this one? As far as I can see it's landed with the specified behavior.

What remaining decisions are there for this one? As far as I can see it's landed with the specified behavior.

I'd like to review it.

Test wiki created on Patch demo by BMartinezCalvo (WMF) using patch(es) linked to this task:
https://2ecca89ee7.catalyst.wmcloud.org/w/

What remaining decisions are there for this one? As far as I can see it's landed with the specified behavior.

I'd like to review it.

I've reviewed it and nothing to change on my side.

What remaining decisions are there for this one? As far as I can see it's landed with the specified behavior.

I'd like to review it.

I've reviewed it and nothing to change on my side.

+1.

Test wiki on Patch demo by BMartinezCalvo (WMF) using patch(es) linked to this task was deleted:

https://2ecca89ee7.catalyst.wmcloud.org/w/

Test wiki on Patch demo by DLynch (WMF) using patch(es) linked to this task was deleted:

https://22b08c493e.catalyst.wmcloud.org/w/

Test wiki on Patch demo by DLynch (WMF) using patch(es) linked to this task was deleted:

https://d9b2ebbe41.catalyst.wmcloud.org/w/