tabs: way to have same height in all elements

[jorgeorpinel]

Currently the height of the Toggle element varies depending on the active tab. This makes sense as the default behavior, not to make any assumptions.

Could it have a prop to enable a stable height across all tabs though? It'd have to be the tallest one I suppose.

• Port to other engines if implemented 🙂

[julieg18]

Could it have a prop to enable a stable height across all tabs though? It'd have to be the tallest one I suppose.

Makes sense, it would make tab switching be less jerky. We should be able to implement this! But what if we looked into making the content of a tab behave like a details component? Have the content of the tab expand smoothly instead? Then we could just apply that to all tabs without needing any props 🤔

p.s. should we create an iterative/web team for tagging on these? @rogermparent @julieg18

We do! @iterative/websites

[jorgeorpinel]

what if we looked into making the content of a tab behave like a details component? Have the content of the tab expand smoothly

Such an animation would definitely improve the default behavior. I may still want this feature on top but it would be more of a nice-to-have at that point 🙂 Up to you.

We do! iterative/websites

Oh lol k

[jorgeorpinel]

I may still want this feature on top but it would be more of a nice-to-have at that point 🙂

Well... I just tried using tabs [at the end of a doc](I may still want this feature on top but it would be more of a nice-to-have at that point 🙂) and the side menus move a lot with the tab changes (if you scroll down enough to see the page footer). I don't see how an animation would help there -- it'd still be quite distracting. Equal/max height may be the best way to go after all @julieg18 ?

[julieg18]

Makes sense! We'll put our focus on adding a prop for equal tab height.

[yathomasi]

I have tried setting the height of the tab to maximum content height, which introduces the possibility of having a large gap.
Here is the demo video:

Screen.Recording.2022-01-24.at.21.50.43.mov

So, I think we need to introduce some maximum default height which of course will introduce a scrollbar. Will that be okay?
Here is the demo video:

Screen.Recording.2022-01-24.at.21.58.17.mov

Also, we may also have props in case we want height more than the maximum default height.

cc @jorgeorpinel @julieg18

[shcheklein]

@yathomasi could we explore other docs/products with tabs, share some links, etc - how do they do this?

as we discussed today during the call, I would also to better understand how big of a problem it is.

If this is about configuring - Windows vs Linux vs Mac - IMO it becomes less of a problem since you switch once, and don't pay attention to the other tabs.

If tabs are being used instead of sections, and there is an expectation for users to read all of them to get the comprehensive meaning of the page, that's where it becomes a problem. But it's not clear that this use case is the right one for tabs in the first place

cc @jorgeorpinel - what's your take?

[jorgeorpinel]

introduces the possibility of having a large gap

Yeah I was thinking equal max height would have to be enabled via a prop.

we may also have props in case we want height more than the maximum default height

OK, this could be an alternative solution, which prop would that be? Do you mean something like <tab height="30m"> with some hardcoded dimension? Thanks @yathomasi

how big of a problem it is

@shcheklein not a big problem unless we use tabs near the end of a page. And per #2939 we're trying to avoid very creative uses of tabs: mainly focus on language or format switching (users would only switch once mostly), at first at least.

[yathomasi]

I have opened a pull request in cml.dev as cml.dev seems to use the toggle more. I ended up providing a simple implementation that uses height as a prop on the toggle component.

[jorgeorpinel]

Cool, thanks! That works. Please link this issue to the PR that ports that feature over. Thanks @yathomasi !

[jorgeorpinel]

Looks like this is resolved by #3257. Thanks again @yathomasi