Page MenuHomePhabricator

Move descriptions below field label
Closed, ResolvedPublic8 Estimated Story Points

Description

Requirements

Relocate description and special messages:

  • Remove info icon completely
  • Put all text from the TemplateData property 'Description' under the label. Text should match body text style and take up full width of input field.
  • Put all 'special messages' previously in info icon below description, when existing, or below label, when no description. This includes: examples, required message, and deprecated message.
  • When no descriptions or special messages, then nothing shows beneath the label.
  • Do not show examples in the input field.

Other:

  • Keep the trash icon aligned with the title/label (appears when the field is in focus) - do not touch for now
  • Ensure that multi-language descriptions are still showing correctly
  • Ensure all of the above functions on mobile

Mocks

CurrentlyUpdated design
Descriptions below fields
Screen Shot 2021-01-12 at 11.29.50.png (366×1 px, 131 KB)
Parameters_description below label.png (495×559 px, 25 KB)
Long description, truncated and collapsedn/a
Collapsed description.png (155×561 px, 5 KB)
Long description, expandedn/a
Expanded description.png (304×561 px, 20 KB)
Example
Screen Shot 2021-01-12 at 11.47.13.png (272×1 px, 75 KB)
Is it easy to change the prefix from 'e.g.' to 'Example:'?
Deprecated
Screen Shot 2021-01-12 at 11.38.46.png (326×1 px, 91 KB)
Required
Screen Shot 2021-01-12 at 11.45.27.png (372×1 px, 135 KB)
See top image, Film name param

Specs

Screen Shot 2021-02-02 at 12.55.45.png (469×650 px, 55 KB)

Event Timeline

Lena_WMDE renamed this task from Move descriptions below label to Move descriptions below field label.Feb 1 2021, 9:40 AM
Lena_WMDE updated the task description. (Show Details)

Change 679757 had a related patch set uploaded (by Andrew-WMDE; author: Andrew-WMDE):

[mediawiki/extensions/VisualEditor@master] Relocate parameter descriptions in the transclusion dialog

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

Test wiki created on Patch Demo by Elisha Cohen (WMDE) using patch(es) linked to this task:

https://patchdemo.wmflabs.org/wikis/6993f15a8f/w/

We could use Example instead of e.g.. I this still an open question?

Change 679757 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Relocate parameter descriptions in the transclusion dialog

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

Thanks for the reminder @WMDE-Fisch !

Andrew sent me a message that this was actually easy to do without a feature flag. Discussed with @Lena_WMDE that even though it's a tiny a change, it would be better if it all stayed behind the same feature flag and went out at the same time. If we do that, is this still a simple change? If yes, then we'd like to do it!

Change 681011 had a related patch set uploaded (by WMDE-Fisch; author: WMDE-Fisch):

[operations/mediawiki-config@master] [beta] Enable changes to the descriptions in the VE transclusion dialog

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

Change 681011 merged by jenkins-bot:

[operations/mediawiki-config@master] [beta] Enable changes to the descriptions in the VE transclusion dialog

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

Mentioned in SAL (#wikimedia-cloud) [2021-04-20T07:19:17Z] <CFisch_WMDE> enable changes to the descriptions in the VE transclusion dialog (T273425)

Change 681300 had a related patch set uploaded (by WMDE-Fisch; author: WMDE-Fisch):

[mediawiki/extensions/VisualEditor@master] Use verbose label for the example

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

Change 681300 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Use verbose label for the example

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

Just checked on beta and it's looking good! I just have one comment about the spacing. I don't think it's enough space between the parameters for each label/description/field to be easily read as a distinctive group. I looked in the code and realized that it's specified in em, not px as I had put in the specs. Tested it out and think it looks good at 2em. Could we update it to that instead? Thanks!

Here is what it looks like after the change:

Screen Shot 2021-04-20 at 5.43.59 PM.png (834×858 px, 122 KB)

Change 681434 had a related patch set uploaded (by WMDE-Fisch; author: WMDE-Fisch):

[mediawiki/extensions/VisualEditor@master] Increase space between fields when using inline descriptions

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

With the latest patches:

image.png (498×714 px, 36 KB)

Looks great to me!

A small question though, the gap above "Add more information" is 50px and it feels like a bit much.

I have 36px above each parameter name, but maybe this is exaggerated because my param names are in lowercase.

With the latest patches:

image.png (498×714 px, 36 KB)

Looks great to me!

A small question though, the gap above "Add more information" is 50px and it feels like a bit much.

I have 36px above each parameter name, but maybe this is exaggerated because my param names are in lowercase.

D'oh. Ahh yeah no that's probably due to the change in that last patch. I should try to rewrite it so, that the increased padding is not added to the last field there. I also would say it feels a bit too much.

Change 681434 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Increase space between fields when using inline descriptions

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

I actually don't mind the extra space since it's a separate type of component, but if it matches the same distance as between params that is probably cleanest.

It seems like there is already a change merged and I'm assuming that's what was done. (Btw the inter-param spacing is looking good on beta! Thanks for updating)

Lena_WMDE moved this task from Demo to Done on the WMDE-TechWish-Sprint-2021-04-14 board.

Test wiki on Patch Demo by Elisha Cohen (WMDE) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/6993f15a8f/w/