Page MenuHomePhabricator

[VE WikifunctionsCall]: In FunctionSelector screen, trim descriptions when they are longer than a given character limit
Closed, ResolvedPublic

Description

Description

In the Visual Editor function selection dialog, on the list of suggested functions or searched functions, when a function description is longer than a given limit:

  • trim to 2 lines and show "Read more" link
  • on clicking "Read more", show the full description and change link to "Read less"
  • on clicking "Read less", go back to 2 line restriction

This is applicable to all places where description appears:

  • FunctionSelector screen (per function in the list)
  • FunctionInputSetup screen (for the function description on top)

As suggested in the technical specs document:

Could we use line-clamp instead? https://caniuse.com/?search=line%20clamp
N characters can be unreliable across languages. eg. some letters are larger than others, and we don't know how they will be rendered

Devices and Design (URLs or screenshots)

https://www.figma.com/design/sMOc0itmJIm6qthj8XKfMd/T363391-Design-prototype-for-WF-use-case-in-WP?node-id=1095-4805&p=f&t=IdtFKttbUMcVtxAH-0

Screenshot from 2025-02-26 17-20-04.png (401×439 px, 29 KB)

Screenshot from 2025-02-26 17-20-16.png (494×587 px, 34 KB)


Completion checklist

Event Timeline

gengh updated the task description. (Show Details)
DSmit-WMF changed the task status from Open to In Progress.Mar 18 2025, 12:14 PM

I am unsure which description is ment with: FunctionCallSetup

So with this option we should consider that the read more/read less can become long sentences in other languages and the button will overlap the text. We can overcome this a bit by using fades or so.
The way easier option would be to just put the button underneath.

Some tryouts below for reference:

Screenshot 2025-03-18 at 14.28.17.png (678×680 px, 78 KB)

Screenshot 2025-03-18 at 14.21.32.png (662×540 px, 76 KB)

Screenshot 2025-03-18 at 14.18.27.png (668×524 px, 80 KB)

We decided to go with a fade option:

image.png (720×333 px, 64 KB)

Change #1129783 had a related patch set uploaded (by Daphne Smit; author: Daphne Smit):

[mediawiki/extensions/WikiLambda@master] FunctionSelect.vue: trim descriptions when they are longer than a given character limit

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

Change #1129783 merged by jenkins-bot:

[mediawiki/extensions/WikiLambda@master] FunctionSelect.vue: trim descriptions when they are longer than a given character limit

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

Jdforrester-WMF subscribed.

No need to wait for deploy on this one, as it's not live in prod.

Change #1135003 had a related patch set uploaded (by Daphne Smit; author: Daphne Smit):

[mediawiki/extensions/WikiLambda@master] Fix a bug where the read more would show when a line would not be too long

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

Change #1135003 merged by jenkins-bot:

[mediawiki/extensions/WikiLambda@master] Fix a bug where the read more would show when a line would not be too long

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