Support `transition` and `popup` props

[Letsch22]

Add support for the transition prop which automatically adds a transition when a Popup is opened/closed as in SUI: https://semantic-ui.com/modules/popup.html#transitions

[welcome[bot]]

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[brianespinosa]

Hi @Letsch22 this will be handled after #2001 is done. I am not seeing a Popup specific issue regarding transitions yet so I will go ahead and leave this issue here for tracking specific to popups once the Dimmer component has support for them.

[brianespinosa]

Nevermind. Popup should not require the Dimmer. But the logic used in the above referenced PR in progress will probably be the same here so this likely will be waiting for that to be merged first.

[Letsch22]

@brianespinosa, makes sense. Thanks for the quick update!

[GCrispino]

Are PRs welcome for this one or should we wait? I'd like to work on it. I've not read the #2001 code yet to see how transitions are being implemented in general but if it's something like @levithomason has written here, it looks doable.

[levithomason]

PRs welcome!

I actually had a branch that added withPopup to every component that it makes sense for but I somehow lost it. We'd like to move toward composed components such as this. withTransition is yet another HOC that most components will be wrapped in.

Heads up, you may have conflicts with #2306 which also wraps all exported components. I will try to get that merged first. For now, still write the wrapper and test it on some components.

To be clear, any component that can support a transition should be allowed to use the transition prop.

[GCrispino]

Cool! I’ll have to do some code reading and then I’ll see what I can do 😃

EDIT: @levithomason , just for starting, should the factory method that transform the element into an element with transition be a component or function? Or any would be fine? Also, in which directory should its source code be? Inside /src/lib ?

[stale[bot]]

There has been no activity in this thread for 90 days. While we care about every issue and we’d love to see this fixed, the core team’s time is limited so we have to focus our attention on the issues that are most pressing. Therefore, we will likely not be able to get to this one.

However, PRs for this issue will of course be accepted and welcome!

If there is no more activity in the next 90 days, this issue will be closed automatically for housekeeping. To prevent this, simply leave a reply here. Thanks!

[brodycj]

??

[stale[bot]]

There has been no activity in this thread for 180 days. While we care about every issue and we’d love to see this fixed, the core team’s time is limited so we have to focus our attention on the issues that are most pressing. Therefore, we will likely not be able to get to this one.

However, PRs for this issue will of course be accepted and welcome!

If there is no more activity in the next 180 days, this issue will be closed automatically for housekeeping. To prevent this, simply leave a reply here. Thanks!

[pdfowler]

While "waiting" for this, I've worked up a temporary workaround by placing the following in my _.global.css file:

@keyframes showing {
  0% {
    opacity: 0;
    transform: scale(0);
    -webkit-transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    -webkit-transform: scale(1);
  }
}

.ui.popup.visible.transition-scale {
  animation: showing 300ms ease-in-out;
}

This obviously isn't true support of the transition property per semantic-core, but it gives me a quick fix and a much better UX in my app. All I need to do is add className="transition-scale" to my <Popup /> element.

[stale[bot]]

There has been no activity in this thread for 180 days. While we care about every issue and we’d love to see this fixed, the core team’s time is limited so we have to focus our attention on the issues that are most pressing. Therefore, we will likely not be able to get to this one.

However, PRs for this issue will of course be accepted and welcome!

If there is no more activity in the next 180 days, this issue will be closed automatically for housekeeping. To prevent this, simply leave a reply here. Thanks!

[neutraali]

Any news on this front? A bit stuck on Form.Field.error transitions and the like.