Skip to content
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

Allow customization of form error state placement #250

Merged
merged 6 commits into from
Feb 25, 2021

Conversation

kylesuss
Copy link
Collaborator

Fixes:
Screen Shot 2021-02-23 at 3 36 59 PM

Unfortunately, there isn't a great way to customize the positioning based on browser window & it is a bit of a pain to setup event listeners for this sort of thing. With that in mind, I chose the auto-end positioning (see: https://popper.js.org/docs/v1/#popperplacements--codeenumcode) which typically means that the tooltip shows up underneath the input and at the very right side of it. I think this is better than just "auto" which places it on the bottom & centered, but maybe it is just a personal preference.

@domyen thoughts on this? We seem to be slightly limited by what the lib will let us do.

@kylesuss
Copy link
Collaborator Author

@domyen Hold that thought -- the new lib version might have a new setting that we need but I have to do some work to upgrade.

@kylesuss
Copy link
Collaborator Author

@domyen ok this has been updated w/ the approach that I showed you earlier. The design system now allows Inputs to customize the errorTooltipPlacement. In consumers of the design system, logic can be setup to change the placement based on screen size, etc.

@kylesuss kylesuss requested a review from domyen February 24, 2021 19:16
@kylesuss kylesuss changed the title Change form error state placement, capture in snapshot Allow customization of form error state placement Feb 24, 2021
src/components/Input.js Outdated Show resolved Hide resolved
@kylesuss kylesuss requested a review from domyen February 24, 2021 22:09
@kylesuss kylesuss merged commit 0ea86e1 into master Feb 25, 2021
@kylesuss kylesuss deleted the fix-mobile-input-error branch February 25, 2021 16:53
@kylesuss
Copy link
Collaborator Author

🚀 PR was released in v5.4.9 🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants