Demo

Jenkins

demos.haus

Thanks @jmuzina! LGTM already, mostly just nitpicking here -

• The description on Figma documentation is "The tab section is a pattern used to display multiple related categories or content sets within a single section, allowing users to switch between them without moving to the next section.
The tab adapts its width to accommodate the maximum width of its inner content, supporting 50, 75, or 100 width variants." instead of "A tab section is used to organize related content into separate tabs within a section. It combines a title, optional description, and optional call-to-action with a tabbed interface that can contain various types of content blocks." - should this we keep the description consistent between Vanilla and Figma @kim-isaac?

• The headings seem to shift slightly as you toggle through the tabs because of scroll bar that is/isn't present in some of the options - not a huge deal if there isn't an obvious fix for this but at a glance it seems as though the design varies between content variants.

• Very minor but under the padding variants, could we list "default" as the first item in the bulleted list as it's the default value?

Also tagging @Sophie-32 if there's anything I missed as I see she reviewed the content on Figma! I'll +1 anyway as these are minor

Thanks @jmuzina ! Looks great and glad to see the basic section included.

Regarding @eliman11 's comment, I think it’s fine to keep as it is in the Vanilla documentation, since the one in the Figma mainly focuses on content and design aspects. I’ll include that in the design documentation instead.

The Codepen example with scrolling also looks fine to me, as I don’t expect this case to occur often on real pages.

And I have one comments from the visual side:

• it looks like the shallow padding between the heading part and tabs is missing - could we add that?

Lastly, as discussed in the MM, the equal heights block should be added to all three layout options in a future update, separate from the current scope. If there’s anything you can share for follow-up, that would be much appreciated. For future reference, I’m sharing here the comment you left on the equal heights ticket as well.

Thank you so much!!

Very minor but under the padding variants, could we list "default" as the first item in the bulleted list as it's the default value?

@eliman11 Good call, adjusted - thanks!

it looks like the shallow padding between the heading part and tabs is missing - could we add that?

@kim-isaac I've added shallow padding between the heading/description/cta and tabs. Can you have a look and let me know if it's as you expect?

Thanks @jmuzina ! I have a few comments left:

• For the 50/50 layout, could we group heading and description+tab separately? In the current structure, if there’s no description, it results in empty space.
• Also, it would be good to standardise the naming. In this case it’s written as 50-50, while other patterns use 50/50. Would it make sense to unify everything as 50/50? (for 25/75 as well)
• Additionally, for the 25/75 and full-width layouts, if there’s no description, could we make heading to expand to full width? Right now, it stays at 50%.

@kim-isaac Thanks, I have addressed your second two points, and I believe I've addressed the third:

For the 50/50 layout, could we group heading and description+tab separately? In the current structure, if there’s no description, it results in empty space.

I was applying shallow section spacing to the entire title/desc/CTA row - I have moved it to beneath the description/cta when it is present, so none is added when there is no desc/CTA. Is this what you expect? It seems to align with the Figma, just want to be sure.

All looks great, thanks a lot @jmuzina !

I wonder if this should be rebased so that the giff only contains the tab section - and not the whole refactor into the shared folder. Otherwise it looks good to me and I'm giving an approval

I wonder if this should be rebased so that the giff only contains the tab section - and not the whole refactor into the shared folder. Otherwise it looks good to me and I'm giving an approval

Yes, once #5694 is merged the surface of this PR will shrink as this PR is based on the quote wrapper pattern refactor.