Skip to content

fix(web/heroui): finish v3 small touchups (success/warning Buttons + Checkbox classNames)#10

Merged
dingyi merged 3 commits into
mainfrom
feature/heroui-v3-success-warning-buttons
Apr 27, 2026
Merged

fix(web/heroui): finish v3 small touchups (success/warning Buttons + Checkbox classNames)#10
dingyi merged 3 commits into
mainfrom
feature/heroui-v3-success-warning-buttons

Conversation

@dingyi

@dingyi dingyi commented Apr 27, 2026

Copy link
Copy Markdown
Owner

Closes Phases 4 and 6 of web/TODO.md. Together with the PR #9 codemod
this brings every HeroUI Button / Chip / Checkbox call site onto v3
semantics; only Phase 1 (HeroCompat → v3 rewrite of TieredPricingEditor
& friends) and Phase 5 (startContent / endContent → children) remain.

Summary

Phase 4 — <Button color='success'|'warning'> (8 sites)

HeroUI v3 Button has no color prop — only variant. Every
<Button color='success' / 'warning'> was therefore being silently
ignored: 8 buttons across the app fell back to the default primary
look, losing their semantic intent.

Add web/src/components/common/ui/buttonTones.js exporting four tone
classes that override Button's CSS variables (--button-bg,
--button-bg-hover, --button-bg-pressed, --button-fg) using the
warning / success tokens @heroui/styles already exposes via
Tailwind v4. Pair with v3 variant='primary' for solid tones and
variant='tertiary' for ghost / icon-only ones.

Call site Before After
CheckinCalendar ""立即签到"" color='success' variant='primary' + successButtonClass
SettingsPerformance ""清理不活跃缓存"" color='warning' variant='primary' + warningButtonClass
MultiKeyManageModal ""删除自动禁用密钥"" color='warning' variant='primary' + warningButtonClass
SettingsChannelAffinity (icon-only X) color='warning' variant='tertiary' variant='tertiary' + warningGhostButtonClass
ModelTestModal ""前往设置"" color='warning' variant='tertiary' variant='tertiary' + warningGhostButtonClass
UserSubscriptionsModal ""作废"" color='warning' variant='tertiary' variant='tertiary' + warningGhostButtonClass
UsersColumnDefs ""提升"" color='warning' variant='tertiary' variant='tertiary' + warningGhostButtonClass
tokens/index ""不再提醒"" color='warning' variant='tertiary' variant='tertiary' + warningGhostButtonClass

Avatar and Chip still accept color='success'|'warning' in v3, so
unrelated call sites on those components are left untouched.

Phase 6 — Checkbox classNames={...} (1 site)

<Checkbox classNames={{ base, label }}> no longer exists in v3 —
the slot map silently no-ops, so the consent checkbox on the auth
pages was rendering centered with default text color instead of the
small muted label we wanted.

Replace with v3 idioms:

  • base.items-start → root className='items-start'
  • label.text-sm/leading-6/text-muted → wrap children in a <span>
    with the same Tailwind classes

After this PR rg \"color=['\\\"](success|warning)['\\\"]\" web/src/ only matches
Avatar / Chip call sites (where the prop is still valid in v3), and
rg \"classNames=\\{\" web/src/ is empty.

Out of scope (still tracked in web/TODO.md)

  • Phase 1 — migrate the last 3 files still importing the Semi-style
    HeroCompat wrapper (ToolPriceSettings, TieredPricingEditor
    ~1700 lines, DynamicPricingBreakdown).
  • Phase 5 — startContent / endContentchildren on Button
    & Chip (~50 files; needs a codemod plus human review for gap-*).

Test plan

  • bun run dev — verify the 8 Buttons read right (warning = amber-ish
    solid or ghost text; success = green ""立即签到"").
  • Auth pages — consent checkbox sits top-aligned with small muted
    label text, and clicking the link doesn't toggle the checkbox.
  • Re-run bun scripts/heroui-v3-variant-codemod.mjs → 0 edits.

This PR was generated automatically by Cursor.

Made with Cursor

dingyi added 3 commits April 27, 2026 23:58
HeroUI v3 Checkbox no longer supports the classNames slot prop —
{ base, label } silently no-ops, so the consent checkbox on the
auth pages was rendering with the default (centered) alignment and
default text color instead of the small muted label we wanted.

Replace it with v3 idioms:
- base.items-start → root className='items-start'
- label.text-sm/leading-6/text-muted → wrap children in a <span>
  with the same Tailwind classes

Made-with: Cursor
…en classes

HeroUI v3 Button has no `color` prop — only `variant`. The 8 surviving
`<Button color='success' / 'warning'>` call sites were therefore being
silently ignored: every "立即签到", "清理不活跃缓存", "前往设置",
"提升", "作废", "不再提醒", "清空规则缓存", "删除自动禁用密钥" button
fell back to the default primary look, losing its semantic meaning.

Add web/src/components/common/ui/buttonTones.js exporting four tone
classes that override Button's CSS variables (--button-bg / -hover /
-pressed / -fg) using the warning / success tokens @heroui/styles
already exposes via Tailwind v4. Pair with v3 variant='primary' for
solid tones and variant='tertiary' for ghost/icon-only ones.

Migrations:
  CheckinCalendar    "立即签到"          variant='primary' + successButtonClass
  SettingsPerformance "清理不活跃缓存"    variant='primary' + warningButtonClass
  MultiKeyManageModal "删除自动禁用密钥"  variant='primary' + warningButtonClass
  ChannelAffinity    "清空规则缓存" (X)  variant='tertiary' + warningGhostButtonClass
  ModelTestModal     "前往设置"          variant='tertiary' + warningGhostButtonClass
  UserSubscriptions  "作废"              variant='tertiary' + warningGhostButtonClass
  UsersColumnDefs    "提升"              variant='tertiary' + warningGhostButtonClass
  tokens/index       "不再提醒"          variant='tertiary' + warningGhostButtonClass

Avatar and Chip still accept color='success'|'warning' in v3, so
unrelated call sites on those components are left untouched.

Made-with: Cursor
Phase 4 (color='success'/'warning' Buttons) and Phase 6
(Checkbox classNames slot map) are complete. Track the remaining
work — Phase 1 (HeroCompat removal, ~1700-line TieredPricingEditor)
and Phase 5 (startContent/endContent → children) — for follow-up PRs.

Made-with: Cursor
@dingyi
dingyi merged commit a8dc10a into main Apr 27, 2026
1 check passed
@dingyi
dingyi deleted the feature/heroui-v3-success-warning-buttons branch April 27, 2026 18:26
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.

1 participant