Skip to content

tab: Add Folder variant - #3415

Merged
madcodelife merged 2 commits into
mainfrom
tab-folder-variant
Oct 8, 2026
Merged

madcodelife merged 2 commits into
mainfrom
tab-folder-variant

Conversation

@madcodelife

@madcodelife madcodelife commented Oct 8, 2026 •

Copy link
Copy Markdown
Member

Description

Add a Folder tab variant, like a web browser's tabs: the selected tab has rounded top corners and curves out at the bottom into the content below. Separators between tabs hide beside the selected or hovered tab. Sizes, spacing and radii follow the Design Guides and the theme.

TabBar::new("tabs").folder().selected_index(0).child("Account").child("Profile")
Screen.Recording.2026-10-08.at.15.36.51.mov

Public API

gpui-component

  • TabVariant::Folder — Tabs whose selected tab joins the content below it.
  • TabBar::folder(self) -> Self — Use the Folder variant for all tabs.
  • Tab::folder(self) -> Self — Use the Folder variant for one tab.

Breaking Changes

TabVariant is not #[non_exhaustive], so exhaustive matches need the new arm:

 match variant {
     ...
+    TabVariant::Folder => ...,
 }

madcodelife and others added 2 commits October 8, 2026 15:37
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@madcodelife
madcodelife merged commit 099aff5 into main Oct 8, 2026
16 checks passed
@madcodelife
madcodelife deleted the tab-folder-variant branch October 8, 2026 09:15
linruohan pushed a commit to linruohan/gpui-component that referenced this pull request Oct 9, 2026
## Description

Add a `Folder` tab variant, like a web browser's tabs: the selected tab
has rounded top corners and curves out at the bottom into the content
below. Separators between tabs hide beside the selected or hovered tab.
Sizes, spacing and radii follow the Design Guides and the theme.

```rust
TabBar::new("tabs").folder().selected_index(0).child("Account").child("Profile")
```


https://github.com/user-attachments/assets/01dceda8-ca57-4c47-a854-11b7f0600251

## Public API

### gpui-component

- `TabVariant::Folder` — Tabs whose selected tab joins the content below
it.
- `TabBar::folder(self) -> Self` — Use the `Folder` variant for all
tabs.
- `Tab::folder(self) -> Self` — Use the `Folder` variant for one tab.

## Breaking Changes

`TabVariant` is not `#[non_exhaustive]`, so exhaustive matches need the
new arm:

```diff
 match variant {
     ...
+    TabVariant::Folder => ...,
 }
```

---------

Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant