✅ Option to change the tab-label or delete it entirely & make more the horizontal scroll of many tabs more visible

[KerstinFaye]

Problem: Users had difficulty switching between tabs when they had many chart tabs open. They did not realize that they could scroll horizontally. Tab label names have been super long since they were the same as the chart title.

Improvement:

• Clearly indicate that tabs can be scrolled horizontally. Little arrows left and right when many tabs.
• The user should have the option to change the label of the tab or delete it entirely.
• The tab label can be edited by clicking the chevron within a tab (design).
• In editing mode, the tab label can be added or edited by clicking the title/description field in the sidebar. An additional field for the label will be added for the tba label.

Design: Figma Design

[bprusinowski]

Ready on TEST 🧑‍💻

[KerstinFaye]

@bprusinowski I added the link in the chevron when clicking on the tab and also the field underneath the "title & description" in the editing mode.

[sosiology]

Observations from my test on TEST

1. In published mode, the left arrow seems to be missing, and the tab is not aligned with the rest of the frame. I assume that the arrow should only appear once the user scrolls, but the indent before the first tab looks a bit strange to me. see: https://test.visualize.admin.ch/en/v/tFKBIr7nwSRG?dataSource=Prod and screen shot below

2. i noticed there is no character limit on the tab label...should we consider introducing a character limit for the tab labels to avoid extremely long labels as can be seen here: https://test.visualize.admin.ch/en/v/tFKBIr7nwSRG?dataSource=Prod. If the label is very long, it may be hard for the user to discover additional charts in a chart published in tab layout. This would be a new issue 💡

3. Tested with 15 charts here: https://test.visualize.admin.ch/en/v/Nv72Y4_HupmB?dataSource=Prod scrolling is fluid.

[bprusinowski]

Hi @sosiology, thanks for testing 🙇‍♂️ Maybe we could combine the two first things in a new issue? The behavior of having an empty space is there by default in MUI (https://mui.com/material-ui/react-tabs/#scrollable-tabs), but we could try to change this 👍

[sosiology]

Thanks for the explanation @bprusinowski i created a new issue here #1776

[KerstinFaye]

Thanks @sosiology for the observations.

1. I agree this would be very nice to align and only on scroll the space would be used for the arrow.
2. @bprusinowski If I remember correctly we discussed about this before? But for sure it would make a lot of sense to limit the characters.

[sosiology]

@KerstinFaye thanks for your feedback. If you have any other ideas or improvements on the topic of tab labels please adde them to the new issue here #1776