Enhancement: Simplify calcite-tabs structure

[jcfranco]

Description

The current structure for tabs is a bit cumbersome for simple use cases:

<calcite-tabs ...>
  <calcite-tab-nav slot="tab-nav">
    <calcite-tab-title>title</calcite-tab-title>
    <calcite-tab-title>title</calcite-tab-title>
    <calcite-tab-title>title</calcite-tab-title>
  </calcite-tab-nav>

  <calcite-tab>content</calcite-tab>
  <calcite-tab>content</calcite-tab>
  <calcite-tab>content</calcite-tab>
</calcite-tabs>

The following structure is a proposal to simplify its usage and hopefully covers most basic use cases:

<calcite-tabs ...>
  <calcite-tab heading=title ...>content</calcite-tab>
  <calcite-tab heading=title ...>content</calcite-tab>
  <calcite-tab heading=title ...>content</calcite-tab>
</calcite-tabs>

To preserve existing tab-customization use cases, the following approaches could work:

1. Adding "title" slot to allow customizing tab's title:

   <calcite-tabs ...>
     <calcite-tab ...>
       <div slot="title">Special title<calcite-icon icon=banana></calcite-icon></div>
       content
     </calcite-tab>
     <calcite-tab heading=title ...>content</calcite-tab>
     <calcite-tab heading=title ...>content</calcite-tab>
   </calcite-tabs>

2. Adding icon-start/icon-end props to tab to quickly add an icon:

   <calcite-tabs ...>
     <calcite-tab heading=title icon-start=banana ...>content</calcite-tab>
     <calcite-tab heading=title ...>content</calcite-tab>
     <calcite-tab heading=title ...>content</calcite-tab>
   </calcite-tabs>

The first option seems the most flexible, as it would allow users to entirely customize the tab, including interactions (e.g., adding a close button that dismisses the tab when pressed).

Blocked issues: #9647

Acceptance Criteria

calcite-tabs follows the structure described above.

Relevant Info

From https://github.com/Esri/calcite-components/issues/1258#issuecomment-885802511

There's other web component libs that follow this structure:

https://ant.design/components/tabs/ https://react.carbondesignsystem.com/?path=/story/components-tabs--playground https://material-ui.com/components/tabs/

The only one that doesn't is Ionic (similar structure): https://ionicframework.com/docs/api/tabs

Which Component

calcite-tabs

Example Use Case

See example snippets.

[driskull]

@geospatialem I labeled this one a breaking change since it will restructure the tabs and probably make some events/properties no longer necessary.

[ashetland]

This will likely be a refactor in Figma as well.

[macandcheese]

@jcfranco anything we can do to move this along? Because the component now has built in closable, in addition to icon-start/end props , maybe option 2 above is a good direction as it ends up being consistent with current set up?

[macandcheese]

Another example of current usage - even though we are adding the heading property to Tab, to remove the Tab Nav and Tab Title components, I think we need to keep supporting the current "default slot" use case. Not a great name, but we'd basically need a tab-title-content slot within each Tab to preserve this:

Alongside the proposed heading property, I think we should pursue adding a description property at this time as it could often be called for in similar UI.

[geospatialem]

A technical spike should be performed to determine if the tabs and the tab group could be refactored, without the need for a breaking change.

[geospatialem]

The above blocks the effort of #9647. Depending on the above spike, will dictate the timing of carrying out, either for December (if the above is indeed a breaking change), or earlier (if a non-breaking change is carried out).