Tab alternative view for mobile screens

[fernandoabolafio]

Tab alternative view for mobile screens

[MariaPleshkova]

Designs for an alternative view
Changed tabs to dropdowns+notice that we decided to be back to cyan color for active tab underlining (everywhere)
Preview: https://xd.adobe.com/view/d3332251-ae10-41e4-6bf4-1f3d90c11d84-a502/
Specs: https://xd.adobe.com/spec/2780360d-2ca6-4aeb-7fc8-8ad4e1b94be7-51b1/

[fernandoabolafio]

Yes, that sounds like the way to go. Just have in mind that you can pass custom components for the dropdown trigger (or title as you said).
If you find that this approach is not doable or that the tabs should have its own custom mode instead of mixing with the dropdown, just let me know and we can switch approaches. Just make sure we can achieve the desired output and it's easy to "toggle" the tabs to have it modified.

For example, ideally what I have in mind is something like this:

<Tabs dropdownMode={true/false}>
<Tab> tab 1 </Tab>
<Tab> tab 2 </Tab>
</Tabs>

Basically through the dropdownMode prop we should be able to alternate between the modes without any hassle.

[amass01]

@fernandoabolafio will try achieve what we described above and will let you know, thanks a lot for your replies

[amass01]

So to achieve the result shown in the design we will need to adjust 'drowdownitem' to accept count prop as well ? or should it be in the direction of using the dropdown with tabs as shown here (dropdown with tabs example)

[fernandoabolafio]

@amassarwi to me it makes more sense to achieve by using the second approach "using the dropdown with tabs". Because we can do pretty much what was already done in the example you mentioned and replace the dropdown trigger by the appropriate component from the design specs. What do you think?

[amass01]

@fernandoabolafio, totally agree, we will need disable active tab indicator and update dropdown title to be the active tab label on tabs switch, right ?

[fernandoabolafio]

closed on #131