Wrap CheckBoxInput in InputWrapper to provide visual feedback #2423
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
ewanharris
commented
Aug 4, 2023
| @@ -491,6 +491,12 @@ loadingSize = 30px | |||
| span | |||
| display block | |||
| margin-left 20px | |||
| .auth0-lock-input-wrap | |||
| background #ffffff | |||
There was a problem hiding this comment.
There are needed otherwise we inherit the grey background/border from the InputWrap which is not desired
ewanharris
commented
Aug 4, 2023
| let blockClassName = `auth0-lock-input-block auth0-lock-input-${name}`; | ||
| if (!isValid) { | ||
| blockClassName += ' auth0-lock-error'; | ||
| } | ||
|
|
||
| if (className) { |
There was a problem hiding this comment.
Needed a way to maintain the CSS for the CheckBoxInput so added this className proper to allow that
4 tasks
4 tasks
stevehobbsdev
previously approved these changes
Aug 22, 2023
ewanharris
force-pushed
the
fix/2400-checkbox-validation
branch
from
2422fd3
to
a849c01
Compare
Codecov ReportPatch coverage:
Additional details and impacted files@@ Coverage Diff @@
## master #2423 +/- ##
==========================================
+ Coverage 41.55% 41.71% +0.15%
==========================================
Files 120 120
Lines 3025 3028 +3
Branches 325 327 +2
==========================================
+ Hits 1257 1263 +6
+ Misses 1674 1673 -1
+ Partials 94 92 -2
☔ View full report in Codecov by Sentry. |
stevehobbsdev
approved these changes
Sep 14, 2023
Merged
github-merge-queue bot
pushed a commit
that referenced
this pull request
Sep 15, 2023
**Added** - Wrap CheckBoxInput in InputWrapper to provide visual feedback [\#2423](#2423) ([ewanharris](https://github.com/ewanharris))
This was referenced Aug 12, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Changes
Wrap the
CheckBoxInputinInputWrapperto allow for providing feedback as to what is wrong when a user clicks submit without the checkbox being selected. Below is an example of what this looks like, rather than highlight using a border like other fields we change the text to red.This image is outdated see below
I did also see what it looked like without the red text, which is a little less obvious.
This is if we add a border around the entire element like the other components
I did also try a border/outline around the checkbox element but it looked bad due to inability to set the border radiu
Happy to change this up if there's a general preference that looks better.
Current status:
Invalid hint text provided
No invalid hint text provided
References
#2400
Testing
Checklist