Replace TabsWithOverflow with KListWithOverflow

[AllanOXDi]

Summary

• Migrate use of TabsWithOverflow to the KListWithOverflow component to be released in KDS
• closes Quiz Creation: Replace TabsWithOverflow with KListWithOverflow  #12011

References

#12011

Reviewer guidance

Do the changes look good to you?

Testing checklist

• Contributor has fully tested the PR manually
• If there are any front-end changes, before/after screenshots are included
• Critical user journeys are covered by Gherkin stories
• Critical and brittle code paths are covered by unit tests

PR process

• PR has the correct target branch and milestone
• PR has 'needs review' or 'work-in-progress' label
• If PR is ready for review, a reviewer has been added. (Don't use 'Assignees')
• If this is an important user-facing change, PR or related issue has a 'changelog' label
• If this includes an internal dependency change, a link to the diff is provided

Reviewer checklist

• Automated test coverage is satisfactory
• PR is fully functional
• PR has been tested for accessibility regressions
• External dependency files were updated if necessary (yarn and pip)
• Documentation is updated
• Contributor is in AUTHORS.md

[github-actions]

Build Artifacts

Asset type	Download link
PEX file	kolibri-.pex
Windows Installer (EXE)	kolibri-0.16.1.dev0+git.20240411142016-unsigned.exe
Debian Package	kolibri_0.16.1.dev0+git.20240411142016-0ubuntu1_all.deb
Mac Installer (DMG)	kolibri-0.16.1.dev0+git.20240411142016-0.4.0.dmg
Android Package (APK)	kolibri-0.16.1.dev0+git.20240411142016-0.1.0-debug.apk
TAR file	kolibri-0.16.1.dev0+git.20240411142016.tar.gz
WHL file	kolibri-0.16.1.dev0+git.20240411142016-py2.py3-none-any.whl

[nucleogenesis]

Looks like the version of KDS on develop doesn't yet have the KListWithOverflow in it.

@MisRob -- is there any reason we're not using KDS >= v4.0.0 on develop? If so then this is as good a place as any to make that update eh?

[MisRob]

is there any reason we're not using KDS >= v4.0.0 on develop? If so then this is as good a place as any to make that update eh?

@nucleogenesis KDS v4 is the release containing rebranding and it will be introduced in this PR #11911, at first to the release branch (and from there merged to the develop I assume)

KListWithOverflow is also available in KDS v3.1.1 so it can be installed into branches that have no branding changes yet. So I think you could just install 3.1.1 in this PR.

[nucleogenesis]

The code switch looks super close but there is one thing that is left behind with the component swap.

The KTabsList is used in the old TabsWithOverflow and that is where we get our tab & click handling business from.

I think that might fix the styling issues as well, but if not, I hope the fix there is straightforward.

[nucleogenesis]

When I tested it I noticed we're missing the styles and click-ability of the section buttons. I believe this is because the TabsWithOverflow component wrapped everything within a KTabsList.

I think that you'll need to still migrate some of that logic to this component - such as the "activeTabId" and "@click" handler and possibly the "tabsWrapper" ref.

I think that it may work by wrapping the whole <template #item="{ item }"> block with the KTabsList component without worrying about the #tab slot there -- but I'm not super sure on this.

[nucleogenesis]

I wonder if the overflowItems given by the new KListWithOverflow are the same shape as the data we were getting before because of the missing styles -- however, this may only be due to the missing KTabsList component issue mentioned above.

[MisRob]

@AllanOXDi @nucleogenesis I'm not familiar with the details of work, just noticed that currently it seems we're moving away from KTabsList to KListWithOverflow + plus some custom logic. Just an alert that KListWithOverflow can't replace KTabsList by no means since KTabsList contains tons of logic related to a11y specific to tabbed interfaces whereas KListWithOverflow is much more general. My recommendation would be to return it and also invite @radinamatic as soon as work here is done to give final confirm.

Relatedly, KTabsList will be updated to contain KListWithOverflow within itself at some point because that will resolve lots of issues across the whole Kolibri where we see tabs taking two or more rows. If it would help with this task, we could prioritize it and rather focus on updating KTabsList to support this behavior by default. I don't think it'd be complicated work, it's something we need to do anyways.

[nucleogenesis]

This issue is blocked by this KDS issue - some of my feedback above re: tab styles/functionality will be added directly into KDS, so once that issue is closed, we can update this PR accordingly.