-
Notifications
You must be signed in to change notification settings - Fork 171
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
Fix top margin of validation messages in dense form elements #5343
Fix top margin of validation messages in dense form elements #5343
Conversation
@bartaz @pastelcyborg @advl Any thoughts on the open question in the PR description? |
Form styles are probably one of the oldest in Vanilla, and likely some of component and class naming guidelines were not even fully in place when they were implemented, so it's always a bit of painful and inconsistent to maintain and update those. This, as far as I understand, only affects select inputs, and only them (for reason I don't know) require this validation wrapper. So not to spend too much time on this, and start refactoring of any sort (we can leave that for new arch) I think it's OK to move So yes, |
3a10e5c
to
c14456d
Compare
c14456d
to
2c56115
Compare
I agree with @bartaz, would recommend to keep it simple and leave it as it is. |
The following selectors can be used with vanilla-framework/scss/_base_forms.scss Lines 128 to 144 in b90c2c6
So, Screenshots from staging: From this demo: |
I'm having trouble following this comment thread, but the TLDR for me is that I concur with @bartaz - applying |
Yes, the PR is changing things so |
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.
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.
LGTM, thanks!
As we are adding new way of using |
2c56115
to
4afc7fb
Compare
@bartaz Updated. I tried adding links to the new docs sections in the changelog, but noticed an issue with using hashlinks to docs sections with status labels in their headers. It has been filed as #5393 |
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.
LGTM, thanks!
Done
.p-form-validation__select-wrapper
such that applying.is-dense
to the select wrapper also applies dense styling to any input elements inside the select wrapper.Fixes #5262 , WD-13179
Open question
As implemented,
.p-form-validation__select-wrapper.is-dense
does not apply dense styling to the input element inside it. However,.p-form-validation__select-wrapper.is-dense
is necessary because.is-dense
must be at the level of the component that precedes.p-form-validation__message
in order to properly remove the negative top margin.So, we end up with two
.is-dense
classes:.p-form-validation__select-wrapper
to remove the negative top margin from the following validation error message.p-form-validation__select-wrapper
..p-form-validation__input
in order to actually apply the dense styling to the inputThis could be resolved by making
.p-form-validation__select-wrapper.is-dense
automatically apply.is-dense
to child elements as well, but I'm not sure if that's desired.QA
Check if PR is ready for release
If this PR contains Vanilla SCSS code changes, it should contain the following changes to make sure it's ready for the release:
Feature 🎁
,Breaking Change 💣
,Bug 🐛
,Documentation 📝
,Maintenance 🔨
.package.json
should be updated relative to the most recent release, following semver convention:Screenshots
Form validation
Form help text