Page MenuHomePhabricator

Newcomer tasks: add suggested edit button
Closed, ResolvedPublic

Description

  • Suggested edit
    • This button should contain a lightbulb icon with the text "Suggested edit" next to it.
    • Below that, the header should say the task type, e.g. "Copy edit" or "Find references".
    • Below that should say "Quick start tips".
    • It should contain the suggested edit graphic (pencil/ruler/lightbulb).
    • This button should lead to the "suggested edit screen" (see T244541: Newcomer tasks: suggested edit screen in guidance).

Event Timeline

MMiller_WMF renamed this task from Help panel: Add suggested edit button to Newcomer tasks: add suggested edit button.Mar 19 2020, 6:03 AM

Change 581615 had a related patch set uploaded (by Kosta Harlan; owner: Kosta Harlan):
[mediawiki/extensions/GrowthExperiments@master] (wip) Add suggested edit button to help panel

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

Change 581615 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Help panel: Add suggested edit button

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

I've checked the specs and marked those that have been implemented. The un-marked specs belong to T244541: Newcomer tasks: suggested edit screen in guidance, i.e. the following definitely refer to "suggested edit screen in guidance", since the mockups show 'X' and no 'Back' buttons for both -the desktop and the mobile:

Screen Shot 2020-03-25 at 3.46.54 PM.png (482×285 px, 48 KB)

On mobile, in place of an "X" in the upper left, this screen should have a back arrow that leads back to the root screen via a swipe animation. There should be no "Back" or "Cancel" button.
On desktop, it should have the "X" in the upper left and the "Back" button in the lower left.

I've checked the specs and marked those that have been implemented. The un-marked specs belong to T244541: Newcomer tasks: suggested edit screen in guidance, i.e. the following definitely refer to "suggested edit screen in guidance", since the mockups show 'X' and no 'Back' buttons for both -the desktop and the mobile:

– Thanks @Etonkovidova , I've removed them from the task description here and indented them in the root screen task T244546 to make that clearer.

Moving for Design Review:

Screen Shot 2020-03-24 at 3.49.20 PM.png (580×308 px, 39 KB)

Screen Shot 2020-03-24 at 3.46.26 PM.png (618×1 px, 109 KB)

Thanks, it looks like these are both from the Desktop site, is that right?

Some design tweaks specific to the Suggested edits button from the root screen:
1. Suggested edit tile/button
1a. Task type header font-size is expected to be on Desktop 16px and Mobile 18.2px (using the OOUI fieldset header text style). Actual on Desktop is ~18.298px, Mobile ~20.912px.

1b. Description text font-size is expected to be on Desktop 12.4px and Mobile 13px (using the Wikipiedia text style for thumbcaption). Actual on Desktop is ~12.992px, Mobile ~14.848px.

1c. There should be 16px padding between the text and the SE illustration (64px wide).
This may be achieved by setting the text width to be width:calc(100% - 80px);

1d. SE illustration should be absolutely positioned relative to the bottom right corner of the SE tile/button. Specifically:

.SE-button { position:relative;}
and
.SE-illustration {
position:absolute;
bottom:16px;
right:16px;
}

Expected:

image.png (248×672 px, 24 KB)

1e. There should be a border: solid 1px #3366cc; (Accent50).

1f. The background-color of the SE button should be background-color: rgba(234, 243, 255, 0.5); (Accent90 @50% opacity).

1g. “Suggested edit” title font-size is expected to be on Desktop 14px and Mobile 16px (using the OOUI UI text style). Actual on Desktop is 16px, Mobile 18.288px.

1h. Lightbulb icon and “Suggested edit” text should be vertically center-aligned

1i. Space between text and lightbult icon is 8px, not 10px.
(change .mw-ge-help-panel-home-button-preheader-text class from padding-left:10px to padding-left:8px

Change 584558 had a related patch set uploaded (by Kosta Harlan; owner: Kosta Harlan):
[mediawiki/extensions/GrowthExperiments@master] Help panel: Design fixes for suggested edits button

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

1. Suggested edit tile/button
1a. Task type header font-size is expected to be on Desktop 16px and Mobile 18.2px (using the OOUI fieldset header text style). Actual on Desktop is ~18.298px, Mobile ~20.912px.
1b. Description text font-size is expected to be on Desktop 12.4px and Mobile 13px (using the Wikipiedia text style for thumbcaption). Actual on Desktop is ~12.992px, Mobile ~14.848px.

Mobile dimensions are slightly different, but that's already being discussed in T244546#6009478.

1c. There should be 16px padding between the text and the SE illustration (64px wide).
This may be achieved by setting the text width to be width:calc(100% - 80px);

Being discussed in T244546#6009445.

The others are covered by the patch.

Change 584558 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Help panel: Design fixes for suggested edits button

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

1a. Task type header font-size is expected to be on Desktop 16px and Mobile 18.2px (using the OOUI fieldset header text style). Actual on Desktop is ~18.298px, Mobile ~20.912px.
1b. Description text font-size is expected to be on Desktop 12.4px and Mobile 13px (using the Wikipiedia text style for thumbcaption). Actual on Desktop is ~12.992px, Mobile ~14.848px.

1a & 1b can be reviewed on T244546#6009478.

1c. There should be 16px padding between the text and the SE illustration (64px wide). This may be achieved by setting the text width to be width:calc(100% - 80px);

1c can also be reviewed on T244546#6009445. But note the text is still butting up to the icon:

image.png (164×282 px, 15 KB)

1d. SE illustration should be absolutely positioned relative to the bottom right corner of the SE tile/button. Specifically:

.SE-button { position:relative;}
and
.SE-illustration {
position:absolute;
bottom:16px;
right:16px;
}

Expected:

image.png (248×672 px, 24 KB)

1e. There should be a border: solid 1px #3366cc; (Accent50).

1f. The background-color of the SE button should be background-color: rgba(234, 243, 255, 0.5); (Accent90 @50% opacity).

1g. “Suggested edit” title font-size is expected to be on Desktop 14px and Mobile 16px (using the OOUI UI text style). Actual on Desktop is 16px, Mobile 18.288px.

1h. Lightbulb icon and “Suggested edit” text should be vertically center-aligned

The text is still not vertically centered with the icon on Desktop

image.png (184×422 px, 13 KB)

I think this may be due to the line-height being >1 on .mw-ge-help-panel-home-button-preheader-text
Relatedly, I have left a comment that .mw-ge-help-panel-home-button-preheader also should have padding-bottom reduced to 8px on the patch.

1i. Space between text and lightbulb icon is 8px, not 10px.
(change .mw-ge-help-panel-home-button-preheader-text class from padding-left:10px to padding-left:8px

Re-checking - now the root screen matches this mockup
The 'Suggested edit' button now looks according to the mockup:

Screen Shot 2020-03-31 at 3.58.43 PM.png (631×381 px, 42 KB)

@RHo - are there the items 1d, 1g, and 1h are not done yet?

For 1g - it seems that the specs are in place (1g is not marked as done in your comment).

1g. “Suggested edit” title font-size is expected to be on Desktop 14px and Mobile 16px (using the OOUI UI text style). Actual on Desktop is 16px, Mobile 18.288px.

Screen Shot 2020-03-31 at 4.55.25 PM.png (663×393 px, 71 KB)

@RHo - are there the items 1d, 1g, and 1h are not done yet?

Apologies @Etonkovidova - yes I forgot to mark 1d and 1g as done. 1h is still left, but per our conversation earlier, we can use the original task T244546 to track 1a, 1b, 1c, and 1h, so I will move this to PM Review now for only the functional items (addition of the SE button).