-
Notifications
You must be signed in to change notification settings - Fork 31
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 checkbox and radio input validation positioning #728
base: main
Are you sure you want to change the base?
Conversation
🦋 Changeset detectedLatest commit: 6fcda52 The changes in this PR will be included in the next version bump. This PR includes changesets to release 6 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
🟢 No design token changes found |
|
<> | ||
<Stack direction={{narrow: 'vertical', regular: 'horizontal'}} gap="condensed" padding="condensed"> | ||
<FormControl> | ||
<FormControl |
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.
This is pretty much borrowed from the CheckboxPlayground implementation so I could re-use this component for the example with a validation message.
@@ -5,6 +5,11 @@ | |||
position: relative; | |||
} | |||
|
|||
[class*='FormControl'] .Checkbox-wrapper, |
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.
This might be overkill but I wasn't sure if we wanted to always apply the grid-row to the wrapper for the input or only do this when its parent is a form control element?
Summary
Ref: #203
This PR fixes a bug with the positioning of the validation message for checkbox and radio inputs inside a FormControl component. This was originally reported as just an issue for checkboxes, but I also noticed it impacted radio inputs as well, so this PR fixes the issue for both types of inputs.
List of notable changes:
FormControl-validation-checkbox
css class to position the validation message for checkboxes and radio buttons.FormControl-validation-checkbox
class to any FormControlValidation children only when there is a checkbox or radio input.What should reviewers focus on?
position: absolute
element within a flex container?Steps to test:
Supporting resources (related issues, external links, etc):
Contributor checklist:
Reviewer checklist:
Screenshots: