fix(web/heroui): finish v3 small touchups (success/warning Buttons + Checkbox classNames)#10
Merged
Merged
Conversation
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
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes Phases 4 and 6 of
web/TODO.md. Together with the PR #9 codemodthis 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
colorprop — onlyvariant. Every<Button color='success' / 'warning'>was therefore being silentlyignored: 8 buttons across the app fell back to the default primary
look, losing their semantic intent.
Add
web/src/components/common/ui/buttonTones.jsexporting four toneclasses that override Button's CSS variables (
--button-bg,--button-bg-hover,--button-bg-pressed,--button-fg) using thewarning / success tokens
@heroui/stylesalready exposes viaTailwind v4. Pair with v3
variant='primary'for solid tones andvariant='tertiary'for ghost / icon-only ones.color='success'variant='primary' + successButtonClasscolor='warning'variant='primary' + warningButtonClasscolor='warning'variant='primary' + warningButtonClasscolor='warning' variant='tertiary'variant='tertiary' + warningGhostButtonClasscolor='warning' variant='tertiary'variant='tertiary' + warningGhostButtonClasscolor='warning' variant='tertiary'variant='tertiary' + warningGhostButtonClasscolor='warning' variant='tertiary'variant='tertiary' + warningGhostButtonClasscolor='warning' variant='tertiary'variant='tertiary' + warningGhostButtonClassAvatarandChipstill acceptcolor='success'|'warning'in v3, sounrelated 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→ rootclassName='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 matchesAvatar / 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)HeroCompatwrapper (ToolPriceSettings,TieredPricingEditor~1700 lines,
DynamicPricingBreakdown).startContent/endContent→childrenon 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-ishsolid or ghost text; success = green ""立即签到"").
label text, and clicking the link doesn't toggle the checkbox.
bun scripts/heroui-v3-variant-codemod.mjs→ 0 edits.This PR was generated automatically by Cursor.
Made with Cursor