Repository navigation
feat(ui-react): add Tabs, and try them in Lite's branch header - #16155
Merged
Merged
Conversation
|
This pull request changes Lite's CSS. If the change shows on screen, before/after screenshots make it reviewable without checking the branch out — drag them into a comment, or use the |
|
🎩 Your Storybook has been served
|
but.dev switches a pane between its changes and its activity with a row of hand-styled tabs; ui-react had nothing to build it from. Tabs is that row, drawn in Core (2374:4526), on Base UI's tabs, so the roles and the arrow keys come with it. - Tabs takes value and onValueChange, or defaultValue, and lays its Tabs out 2px apart. - A Tab is 28px (size/control) with a 10px inset, the label in 13px semibold after an optional icon, and an optional count as a light grey Badge. kbd names the shortcut that selects it, drawn after the label as Kbd's button variant, faint. Its icon and label sit at half strength until it is hovered, which lays bg/hover under it, or selected. - The underline is Base UI's indicator: 4px of fill/gray/bg under the selected tab's content, inset by its 10px, 8px below the row, sliding and resizing to the next on the medium tier with ease-out, and jumping under reduced motion. It hangs outside the row, as in the drawing, so a header holding the tabs leaves 12px below them and the underline sits on its divider. - The selected tab doesn't answer the pointer, and a disabled tab stays faded under it; neither gets the hover ground. Lite's token check learns the --active-tab-* variables Base UI's indicator sets. Stories: Default, IconsAndCounts, Shortcuts, and InAHeader, where the underline sits on the header's divider.
A branch's header and a commit's review row switched between the diff and the pull request with a two-button toggle group. They now use ui-react's Tabs, a Tab each with its icon (diff, pr), the way the pane tabs are drawn in Core; the Pull Request tab is disabled, and says so, when the branch has none. The header's 12px below the row already fits the tabs' underline, 8px under them and 4px thick, so it sits on the header's bottom edge; the comment there says why the number is what it is. The e2e tests find the tabs as a tablist and tabs, selected rather than pressed.
PavelLaptev
force-pushed
the
ui-react-tabs
branch
from
September 29, 2026 20:08
3b197bd to
3298b52
Compare
PavelLaptev
added this pull request to stack #16154
September 29, 2026 20:09
This branch was previously deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
A tab strip in
@gitbutler/ui-reactfor but.dev's change pane, drawn in ⚛️ Core. Stacked on #16153, which brings design-core 10's--size-control.TabsandTabon Base UI's tabs:value/onValueChangeordefaultValue, arrow keys between tabs. ATabtakes an optionalicon,count(a light greyBadge) andkbd(the shortcut, faint after the label). Inactive tabs brighten and take a hover fill under the pointer; the selected one doesn't react.Tabs(with icons) instead of the toggle group. The e2e tests find them as a tablist.Tab(state default/hover/selected;icon,count,kbd) andTabs, with descriptions naming the code.