Skip to main content

Tabs active label uses Body/Emphasized semibold (WEB-1352)

Version: 0.9.1 ยท Type: ๐Ÿ› Bug Fix

WEB-1352 ยท reported from HARN-702

Problemโ€‹

The active label of the secondary tabs on Community > Skills (Discover / Installed / My contributions) rendered one weight step too light. The design annotation calls for the Body/Emphasized ยท 14/20 text token on the active state.

Root causeโ€‹

TABS_TRIGGER_BASE_CLASS declared the active state as data-[state=active]:font-medium (500). The Figma Tabs node (5ssRkvUdqpsRwwW59ooQCp, node 522:53227) specifies the active label as fontWeight: 600 / Inter-SemiBold / 14 / 20, which maps to --Font-Weight-Emphasized: "Semibold". Font size and line height were already correct โ€” the implementation reads --Font-Size-Body (14px) and --Line-Height-Body (20px) โ€” only the weight was off.

The spec document and the docs-site typography table separately carried a stale line height of 22px while the token has been 20px; the implementation was never affected, only the docs.

Changed Filesโ€‹

  • packages/design/src/components/Tabs/styles.ts
  • packages/design/src/components/Tabs/TabsDesignSpec.md
  • packages/design/src/components/Tabs/__tests__/Tabs.test.tsx
  • packages/design-site/docs/components/tabs.mdx (and its zh-CN counterpart)

Changesโ€‹

  1. styles.ts: data-[state=active]:font-medium โ†’ data-[state=active]:font-semibold, and the spec comment at the top of the file now states the correct weight and line height.
  2. TabsDesignSpec.md and the docs-site typography table: active font weight 500 โ†’ 600 (semibold), line height 22px โ†’ 20px.
  3. Tabs.test.tsx: a unit test asserts the trigger carries data-[state=active]:font-semibold and no longer carries data-[state=active]:font-medium.

Impactโ€‹

  • Every page using @plaud/design Tabs now renders the active label at weight 600.
  • Consumers that hardcode the active weight must follow. In apps/web4, CommunitySkillsPage stacks an invisible fixed-width placeholder label to keep the tab row from jittering when the weight changes on selection; that placeholder was font-medium and has been updated to font-semibold, otherwise it under-measures and the jitter comes back.