Tab Component Like Code Editor Tabs

[gautam678]

Hello,
I am working on migrating Functions into the console UI. My app has a code editor page which users can use to develop functions. This currently looks like this:

The editor was created using an older design system. When migrating, we wanted to use Paste components to implement the tabs, but I'm unable to find a suitable component for this use case.

My team created a POC with two of paste's components:
Tabs:

• All tabs in a page were visible at all times.
• We weren't able to add a close button inside tabs.

Tabs Primitives:

• We were not able to modify the routes using tabs primitives and it felt like this wasn't the intended component for what we were trying to do.

I wanted to start a discussion around creating a component that would help our use-case (code editors).

[TheSisb]

Hi @gautam678,

For something like this we recommend using the Tabs Primitive. Here's a codesandbox showing how you can solve all three of your issues: https://codesandbox.io/s/epic-elion-84w3l6?file=/src/index.tsx

• Only displays the contents of the currently selected tab
• Has a close button
• Able to update routes on tab change

Styling is left as an exercise to the reader. You can get inspiration from how we style our Tabs component.

[gautam678]

@TheSisb
Is it possible to conditionally render only certain tabs as well?

In the example, we see tab 1, tab 2 and tab 3 rendered. But I would like to render tab 1 without the other two.