List Component with Dynamic Overflow Handling

[AlexVelezLl]

Product

Kolibri, Studio, KDS.

Desired behavior

Create a new generic component that renders an horizontal list that automatically renders a "show more" component if any items overflow the container.

This should be managed as a renderless component that receives a slot to render the list items, and a slot to render the "show more" component. And provide a way to render divider elements.

I think a good way of hanlding this is that the component receives a list of items, and then each item is passed as a prop to a #item slot. And having another #more slot that renders the "see more" component, and that this slot receives a list of the overflowed items. One idea for including dividers is that they are objects within the items list that have a type: "divider" attribute that is consistent with the way dividers are handled in the KDropdownMenu.

The Value Add

This component can be used in multiple places:

1. We can create a more general version of the TabsWithOverflow component in Kolibri, which has some flaws with the outline of the items when navigating with the keyboard.
2. We can use it for rendering the HorizontalNavBarWithOverflow in Kolibri.
3. We can use it for rendering the new responsive palette menu of the studio usability enhancements project Studio#3423.
4. In the future we can support different types of preferences about which items to hide when overflowing, and hide items at the beginning instead of the latests, until they fit in the container. This way we could use it to render componentes like KBreadcrumbs in KDS.

[MisRob]

@AlexVelezLl Thank you for all work on this, it will be so useful.

We can create a more general version of the TabsWithOverflow component in Kolibri, which has some flaws with the outline of the items when navigating with the keyboard.

This would ideally be integrated into KTabsList itself as its default behavior as it's expected user experience in any tabs. Currently, tabs wrap into more lines which is no good. That means no need to make it into KTabsListWithOverflow or add a prop to configure it etc. Whenever you'd use KTabsList (and therefore KTabs as well), it would just work in this way with available space.

[MisRob]

@AlexVelezLl I appreciate the direction towards using slots to feed the component with items and menu. It will help with flexibility and scaling so in this context, I consider it better than providing it with an array of items via prop.

[AlexVelezLl]

This would ideally be integrated into KTabsList itself as its default behavior as it's expected user experience in any tabs.

Yes! I agree, I just cited the component since that was where the logic that handled the overflow was. But yes, I saw that for this we had to use the new KListWithOverflow inside the KTabsList

[AlexVelezLl]

Implemented in #552