Skip to main content

First round of batch style fixes (WEB-377)

Pre-release · Type: 🐛 Bug Fix

WEB-377 first round of batch fixes for component-library issues.

Changes​

WEB-606: Input missing Password/Textarea/Upload (In Dev)​

Status: To be fixed

WEB-610: Dialog style differs from Figma (In Dev)​

Status: Fixed

Problem: 1) The Dialog description text lacked the 14px font-size setting; 2) The confirm button had a stroke shadow (focus outline leakage)

Changed Files: src/components/Dialog/Dialog.tsx, src/components/Button/styles.ts

Changes:

  1. The Dialog content area div adds text-[14px] leading-[22px] text-(--Labels-Secondary), fixing the font size and color
  2. BUTTON_BASE_CLASS adds focus-visible:outline-none (previously unstyledVisual skipped the ui-layer VISUAL_BASE, causing the browser default focus outline to leak)

WEB-611: DropdownMenu style differs from Figma (In Dev)​

Status: Fixed

Problem: The separator was invisible — the --Separators-Non-opaque token did not exist, so the separator background color was empty

Changed Files: src/components/DropdownMenu/styles.ts

Changes:

  1. DROPDOWN_SEPARATOR_TOKEN_CLASS: bg-(--Separators-Non-opaque) → bg-(--Separators-Default), referencing the correct token (rgb(235,235,235))

WEB-612: Toast style differs from Figma (In Dev)​

Status: Fixed

Problem: The Toast title weight was bold (Sonner default); Figma should be normal; font size confirmed as 14px

Changed Files: src/components/Toast/styles.ts

Changes:

  1. TOAST_TITLE_CLASS adds font-normal!, overriding Sonner's default bold weight

WEB-724: Badges Member Badges missing​

Status: Fixed

Problem: 1) The "Limited-time free" and countdown Member Badges were missing; 2) The bottom of "26% OFF" should be square corners, not rounded; 3) The countdown badge height (28px) differed from the others

Changed Files: src/components/Badge/styles.ts, src/components/Badge/MemberBadge.tsx (new), src/components/Badge/Badge.tsx, design-site badge.mdx (en/zh-CN)

Changes:

  1. Added a 'top-round' shape (rounded-tl-(--Radius_5) rounded-tr-(--Radius_5), rounded top corners and square bottom corners)
  2. Created MemberBadge.tsx, providing 7 Member Badge preset components:
    • Badge.Starter (gray, pill, default)
    • Badge.Pro (cyan, pill, default)
    • Badge.Unlimited (tinted purple, pill, default)
    • Badge.Membership (warm, pill, default)
    • Badge.MemberLimitedTime (lavender-mist, pill, sm)
    • Badge.Countdown (tinted lavender-mist, pill, 28px, with the icon_countdown hourglass icon, accepts children)
    • Badge.Discount (purple, top-round, default, accepts children)
  3. The design-site Member Badges examples switched to the preset components

WEB-725: Button missing click (active) state​

Status: Fixed

Problem: The active state color was the same as hover, not aligned with Figma's Clicked state

Changed Files: src/components/Button/styles.ts

Changes:

  1. Secondary active: --Grays-Gray-1 (#EBEBEB) → --Grays-Gray-2 (#D6D6D6)
  2. Tertiary active: --Grays-Gray-1 (#EBEBEB) → --Grays-Gray-2 (#D6D6D6)
  3. Destructive active: color-mix(90% error, white) → color-mix(90% error, black) (hover gets lighter, active gets darker)

WEB-726: Button Loading state differs from Figma​

Status: Fixed

Problem: The Loading-state Spinner inherited the disabled text color (#a3a3a3); it should be Grays-Gray-6 (#5c5c5c)

Changed Files: src/components/Button/Button.tsx

Changes:

  1. Gave the Loading Spinner its own color text-(--Grays-Gray-6), no longer inheriting the disabled text color

WEB-727: RadioGroup selected-disabled state style fix​

Status: Fixed

Problem: In the disabled + selected state, only the outer-ring border color was changed; it should be a solid fill; the inner dot still showed black when the parent passed disabled

Changed Files: src/components/RadioGroup/styles.ts, src/components/RadioGroup/RadioGroup.tsx

Changes:

  1. Disabled-selected outer ring: border-(--Grays-Gray-3) → bg-(--Grays-Gray-3) border-transparent (solid fill)
  2. Added a group class to the Item; the inner dot uses group-data-disabled:bg-(--Grays-Gray-1) instead of a JS conditional
  3. Removed RADIO_DOT_DISABLED_CLASS, merging it into a single RADIO_DOT_CLASS
  4. Added size-full to the Indicator to ensure flex centering takes effect
  5. Inner dot size-1.75 (7px) → size-1.5 (6px), resolving the issue that a 12px content area cannot be evenly divided for centering

WEB-728: Controls missing Checkmark-Fill and Checkmark​

Status: Fixed

Problem: The Controls module only had Checkbox and RadioGroup, missing the Checkmark-Fill and Checkmark display components

Changed Files: Created src/components/Controls/Checkmark.tsx, updated Controls.tsx, index.ts, components/index.ts

Changes:

  1. Created the CheckmarkFill component (circular background + check mark, supports checked/disabled)
  2. Created the Checkmark component (plain check mark, supports checked)
  3. Mounted to the Controls namespace: Controls.Checkmark, Controls.CheckmarkFill
  4. Also supports direct import: import { Checkmark, CheckmarkFill } from '@plaud/design'

WEB-730: InputSearch magnifier icon style mismatch​

Status: Fixed

Problem: The search icon used a placeholder SVG, and the color used Labels-Secondary instead of Labels-Primary

Changed Files: src/Icons/index.tsx, src/components/Input/InputSearch.tsx, src/components/Input/input-search-styles.ts

Changes:

  1. Added SearchIcon (the real SVG path of Figma icon_search 20995:2085)
  2. InputSearch switched from SearchIconPlaceholder to SearchIcon
  3. Icon container color Labels-Secondary → Labels-Primary

WEB-740: Spinner style differs from Figma​

Status: Fixed (fixed together with WEB-726)

Problem: The Spinner line coordinates and opacity sequence were inconsistent with Figma, and it had an extra strokeLinecap="round"

Changed Files: src/components/ProgressIndicators/styles.ts, src/components/ProgressIndicators/Spinner.tsx

Changes:

  1. Updated SPINNER_LINES coordinates and opacity, aligning with Figma Spinner (20924:403)
  2. Removed strokeLinecap="round" (Figma does not have this attribute)

WEB-741: Switch loading state missing Spinner​

Status: Fixed

Problem: The Switch loading state only disabled interaction without showing a Spinner

Changed Files: src/components/ui/switch.tsx, src/components/Switch/Switch.tsx, src/components/Switch/styles.ts

Changes:

  1. The ui-layer Switch adds a thumbChildren prop, supporting injecting children into the thumb
  2. The design layer passes a 12px Spinner (text-(--Grays-Gray-6)) when loading
  3. Added SWITCH_THUMB_LOADING_CLASS; when loading, the thumb uses flex to center the Spinner

WEB-742: Popover two style optimizations​

Status: Fixed

Problem: 1) The title-less Popover lacked a font size (should be 14px); 2) The gap from the Popover to the trigger was too wide (should be 4px)

Changed Files: src/components/Popover/styles.ts

Changes:

  1. POPOVER_CONTENT_CLASS adds text-[14px] leading-[22px] as the base font, covering the title-less scenario
  2. POPOVER_SIDE_OFFSET from 8 → 4, aligning with the Figma spec

WEB-743: Tooltip two optimizations​

Status: Fixed

Problem: 1) The font could be too large (in responsive mode --Font-Size-Body becomes 16px); 2) The gap from the Tooltip to the trigger should be 4px

