Skip to main content

Sync 2026/06/01 component updates (DES-40)

Pre-release · Type: ✨ Feature

DES-40: Sync the component updates from the 2026/06/01 design changelog. Tracked under a single issue, committed in batches by component.

Select / Dropdown / Date Picker / Modal overlay corner radius changed to Radius_12​

Status: Done

Background: The 2026/06/01 design update changes the overlay corner radius of Select / Dropdown / Date Picker / (Onboarding) Modals from Radius_5 to Radius_12. As verified in Figma, the change only applies to the overlay / popover panel container; triggers (Select Trigger, MultiSelect Trigger, Date Picker Trigger), Chips, menu items, close buttons, etc. still keep Radius_5.

Figma nodes involved: Select Menu 21120:1603, Dropdown Menu 21128:11039, Date Picker panel 21885:861, Modal 21235:6773 (both Default / Emphasized are 12), Onboarding Modal 18609:2556, all with cornerRadius 12.

Changed files:

  • src/components/Select/styles.ts (SELECT_CONTENT_TOKEN_CLASS)
  • src/components/DropdownMenu/styles.ts (DROPDOWN_CONTENT_TOKEN_CLASS, DROPDOWN_SUB_CONTENT_TOKEN_CLASS)
  • src/components/DatePicker/styles.ts (RANGE_PICKER_PANEL_CLASS)
  • src/components/Calendar/styles.ts (CALENDAR_ROOT_VISUAL_CLASS, shared by the single-select Date Picker overlay + the standalone Calendar)
  • src/components/ui/dialog.tsx (Dialog Content panel)
  • Corresponding tests: Select.test.tsx, DropdownMenu.test.tsx, Calendar.test.tsx, RangePicker.test.tsx, Dialog.test.tsx
  • Corresponding specs: SelectDesignSpec.md, DropdownMenuDesignSpec.md, DatePickerDesignSpec.md

Changes:

  1. The above overlay panel container corner radius rounded-(--Radius_5) → rounded-(--Radius_12)
  2. Select's searchable / MultiSelect dropdown panels reuse SELECT_CONTENT_TOKEN_CLASS, automatically inheriting the new radius
  3. The single-select Date Picker overlay is the Calendar root container (CALENDAR_ROOT_VISUAL_CLASS), updated accordingly
  4. Each component adds a rounded-(--Radius_12) assertion to lock in this radius change

Added Ai Button component​

Status: Done

Background: The 2026/06/01 design adds AI Button (Figma component set 23496:9462). A pill-shaped AI entry button with an AI gradient stroke + a built-in gradient sparkle icon. Axes: Size (Medium / Small) × State (Default / Hover / Clicked) × Show Stroke (True / False).

Changed files:

  • src/components/AiButton/AiButton.tsx, styles.ts, AiSparkleIcon.tsx, index.ts, AiButton.test.tsx, AiButtonDesignSpec.md
  • src/components/index.ts (exports AiButton / AiButtonProps / AiButtonSize)
  • packages/design-site/src/theme/ReactLiveScope/index.tsx (live demo scope)
  • packages/design-site/docs/components/atomic/ai-button.mdx + zh-CN i18n

Changes:

  1. A standalone AiButton component that does not reuse the Button variant system; exposes size (medium/small, default medium) and showStroke (default true), passing the rest of the native button attributes through
  2. AI gradient #8F53ED → #00D0FF → #21EF6A: Show Stroke=True uses a dual-layer padding-box / border-box background to achieve a 2px gradient stroke (white inner background); Show Stroke=False is a plain white background
  3. A built-in AiSparkleIcon (multi-color gradient sparkle), implemented directly per CLAUDE.md 7.2 "component-internal non-contract visuals", with the gradient id using useId to avoid multi-instance conflicts
  4. Interaction shadows: Default AI cyan glow / Hover --Effects-Shadow-Emphasized / active --Effects-Shadow-Default
  5. Sizes: Medium px-24/py-12 + Body(14)/leading-5; Small px-12/py-8 + Footnote(13/18); icon unified at 20×20

Alert (Toast) adds an AI Feedback variant​

Status: Done

Background: The 2026/06/01 design adds Style=AI Feedback to Alert (Figma component set 319:30904, implemented as Toast in this repo). Unlike Info/Success/Warning/Error's "16% variant-color mask + monochrome icon", AI Feedback is white background + 1px AI gradient stroke + multi-color gradient icon (icon_multicolor_ai).

Changed files:

  • src/components/Toast/toast-manager.ts (ToastType adds aiFeedback)
  • src/components/Toast/Toast.tsx (toast.aiFeedback method + JSDoc)
  • src/components/Toast/styles.ts (TOAST_VARIANT_CLASS / TOAST_ICON_COLOR_CLASS add aiFeedback; new mask gradient stroke)
  • src/components/Toast/ToastItem.tsx (renderIcon adds an aiFeedback branch)
  • src/components/Toast/ToastAiIcon.tsx (new multi-color gradient icon)
  • src/components/Toast/Toast.test.tsx, Feedbacks/FeedbacksDesignSpec.md
  • packages/design-site/docs/components/patterns/feedbacks-toast.mdx + zh-CN i18n

