Tabs: Decide on responsive approach and worst case scenarios

digdir / designsystemet

Designsystemet

https://designsystemet.no

MIT License

81 stars 37 forks source link

Tabs: Decide on responsive approach and worst case scenarios #916

Open mimarz opened 1 year ago

mimarz commented 1 year ago

We need to decide on how we should resolve the following use-case, and update code & guidelines in accordance.

What are our recommendations for mobile?
To long tab titles making tabs go outside viewport?

TheTechArch commented 1 year ago

Add this as example. 4 options go out of viewport. Example from here

Barsnes commented 1 year ago

I think there are a couple options, each with their own tradeoff. Personally I like scrollable tabs, which is probably the easiest solution, but it needs to communicate that you can scroll, either with an arrow or scrollbar. Maybe this could be coupled with a prop to only display the icon on mobile? Other options would be change to dropdown or to stack them.

mimarz commented 1 year ago

Meeting 31.10.23

We decided we should implement horizontal overflow with scroll and button navigation.

Example: https://storybook.eds.equinor.com/?path=/docs/navigation-tabs--docs#overflow-with-nextprevious-buttons