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:
@@ -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"
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user