feat(editor): smart unit suffix — dim on focus, yield to explicit units
While editing a numeric field, the unit suffix now visually responds to the draft content: - Plain number / empty: suffix dims to 40% opacity (signals "default unit if you commit a bare number") - Explicit unit typed (hint showing): suffix fades to opacity-0 over 150ms (the conversion hint provides unit feedback instead) - Unparseable text: suffix stays dimmed (field will revert on commit) - At rest: unchanged full-opacity suffix Uses opacity-0 rather than unmounting so the flex layout doesn't jump. The predicate is simply `hint !== null` — it aligns exactly with measurementHint's internal PLAIN_NUMBER guard. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Fable 5
parent
58339c64f5
commit
5b4b267a40
@@ -330,7 +330,16 @@ export function MetricControl({
|
||||
type="text"
|
||||
value={inputValue}
|
||||
/>
|
||||
{displayUnit && <span className="ml-[1px] text-muted-foreground">{displayUnit}</span>}
|
||||
{displayUnit && (
|
||||
<span
|
||||
className={cn(
|
||||
'ml-[1px] transition-opacity duration-150',
|
||||
hint ? 'opacity-0' : 'text-muted-foreground/40',
|
||||
)}
|
||||
>
|
||||
{displayUnit}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
|
||||
@@ -329,7 +329,16 @@ export function SliderControl({
|
||||
type="text"
|
||||
value={inputValue}
|
||||
/>
|
||||
{displayUnit && <span className="ml-[1px] text-muted-foreground">{displayUnit}</span>}
|
||||
{displayUnit && (
|
||||
<span
|
||||
className={cn(
|
||||
'ml-[1px] transition-opacity duration-150',
|
||||
hint ? 'opacity-0' : 'text-muted-foreground/40',
|
||||
)}
|
||||
>
|
||||
{displayUnit}
|
||||
</span>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<div
|
||||
|
||||
Reference in New Issue
Block a user