Changed Files: src/components/Tooltip/styles.ts

Changes:

  1. Font: text-(length:--Font-Size-Body) leading-(--Line-Height-Body) → text-[14px] leading-[22px], fixed at 14px and unaffected by responsive mode
  2. Gap: TOOLTIP_SIDE_OFFSET from 8 → 4, aligning with the Figma spec

Status: Fixed

Problem: 1) The navigation button arrows were gray by default; they should be white; 2) After hover the color turned black but still had opacity

Changed Files: src/components/ui/carousel.tsx

Changes:

  1. The navigation buttons switched from Button variant="outline" to a native <button>, removing the Button dependency
  2. Added CAROUSEL_BUTTON_CLASS: bg-black/20 text-white (default gray background, white arrows) + hover:bg-black/40 (darker on hover)
  3. Kept structural styles such as disabled:opacity-50, rounded-full, and positioning classes

WEB-745: Menu two optimizations​

Status: Fixed

Problem: 1) When there is a title, the gap from the title to the menu items should be 16px; 2) The + of the group action button did not match the Figma design component

Changed Files: src/components/Menu/styles.ts, src/Icons/index.tsx, design-site menu.mdx (en/zh-CN)

Changes:

  1. MENU_CONTAINER_CLASS adds gap-(--Spacing_16), making the header-to-items gap 16px
  2. Added PlusIcon (the real SVG path of Figma icon_add_xs I21463:570;21220:2583)
  3. In the design-site story, the group action button switched from the plain-text + to the Figma icon_add_xs SVG

WEB-746: Table style differences​

Status: Fixed

Problem: The header/column row heights, text colors, font weights, spacing, separators, alignment, and hover state were all inconsistent with Figma

Changed Files: src/components/Table/styles.ts, src/components/Table/table-data-mode.tsx

Changes:

  1. Header th: min-h-(--Spacing_40) → h-[60px]; font-medium → font-normal; text-(--Labels-Secondary) → text-(--Labels-Tertiary); px-(--Spacing_12) → px-(--Spacing_16)
  2. Header row: removed bg-(--Backgrounds-Tertiary), separator changed to border-(--Separators-Default)
  3. Added TABLE_BODY_ROW_CLASS: border-0 (no inter-row separators) + hover:bg-(--Grays-Gray-1) (hover state)
  4. Added TABLE_BODY_TD_CLASS: h-[60px] px-(--Spacing_16) py-[20px] text-(--Labels-Primary), aligning the header px to fix field misalignment
  5. table-data-mode.tsx applies the new style classes to the body rows and tds

WEB-747: Tabs style differs from Figma​

Status: Fixed

Problem: 1) The Underline underline was too close to the text; 2) The Chevron right-side icon style differed from Figma

Changed Files: src/components/Tabs/styles.ts, src/components/Tabs/Tabs.tsx, src/Icons/index.tsx

Changes:

  1. The Underline trigger adds self-stretch, stretching the trigger to the parent container's 40px height so the underline has the correct spacing from the text (previously h-full + parent items-center did not take effect, and the trigger height collapsed to the text height)
  2. Added ListChevronDownIcon (Figma icon_list_chevron_down 21568:9967, path M5 7.5L10 12.5L15 7.5, no strokeLinejoin), replacing the original ChevronDownIcon