Tabs component - height or allowing others layout props

[eduardopsll]

Component
Tabs

Question
Wouldn't it be useful to allow some/all layout properties to be set on the Tabs component?

In my current project, I would like the tabs component takes all the remaining height (actually the tab panel) without needing to specify the height in the children.

Or is there another way to do it?

[serifluous]

Hey @eduardopsll , thanks for posting! I've brought it up with the team, and we'll likely get back to you after the break.

[serifluous]

@eduardopsll Can you explain a little more about why you're trying to set height on the Tabs component, and why setting a height on the child content wouldn't be preferable? That'll help us figure out an alternative solution based on what your customers need, and better understand your requirements if we do need to add a sizing/layout prop.

In general, we try to take the approach of containers & layouts fitting content rather than the other way around. If a height were set on Tabs, the height of the child content could still end up varying, which would end up cutting off the content in an unintended way.

[corinne-nagel]

Hi @eduardopsll , closing the loop on this, did you figure out what approach you're going to take? Thanks!

[epardosanllorente]

hey, sorry for my late reply.
So, in my current project, it's interesting that the child fits the parent instead of the parent getting the size of the children.

I have a solution implemented now, where the child uses a calc with all the sizes of the parent elements (components height, margin, padding, etc) to set the height and fit the viewport.
The problem I see with this solution, is that every time I change something related to the parents I will need to updated the children as well.

[gloriliale]

Hi @epardosanllorente! Could you share a screenshot of your final implementation? If you'd rather, please feel free to post it on #help-design-systems or even send it over DM. Thanks!

[TheSisb]

Hi @epardosanllorente,

Closing this discussion because it's going stale. If you're willing, you can sign up for design system office hours, which let's us all get on a Zoom call and talk through the problem together. If you don't know how to sign up for office hours, please reach out to me on Slack (sisber) for guidance.