Page MenuHomePhabricator

(VE Template Dialog) Move parameter descriptions below field labels
Closed, ResolvedPublic

Description

Background
Currently, if parameters have a description in TemplateData it is shown as a pop-up when info icon is clicked in the TemplateDialog of the Visual Editor. Info icon only shows when a parameter field is in focus. This information is often critical to understanding which type of information is needed by the parameter and how to format it. This ticket is about making this valuable information more visible by moving the description out the info icon and below the label in the TemplateDialog of VE so that it's always visible.

Implemented on the test instance with the following tickets: T260147: VE Dialog on the Test Instance: Make instructions more visible, T261284: VE Dialog on the Test Instance: Change placement of examples

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.

Expand collapse requirements and thresholds:

  • If text is over 2 lines + 15 characters long, then truncate to 1 line with gradient/fade out and "More" button. Fade out should match styling in page preview and grow to match length of 'More' depending on length of word in language translation.
  • When calculating cutoffs, include special messages and hide them along with the description if truncated
  • On clicking "More" button, display full description (+ special messages). On line below, show a "Less" button. On click, it collapses back to 1 line state.
  • More/ Less buttons are both right aligned to the edge of the field. The "More" button overlaps with text and "Less" button is below text on its own line.

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

Implement behind feature flag together with:
T273971: Increase VE template dialog size
T274554: Make sidebar responsive

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)
See above
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 DRAFT: (VE Template Dialog) Move parameter descriptions below field labels to (VE Template Dialog) Move parameter descriptions below field labels.Feb 1 2021, 9:41 AM
Lena_WMDE updated the task description. (Show Details)
ECohen_WMDE claimed this task.