Blueprint: Test-friendly dialog animations

[adidahiya]

Something like .pt-minimal for Dialogs which disables the animation or makes it instantaneous to improve unit testability (see issues like https://github.com/palantir/blueprint/pull/221#discussion_r90475758) both for us and for our consumers (apps sometimes have to introduce ugly timeouts in their dialog-related test code).

[llorca]

Hmm, fixing a test doesn't seem like a reason for adding .pt-minimal support to dialogs. Isn't the proper fix to find a way to test components that are animated?

[adidahiya]

Sure, I'd be open to other solutions, such as exposing an onTransitionEnd callback that allows for reliable testing.

[llorca]

Yes! That sounds great

[giladgray]

CSSTG simply doesn't provide hooks for onTransitionEnd so not sure how we'll do that...

[llorca]

What about componentWillLeave() and componentDidLeave? https://facebook.github.io/react/docs/animation.html#componentwillleave

[adidahiya]

@llorca yep, those would work; we'd have to refactor Overlay to use that lower-level API (TransitionGroup instead of CSSTransitionGroup)

[giladgray]

we could try mocking CSSTG in tests! http://stackoverflow.com/questions/36550906/disable-reacts-csstransitiongroup-in-test#comment60708967_36550906

[bsr203]

Hi. is there a way to disable animation on popover. My usecase is to use dropdown menu (like blueprint Releases menu on docs page), but top level menus shouldn't pop out. It somehow feels like an addon/context menu than main navigation. Is it easy to disable animation through css alone? thank you.

[giladgray]

It is indeed, try <Popover className="pt-minimal" ... >.
http://blueprintjs.com/docs/#components.popover.js.minimal

On Sun, Feb 5, 2017, 6:29 PM bsr203 [e-mail] wrote:

Hi. is there a way to disable animation on popover. My usecase is to use
dropdown menu (like blueprint Releases menu on docs page), but top level
menus shouldn't pop out. It somehow feels like an addon/context menu than
main navigation. Is it easy to disable animation through css alone? thank
you.

—
You are receiving this because you commented.

Reply to this email directly, view it on GitHub
https://github.com/palantir/blueprint/issues/301#issuecomment-277573372,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAcXtgqJCuZiqzkPJkiZy83wzwP9sCZXks5rZoWdgaJpZM4LC_ga
.

[bsr203]

thanks for the super quick response, greatly appreciate. but seems it not working. I added it to Releases, button like

                        <Popover className="pt-minimal" content={this.renderReleasesMenu()} position={Position.BOTTOM_RIGHT}>

still has the arrow.

[giladgray]

I'm sorry, my code above was wrong. Refer to the docs link for the correct
code: popoverClassName

On Sun, Feb 5, 2017, 7:06 PM bsr203 [e-mail] wrote:

thanks for the super quick response, greatly appreciate. but seems it not
working. I added it to Releases, button like

                    <Popover className="pt-minimal" content={this.renderReleasesMenu()} position={Position.BOTTOM_RIGHT}>

still has the arrow.

[image: screen shot 2017-02-05 at 9 59 58 pm]
https://cloud.githubusercontent.com/assets/1966521/22633352/9d08781a-ebee-11e6-93d5-15e0361f417f.png

—
You are receiving this because you commented.

Reply to this email directly, view it on GitHub
https://github.com/palantir/blueprint/issues/301#issuecomment-277576901,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAcXtmNU7YVP1n9gy1iQ1vwAEuWr8KA8ks5rZo4mgaJpZM4LC_ga
.

[bsr203]

thank you. that did work, sorry I didn't read the doc thoroughly.

one comment though. If I use this feature for main header menus, the drop down feel so detached from the trigger. I like some kind of styling to see which menu is activated, so in this case, at least the Release button to be active. As far I see, I have to make a custom component, which set the active state of button based on popoverDidOpen callback. Just wonder is there other way, or plan for activate through css based on parent state ?

[llorca]

@bsr203 You'd have to add .pt-active to your .pt-button trigger, when the popover is open

[adidahiya]

Note: this FR also applies to tree animations. As of this writing, https://github.com/palantir/blueprint/pull/679 adds a test that uses an arbitrary 300ms setTimeout to wait for animations 🙅

[jrweinb]

Add style={{ transition: 'none' }} to the Dialog component to disable the scaling animation