[material-ui][Chip] Fix clickable line height #45101
Conversation
Signed-off-by: MachaVivek <[email protected]>
Netlify deploy previewhttps://deploy-preview-45101--material-ui.netlify.app/ Bundle size reportDetails of bundle changes (Toolpad) |
zannager
added
the
component: chip
|
|
||
| // gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg | ||
| '& > *': { | ||
| cursor: 'inherit', // Inherit cursor from parent | ||
| }, | ||
| '&.clickable': { | ||
| cursor: 'pointer', | ||
| userSelect: 'none', | ||
| WebkitTapHighlightColor: 'transparent', | ||
| }, | ||
| '&.clickable > *': { | ||
| pointerEvents: 'none', // Prevent nested elements from capturing pointer events | ||
| }, | ||
| // gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg |
There was a problem hiding this comment.
I don't think all this logic is needed. We can simply reset inherited line-height style using line-height: normal:
--- a/packages/mui-material/src/Chip/Chip.js
+++ b/packages/mui-material/src/Chip/Chip.js
@@ -89,6 +89,7 @@ const ChipRoot = styled('div', {
alignItems: 'center',
justifyContent: 'center',
height: 32,
+ lineHeight: 'normal',
color: (theme.vars || theme).palette.text.primary,
backgroundColor: (theme.vars || theme).palette.action.selected,
borderRadius: 32 / 2,Docs: https://developer.mozilla.org/en-US/docs/Web/CSS/line-height#normal
ZeeshanTamboli
added
bug 🐛
aarongarciah
changed the title
|
@DiegoAndai @aarongarciah Some CSS properties, especially text-related ones, inherit by default, like Wouldn't it be better for the |
|
@ZeeshanTamboli ideally, a Chip component (and most components) should look the same whenever is placed: standalone, inside a Grid cell, etc. So I think the Chip component should be the one dictating its appearance and being defensive in this regard. So yes, the Chip component should probably explicitly set CSS font properties so they're not overridden by parent elements. |
Signed-off-by: MachaVivek <[email protected]>
|
It looks like Multiline chip demo before: Multiline chip demo after: But on the first one there's no Do you know what might be going on @aarongarciah? |
|
@DiegoAndai The It’s the same in StackBlitz, where no docs theme is applied. |
Added an explicit clickable class to the root element when the chip is clickable
Before changes
After changes
so you can clearly see that click can be shown only when you are on the button
closes #45097