Migrate twenty UI

[bosiraphael]

Migrate all twenty-ui-deprecated components into twenty-ui

Ports all 192 components and 70 stories into the new twenty-ui package with full public-API parity (export diff: 0 missing / 0 extra across all 13 modules; story titles byte-identical for the Argos cross-package diff).

• Styling: Linaria → SCSS Modules, var(--t-*) tokens, data-* state. Canonical pattern in Button.module.scss.
• Behavior: Base UI where mapped (Checkbox, Radio, Modal→Dialog, Tooltip drops react-tooltip, JSON tree→Collapsible); framer kept only where animation is the public contract.
• Fixed an inert axe gate in .storybook/vitest.setup.ts (a11y addon annotations were never registered). Now live; 119 stories carry a11y: 'todo' overrides pending a fix pass.

[twenty-ci-bot-public]

👋 Thanks for contributing to Twenty!

Your PR has been set to draft while you work on it. Once you're done, mark it as Ready for review and our automated checks will run.

Looking forward to your contribution!

[twenty-ci-bot-public]

🔍 Automated Pre-Review

⚠️ Automated review could not complete — the author is a trusted contributor, treating as a warning only.

---

View details

Automated pre-review — human approval still required.

[cubic-dev-ai]

12 issues found across 672 files

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="packages/twenty-ui/src/display/checkmark/components/Checkmark.module.scss">

<violation number="1" location="packages/twenty-ui/src/display/checkmark/components/Checkmark.module.scss:5">
P2: Hardcoded values instead of design tokens: width/height: 20px → var(--t-spacing-5), border-radius: 50% → var(--t-border-radius-rounded).</violation>
</file>

<file name="packages/twenty-ui/src/display/banner/components/InlineBanner.tsx">

<violation number="1" location="packages/twenty-ui/src/display/banner/components/InlineBanner.tsx:1">
P2: Props type promises support for all HTML div attributes but they are silently dropped — missing `...rest` spread onto the root element.</violation>
</file>

<file name="packages/twenty-ui/src/display/avatar/components/Avatar.tsx">

<violation number="1" location="packages/twenty-ui/src/display/avatar/components/Avatar.tsx:122">
P2: `className` prop is exposed but never applied, so consumers cannot style Avatar instances as intended.</violation>

<violation number="2" location="packages/twenty-ui/src/display/avatar/components/Avatar.tsx:125">
P2: Clickable Avatar is mouse-only because interactive behavior is attached to a plain `div` without keyboard-accessible semantics.</violation>
</file>

<file name="packages/twenty-ui/src/components/chip/LinkChip.tsx">

<violation number="1" location="packages/twenty-ui/src/components/chip/LinkChip.tsx:21">
P2: `onMouseDown` is exposed in the public props but never used, so callers cannot observe their handler firing. Remove it from the API or explicitly invoke it in the rendered `Link` mouse-down flow.</violation>
</file>

<file name="packages/twenty-ui/src/components/chip/Chip.tsx">

<violation number="1" location="packages/twenty-ui/src/components/chip/Chip.tsx:52">
P2: Falsy guard incorrectly hides valid ReactNode values for rightComponent. Check only null/undefined before returning null.</violation>
</file>

<file name="packages/twenty-ui/src/components/avatar-or-icon/AvatarOrIcon.tsx">

<violation number="1" location="packages/twenty-ui/src/components/avatar-or-icon/AvatarOrIcon.tsx:55">
P2: Clickable wrapper divs lack keyboard accessibility: missing `role="button"`, `tabIndex`, and keyboard event handlers. Keyboard users cannot activate the component.</violation>
</file>

<file name="packages/twenty-ui/src/components/tag/Tag.tsx">

<violation number="1" location="packages/twenty-ui/src/components/tag/Tag.tsx:63">
P2: Clickable Tag uses `<span>` with onClick but lacks button semantics and keyboard activation. Keyboard users cannot trigger it with Enter/Space.</violation>
</file>

<file name="packages/twenty-ui/src/display/banner/components/SidePanelInformationBanner.tsx">

<violation number="1" location="packages/twenty-ui/src/display/banner/components/SidePanelInformationBanner.tsx:25">
P2: Hardcoded tooltip ID causes incorrect anchoring when multiple SidePanelInformationBanner instances with tooltips exist. All instances share the same `data-tooltip-id`, so each AppTooltip matches every banner div and defaults to the first one.</violation>
</file>

<file name="packages/twenty-ui/src/components/Pill/Pill.tsx">

<violation number="1" location="packages/twenty-ui/src/components/Pill/Pill.tsx:15">
P2: Icon-only pill has no accessible name: when label is empty/undefined and Icon is provided, the pill renders an SVG without a text alternative, violating WCAG 1.1.1 Non-text Content. Add an `aria-label` prop to PillProps and apply it to the span.</violation>
</file>

<file name="packages/twenty-ui/src/display/avatar/constants/AvatarPropertiesBySize.ts">

