Skip to main content

Breaking: CopyableText and CopyableCell removed — use CopyButton

@trackunit/react-components (from 3.0.0) removes CopyableText, and @trackunit/react-table-base-components (from 3.0.0) removes CopyableCell, with no compatibility shim — if any of your code imports either, bumping the dependency without running the migration is a compile failure, not a deprecation warning. Repos that never used them are unaffected.

Run these two commands in the consuming repo after bumping the dependencies:

nx g @trackunit/migrations:migrate
nx g @trackunit/migrations:run-migrations

Why this changed​

Click-to-copy text had two problems every surface kept re-fixing: the displayed value was itself the click target (so selecting the text copied it by accident, and clickable rows had to fight the copy area), and each call site hand-rolled its own labels and feedback. CopyButton is now the one copy control: the value renders as plain, selectable text and only the adjacent icon button copies it, with localized "Copy"/"Copied!" defaults, a persistent checkmark confirmation, and an accessible per-instance label via copyLabel.

When it affects you​

Nothing changes until you bump @trackunit/react-components or @trackunit/react-table-base-components. At or above 3.0.0, the components are gone and any import stops compiling until migrated.

// before
<CopyableText text={assetId} />

// after
<span className="flex min-w-0 max-w-full items-center gap-0.5">
  <Text className="min-w-0 truncate" type="span">{assetId}</Text>
  <CopyButton className="shrink-0" value={assetId} />
</span>

CopyableCell maps to the same pair inside the cell; two-row cells (secondary) become a MultiRowTableCell with one pair per row.

What the migration does​

  • The codemods rewrite both components into the pair above, carrying over copyLabel, copiedLabel, data-testid, style, and string-literal classNames. size="xs" maps to Text size="small" plus CopyButton size="extraSmall" (the icon-only size that fits a single text line in fixed-height rows).
  • Any usage it can't rewrite with confidence is left untouched and counted as a manual-review location in the migration log rather than guessed at: spread props, refs, dynamic className expressions, secondary values that aren't inline object literals, and files referencing the removed CopyableTextProps/CopyableCellProps types.
  • The detail most likely to bite you: the text expression now appears twice in the output — once as the rendered children and once as the button's value. That is fine for identifiers and literals; if you passed a function call or other non-trivial expression, hoist it to a variable after migrating.

CopyButton ships localized default labels, so most call sites need no copyLabel at all — pass one only when the context needs a specific accessible name (for example one button per table row, where each should announce what it copies).