**Background**
Currently, if parameters have a description in TemplateData it is shown as a pop-up when info icon is clicked. 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 so that it's always visible.
Implemented on the test instance with the following tickets: {T260147}, {T261284}
**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
**Mocks**
| | **Currently** | **Updated design** |
| Descriptions below fields | {F33996510} | {F33996541} |
| Long description, truncated and collapsed | n/a | {F33996518} |
| Long description, expanded | n/a | {F33996543}|
| Example | {F33996534} | See above |
| Deprecated | {F33996525} | |
| Required | {F33996529} | See top image, Film name param|
**Specs**
//Add here the exact padding dimensions between each param and between label, description and field. Add visual//
**Open questions:**
- What is the best way to calculate cut-off thresholds? Is it possible to calculate by line? Calculating by character was producing some funky results on the test instance.
- Add feature flag in ticket or implemented in parent ticket for all VE updates?
//Reminder: Add VisualEditor-MediaWiki-Templates tag when ticket is done.//