Files
twenty/packages/twenty-front
Thomas Trompette 99f54d9ea8 fix(front): honor user-set label on LINKS/URL social links (#22586)
## Problem

On LINKS and URL fields, recognized social links **always** rendered the
derived handle (e.g. `@cristiano`) and ignored any user-set `label`.
This was a regression: `SocialLink` did `getDisplayValueByUrlType(...)
?? label`, and since a provider always matches for social links, `label`
was never reached. Adding the Instagram/TikTok/Bluesky providers in
v2.16 widened the set of affected links.

| Input | Expected | Before |
|-------|----------|--------|
| `instagram.com/cristiano`, label `Cristiano Ronaldo Official` |
`Cristiano Ronaldo Official` | `@cristiano` |

## Fix (display half of #22265)

- `SocialLink`: prefer a non-empty `label`; only derive the handle from
the URL as fallback (then `href`). Prop widened to `string \| null`.
- `LinksDisplay` / `LinkDisplay` / `URLDisplay`: pass the **raw,
nullable** label into `SocialLink` instead of a pre-coalesced string, so
derivation still works when no label is set. `URLDisplay` passes
`label={null}` (URL fields have no label) so handles still render.
- Stories: dropped `label` args the old code silently ignored (keeps
existing visual snapshots stable) and added a `WithCustomLabel` story
asserting precedence.

## What's left (not in this PR)

The **label input in the UI** (issue's second half) is intentionally
deferred. `MultiItemFieldInput` carries the in-progress edit as a single
string and seeds edits with the URL only, so exposing a Label field
cleanly requires a small generalization of that shared component (not a
JSON-serialization workaround). That change needs manual in-app
verification and will be a follow-up.

## Verification

- `twenty-ui` typecheck clean; oxlint clean on all changed files;
`getDisplayValueByUrlType` tests pass (38).
- Added Storybook `play` assertion for the custom-label case.

Fixes #22265 (display half). Related: #16414.


<!-- This is an auto-generated description by cubic. -->
<a
href="https://cubic.dev/pr/twentyhq/twenty/pull/22586?utm_source=github"
target="_blank" rel="noopener noreferrer"
data-no-image-dialog="true"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"><source
media="(prefers-color-scheme: light)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-light.svg"><img
alt="Review in cubic"
src="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"></picture></a>
<!-- End of auto-generated description by cubic. -->
2026-07-07 13:03:29 +02:00
..

Run yarn dev while server running on port 3000