Skip to content

docs: add Figma design links and real Badges to Storybook toolbar#1076

Open
frankieyan wants to merge 11 commits into
mainfrom
frankie/figma-links
Open

docs: add Figma design links and real Badges to Storybook toolbar#1076
frankieyan wants to merge 11 commits into
mainfrom
frankie/figma-links

Conversation

@frankieyan

@frankieyan frankieyan commented Jun 18, 2026

Copy link
Copy Markdown
Member

Short description

This PR adds Figma references to most of our component stories in the Storybook toolbar, sourced from https://github.com/Doist/frontend-issues/issues/1350.

We also switch the a11y/deprecated badges in the toolbar to use the real Reactist <Badge>.

PR Checklist

  • Added tests for bugs / new features
  • Updated docs (storybooks, readme)
  • Reviewed and approved Chromatic visual regression tests in CI

Demo

Before After
image image

@frankieyan frankieyan force-pushed the frankie/figma-links branch 2 times, most recently from cc7ad5e to 8d750c2 Compare June 18, 2026 06:40
@frankieyan frankieyan marked this pull request as ready for review June 18, 2026 06:41

@doistbot doistbot left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This PR adds Figma design links to the Storybook toolbar for most component stories and switches the a11y/deprecated badges to use the real Reactist <Badge> component.

Few things worth tightening:

  • The Figma tool shows a "No Figma link" message on docs pages that define their own MDX <Meta> (e.g. modal-docs.mdx) instead of inheriting story meta—consider hiding the tool when there are no links, or wiring figma into those docs pages.
  • VALID_TONES duplicates the Badge component's tone list as a second source of truth; exporting a runtime tone list or validator from the badge module and reusing it here would prevent valid badges from silently disappearing if tones change.
  • The bare-string branch in the Figma parameter resolver treats any non-empty string as both label and URL, turning typos into broken links—since all current usages already use { label, url }, dropping the string shorthand would keep the parameter shape explicit.
  • IconButton (which always wraps in a Tooltip and pulls @ariakit/react into the manager bundle) is heavier than needed for a simple external link in the Storybook manager; a lightweight <a> or button with a native title would reduce startup overhead on every page.

I also included a few optional follow-up notes in the details below.

Optional follow-up note (1)
  • [P3] .storybook/figma/figma-tool.tsx:23: IconButton is pretty expensive in manager UI. In this code path it always wraps itself in Tooltip (tooltip={link.label}), which pulls @ariakit/react into the Storybook manager bundle and creates a tooltip store for each Figma link. Because manager.ts loads on every Storybook page, this adds avoidable startup and render overhead for a simple external link. A lightweight <a>/button here with a native title would keep the manager much smaller.

Share FeedbackReview Logs

Comment thread .storybook/figma/figma-tool.tsx
Comment thread .storybook/badges/badges.ts Outdated
Comment thread .storybook/figma/figma.ts Outdated
@frankieyan frankieyan force-pushed the frankie/figma-links branch from 2fd229b to 7248209 Compare June 19, 2026 02:09
@frankieyan frankieyan force-pushed the frankie/figma-links branch from 7248209 to baef499 Compare June 19, 2026 02:18
@frankieyan frankieyan force-pushed the frankie/figma-links branch from baef499 to a3dd4b2 Compare June 19, 2026 02:21
@frankieyan frankieyan requested review from a team and nats12 and removed request for a team June 19, 2026 02:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants