search

storybookjs / design-system

🗃 Storybook Design System
https://master--5ccbc373887ca40020446347.chromatic.com/
1.91k stars 585 forks source link

Allow customization of form error state placement #250

Closed kylesuss closed 3 years ago

kylesuss commented 3 years ago

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 commented 3 years ago

@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 commented 3 years ago

@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 commented 3 years ago

:rocket: PR was released in v5.4.9 :rocket: