Vocabulary: Modified tab components [Feature request]

[makkoncept]

Problem

I observed that tabs component used in the CC Search Extension Mockup have a different design.

I see two new flavours of the component :

Maybe more discussion is needed for the second one. Is it really a tab component or something else(a header?). It do functions like a tab in the Mockup.

Implementation

• [ ] I would be interested in implementing this feature.

[panchovm]

I need to add as a component the tab used in Browser extension. We have faced different levels of content navigation and that's why the component difference. Thanks for bringing this.

[panchovm]

The Design Library is updated with the two navigation components.

[zackkrida]

@panchovm The 'Line Tab' should replace the existing tab style here: https://cc-vocabulary.netlify.app/?path=/story/layouts-tabs--tab, yes? Just want to confirm 😸

[panchovm]

Yes @zackkrida. It should be replaced.

[makkoncept]

@zackkrida @panchovm I am working on this issue. The "line tab" in the design library looks very similar to the existing tab style except for the thicker bottom border. Am I missing something else?

[zackkrida]

@makkoncept please also see the length of the bottom border (aligns with the text, no extra left+right spacing, and various hover/active differences:

new

existing

[panchovm]

As @zackkrida said, the extra left and right spacing are truly important. They give the alignment effect when is placed above/below paragraphs. Thank you both.