[DRAFT] Explore refactoring KBreadcrumbs to use KListWithOverflow

[shruti862]

Description

Updated lib/KListWithOverflow.vue and lib/KBreadcrumbs.vue files

Issue addressed

Addresses issue #693

Addresses #PR# HERE

Before/after screenshots

Changelog

• Description: Summary of change(s)
• Products impact: Choose from - none (for internal updates) / bugfix / new API / updated API / removed API. If it's 'none', use "-" for all items below to indicate they are not relevant.
• Addresses: Link(s) to GH issue(s) addressed. Include KDS links as well as links to related issues in a consumer product repository too.
• Components: Affected public KDS component. Do not include internal sub-components or documentation components.
• Breaking: Will this change break something in a consumer? Choose from: yes / no
• Impacts a11y: Does this change improve a11y or adds new features that can be used to improve it? Choose from: yes / no
• Guidance: Why and how to introduce this update to a consumer? Required for breaking changes, appreciated for changes with a11y impact, and welcomed for non-breaking changes when relevant.

Steps to test

1. Step 1
2. Step 2
3. ...

(optional) Implementation notes

At a high level, how did you implement this?

Does this introduce any tech-debt items?

Testing checklist

• [ ] Contributor has fully tested the PR manually
• [ ] If there are any front-end changes, before/after screenshots are included
• [ ] Critical and brittle code paths are covered by unit tests
• [ ] The change is described in the changelog section above

Reviewer guidance

• [ ] Is the code clean and well-commented?
• [ ] Are there tests for this change?
• [ ] Are all UI components LTR and RTL compliant (if applicable)?
• [ ] Add other things to check for here

Comments

[MisRob]

Converting to draft https://github.com/learningequality/kolibri-design-system/issues/693#issuecomment-2526877826

[MisRob]

@shruti862 Also referencing @AlexVelezLl's comments that touches on some areas you mentioned, perhaps it helps https://github.com/learningequality/kolibri-design-system/issues/693#issuecomment-2354513487

[MisRob]

@AlexVelezLl Hi Alex, @shruti862 continues this work and already followed some of your guidance. @shruti862 experienced some blockers and I asked to elaborate in this PR on some specific places. Would you please be available for giving a direction?

https://github.com/learningequality/kolibri-design-system/pull/857/commits/cd730f1821ceef5becb428b01d392dfdf1ae546c

[shruti862]

1.) Unable to get separators '>' between the items of list 2.) In the dropdown menu ,only the overflowed text is visible, link is not being applied.

[AlexVelezLl]

Thanks @shruti862! I will take a look later today :)

[shruti862]

@AlexVelezLl I have fixed the keyboard navigation problem and alignment of list items when there is no more button in KListWithOverflow . Now I am only facing problem in KBreadcrumb , my last visible item of list is getting outside of box even if there is enough space left in list-wrapper box. Can you please help me resolving this issue? One more thing I noticed that list items having links differ from whats in the https://design-system.learningequality.org/kbreadcrumbs/ page ,

[shruti862]

when I mounted the items array , link is present on list tems which is not in the https://design-system.learningequality.org/kbreadcrumbs/ page

[shruti862]

@AlexVelezLl Can you please review my current changes specially the fixDividersVisibility method ::Since the lastVisibleIdx in case of overflowdirection:'start' will always be last element of list.children because overflowIdx array is calculated after reversing the list.children for start direction so I didn't applied any checks on it.

[shruti862]

@AlexVelezLl But now i am facing issue on truncating the last visible item of the list. Could you please guide me how to approach this?? Right now the output is looking something like this::

[shruti862]

