feat(ui): spring the active pill in tab strips

Give the active-pill tab strips the lifted, physical feel of a spring
capsule: the pill now travels with a slight overshoot instead of jumping,
leans toward a neighbouring tab on press, and sits on a raised surface with
a soft ambient shadow rather than a hard border.

Transitions are opt-in per switch so first measurement and container
resizes still snap into place, and reduced-motion disables them.

Also drop the icons from the git commit/update/pr switcher, along with the
now-unused iconOnlyActiveTab prop.
This commit is contained in:
Bohdan Triapitsyn
2026-07-25 15:05:28 +03:00
parent 248e403977
commit aab9f3bca3
4 changed files with 103 additions and 15 deletions
+3 -3
View File
@@ -618,9 +618,9 @@ export const GitView: React.FC<GitViewProps> = ({ isActive }) => {
const [gitLogDialogMode, setGitLogDialogMode] = React.useState<GitLogDialogMode | null>(null);
const actionTabItems = React.useMemo(() => [
{ id: 'commit', label: t('gitView.tabs.commit'), icon: <Icon name="git-commit" className="h-3.5 w-3.5" /> },
{ id: 'branch', label: t('gitView.tabs.update'), icon: <Icon name="git-merge" className="h-3.5 w-3.5" /> },
{ id: 'pr', label: t('gitView.tabs.pr'), icon: <Icon name="git-pull-request" className="h-3.5 w-3.5" /> },
{ id: 'commit', label: t('gitView.tabs.commit') },
{ id: 'branch', label: t('gitView.tabs.update') },
{ id: 'pr', label: t('gitView.tabs.pr') },
], [t]);
const [actionTab, setActionTab] = React.useState<ActionTab>(() => {
if (typeof window === 'undefined') {
@@ -374,7 +374,6 @@ export const GitHeader: React.FC<GitHeaderProps> = ({
onSelect={onSelectActionTab}
layoutMode="fit"
variant="active-pill"
iconOnlyActiveTab={true}
activePillButtonClassName="h-7"
className="h-full"
/>