[@thumbtack/thumbprint-react] Add ability to constrain `<ModalDefault>` height

In some modal flows, I’m finding the need to constrain the modal height on desktop so that it’s consistent even across modal content (whose length varies) changes. (https://www.figma.com/file/IcbYHDSlj6A1gXJTpvM1UQF5/🗓-Calendar-%2B-Availability?node-id=4188%3A1097) I’ve found this to be a relatively common use case (i.e. it’s a bit jarring when the modal height suddenly expands/constrains as we switch from loading state or when some collapsed content within modal gets revealed, etc.)

Currently, there doesn’t seem to be a good way for consumer to apply a fixed height to modal. It’s possible to render a child of <ModalDefault> as <div> with some fixed height, but it’s deficient because (1) We’d want the entire modal (i.e. including sticky footer and close button row) height to be consistent, not just the children (2) When children are long, this wrapper <div> overflows; however, there already is a container that actually controls the overflow (<div className="index-module__contents">) and leads to weird styling issues (i.e. overflowing children will bleed into the bottom padding of <div className="index-module__contents">)

I also attempted using <ModalDefaultAnimatedWrapper> but <ModalFooter isSticky> throws a ref error (TypeError: Cannot read property 'current' of null) and it’s just a lot of reinventing <ModalDefault> mechanics when the only thing I want more is height constraint.

I would prefer if <ModalDefault> can accept an additional height prop (like width) that simply constrains height of the entire modal (whether it’s pixel, percentage, or discrete values) and I would be happy to contribute to the change. What are your thoughts?

[danoc]

Ok, sweet! Thanks for digging into it. Would chatting on Monday work?

On Thu, Aug 22, 2019, 6:02 PM Tom Genoni [e-mail] wrote:

@danoc https://github.com/danoc I talked with @jichan-thumbtack https://github.com/jichan-thumbtack and it looks being able to add a fixed height to https://github.com/thumbtack/thumbprint/blob/master/packages/thumbprint-react/components/ModalDefault/index.jsx#L389 would produce the behavior needed.

It may be possible to get the effect without it but it involves rebuilding the layout structures that already exist. We like to discuss with you since you have better context on this component.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/thumbtack/thumbprint/issues/433?email_source=notifications&email_token=AAG7URRTKMRSHHSQPDP3SPTQF4SI3A5CNFSM4IOZGIVKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD46XSGA#issuecomment-524122392, or mute the thread https://github.com/notifications/unsubscribe-auth/AAG7URR4UA6ALCUIGVG2I4TQF4SI3ANCNFSM4IOZGIVA .

[danoc]

This was done in #444.