<violation number="1" location="packages/twenty-ui/src/display/avatar/constants/AvatarPropertiesBySize.ts:1">
P3: Size ordering is descending (xl → xs), inconsistent with the ascending convention used across other size-keyed constants in this package (ICON, MODAL, BORDER_COMMON). New file — align sort order for consistency.</violation>
</file>

<file name="packages/twenty-ui/src/display/avatar/components/Avatar.module.scss">

<violation number="1" location="packages/twenty-ui/src/display/avatar/components/Avatar.module.scss:23">
P2: Missing `:focus-visible` style on `[data-clickable]`. Interactive avatars (with onClick) get a hover indicator but keyboard users navigating via Tab see no focus ring, failing WCAG 2.4.7.</violation>
</file>

<sub>Note: This PR contains a large number of files. Free-tier reviews are limited to 40 files per PR, so some files may not have been reviewed. cubic prioritizes the most important files to review. Paid plans can review more files.

Re-trigger cubic</sub>

[cubic-dev-ai]

2 issues found across 38 files (changes from recent commits).

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="packages/twenty-ui/src/components/avatar-or-icon/AvatarOrIcon.tsx">

<violation number="1" location="packages/twenty-ui/src/components/avatar-or-icon/AvatarOrIcon.tsx:55">
P2: Clickable wrapper divs lack keyboard accessibility: missing `role="button"`, `tabIndex`, and keyboard event handlers. Keyboard users cannot activate the component.</violation>
</file>

<file name="packages/twenty-ui/src/components/tag/Tag.tsx">

<violation number="1" location="packages/twenty-ui/src/components/tag/Tag.tsx:63">
P2: Clickable Tag uses `<span>` with onClick but lacks button semantics and keyboard activation. Keyboard users cannot trigger it with Enter/Space.</violation>
</file>

<file name="packages/twenty-ui/src/display/banner/components/SidePanelInformationBanner.tsx">

<violation number="1" location="packages/twenty-ui/src/display/banner/components/SidePanelInformationBanner.tsx:25">
P2: Hardcoded tooltip ID causes incorrect anchoring when multiple SidePanelInformationBanner instances with tooltips exist. All instances share the same `data-tooltip-id`, so each AppTooltip matches every banner div and defaults to the first one.</violation>
</file>

<file name="packages/twenty-ui/src/components/Pill/Pill.tsx">

<violation number="1" location="packages/twenty-ui/src/components/Pill/Pill.tsx:15">
P2: Icon-only pill has no accessible name: when label is empty/undefined and Icon is provided, the pill renders an SVG without a text alternative, violating WCAG 1.1.1 Non-text Content. Add an `aria-label` prop to PillProps and apply it to the span.</violation>
</file>

<file name="packages/twenty-ui/src/display/avatar/components/Avatar.tsx">

<violation number="1" location="packages/twenty-ui/src/display/avatar/components/Avatar.tsx:125">
P2: Clickable Avatar is mouse-only because interactive behavior is attached to a plain `div` without keyboard-accessible semantics.</violation>
</file>

<file name="packages/twenty-ui/src/components/chip/LinkChip.tsx">

<violation number="1" location="packages/twenty-ui/src/components/chip/LinkChip.tsx:21">
P2: `onMouseDown` is exposed in the public props but never used, so callers cannot observe their handler firing. Remove it from the API or explicitly invoke it in the rendered `Link` mouse-down flow.</violation>
</file>

<file name="packages/twenty-ui/src/components/chip/Chip.tsx">

<violation number="1" location="packages/twenty-ui/src/components/chip/Chip.tsx:52">
P2: Falsy guard incorrectly hides valid ReactNode values for rightComponent. Check only null/undefined before returning null.</violation>
</file>

<file name="packages/twenty-ui/src/display/avatar/constants/AvatarPropertiesBySize.ts">

<violation number="1" location="packages/twenty-ui/src/display/avatar/constants/AvatarPropertiesBySize.ts:1">
P3: Size ordering is descending (xl → xs), inconsistent with the ascending convention used across other size-keyed constants in this package (ICON, MODAL, BORDER_COMMON). New file — align sort order for consistency.</violation>
</file>

<file name="packages/twenty-ui/src/display/avatar/components/Avatar.module.scss">

<violation number="1" location="packages/twenty-ui/src/display/avatar/components/Avatar.module.scss:23">
P2: Missing `:focus-visible` style on `[data-clickable]`. Interactive avatars (with onClick) get a hover indicator but keyboard users navigating via Tab see no focus ring, failing WCAG 2.4.7.</violation>
</file>

<sub>Reply with feedback, questions, or to request a fix.

Re-trigger cubic</sub>

[twenty-ci-bot-public]

Visual Regression Report

• 225 added

[twenty-ci-bot-public]

Visual Regression Report (twenty-new-ui)

• 225 added
• 7 removed