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"
|
type="text"
|
||||||
value={inputValue}
|
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>
|
||||||
) : (
|
) : (
|
||||||
<div
|
<div
|
||||||
|
|||||||
@@ -329,7 +329,16 @@ export function SliderControl({
|
|||||||
type="text"
|
type="text"
|
||||||
value={inputValue}
|
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
|
||||||
|
|||||||
Reference in New Issue
Block a user