topic calcite-tab dismissible/closable? in Calcite Design System Questions

calcite-tab dismissible/closable?

Ranga_Tolapi — Wed, 07 Dec 2022 03:12:56 GMT

Possible to make calcite-tab dismissible/closable? Like shown in the below screenshot.

Re: calcite-tab dismissible/closable?

KittyHurley — Wed, 07 Dec 2022 20:55:54 GMT

Hi @Ranga_Tolapi, the Tab components (Tab Title and Tab) only support selected and disabled states, so it wouldn't be possible to fully close/dismiss at this time.

Depending on the use case, we do have a few components which have some similar functionality, such as Accordion when using a "single-persist" selectionMode. Where content isn't fully dismissible, it could be focused.

We have an open enhancement request to follow along, or comment on to provide additional use cases for inclusion as well.

Re: calcite-tab dismissible/closable?

Ranga_Tolapi — Tue, 31 Oct 2023 01:57:54 GMT

Hi @KittyHurley, we would like to show multiple FeatureTable widgets in multiple tabs (calcite-tab) and allow users to dismiss/close the tab. Any plans to include dismissible/closable feature for calcite-tab?

Re: calcite-tab dismissible/closable?

KittyHurley — Tue, 31 Oct 2023 02:10:26 GMT

Hi @Ranga_Tolapi the above enhancement request was added to the Calcite 1.4.0 release earlier this year on May 25, and is available from 1.4.0 to our current version released earlier today (1.10.0).

Below is an example implementation, which adds the "closable" attribute to the Tab Title component:

<calcite-tabs> <calcite-tab-nav slot="title-group"> <calcite-tab-title selected closable> Watercraft </calcite-tab-title> <calcite-tab-title closable>Automobiles</calcite-tab-title> <calcite-tab-title closable>Aircrafts</calcite-tab-title> </calcite-tab-nav> <calcite-tab selected> <calcite-notice icon="embark" open> <div slot="message">Recommended for coastal use</div> </calcite-notice> </calcite-tab> <calcite-tab> <calcite-notice icon="car" open> <div slot="message">A good choice for inland adventure</div> </calcite-notice> </calcite-tab> <calcite-tab> <calcite-notice icon="plane" open> <div slot="message">Cross continents quickly</div> </calcite-notice> </calcite-tab> </calcite-tabs>