fix(ui): give the default button variant a hover state on <button> elements - #213
Merged
Conversation
…ements The default variant carried badge's anchor-scoped [a]:hover:bg-primary/80, so a Button rendered as a native <button> (the component's default branch) got no hover feedback at all; only anchor buttons did. Every other variant already scopes hover to the element itself, and shadcn's [a]: pattern only fits Badge, whose non-anchor rendering is a static span. Verified end to end: a consumer build now emits .hover:bg-primary/80:hover instead of .[a]:hover:bg-primary/80:is(a):hover.
Deploying svadmin-example with
|
| Latest commit: |
7112413
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://23d78ef7.svadmin-example.pages.dev |
| Branch Preview URL: | https://fix-button-default-hover.svadmin-example.pages.dev |
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
1 participant
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.
问题
buttonVariants的 default 变体使用了 badge 的锚点作用域写法[a]:hover:bg-primary/80。Button 组件默认渲染为原生<button>，该选择器编译后为.[a]:hover:bg-primary/80:is(a):hover，只对<a>生效——普通按钮的 primary 变体没有任何 hover 反馈，只有<Button href>渲染的锚点按钮才有。同文件内 outline / secondary / ghost / destructive / link 变体的 hover 均不带
[a]:作用域，badge.svelte 的[a]:模式（非锚点渲染为静态 span，只需给链接态 hover）不适用于 button，应为移植时的笔误。修复
[a]:hover:bg-primary/80→hover:bg-primary/80，与其余变体保持一致。验证
button.test.ts：断言 default 变体含hover:bg-primary/80且所有变体不含[a]:作用域；packages/uivitest 43/43 通过。.hover\:bg-primary\/80:hover（对<button>生效），修复前仅有:is(a):hover规则；badge 的[a]:规则保持不变。