Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

KTabsList: Improve overflow handling #656

Open
AlexVelezLl opened this issue Jun 14, 2024 · 1 comment
Open

KTabsList: Improve overflow handling #656

AlexVelezLl opened this issue Jun 14, 2024 · 1 comment
Labels
Component: KTabs Component: KTabsList DEV: frontend P2 - normal Priority: Nice to have product: Kolibri Relevant to a specific issue in Kolibri TODO: needs decisions Further discussion and planning necessary type: proposal New feature or request

Comments

@AlexVelezLl
Copy link
Member

Product

Kolibri.

Desired behavior

KTabsList, and therefore also KTabs (which is built on top of it) should always take up one row. If the tab list items can't fit into one row, we should show left and/or right arrows to slide through the tab list items:

image

image

You can see the full specs here.

Current behavior

With the current implementation, if tabs are overflowed, they are split and presented on multiple lines.

The Value Add

With this, KTabsList will dynamically adjust to accommodate additional tabs, providing smooth navigation and ensuring all tabs are accessible to mouse, keyboard and screenreader users, without cluttering or upsetting the interface.

@nucleogenesis
Copy link
Member

@marcellamaki noted in a meeting that we did move away from the side-scrolling tabs pattern in part due to critical feedback - particularly on touchscreen devices. Additional feedback on the existing pattern may be useful in further discussions.

@nucleogenesis nucleogenesis added the P2 - normal Priority: Nice to have label Sep 17, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Component: KTabs Component: KTabsList DEV: frontend P2 - normal Priority: Nice to have product: Kolibri Relevant to a specific issue in Kolibri TODO: needs decisions Further discussion and planning necessary type: proposal New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants