Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[material-ui][Rating] Fix the hover highlighting for spaced icons #39775

Conversation

ZeeshanTamboli
Copy link
Member

@ZeeshanTamboli ZeeshanTamboli commented Nov 6, 2023

Fixes #26380

The hover calculation in the mousemove event only considered the icon width, leading to incorrect hover highlighting when there is spacing between icons. Proper hover calculation is achieved when we consider the container's width regardless of spacing or no spacing.

Before: https://codesandbox.io/s/clever-keldysh-k4wshp?file=/src/App.tsx

After: https://codesandbox.io/s/material-ui-cra-ts-forked-2qjdhh

@ZeeshanTamboli ZeeshanTamboli added bug 🐛 Something doesn't work package: material-ui Specific to @mui/material component: rating This is the name of the generic UI component, not the React module! labels Nov 6, 2023
@mui-bot
Copy link

mui-bot commented Nov 6, 2023

Netlify deploy preview

https://deploy-preview-39775--material-ui.netlify.app/

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against ac6025b

@ZeeshanTamboli ZeeshanTamboli changed the title [Rating] Fix highlighting of icons when hovering after custom spacing [Rating] Fix highlighting of icons when hovering which are spaced Nov 6, 2023
@ZeeshanTamboli ZeeshanTamboli changed the title [Rating] Fix highlighting of icons when hovering which are spaced [Rating] Fix the hover highlighting for spaced icons Nov 6, 2023
@ZeeshanTamboli ZeeshanTamboli changed the title [Rating] Fix the hover highlighting for spaced icons [material-ui][Rating] Fix the hover highlighting for spaced icons Nov 6, 2023
@ZeeshanTamboli ZeeshanTamboli marked this pull request as ready for review November 8, 2023 07:09
Copy link
Member

@mnajdova mnajdova left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks much cleaner to me indeed 👍

@ZeeshanTamboli ZeeshanTamboli merged commit aff59c2 into mui:master Nov 8, 2023
20 checks passed
@ZeeshanTamboli ZeeshanTamboli deleted the issue-26380-rating-with-spacing-highlight branch November 8, 2023 10:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: rating This is the name of the generic UI component, not the React module! package: material-ui Specific to @mui/material
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Can't get correct position after changing spacing of icons in <Rating /> component in v5.
3 participants