Tab section pattern

[jmuzina]

Done

Builds the tab section pattern.

Includes #5694 in the diff. Please merge #5694 first.

TODO

• [x] Fix Percy visual regressions
• [x] Polish code
• [x] Docs page

QA

• Open full width
• Open 50/50
• Open 25/75
• Open combined examples and make sure everything looks OK. Note that combined examples are not interactive, so you won't be able to interact with the tabs.
• Open docs and review the tab section docs.
• Open what's new and review the changelog

Check if PR is ready for release

If this PR contains Vanilla SCSS or macro code changes, it should contain the following changes to make sure it's ready for the release:

• [x] PR should have one of the following labels to automatically categorise it in release notes:
  • Feature 🎁, Breaking Change 💣, Bug 🐛, Documentation 📝, Maintenance 🔨.
• [ ] Vanilla version in package.json should be updated relative to the most recent release, following semver convention
  • if existing APIs (CSS classes & macro APIs) are not changed it can be a bugfix release (x.x.X)
  • if existing APIs (CSS classes & macro APIs) are changed/added/removed it should be a minor version (x.X.0)
  • see the wiki for more details
• [ ] Any changes to component class names (new patterns, variants, removed or added features) or macros should be listed on the what's new page.

[webteam-app]

Demo

Jenkins

demos.haus

[eliman11]

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.

• [x] 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

[kim-isaac]

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!!

[jmuzina]

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?

[kim-isaac]

Thanks @jmuzina ! I have a few comments left:

• [x] 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.
• [x] 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)
• [x] 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%.

[jmuzina]

@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.