Summary
The Color Annotation template's token cell (#state-name) holds a HUG-width TEXT node inside a FIXED 280px table cell. Long token names — e.g. button/secondary/border (#0B1A3F) — overflow horizontally into the adjacent Notes column instead of wrapping.
Where
uSpecDocs template library → Color Annotation template component → token/state-name cell.
Reproduction
- Run
create-color for any component whose token names exceed ~30 characters (nested token paths with an inline hex suffix are the common case).
- Instantiate the Color Annotation template and set
#state-name to a long token string.
- The TEXT node keeps
textAutoResize: WIDTH_AND_HEIGHT (hug), so it widens past its 280px parent cell and visually collides with the next column.
Expected
Long token names wrap within the cell.
Fix that works (verified in production use)
On the #state-name TEXT node inside the template:
textNode.textAutoResize = 'HEIGHT';
textNode.layoutSizingHorizontal = 'FILL';
We've applied this at render time across ~100 annotation frames (3 component batches) as a client-side workaround; fixing the template itself would make the workaround unnecessary.
Summary
The Color Annotation template's token cell (
#state-name) holds a HUG-width TEXT node inside a FIXED 280px table cell. Long token names — e.g.button/secondary/border (#0B1A3F)— overflow horizontally into the adjacent Notes column instead of wrapping.Where
uSpecDocs template library → Color Annotation template component → token/state-name cell.
Reproduction
create-colorfor any component whose token names exceed ~30 characters (nested token paths with an inline hex suffix are the common case).#state-nameto a long token string.textAutoResize: WIDTH_AND_HEIGHT(hug), so it widens past its 280px parent cell and visually collides with the next column.Expected
Long token names wrap within the cell.
Fix that works (verified in production use)
On the
#state-nameTEXT node inside the template:We've applied this at render time across ~100 annotation frames (3 component batches) as a client-side workaround; fixing the template itself would make the workaround unnecessary.