archive-gh-me/nextui
1
0
Fork 0
mirror of https://github.com/nextui-org/nextui.git synced 2025-12-08 19:26:11 +00:00
Code Issues Projects Releases Wiki Activity

fix(theme): bordered focus styles take precedence over hover (#5893)

Browse Source 
* fix(theme): bordered focus styles take precedence over hover

* chore(theme): update component focus styles to fix hover override

* chore: bump @heroui/theme peer deps

---------

Co-authored-by: WK Wong <wingkwong.code@gmail.com>
This commit is contained in:
Hayato Hasegawa 2025-11-16 23:20:17 +09:00 committed by GitHub
parent 91e010fe3b
commit fd9dd2a20c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 79 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
.changeset/popular-fishes-camp.md Normal file
View File

@ -0,0 +1,8 @@
---
"@heroui/button": patch
"@heroui/select": patch
"@heroui/input": patch
"@heroui/theme": patch
---
Fix bordered focus styles overridden by hover styles (#5585)

2
packages/components/input/package.json
View File

@ -36,7 +36,7 @@
"peerDependencies": {
"react": ">=18 || >=19.0.0-rc.0",
"react-dom": ">=18 || >=19.0.0-rc.0",
"@heroui/theme": ">=2.4.19",
"@heroui/theme": ">=2.4.23",
"@heroui/system": ">=2.4.18"
},
"dependencies": {

2
packages/components/number-input/package.json
View File

@ -39,7 +39,7 @@
"react": ">=18 || >=19.0.0-rc.0",
"react-dom": ">=18 || >=19.0.0-rc.0",
"@heroui/system": ">=2.4.18",
"@heroui/theme": ">=2.4.19"
"@heroui/theme": ">=2.4.23"
},
"dependencies": {
"@heroui/form": "workspace:*",

2
packages/components/select/package.json
View File

@ -35,7 +35,7 @@
},
"peerDependencies": {
"@heroui/system": ">=2.4.18",
"@heroui/theme": ">=2.4.17",
"@heroui/theme": ">=2.4.23",
"framer-motion": ">=11.5.6 || >=12.0.0-alpha.1",
"react": ">=18 || >=19.0.0-rc.0",
"react-dom": ">=18 || >=19.0.0-rc.0"

26
packages/core/theme/src/components/input.ts
View File

@ -95,6 +95,7 @@ const input = tv({
"border-default-200",
"data-[hover=true]:border-default-400",
"group-data-[focus=true]:border-default-foreground",
"group-data-[focus=true]:data-[hover=true]:border-default-foreground",
],
},
underlined: {
@ -449,7 +450,10 @@ const input = tv({
variant: "bordered",
color: "primary",
class: {
inputWrapper: "group-data-[focus=true]:border-primary",
inputWrapper: [
"group-data-[focus=true]:border-primary",
"group-data-[focus=true]:data-[hover=true]:border-primary",
],
label: "text-primary",
},
},
@ -457,7 +461,10 @@ const input = tv({
variant: "bordered",
color: "secondary",
class: {
inputWrapper: "group-data-[focus=true]:border-secondary",
inputWrapper: [
"group-data-[focus=true]:border-secondary",
"group-data-[focus=true]:data-[hover=true]:border-secondary",
],
label: "text-secondary",
},
},
@ -465,7 +472,10 @@ const input = tv({
variant: "bordered",
color: "success",
class: {
inputWrapper: "group-data-[focus=true]:border-success",
inputWrapper: [
"group-data-[focus=true]:border-success",
"group-data-[focus=true]:data-[hover=true]:border-success",
],
label: "text-success",
},
},
@ -473,7 +483,10 @@ const input = tv({
variant: "bordered",
color: "warning",
class: {
inputWrapper: "group-data-[focus=true]:border-warning",
inputWrapper: [
"group-data-[focus=true]:border-warning",
"group-data-[focus=true]:data-[hover=true]:border-warning",
],
label: "text-warning",
},
},
@ -481,7 +494,10 @@ const input = tv({
variant: "bordered",
color: "danger",
class: {
inputWrapper: "group-data-[focus=true]:border-danger",
inputWrapper: [
"group-data-[focus=true]:border-danger",
"group-data-[focus=true]:data-[hover=true]:border-danger",
],
label: "text-danger",
},
},

26
packages/core/theme/src/components/number-input.ts
View File

@ -114,6 +114,7 @@ const numberInput = tv({
"border-default-200",
"data-[hover=true]:border-default-400",
"group-data-[focus=true]:border-default-foreground",
"group-data-[focus=true]:data-[hover=true]:border-default-foreground",
],
},
underlined: {
@ -467,7 +468,10 @@ const numberInput = tv({
variant: "bordered",
color: "primary",
class: {
inputWrapper: "group-data-[focus=true]:border-primary",
inputWrapper: [
"group-data-[focus=true]:border-primary",
"group-data-[focus=true]:data-[hover=true]:border-primary",
],
label: "text-primary",
},
},
@ -475,7 +479,10 @@ const numberInput = tv({
variant: "bordered",
color: "secondary",
class: {
inputWrapper: "group-data-[focus=true]:border-secondary",
inputWrapper: [
"group-data-[focus=true]:border-secondary",
"group-data-[focus=true]:data-[hover=true]:border-secondary",
],
label: "text-secondary",
},
},
@ -483,7 +490,10 @@ const numberInput = tv({
variant: "bordered",
color: "success",
class: {
inputWrapper: "group-data-[focus=true]:border-success",
inputWrapper: [
"group-data-[focus=true]:border-success",
"group-data-[focus=true]:data-[hover=true]:border-success",
],
label: "text-success",
},
},
@ -491,7 +501,10 @@ const numberInput = tv({
variant: "bordered",
color: "warning",
class: {
inputWrapper: "group-data-[focus=true]:border-warning",
inputWrapper: [
"group-data-[focus=true]:border-warning",
"group-data-[focus=true]:data-[hover=true]:border-warning",
],
label: "text-warning",
},
},
@ -499,7 +512,10 @@ const numberInput = tv({
variant: "bordered",
color: "danger",
class: {
inputWrapper: "group-data-[focus=true]:border-danger",
inputWrapper: [
"group-data-[focus=true]:border-danger",
"group-data-[focus=true]:data-[hover=true]:border-danger",
],
label: "text-danger",
},
},

31
packages/core/theme/src/components/select.ts
View File

@ -82,6 +82,7 @@ const select = tv({
"data-[hover=true]:border-default-400",
"data-[open=true]:border-default-foreground",
"data-[focus=true]:border-default-foreground",
"data-[focus=true]:data-[hover=true]:border-default-foreground",
],
value: "group-data-[has-value=true]:text-default-foreground",
clearButton: "mb-4",
@ -445,7 +446,11 @@ const select = tv({
variant: "bordered",
color: "primary",
class: {
trigger: ["data-[open=true]:border-primary", "data-[focus=true]:border-primary"],
trigger: [
"data-[open=true]:border-primary",
"data-[focus=true]:border-primary",
"data-[focus=true]:data-[hover=true]:border-primary",
],
label: "text-primary",
},
},
@ -453,7 +458,11 @@ const select = tv({
variant: "bordered",
color: "secondary",
class: {
trigger: ["data-[open=true]:border-secondary", "data-[focus=true]:border-secondary"],
trigger: [
"data-[open=true]:border-secondary",
"data-[focus=true]:border-secondary",
"data-[focus=true]:data-[hover=true]:border-secondary",
],
label: "text-secondary",
},
},
@ -461,7 +470,11 @@ const select = tv({
variant: "bordered",
color: "success",
class: {
trigger: ["data-[open=true]:border-success", "data-[focus=true]:border-success"],
trigger: [
"data-[open=true]:border-success",
"data-[focus=true]:border-success",
"data-[focus=true]:data-[hover=true]:border-success",
],
label: "text-success",
},
},
@ -469,7 +482,11 @@ const select = tv({
variant: "bordered",
color: "warning",
class: {
trigger: ["data-[open=true]:border-warning", "data-[focus=true]:border-warning"],
trigger: [
"data-[open=true]:border-warning",
"data-[focus=true]:border-warning",
"data-[focus=true]:data-[hover=true]:border-warning",
],
label: "text-warning",
},
},
@ -477,7 +494,11 @@ const select = tv({
variant: "bordered",
color: "danger",
class: {
trigger: ["data-[open=true]:border-danger", "data-[focus=true]:border-danger"],
trigger: [
"data-[open=true]:border-danger",
"data-[focus=true]:border-danger",
"data-[focus=true]:data-[hover=true]:border-danger",
],
label: "text-danger",
},
},