fix: apply button hover states only on supported devices#21724
Conversation
✅ Deploy Preview for v11-carbon-web-components ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for v11-carbon-react ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify project configuration. |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #21724 +/- ##
==========================================
+ Coverage 87.75% 94.39% +6.64%
==========================================
Files 536 536
Lines 43637 43673 +36
Branches 6725 6244 -481
==========================================
+ Hits 38293 41227 +2934
+ Misses 5193 2307 -2886
+ Partials 151 139 -12
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
|
not sure if we have to loop design on this 🤔 |
|
hey @tay1orjones, do u think this convention needs to be in this issue is on button for now but, all other components hover state can benefit from it, which looks like a standard to me, when i compared several components elsewhere. |
|
@carbon-design-system/design this needs a design validation on buttons for all the 3 states in both desktop and mobile 💻 desktop desktop.mov📱 mobile mobile.mov |
|
question to design |
alina-jacob
left a comment
There was a problem hiding this comment.
LGTM for the implemented buttons! 🚀
You can go ahead and implement it for Danger button scenarios as well!
It will also be good if you could create an Epic that eventually covers this implementation for other components that fundamentally have a button role / interaction. Here are a few that come to mind:
- Accordion
- AI label
- Code snippet buttons
- Content switcher
- Data table toolbar buttons
- Data table rows (?)
- Date picker calendar buttons
- File uploader buttons
- Link (?)
- Menu buttons (Menu button, Combo button, Overflow menu button)
- Menu items of Menu (?)
- Modal buttons
- Notification buttons
- Pagination
- Pagination Nav
- Password input
- Popover
- Progress indicator
- Slider (?)
- Structured list rows (?)
- Tabs
- Tags
- Tile
- Tree view (?)
- UI shell header items
- UI shell left and right nav items
Considering that this is a sev 3 issue, we can also mark it as a community project.
tay1orjones
left a comment
There was a problem hiding this comment.
Getting rid of the 'sticky hover' thing that can happen with touch is a good improvement. I think it's worth the risk of potential downstream impacts. In the unlikely event that it's disruptive this is a small change, easily revert-able.
adamalston
left a comment
There was a problem hiding this comment.
You can go ahead and implement it for Danger button scenarios as well!
It will also be good if you could create an Epic that eventually covers this implementation for other components that fundamentally have a button role / interaction.
Were these two points from #21724 (review) addressed?
created the issue. the danger hover states are already addressed. |
alina-jacob
left a comment
There was a problem hiding this comment.
LGTM! Thanks for working on this @devadula-nandan! 🚀
2d4cb70
…gn-system#21724) * fix: apply button hover states only on supported devices * chore: move comment above media * chore: update copyright year * fix: review comments * fix: more cases on mobile * chore: update hover to any-hover to support hybrid setups
Closes #17260
Apply hover states for button only for devices that support it. (non touch devices)
Hover state shouldn't exist necessarily on touch devices as per the citation
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/hover
Note
this will also effect all other buttons by removing hover state on touch devices. which still makes sense to me.
references
tertiary button states
Changelog
Changed
Testing / Reviewing
can be tested on mobile screen mode in dev tools.
can be tested on mobile phones as below
after and before
ScreenRecording_03-06-2026.18-21-23_1.MP4
PR Checklist
As the author of this PR, before marking ready for review, confirm you:
- [ ] Updated documentation and storybook examples- [ ] Wrote passing tests that cover this change- [ ] Addressed any impact on accessibility (a11y)More details can be found in the pull request guide