-
-
Notifications
You must be signed in to change notification settings - Fork 32.5k
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
[Chip] Fix Avatar CSS issue #18156
[Chip] Fix Avatar CSS issue #18156
Conversation
Details of bundle changes.Comparing: 8a78af8...6e01dee
|
@@ -8,7 +8,6 @@ import useForkRef from '../utils/useForkRef'; | |||
import unsupportedProp from '../utils/unsupportedProp'; | |||
import capitalize from '../utils/capitalize'; | |||
import ButtonBase from '../ButtonBase'; | |||
import '../Avatar'; // So we don't have any override priority issue. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Do you think a "harmless" side-effect such as Avatar.propTypes = Avatar.propTypes
(or similar, like Avatar.a = Avatar.a
) might suffice? I'm on holiday rn so I don't have much time to look into this issue myself, sorry.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
After more reflexion, I think that having to pull out another module to get the correct side effect isn't right. It prevents tree-shaking. Autocomplete users shouldn't bundle the Avatar if they don't use it.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Enjoy your holidays 👍
@@ -42,6 +41,29 @@ export const styles = theme => { | |||
opacity: 0.5, | |||
pointerEvents: 'none', | |||
}, | |||
'& $avatar': { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm curious whether or not you deem this a breaking change because strictly speaking specificity is increased 😅
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The outlined variant already increases the specificity to style the avatar.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
True - but let's say someone was just specifying a single avatar
class name, they'd now need to also do & $avatar
. Maybe not a big concern - I was more just curious to hear your perspective on breaking/non-breaking changes so we can adopt the same principle at my workplace.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@NMinhNguyen If somebody has overridden the class, he would likely face #16374, as we do. He would already be forced to increase the specificity.
Co-Authored-By: Minh Nguyen <minhnguyenxx@gmail.com>
Closes #16374.
Our documentation reproduces the problem, we can verify the fix directly with the Netlify preview.