Hey @AlexVelezLl , I have done some changes to the code as you suggested , last visible item of list is no longer rendered as a link and its gets truncated when it does not fit in available space , after the changes it is looking like: But I encountered one more issue that on resizing the container last element gets into the dropdown menu instead of getting truncated :( Can you guide me how to resolve this ??

[AlexVelezLl]

Thanks @shruti862! I think for this you can have two options:

1. Play with the maxWidth management of the last breadcrumb item.
2. Add a "showAtLeastOne" prop to KListWithOverflow that prevents from removing the last visible item.

In any case we need for find a better solution for (1) because when we have showSingleItem = true in KBreadcrumbs, we should not truncate the text. See for example if we had a long string in the first item:

Before:

After:

[shruti862]

Hey @AlexVelezLl ,I have implemented some new changes to KBreadcrumbs. Now, when showSingleItem = true, the text is no longer truncated. Regarding the last visible item not moving into the dropdown menu, I tried implementing your suggestions, but they didn't seem to have any effect. I'm unable to pinpoint what I might be doing wrong.

Could you please review my code and provide feedback on any mistakes? Your insights would be greatly appreciated.

Thanks!

[MisRob]

Hi @shruti862, thanks for all this work. I know this is a tricky issue.

I have implemented some new changes to KBreadcrumbs. Now, when showSingleItem = true, the text is no longer truncated.

I am just chiming in to provide a bit of general contributing guidance on when encountering issues like this. Would you be able to debug it deeper to get a sense on why is that happening? I think after you have a good sense, that would be the most suitable point to discuss next steps.

A little example: "when showSingleItem = true this doesn't work" --> "this is happening because this particular method does this and this" --> "I could approach it in this way, but that would have negative impact on this another area ... another alternative would be ... any thoughts?"

Collaborative aspect is important, and it's great when developers can connect and work through challenges together, it's just that we'd need a bit more information. I think this will help to make contributing in any open-source project successful and review process smoother.

[shruti862]

Hey @MisRob , I was just letting @AlexVelezLl to know that previous sub-issue of last visible item when showSingleItem=true being truncated is solved now. Regarding the other sub-issue I am facing ,I appreciate the guidance you provided on approaching issues more systematically. I'll take a deeper look into why this is happening and try to pinpoint the root cause. Thanks !

[MisRob]

Ah I totally misunderstood this particular note @shruti862, apologies. Thanks for mentioning it. Yes it was just meant to be a [wrongly chosen] example that nevertheless applies to other issues throughout this work - I think we're on the same page. Thank you and keep up the great work here :)

[shruti862]

As the container size decreases and can no longer accommodate the last visible item, all items, including the "More" button, become hidden. However, the visibility of the "More" button remains set to 'visible'. Screencast from 26-02-25 06:52:41 PM IST.webm

[MisRob]

As the container size decreases and can no longer accommodate the last visible item, all items, including the "More" button, become hidden. However, the visibility of the "More" button remains set to 'visible'.

Hi @shruti862, thanks for the recording - I would expect the More button never disappear if it has any items (which is this case).

[shruti862]

Hi @shruti862! I have left some comments, I hope this helps :) We are very close to get it!

Hey @AlexVelezLl, I appreciate your guidance and support in resolving this issue. I'll go through the changes you suggested and provide an update soon.

[shruti862]

Hey @AlexVelezLl, I've implemented all the suggested changes. However, I noticed one issue — the last item in the list doesn't show the '...' on text overflow.

[AlexVelezLl]

Hi @shruti862, It seems there are still some unresolved comments. Please take a look to all my comments in this view https://github.com/learningequality/kolibri-design-system/pull/857/files and make sure you have considered/responded/implemented all of them :). Thanks!

[shruti862]

Hi @shruti862, It seems there are still some unresolved comments. Please take a look to all my comments in this view https://github.com/learningequality/kolibri-design-system/pull/857/files and make sure you have considered/responded/implemented all of them :). Thanks!

Hey @AlexVelezLl , Currently my end semester exams are going on. I will get back to this issue within 2 days :)

[AlexVelezLl]

Hey @shruti862! Thanks for letting us know! Please take your time, no rush! Good luck with your exams!

[shruti862]

Hey @AlexVelezLl , I have tried to answer all the unresolved comments, please do have a look

[MisRob]

Hi @shruti862, in the course of this work, we've noticed some unexpected limitations of KListWithOverflow and there's need for some decisions before we can complete this refactor. As you're now working on your GSoC project, I thought it'd be best to let you focus on that, and re-assign this to @AlexVelezLl who will explore what would be possible next steps. Thanks a lot to both!