Options
The Diff Value supports empty and removed source values, and renders either an inline or a block layout.Empty and Removed Values
Omit or passnull for from to render (Empty) — there was no prior value. Omit or pass null for to to render the highlighted (Removed) label — the value was taken away entirely.
Layout
Layout defaults toinline for short values on a single line, and block — stacking from above to — once either side exceeds roughly 80 characters or contains a newline. Pass layout explicitly to override the automatic choice.
Behavior
The Diff Value is otherwise static; only its block layout can become interactive when text is truncated.Truncation
In block layout, text beyondtruncateLines (default 2) clips with a “Show more” control that expands it in place; an expanded side shows “Show less” to collapse it again. Each side truncates independently.
Usage Guidelines
When to Use
Use the Diff Value when:- Showing a changed value – The reader needs to see both the previous value and the updated value, such as labor hours changing from 6.5h to 8.0h.
- Adding a value where none existed – Omit the previous value to show “(Empty)” before the new value.
- Removing a value – Omit the updated value to show the highlighted “(Removed)” label.
- Comparing long text – Either value runs past a single line. The block layout stacks the previous value above the updated value and truncates each side with a Show more control.
When not to use
Avoid using the Diff Value for:- Showing only the revised value – The previous value isn’t needed. Use the Text with the highlighted treatment, or the Truncated Text for long body copy, instead.
- Asking the user to accept, edit, or reject proposed changes – The Diff Value is static. Use the Guidance Card instead, which renders each change as a Diff Value with selection and review actions.