fix(desktop): closeable tab labels clip so the ✕ fade has text to dissolve
The label span used `truncate`, whose ellipsis stops the text ~8px short of the overlay. The hover gradient then faded over empty tab surface — surface to the same surface, invisible by construction — and the ✕ read as floating in a gap beside three dots. A closeable tab publishes `data-closeable`; the label reads it via `group-data-[closeable]/tab:text-clip` so overflow runs under the fade and the gradient dissolves real letterforms. Vertical rails and uncloseable tabs have no ✕, so they keep the ellipsis.
This commit is contained in:
committed by
brooklyn!
parent
87e78d668b
commit
ff75ff2a18
@@ -116,6 +116,7 @@ export const PaneTab = React.forwardRef<HTMLDivElement, PaneTabProps>(function P
|
||||
className
|
||||
)}
|
||||
data-active={active}
|
||||
data-closeable={(onClose && !vertical) || undefined}
|
||||
data-selected={selected || undefined}
|
||||
data-vertical={vertical || undefined}
|
||||
onClickCapture={event => {
|
||||
@@ -218,7 +219,9 @@ interface PaneTabLabelProps extends React.ComponentProps<'button'> {
|
||||
}
|
||||
|
||||
/** Truncating label inside a `PaneTab`. `className` merges into the text span
|
||||
* (e.g. `normal-case tracking-normal` for filenames). */
|
||||
* (e.g. `normal-case tracking-normal` for filenames). On a closeable tab the
|
||||
* text clips instead of ellipsizing, so it runs under the hover ✕ fade rather
|
||||
* than stopping short of it with dots. */
|
||||
export const PaneTabLabel = React.forwardRef<HTMLElement, PaneTabLabelProps>(function PaneTabLabel(
|
||||
{ as = 'span', className, children, ...props },
|
||||
ref
|
||||
@@ -231,7 +234,12 @@ export const PaneTabLabel = React.forwardRef<HTMLElement, PaneTabLabelProps>(fun
|
||||
ref={ref}
|
||||
{...props}
|
||||
>
|
||||
<span className={cn('block min-w-0 truncate text-[9px] font-medium tracking-wide uppercase', className)}>
|
||||
<span
|
||||
className={cn(
|
||||
'block min-w-0 truncate text-[9px] font-medium tracking-wide uppercase group-data-[closeable]/tab:text-clip',
|
||||
className
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</span>
|
||||
</Comp>
|
||||
|
||||
Reference in New Issue
Block a user