fix(badge): reset text-indent to prevent inheritance (#5629)#5643
fix(badge): reset text-indent to prevent inheritance (#5629)#5643bartaz merged 2 commits intocanonical:mainfrom
Conversation
|
Safvan-tsy is not a collaborator of the repo |
jmuzina
left a comment
There was a problem hiding this comment.
Created a version of @bartaz 's codepen from the underlying issue that we can use for QA here, since there are no badges inside forms/labels currently on the Vanilla docs sites.
https://codepen.io/jmuzina/pen/myPjjme
The badge indeed appears to render as expected when inside a checkbox/label - and there are no visual regressions.
@bartaz I want to check with you here, as in your underlying issue you reported a workaround where you selectively reset text-indent, whereas this PR resets it in all cases. I didn't find any visual regressions with this approach, do you think there are situations where this approach would cause issues?
Per the MDN docs, indentation is applied relative to the "containing block-level element's content box" - which in this case is the badge itself - so I am led to believe that this approach will work. Let me know if we're missing something.
bartaz
left a comment
There was a problem hiding this comment.
Yes, I believe text-indent is fully safe to be applied this way.
My scoped approach was mostly regarding the vertical align (which was needed due to how we use badge ourselves), so it's OK for it to be omitted here I think.
Done
Badges inside p-checkbox inherited a negative text-indent, causing the text to disappear.
This change resets text-indent to 0 for p-badge to prevent inheritance.
Fixes #5629
QA
Check if PR is ready for release
If this PR contains Vanilla SCSS or macro code changes, it should contain the following changes to make sure it's ready for the release:
Feature 🎁,Breaking Change 💣,Bug 🐛,Documentation 📝,Maintenance 🔨.package.jsonshould be updated relative to the most recent release, following semver convention