[Tabs / Tab Nav / Tab Title] When used outside Tabs, selected prop and style not correctly applied to Tab Title

[macandcheese]

Check existing issues

• I have checked for existing issues to avoid duplicates

Actual Behavior

Currently, when using Tab Nav outside the Tabs component - the active underline bar accurately moves, but the component does not receive the selected property or related styles:

Expected Behavior

When using Tab Nav outside the Tabs component as documented, have the selected prop accurately update.

Reproduction Sample

https://codepen.io/mac_and_cheese/pen/XWyLYmm?editors=1000

Reproduction Steps

1. visit Codepen
2. change both tabs
3. Notice the property not applied to the first Tab Nav

Reproduction Version

1.4.3

Relevant Info

If we do say Tabs is required to wrap a Tab Nav, maybe we can not render the border or any padding / margin when no Tab component are provided. I do think the Tab Nav on its own is valid, for example if slotted somewhere it is impractical to use adjacent div, and an app uses the Tab Nav events to show / hide their own content.

Related - #2721

cc @mitc7862

Regression?

No response

Priority impact

p3 - want for upcoming milestone

Impact

No response

Calcite package

• @esri/calcite-components
• @esri/calcite-components-react

Esri team

Calcite (design)

[geospatialem]

Consider as part of refactor to the related (also mentioned above) #2721

[geospatialem]

Spike to confirm if tab-nav can be used independently. If not, should consider closing this and update the documentation page with additional context/workflow patterns for folks.

[jcfranco]

It looks like standalone tab-nav worked prior to v1, but since then, there doesn't seem to be any documentation or examples about standalone usage (the closest thing I found was this demo page update and original basic usage file). From that perspective, the component is behaving as expected, but I agree with @macandcheese's point about tab-nav potentially being useful by itself for some use cases. @macandcheese could you share more info on your use case and the priority/impact?

[macandcheese]

I don’t have one for anything I’m working on, but it was a supported case that stopped working.

I’m fine to just not support this if no one else reported it - as it hasn’t worked in a long time - especially if this coincides with a larger component refactor to Tab component / Tab Group.

[jcfranco]

I don’t have one for anything I’m working on, but it was a supported case that stopped working.

Yeah, this use case was a bit inconspicuous before we went out of beta. Unless any of the existing props are related to this behavior (I think they're unrelated), I'd like to propose either backlogging or closing until we get more requests for this use case. cc @geospatialem

[github-actions]

cc @geospatialem, @brittneytewks

[macandcheese]

Agreed - Menu should be able to solve for use cases where this was implemented. I'd suggest closing and folks can open new issues if needed.

[geospatialem]

Closing per #7512 (comment) and #7512 (comment).

If the use case comes up in the future we can explore alternative methods, or to Adam's point above, potentially could be solved using menu.