Blueprint: Replace Tether with Popper.js

[tyscorp]

According to the Tether repo, Tether is no longer being actively maintained.

What is the plan for blueprint?

Taking over Tether? Replacing it with another library, such as the one recommended by Tether, Popper.js?

[giladgray]

@tyscorp whoa i am so down for a new/better Tether replacement! it was starting to be the source of most of my daily pain...

but this is news to me, so i'll have to do some research. open to suggestions!

[adidahiya]

I think the deprecation of Tether doesn't present much urgency for us. We haven't upgraded the library in a very long time and haven't filed bugs / PRs against the repo, so it's clearly pretty stable for us.

If we do find that Tether is significantly impeding our progress on Popover, though, then we should certainly consider switching to Popper.js or writing our own implementation.

In other words, switching away from Tether is a means, not an end.

[giladgray]

@adidahiya I see some urgency here. There's a whole class of Popover issues regarding "smart positioning" (both popover and arrow) and it seems like popper.js has _much_ improved support for both of those features. As I said above, almost every major Popover issue can be traced to something in Tether, not in our code: #1091, #935, #870, #849, #692, #408, #100.

I'll be looking into this over the next few weeks (though there's some vacation in the way) to consider replacing Tether.

[llorca]

Second that, we have so many issues with popover (and popover arrow) positioning. In my opinion, popover is broken in one big way in the fact that we don't have true smart positioning, i.e. the popover knows how to position itself no matter the content or context around it. In addition, Tether constraints API is far from the ideal developer experience, I'm positive we can do much better.

[FezVrasta]

Before you write a custom implementation please consider to raise new issues against the Popper.js repository, I'd be happy to review your concerns!

[giladgray]

@FezVrasta there's basically no chance we build our own popper implementation (cuz that sounds like a special kind of nightmare), especially when popper.js looks _so damn good_ 🔥 🔥 🔥

[giladgray]

@FezVrasta i've started refactoring Popover to use Popper.js and holy heck is it awesome! expect a PR later this week 👨‍💻

[tyscorp]

So will this be a breaking change? Will both Tether and Popper.js be supported simultaneously? I'm currently monkeypatching a bunch of components to use Popper.js instead of Tether so it would be nice to be able to remove that.

What is the API for passing options going to be like? Similar to the way it is done now for Tether?

[giladgray]

@tyscorp this will certainly be a breaking change, and a full conversion from Tether to Popper.js. How are you using Popper currently? With Blueprint component?? I've been having a good time letting react-popper handle the integration.

The API will be very similar to the current one but with new names: placement and modifiers replace position and tetherOptions. I'm planning to provide some shorthands, like a new arrow toggle prop and something that approximates useSmartPositioning (but better).

[tyscorp]

I'm using it with the blueprint Popover component right now. I'm extending the Popover class and overriding updateTether and destroyTether to replace the Tether code with Popper.js. I'm not using react-popper right now because of the way I have to monkeypatch.

Since it is a breaking change will it be v1.23.0 or v2.0.0?

[llorca]

@tyscorp it will be available as soon as it's ready as Popover2, alongside current Popover. Once we hit 2.0, we'll remove Popover and rename Popover2 to Popover.

[tnrich]

@llorca any rough idea when v2 will be released? Thanks!

[giladgray]

@tnrich our rough timeline is around the end of this year. but Popover2 is available for use in the __labs__ package _today_!

http://blueprintjs.com/docs/#labs.popover2

[tnrich]

cool, thanks @giladgray