make ui menu accept maxWidth to avoid text truncation

[lokesh-sagi125]

Description

override the max-width set by this component UiMenu. And for this, we will need to update our KDropdownMenu component to accept a new prop maxWidth that will then be passed to the UiMenu component.

Issue addressed

learningequality/kolibri#5557

Addresses learningequality/kolibri#5557

Changelog

• Description: remove text truncation for the download button
• Products impact: Choose from - none
• Addresses: Localized strings can be too long for the Resource Download button kolibri#5557
• Components: KDropdownMenu,UiMenu
• Breaking: no
• Impacts a11y: yes
• Guidance: -

[MisRob]

Hi @lokesh-sagi125, would you upload some screenshots of how the output would look like for learningequality/kolibri#5557? Also, what changes you did in Kolibri after having this KDS update available to achieve that - do you have a Kolibri working branch you could reference?

At first sight, I don't understand the connection of this work to the problem with the file size being pushed out - this would help me to connect the dots.

[MisRob]

Oh I just noticed @AlexVelezLl's #858 (comment). Alright, it seems fine (generally I'd recommend you always upload screenshots to pull requests so reviewers don't need to do the detective work :)

One question I had is if the title part gets truncated? It's correct that the title takes less space so the file size is always visible, but if the whole of the title is not visible, we should still show the ellipsis ...

[AlexVelezLl]

Oh @MisRob, In this case we should show the whole string without it being truncated because this string is not a user string, but a system string. In this context the string is showing the different files from a resource that can be downloaded (e.g. "Document", "thumbnail", "HTML"). So, if we truncate this string, the message could be a little confusing, and the user might not be able to understand what is they downloading, so thats why Blaine suggested that the better option here is to show the full message and avoid truncating a system string:

If the text isn't user generated, I don't think there should be text truncation on that at all, because that calls into question the usefulness of the text, if it's being truncated in some languages.

[MisRob]

I see @AlexVelezLl, so can I understand right that the string will take more lines in the case you describe? I think that'd be fine, the main thing is that the whole text is visible.

[AlexVelezLl]

Hmm no @MisRob, the long string will be all placed in just one line like this, but will not get truncated:

[MisRob]

Thanks @AlexVelezLl, I looked into it more and I think it should be good for the case we're trying to resolve.

[lokesh-sagi125]

hey @MisRob, sorry for the inactivity I have made the changes in the code by testing the components individually, but I can't seem to load the resources into Kolibri like the ones in the production model, @AlexVelezLl has directed with the steps needed, I can't seem to get it to work, could you clarify this one doubt, am I supposed build Kolibri and run kolibri start or run devserver-with-kids because when I run dev server, there are no resources being loaded, I keep getting the no resources found error when I try to explore

[MisRob]

Hi @lokesh-sagi125, I don't exactly understand what's going on. Have you followed this guide? And were you able to run Kolibri in the usual way, without local Kolibri Design System? If no, please open a new topic in the Kolibri Discussions where I'd ask you to describe step by step what you did and upload as full terminal log as possible.

[MisRob]

@AlexVelezLl Apart from testing in Kolibri, do code changes on KDS side look good to you?

[lokesh-sagi125]

Yes, @MisRob, I can run Kolibri with and without the local Kolibri design system. However, in both cases, I encounter the same issue: I cannot import any channels or resources I could use for testing. I keep getting the "no resources available"

this issue is the same for anything under the learn drop-down menu.(also for the navbar)

[AlexVelezLl]

Hey @lokesh-sagi125! You can look at this for reference of how you can import resources to your Kolibri instance! https://kolibri.readthedocs.io/en/latest/manage/resources.html 👐

[AlexVelezLl]

Apart from testing in Kolibri, do code changes on KDS side look good to you?

Yes @MisRob! This is the expected behaviour! With this, we can open a PR in Kolibri setting the maxWidth to none to close learningequality/kolibri#5557