Vertical Tab variant

[kingtraceyj]

The problem

PLG getting started pattern needs a stacked tab variant

The solution

Specs so far (about 90% done)

Need to confirm:

• Indicator size
• Overflow gradient (Should be similar to scrollable modal or scrollable tabs)
• Footer/Content area (should it be sticky and shouls we allow anything other than text and link?)

Examples

No response

Application/PAL

PLG

Business priority

High Priority = pressing release

Available extra resources

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[github-actions]

Thank you for submitting a feature request. Your proposal is open and will soon be triaged by the Carbon team.

If your proposal is accepted and the Carbon team has bandwidth they will take on the issue, or else request you or other volunteers from the community to work on this issue.

[tay1orjones]

How this is different than the existing TabList

• dismissable isn't allowed
• A toggle for contained isn't needed for vertical tabs
• fullWidth doesn't apply
• The overflow scroll buttons don't need to be rendered
• All the accompanying logic for the overflow scroll buttons isn't needed
• iconSize isn't needed because icons aren't allowed

New pieces of vertical tabs that won't apply to the existing Tablist

• New classnames will be needed to house the styling changes to support the vertical design spec
• aria-orientation="vertical" needs to be placed on the tablist
• Keyboard navigation needs to be modified to support changing tabs via arrow up or arrow down when in the vertical orientation

Since both of these lists add up to such a huge delta, I think we should try to approach this with a new component, TabListVertical, and not add an orientation="vertical" prop or vertical boolean prop to the existing TabList.

Ideas for the footer

If the footer meant to just be an empty box, we could explore providing a new component like TabListVerticalFooter that sets the proper classnames so it correctly displays whatever is provided through children. I'm not totally sure where it should be composed or sit in the DOM. If the footer is not a tab it would need to be outside/after the tablist in the DOM and tab order. Something like:

<Tabs>
  <TabListVertical aria-label="List of tabs">
    <Tab>Dashboard</Tab>
    <Tab>Monitoring</Tab>
    <Tab>Activity</Tab>
    <Tab disabled>Settings</Tab>
    <TabListVerticalFooter>
      <p>My custom content</p>
    </TabListVerticalFooter>
  </TabListVertical>
  <TabPanels>
    <TabPanel>Tab Panel 1</TabPanel>
    ...
  </TabPanels>
</Tabs>

If it's strictly limited to something like text and a link, maybe they could just be props:

<Tabs>
  <TabListVertical 
    footerText="something"
    footerLink={<Link/>}
    aria-label="List of tabs">
    ...
  </TabListVertical>
  <TabPanels>
    ...
  </TabPanels>
</Tabs>

[ljcarot]

@kingtraceyj is this issue ready to close or is there anything outstanding still?