refactor(ui): tag, popover, inverse tooltip per pawwork ds (slice 06, issue #440) by Astro-Han · Pull Request #458 · Astro-Han/pawwork

Astro-Han · 2026-05-05T15:02:30Z

Summary

Slice 06 of issue #440 — rewrites Tag, Popover, and Tooltip to the PawWork design system. Also fixes two pre-existing Tooltip bugs found during manual testing.

Why

Part of the packages/ui + packages/app full visual rewrite (#440, permanent fork from upstream). Slice 06 covers the three interaction-surface primitives that appear throughout the app (model picker tags, command popovers, icon-button tooltips).

Related Issue

Part of #440 (slice 06). Does not close #221 — the list search focus ring requires a JS-level fix (focus({ focusVisible: false })) that is out of scope here; tracked separately.

Human Review Status

Pending. A human should make the final merge decision after reviewing the final diff and verification evidence.

Review Focus

tag.css: single rest-state, no size variants, --surface-raised bg (dark-mode adaptive; replaces hotfix's size-variant restoration)
tooltip.tsx sync(): was checking [aria-expanded="true"] which blocked tooltip on sidebar toggle — narrowed to [data-expanded] only
tooltip.tsx prop order: openDelay/closeDelay moved before {...others} so callers (e.g. new-session button openDelay={2000}) are not silently overridden

Risk Notes

CSS-only changes to packages/ui primitives; no packages/app files changed. No new dependencies. No data, permissions, or migration concerns. The aria-expanded fix is behaviour-restoring (tooltip was broken before, now works as expected).

How To Verify

bun --cwd packages/ui run typecheck    → 0 errors
bun --cwd packages/app run typecheck   → 0 errors
grep -r 'Tag.*size=' packages/app/src  → 0 hits (no callers of removed prop)

Manual smoke (Electron, light + dark):

Tag: model picker tags display correctly in both modes ✅
Tooltip: sidebar toggle shows tooltip on hover; caret visible; inverse surface ✅
Tooltip: right-panel toggle shows tooltip correctly ✅
Popover: model picker opens and closes correctly ✅
Dark mode: all three components visually consistent ✅

Screenshots or Recordings

Manual testing confirmed via Electron. Before/after static screenshots pending — Storybook Matrix stories cover the key visual states (ForcedOpen, 4-placement Matrix, MenuMatrix, OnSurfaces).

Checklist

coderabbitai · 2026-05-05T15:02:38Z

Warning

Rate limit exceeded

@Astro-Han has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 37 minutes and 18 seconds before requesting another review.

To keep reviews running without waiting, you can enable usage-based add-on for your organization. This allows additional reviews beyond the hourly cap. Account admins can enable it under billing.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 22b76b26-debc-426c-b19f-8745f12089c3

📥 Commits

Reviewing files that changed from the base of the PR and between 1a2eddb and aad007c.

📒 Files selected for processing (1)

packages/ui/src/components/popover.css

📝 Walkthrough

Walkthrough

This PR updates styling and component configurations across three UI components (popover, tag, tooltip) in the design system. Changes include tokenized CSS properties, consolidated component variants, new Storybook stories showcasing updated primitives and interaction states, minor prop adjustments, and animation timing refinements.

Changes

Popover Styling & Consumer Primitives

Layer / File(s)	Summary
Token-based Styling `packages/ui/src/components/popover.css`	Popover content updated to use `--radius-md`, `--surface-base`, and `--ring-base` tokens; animation durations reduced from 0.15s to 0.12s.
Consumer Primitives `packages/ui/src/components/popover.css`	New styles added for `popover-search` slot (input styling, focus-visible behavior) and menu-item building blocks (`popover-item`, `popover-item-icon`, `popover-item-shortcut`, `popover-separator`, danger variant, and interaction states).
Component Configuration `packages/ui/src/components/popover.tsx`	Kobalte root gutter prop increased from 4 to 8 for better spacing.
Storybook Documentation `packages/ui/src/components/popover.stories.tsx`	Removed inline docs string; added `MenuMatrix` (demonstrating side-by-side item states, separators, shortcuts, danger variant), `WithSearch` (search input with results), and `WithDanger` (danger-variant item) stories.

Tag Component Simplification

Layer / File(s)	Summary
API Shape `packages/ui/src/components/tag.tsx`	`TagProps` interface no longer exports optional `size` prop; component no longer derives or sets `data-size` attribute.
Default Styling `packages/ui/src/components/tag.css`	Size variants (`data-size="normal"`, `data-size="large"`) removed; single default consolidated with `height: 20px`, `padding: 0 6px`, and consolidated typography. `border-radius` changed from `--radius-xs` to `--radius-sm`.
Storybook Documentation `packages/ui/src/components/tag.stories.tsx`	Removed `Sizes` story and `size` control; updated default args to `children: "Label"`; added `OnSurfaces` story rendering tags on multiple background tokens.

Tooltip Styling & Animation Updates

Layer / File(s)	Summary
Styling Updates `packages/ui/src/components/tooltip.css`	Keybind key now uses `--type-kbd` font and `--bg-cream` color; tooltip container reworked with `--fg-strong` background and larger padding; arrow styling added with `overflow: visible`.
Animation Definition `packages/ui/src/components/tooltip.css`	New `@keyframes tooltip-fadein` animation replaces prior opacity logic; expanded state triggers animation, closed state disables it.
Logic Updates `packages/ui/src/components/tooltip.tsx`	Expanded detection changed to check only `[data-expanded]` attribute (removed `aria-expanded="true"` condition); explicit `openDelay={0}` and `closeDelay={0}` added; `KobalteTooltip.Arrow` component now rendered with `size={8}`.
Storybook Documentation `packages/ui/src/components/tooltip.stories.tsx`	Removed inline docs string; updated `Keybind` keybind value to `"⌘K"`; expanded `ForcedOpen` and `Inactive` story args; added `Matrix` story showing placements across light/dark color schemes.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

Astro-Han/pawwork#448: Updates to design tokens (shadows, rings) that directly intersect with the CSS token usage in popover and tooltip styling.
Astro-Han/pawwork#320: Introduces base font-size tokens that relate to the component typography token conversions (e.g., --type-h3, --type-body).

Suggested labels

enhancement, P3, ui

Poem

🐰 Popovers now pop with pristine grace,
Tags trimmed down to a single base,
Tooltips fade in with timing so sweet,
Design tokens making components complete! ✨

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Linked Issues check	❓ Inconclusive	Issue `#221` addresses focus-visible ring on List search inputs. The PR fixes the underlying tooltip behavior by correcting the [data-expanded] check logic and setting openDelay=0, but does not directly implement the focus ring styling in list.tsx as the issue requires.	Verify whether the tooltip bug fix (openDelay=0 and [data-expanded]-only sync) is sufficient to resolve `#221`, or if additional focus-visible ring styling is needed in list.tsx search container.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main changes: refactoring three UI components (tag, popover, tooltip) per design specification slice 06 and issue `#440`.
Out of Scope Changes check	✅ Passed	All changes directly align with the stated scope: tag/popover/tooltip refactoring per slice 06 design, plus tooltip focus-ring bug fix for `#221`. No unrelated refactors, dependencies, or generated files detected.
Description check	✅ Passed	PR description comprehensively covers all required template sections with clear detail, including summary, objectives, related issue, review focus, risk assessment, verification steps with results, and completed checklist.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch worktree-claude+440-slice-06-tag-popover-tooltip

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

gemini-code-assist

Code Review

This pull request refines the List, Popover, Tag, and Tooltip components by simplifying typography, adding animations, and introducing new primitives like popover items and search slots. Feedback identifies several instances of hardcoded hex colors and animation durations that should be replaced with design tokens for better theme support. It is also recommended to differentiate the visual states of interactive elements and use semantic background tokens to ensure the components function correctly in dark mode.

Drops the two-tier size prop; locks to height 20 / padding 0-6 / weight 500 / --fg-strong / #fff bg / 0.5px --border-weak / --radius-sm. Stories simplified to Basic + OnSurfaces smoke across three surfaces.

…r pawwork ds Container now uses --surface-base / --radius-md / --ring-base + --shadow-floating / padding 4 (via popover-body). Removes hard-coded 14px radius, --surface-raised, and min/max-width from component CSS (callers set min-width 184 inline per spec). Gutter changed to 8px. Adds popover-item / popover-item-icon / popover-item-shortcut / popover-separator slots + data-variant="danger" tier. data-force-state on items enables static screenshot coverage of hover/focus/selected/disabled.

…ring Adds [data-slot="popover-search"] — no border, no radius, padding 10/12, 1px --border-weaker bottom divider, per DESIGN.md L188. input :focus-visible uses the brand focus ring (0 0 0 1px #FF5910, 0 0 0 3px rgba(255,89,16,0.20)) inlined per spec ("调用处内联"). WithSearch story added with autofocus for static :focus-visible screenshot.

Surface: --fg-strong bg + --bg-cream text (inverse), --radius-sm, padding 8/12, --shadow-floating. Removes border and hard-coded 2px vertical padding. Font set to sans 13/500/1.2 inline per DESIGN.md L190. Uncomments Kobalte Arrow (size=5) for the 5×5 caret; fill is auto-detected from background-color. openDelay set to 0 for immediate appearance; closeDelay already 0. Fade-in uses tooltip-fadein keyframe over --duration-base; [data-closed] cancels animation for instant disappearance on leave.

…alte [data-expanded] - Move openDelay/closeDelay before {...others} so callers (e.g. new-session button with openDelay={2000}) are not silently overridden. - sync() now only queries [data-expanded] (Kobalte popup marker) to suppress tooltips; native aria-expanded on panel toggles no longer blocks tooltip display. - Increase Arrow size from 5 to 8 for visible caret.

coderabbitai

🧹 Nitpick comments (1)

packages/ui/src/components/popover.css (1)

79-83: ⚡ Quick win

Tokenize the search input focus ring instead of hard-coding orange values.
Using design tokens here keeps focus treatment consistent across themes and future palette updates.

Proposed adjustment

   &:focus-visible {
     outline: none;
     border-radius: 2px;
-    box-shadow: 0 0 0 1px `#ff5910`, 0 0 0 3px rgba(255, 89, 16, 0.2);
+    box-shadow: var(--ring-interactive-base);
   }

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/ui/src/components/popover.css` around lines 79 - 83, Replace the
hard-coded orange values in the &:focus-visible rule with design tokens: swap
`#ff5910` and rgba(255,89,16,0.2) used in the box-shadow and any outline color
into appropriate CSS tokens (e.g., var(--focus-ring-color) and
var(--focus-ring-ambient) or your project's equivalent token names) so the focus
treatment uses tokens consistently; update the box-shadow and any
border/outlines inside the &:focus-visible selector to reference those tokens
instead of literal hex/rgba values.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@packages/ui/src/components/popover.css`:
- Around line 79-83: Replace the hard-coded orange values in the &:focus-visible
rule with design tokens: swap `#ff5910` and rgba(255,89,16,0.2) used in the
box-shadow and any outline color into appropriate CSS tokens (e.g.,
var(--focus-ring-color) and var(--focus-ring-ambient) or your project's
equivalent token names) so the focus treatment uses tokens consistently; update
the box-shadow and any border/outlines inside the &:focus-visible selector to
reference those tokens instead of literal hex/rgba values.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: ef165d06-9846-4e05-8c37-d230c94792df

📥 Commits

Reviewing files that changed from the base of the PR and between 36e2f24 and 1a2eddb.

📒 Files selected for processing (9)

packages/ui/src/components/popover.css
packages/ui/src/components/popover.stories.tsx
packages/ui/src/components/popover.tsx
packages/ui/src/components/tag.css
packages/ui/src/components/tag.stories.tsx
packages/ui/src/components/tag.tsx
packages/ui/src/components/tooltip.css
packages/ui/src/components/tooltip.stories.tsx
packages/ui/src/components/tooltip.tsx

Use var(--duration-base) instead of 0.12s for open/close animation and var(--shadow-xs-border-focus) instead of hardcoded #ff5910 values for the search input focus ring.

Astro-Han · 2026-05-05T16:31:36Z

Re CodeRabbit nitpick (review 4229642402, popover.css L79-83): fixed in aad007c — replaced hardcoded #ff5910 with var(--shadow-xs-border-focus) (already defined in theme.css as 0 0 0 1px var(--brand-primary), 0 0 0 3px rgba(255, 89, 16, 0.2)). The suggested token --ring-interactive-base does not exist in the design system; --shadow-xs-border-focus is the correct equivalent.

gemini-code-assist Bot reviewed May 5, 2026

View reviewed changes

Astro-Han added 5 commits May 5, 2026 23:50

refactor(ui): rewrite tag to single rest-state per pawwork ds

fc38f08

Drops the two-tier size prop; locks to height 20 / padding 0-6 / weight 500 / --fg-strong / #fff bg / 0.5px --border-weak / --radius-sm. Stories simplified to Basic + OnSurfaces smoke across three surfaces.

Astro-Han force-pushed the worktree-claude+440-slice-06-tag-popover-tooltip branch from 909974c to 1a2eddb Compare May 5, 2026 15:50

coderabbitai Bot reviewed May 5, 2026

View reviewed changes

Astro-Han added enhancement New feature or request ui Design system and user interface P2 Medium priority labels May 5, 2026

refactor(ui): replace hardcoded hex and duration in popover with tokens

aad007c

Use var(--duration-base) instead of 0.12s for open/close animation and var(--shadow-xs-border-focus) instead of hardcoded #ff5910 values for the search input focus ring.

Astro-Han merged commit e2c957c into dev May 5, 2026
20 checks passed

Astro-Han deleted the worktree-claude+440-slice-06-tag-popover-tooltip branch May 5, 2026 16:33

Astro-Han mentioned this pull request May 6, 2026

[Feature] Rewrite packages/ui + packages/app visual layer against PawWork design system (incremental PR series) #440

Closed

11 tasks

coderabbitai Bot mentioned this pull request May 22, 2026

feat(ui): warm-tone three-tier sidebar separation + contrast bump (dark/light) #847

Merged

13 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor(ui): tag, popover, inverse tooltip per pawwork ds (slice 06, issue #440)#458

refactor(ui): tag, popover, inverse tooltip per pawwork ds (slice 06, issue #440)#458
Astro-Han merged 6 commits into
devfrom
worktree-claude+440-slice-06-tag-popover-tooltip

Astro-Han commented May 5, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented May 5, 2026 •

edited

Loading

Rate limit exceeded

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested labels

Poem

❌ Failed checks (1 warning, 1 inconclusive)

Uh oh!

gemini-code-assist Bot left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Astro-Han commented May 5, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

Astro-Han commented May 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Why

Related Issue

Human Review Status

Review Focus

Risk Notes

How To Verify

Screenshots or Recordings

Checklist

Uh oh!

coderabbitai Bot commented May 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Rate limit exceeded

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested labels

Poem

❌ Failed checks (1 warning, 1 inconclusive)

Uh oh!

gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Astro-Han commented May 5, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Astro-Han commented May 5, 2026 •

edited

Loading

coderabbitai Bot commented May 5, 2026 •

edited

Loading