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
Currently | Updated design | |
Descriptions below fields | ||
Long description, truncated and collapsed | n/a | |
Long description, expanded | n/a | |
Example | See above | |
Deprecated | ||
Required | See top image, Film name param | |
Specs