Now that TabPanel usage is on the verge of becoming a little more widespead across the Editor (see #38277 (comment) and #41937), it's a good time to consider some aspects of the component design:

TabPanel on Storybook.

Additional to the examples listed above, the most prominent instances of this component paint a border beneath the tabs:

Inserter	Inspector

However, the default styling of the component does not include this border. Adding this same style manually across multiple instances is obviously not ideal.

With these new applications we also find situations where Tabs exist within the panels of other Tabs, and in other panels like the color picker. So a question arises about whether there should be a style variant that resembles hierarchy.

Lastly we might consider the layout as well. In particular; should tabs fill their container horizontally? How can we make the panel padding elegantly match the parent container padding, or should the panel padding always be static?

TLDR:

It would be nice if we can avoid ad hoc style overrides when using TabPanel.

• Should there be a border beneath the tabs as a default?
• Should tabs fill their container horizontally, ignoring padding?
• Should tab panel padding be static, or be context aware so that it can match its parent?
• Should there be a style variant for TabPanels nested within TabPanels, IE secondary tabs? If so, when exactly should this be applied, and can it be handled programatically?

cc @WordPress/gutenberg-design