Changes:

  1. Added toast.aiFeedback(message, options?), reusing the two layouts of Message / Alert (with description)
  2. The AI gradient stroke is implemented with a before pseudo-element + mask (content-box / border-box exclude) for a 1px gradient border, keeping the white background unchanged; the root node is itself absolute, so relative is not added to avoid overriding positioning
  3. A built-in ToastAiIcon (icon_multicolor_ai, 4-stop diagonal gradient), with the gradient id using useId; the icon does not apply a text color
  4. The gradient direction matches the AiButton stroke (purple → cyan → green)

Breadcrumb collapsed item gains Hover / Select interaction​

Status: Done

Background: The 2026/06/01 design adds interaction to the Breadcrumb collapsed state: ... (Figma Style=Compressed, node 23859:25240) changes from static text into an interactive trigger that, on click / select, expands a dropdown (Figma Breadcrumb Dropdown Menu 23880:11610, Radius_12) listing the collapsed intermediate items.

Changed files:

  • src/components/Breadcrumb/Breadcrumb.tsx (getResolvedBreadcrumbItems collects hiddenItems; new BreadcrumbEllipsisMenu)
  • src/components/Breadcrumb/styles.ts (BREADCRUMB_ELLIPSIS_TRIGGER_CLASS / BREADCRUMB_DROPDOWN_LINK_CLASS)
  • src/components/Breadcrumb/Breadcrumb.test.tsx, BreadcrumbDesignSpec.md
  • packages/design-site/docs/components/atomic/breadcrumb.mdx + zh-CN i18n

Changes:

  1. When there are more than 4 levels, the collapsed placeholder ... becomes a DropdownMenu trigger; reuses the design DropdownMenu (Radius_12 + unified item hover), not rebuilding the overlay
  2. Trigger has three states: Default / Hover / Selected(open); hover and data-[state=open] show a gray background + darkened text
  3. The dropdown lists the collapsed intermediate items (items.slice(2, n-2)), each a link (icon + text, carrying href), with progressive per-level indentation (level 0 at 0, then starting at 8px, +16px per level, aligning with Figma Spacer 0/8/24/40)
  4. The indentation uses inline style (dynamic Tailwind classes cannot be scanned by the compiler)
  5. The composable BreadcrumbEllipsis (static ...) is kept as public API, unaffected

Status: Done

Background: The 2026/06/01 design replaced the Main Menu master component and updated it to the 4.0 style (new master component 22535:4613, the old generic Menu 4746:125765 deleted, the old Main Menu 1449:72679 deprecated). The new Main Menu still reuses the existing _Menu Item Base component set 229:33384.

After verification, design's Menu / MenuItem base primitives already align with the 4.0 Menu Item Base in spacing (px-8/py-8/gap-8), corner radius (Radius_5), color (Labels-Secondary / Tertiary, hover bg Grays-Gray-1 #EBEBEB), and height (40px). The only style difference is the body line height: 4.0 is 14/20, the old implementation was 14/22.

Main Menu, as a business-level composition (Logo, user info, Plan info, Sections, etc.), is not included in @plaud/design; it is assembled at the application layer (web4). This repo only maintains the Menu primitives it reuses. The Sections group heading styles (List Heading/Subheading) are a separate change, out of scope here.

Changed files:

  • src/components/Menu/styles.ts (MENU_ITEM_CONTENT_CLASS line height leading-(--Line-Height-Body) → leading-5; comments updated)
  • src/components/Menu/Menu.tsx, MenuDesignSpec.md (Figma master component node references updated to 4.0)

Changes:

  1. Menu Item body line height aligned to 4.0 (14/20, leading-5, consistent with AiButton medium); since the item is constrained by min-h-40, there is no visual regression
  2. Updated Menu's Figma source node references: the main node points to the 4.0 Main Menu 22535:4613, annotating that the old nodes are deleted / deprecated
  3. The spec line height and node list are synced to 4.0

Follow-up fixes (review feedback)​

Status: Done

Two fixes after DevTools verification + reviewer feedback, covering the initial implementations of the AiButton / Toast AI Feedback items above:

  1. Gradient stroke rendering fix: the initial version used Tailwind arbitrary values to express the layered background / mask ([background:...padding-box,linear-gradient...border-box], before:[-webkit-mask:...content-box,...]). Tailwind v4 cannot compile arbitrary values containing a top-level comma (no CSS is generated; DevTools confirmed the computed value was none / the border did not show). Switched to inline style:
    • AiButton: AI_BUTTON_STROKE_STYLE (applied when showStroke)
    • Toast AI Feedback: TOAST_AI_BORDER_STYLE (applied by ToastItem when type==='aiFeedback', 1px border)
    • Commas inside parentheses (such as rgba() shadows) are unaffected.
  2. AI icons changed to contract injection: removed the component-internal self-drawn AiSparkleIcon.tsx / ToastAiIcon.tsx, switching to the icon contract — added keys askAi (icon_multicolor_ask_ai) and aiFeedback (icon_multicolor_ai), injected by the consumer like all other icons; design does not bundle any AI icon SVG.
    • Changed files: src/Icons/contract.ts, src/Icons/index.tsx (AskAiIcon / AiFeedbackIcon wrappers), src/test/test-icon-registry.tsx (stub), AiButton.tsx / Toast/ToastItem.tsx (switched to injected icons); reference injection implementations: design-site plaud-icon-registry.tsx, web4 designIconRegistry.tsx (reusing the existing icon_multicolor_ask_ai.svg / icon_multicolor_ai.svg assets).
    • Contract keys grew from 29 to 31.