[Bug]: Tabs content should have $layer-01 background

[shixiedesign]

Package

@carbon/styles

Browser

No response

Package version

1.35.0

React version

No response

Description

I noticed tabs being used with tab content having no background, which makes the $layer-01 background of selected tab not really work as selected when there are 2 tabs. I believe the original design intent is the selected tab's content has $layer-01 background so it matches that of the tab above it, creating a visual connection:

Reproduction/example

https://react.carbondesignsystem.com/?path=/story/components-tabs--contained

Steps to reproduce

Go to https://react.carbondesignsystem.com/?path=/story/components-tabs--contained

Suggested Severity

Severity 3 = User can complete task, and/or has a workaround within the user experience of a given component.

Application/PAL

Carbon for Salesforce

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[tay1orjones]

@carbon-design-system/design could you confirm? It looks like this is just contained tabs.

There is no background style applied to .cds--tab-content, so this doesn't respond to being wrapped in a Layer component.

[kingtraceyj]

HI @shixiedesign! we originally didn't include a back in the design specs. can you explain a little more why the layers aren't working? thank you!

[shixiedesign]

Sorry I don't seem to be getting email notification on the pings here except when issue closes.

So @kingtraceyj the layers aren't working because of what @tay1orjones said, I suppose:

There is no background style applied to .cds--tab-content, so this doesn't respond to being wrapped in a Layer component.

There's .cds-tabs-content div as part of the Tabs component. This is good because users are expected to put content inside it. But because there's no background, contained tabs will always take the background of the Page, not the background of the selected tab which is a layer. So it's like an extra step (custom override) needed to use an out-of-the-box component correctly, and from my observation it's a common mistake to put contained tabs on non-matching background like left image in description. My understanding is that the contained tabs's content should always be on background matching the selected tabs. Is that right? If so, I think ideally we add that background to Contained tabs.

[tay1orjones]

from my observation it's a common mistake to put contained tabs on non-matching background

It's hard to know how pervasive this is. If we add the background, I think adding it behind a feature flag would be needed so that users don't pull a new minor and see visual changes in their app that they didn't have before. We can make it the default behavior in the next major.

[kingtraceyj]

@tay1orjones was the recently merged PR under the v12 feature flag? it looks live in v11.

Updates:

#15787

#15791

[kingtraceyj]

Updated documentation to reflect tab panel layering model

Tab panel is updated in storybook