| 文件 | 最后提交记录 | 最后更新时间 |
|---|---|---|
fix(webapp): solve issue with inaccessible Upgrade link in tooltips (#7467) ## Context An upgrade link inside a tooltip can't be clicked — the tooltip closes the moment the pointer leaves the trigger, and keyboard users never reach it at all. Admins on the Free plan hit this whenever they're told to upgrade: role selection, the environment limit, the connection limit. The same pattern put documentation links inside help tooltips, where they were just as unreachable. ## Changes - Upgrade CTAs now sit next to the control they explain — in the environment dropdown, the connection create page, and the role select — and stay on screen. - The team-role warning became a closable popover, so its link survives a pointer leaving the icon. - Help tooltips on connection, Connect UI and connection-settings forms became visible descriptions under each field, with their documentation links inline. - Removed the workarounds these links needed: `pointer-events-auto` overrides and the design system tooltip's link-colour rules. - Drive-by: the legacy create page's code block was pinned to the dark theme. Fixes [NAN-5464](https://linear.app/nango/issue/NAN-5464) ## Testing See [Visual QA checklist](https://app.notion.com/p/nangohq/Accessible-actions-outside-tooltips-3d6ce298312181328232e7b0a74c7a17) in Notion — it walks every changed screen with before/after screenshots and what to look for on each one. | 9 天前 | |
refactor(webapp): migrate to design-system Button (#6503) ## Problem The webapp shipped its own local `Button` (`packages/webapp/src/components/ui/Button.tsx`) separate from the `@nangohq/design-system` `Button`. The two duplicated styling and could drift apart, and icon-only buttons had no consistent component. ## Solution Migrate the webapp to the design-system button components and delete the local one. - Replace every webapp usage with the design-system `Button` and remove the local `Button.tsx`. - Use `IconButton` (with a required `label`) for icon-only buttons. - Add a small `ButtonLink` wrapper for react-router links that should look like buttons. - Export the design-system tailwind-merge config as `dsTwMergeConfig` and reuse it in the webapp `cn`, so the token class groups (`text-ds-*`, `border-ds-*`, `rounded-ds-*`, …) are defined once and merge correctly in both packages instead of being silently dropped. Mostly like-for-like: sizes and variants map to the closest design-system equivalents and button heights are preserved. A few deliberate visual deltas: ghost and icon buttons now signal hover/active via text/icon colour rather than a background fill, and the old `secondary`/`tertiary` variants map to `outline`. Stacked on top of #6246 (design-system component foundations). Fixes [NAN-5946](https://linear.app/nango/issue/NAN-5946) ## Testing - Verified key screens render unchanged in light and dark via local dev against the dev API: auth pages, nav header, connections list, connection/integration settings. - `npm run ts-build` and lint pass for the changed packages. | 3 个月前 | |
feat(design-system): component foundations (#6246) ## Problem The `@nangohq/design-system` package had the token pipeline and Storybook in place, but no established pattern for building components on top of them. ## Solution Establishes the component foundations: - **Components** — `Button` and `IconButton` as the reference set, built with the shadcn/ui pattern (`cva` + `forwardRef` + `Slot` + `cn()`). They share one `cva` config, auto-size inline icons, and expose a `2xs`–`lg` size scale (plus a deprecated `xl` kept only for migrating legacy webapp buttons). An internal `Spinner` (not exported) powers the loading state. - **Token-backed Tailwind utilities** — the token pipeline emits a `@theme` block mapping primitives to named utilities (`rounded-ds-xs`, `text-ds-md`, `border-ds-hairline`, …) so components use plain classes instead of `[var(--ds-*)]` arbitrary values. - **`cn()` helper** — registers the DS token groups with `extendTailwindMerge` so `className` conflicts resolve correctly. - **`AGENTS.md`** — a step-by-step guide for adding components with the Figma variable → CSS → Tailwind mapping. All six button variants were validated against the Figma design system (variants compose from the `interactive/*`, `surface/*`, `text/*`, `border/*` semantic tokens — there are no component-level `button-*` tokens by design). > **Note:** the new `Button` has minor contrast-ratio shortfalls in a few variants. These will be addressed in a follow-up by updating the underlying design tokens, not by overriding the components. Migrating the webapp to these components is done in a follow-up PR: #6503. Fixes [NAN-5667](https://linear.app/nango/issue/NAN-5667) ## Testing `cd packages/design-system && npm run storybook` — review the `Button` and `IconButton` stories across variants and sizes in light and dark themes. Deployed Storybook (this branch): https://storybook.nango.dev | 3 个月前 | |
feat(design-system): lift Tooltip into design system (#7176) ## Problem `Tooltip` lived in `packages/webapp/src/components/ui/Tooltip.tsx` and couldn't be consumed from `@nangohq/design-system` — the last high-traffic overlay primitive still in the webapp after `Dialog`, `Card`, `Badge` and `Alert`. It had also drifted from its [Dharma source](https://www.figma.com/design/T8aoiWC73uCiM5eucb0syk/Nango-%E2%80%94-Design-System--Dharma-?node-id=3-134595), which models an inverse chip. We rendered a light-grey panel on webapp-only utilities (`text-s`, `shadow-md`). Current shadcn ships the inverse look too, so the drift is ours. ## Solution - New `packages/design-system/src/components/ui/tooltip.tsx` at Figma parity — inverse chip, `rounded-ds-xs`, `px-1.5 py-1`, `type-label-sm`, `max-w-96`, `shadow-container-panel`. Every value maps to an existing token, so no `tokens:fetch`. - Dropped the `primary`/`secondary` pair — Figma ships one look, and `secondary`'s single call-site went pure black in dark mode. No variant axis left, so the component drops `cva`. - `Tooltip` no longer self-wraps in a `TooltipProvider`, which shadowed anything a consumer configured. The root provider in `providers.tsx` already defaults `delayDuration` to 0, so hover timing is unchanged. - Links inside a tooltip take the chip's own foreground with an underline, by redefining the link colour tokens in scope so every state follows. The accent tokens are tuned for the page surface and collapse on the inverted chip — down to 1.64:1 when pressed. A deliberate stopgap for the 12 links across 5 files; [NAN-5464](https://linear.app/nango/issue/NAN-5464/solve-issue-with-inaccessible-upgrade-link-in-tooltips) removes the links and these overrides together. - Moved `@radix-ui/react-tooltip` to the design system, migrated all 16 call-sites, deleted the webapp component. `InfoTooltip`, `ConditionalTooltip` and `PermissionGate` stay in the webapp — no Dharma source. - Dropped the Team members tooltip — its copy described the table directly beneath it, so the help icon earned nothing. - Locked `className`/`style` on `TooltipContent`. Four overrides that fought the new spec are deleted; the two keeping tooltip content hoverable carry a justified disable. Fixes [NAN-6676](https://linear.app/nango/issue/NAN-6676/lift-tooltip-into-the-design-system) ## Testing `ts-build`, `lint`, `format:check` and `build-storybook` clean. **[Visual QA checklist](https://app.notion.com/p/3c2ce2983121819ca9a4ccc6fa1a85bc)** — 8 surfaces on the [app preview](https://pr-7176.app-development.nango.dev), each in both themes. Four are ticked; the rest are open. New stories, replacing the deleted `App Components/UI/Tooltip`: [Sides](https://pr-7176-storybook.app-development.nango.dev/?path=/story/design-system-components-tooltip--sides) · [Alignment](https://pr-7176-storybook.app-development.nango.dev/?path=/story/design-system-components-tooltip--alignment) · [Long Content](https://pr-7176-storybook.app-development.nango.dev/?path=/story/design-system-components-tooltip--long-content) · [On Hover](https://pr-7176-storybook.app-development.nango.dev/?path=/story/design-system-components-tooltip--on-hover) ## Follow-ups - [NAN-6679](https://linear.app/nango/issue/NAN-6679/make-per-model-sync-breakdowns-discoverable-in-the-syncs-table) — `SyncsTab`'s two `SimpleCodeBlock` tooltips read as a frame around a code panel; they should be a popover behind a real trigger. - [NAN-5464](https://linear.app/nango/issue/NAN-5464/solve-issue-with-inaccessible-upgrade-link-in-tooltips) — now carries the full inventory of all 12 links in tooltips. Removing them retires both `pointer-events-auto` disables and the inverse-link rule added here. - The Figma Tooltip's optional `KbdGroup` comes from the old `CURRENT 🐺` library, not Dharma — skipped, worth cleaning up in the Figma file. - Ad-hoc hover hints (native `title=`) adopting the DS `Tooltip` — separate ticket under Component consolidation. | 1 个月前 |