search

Semantic-Org / Semantic-UI-React

The official Semantic-UI-React integration
https://react.semantic-ui.com
MIT License
13.23k stars 4.05k forks source link

v3: roadmap to release #4409

Open layershifter opened 1 year ago

layershifter commented 1 year ago

This PR tracks work for Semantic UI React v3 🎉

Pre beta-0 ✅

For beta-0 ✅

Post beta-0 ✅

For beta-2 ✅

For beta-3

For RC

After release

vinodhrajamuralidharan commented 1 year ago

@layershifter what is the status user.React.forwardRef PR status? I see it is still in open

layershifter commented 1 year ago

@vinodhrajamuralidharan I had a conversation with @levithomason about that PR. The agreement was that he will review it and then we can proceed. I am also waiting for that PR to be merged 😉

sunech commented 1 year ago

Is there any ETA on v3 progress @levithomason / @layershifter ? There was such a great traction in December, so I started to get my hopes up for SUIR again 🤞 Would hate to see it stall again, with all the great work that has been put in to it 🙏

layershifter commented 1 year ago

3.0.0-beta.0 is out 🎉 Please try and report issues 🙏

DreierF commented 1 year ago

Thanks a lot @layershifter for the effort! I didn't run into any issues yet with the beta besides the probably expected Typescript issues such as https://stackblitz.com/edit/react-ts-ejdyij?file=App.tsx.

sunech commented 1 year ago

Is there anything further that we can help test, in order to proceed with the v3 release?

tourman commented 1 year ago

@layershifter could you please update the status? FYI @levithomason

  1. Is the roadmap todo list still relevant? If not, please refresh or update it. In particular, please add the links to the appropriate PRs, branches, etc.
  2. Please add more clear description for each point. E.g. what is Document breaking changes that is not checked?
  3. If you are not about to move on with the project, please initiate a process to pass it to the community. There are projects and people who are waiting for the new version trying to replace SUIR with a fork or something else.
layershifter commented 1 year ago

@tourman

1/2. Yes, it's relevant. I will update it to be more precise and detailed 👍

  1. To be clear, I don't have time and motivation to maintain this project currently. If there people who are interested in move forward it would be great to hear back 🐱
sunech commented 1 year ago

@layershifter thank you for all you great work so far, highly appreciate your effort!

This project is too good to just die, so I really hope someone wants to pick up from here. Would love to support if I can, not experienced enough to contribute with code though. If any freelancers are considering, I would gladly pay for some of your time to get the ball rolling on this again.

layershifter commented 1 year ago

Thanks a lot @layershifter for the effort! I didn't run into any issues yet with the beta besides the probably expected Typescript issues such as https://stackblitz.com/edit/react-ts-ejdyij?file=App.tsx.

@DreierF it's indeed a bug, see #4432 for details.

Is there anything further that we can help test, in order to proceed with the v3 release?

@sunech @tourman I updated changelog and created migration guide (https://react.semantic-ui.com/migration-guide). I also updated issues that needs to be solved to release the next beta. Both issues contain action items and examples of changes needed to be done.

Help on these issues is much appreciated 🐱

siarheipashkevich commented 11 months ago

@layershifter thanks for your work on this package, do you have approximate time when you plan to release 3.0 version?

layershifter commented 10 months ago

3.0.0-beta.2 is out 🎉

It fixes .defaultProps warnings, TypeScript typings & issues with appDir in Next.js.

Please try and report issues 🙏

fniessink commented 10 months ago

I can report that after making a few small changes all frontend unit tests of Quality-time pass with 3.0.0-beta.2:

Test Suites: 85 passed, 85 total
Tests:       694 passed, 694 total
Snapshots:   0 total
Time:        67.751 s, estimated 70 s

Most changes were needed because popups would not appear at the right position with 3.0.0-beta.2. Adding a span or div around triggers solved this. I can't reproduce this issue on the Semantic UI React documentation site so I guess it's an issue on our side.

dominikdosoudil commented 6 months ago

I don't think that it's worth creating a issue but the Sticky component didn't work after the upgrade. I needed to add scrollContext because there is a scrollable div instead of whole window. I am not sure if it's somehow breaking change or I had it wrong even before. I am just mentioning as a possible information to migration guide.

Noahkoole commented 6 months ago

I can report that after making a few small changes all frontend unit tests of Quality-time pass with 3.0.0-beta.2:

Test Suites: 85 passed, 85 total
Tests:       694 passed, 694 total
Snapshots:   0 total
Time:        67.751 s, estimated 70 s

Most changes were needed because popups would not appear at the right position with 3.0.0-beta.2. Adding a span or div around triggers solved this. I can't reproduce this issue on the Semantic UI React documentation site so I guess it's an issue on our side.

This seems to also be an issue on our side. Started with the transition to beta.2 and adding a span around it indeed fixed it

atti187 commented 4 months ago

@layershifter - I fixed the first task in the beta-3 release. Could you please add issues for the rest of tasks in the list and I'll see if I can have a go at some of them? Would be nice to get v3 out!

BlenesiAron commented 2 months ago

When is the v3 release scheduled for?

triemstr commented 1 week ago

When is the v3 release scheduled for?

Outside of the eventStack breaking change, it looks like it is just a lot of testing and documentation for the 3.0.0 beta 3 release. I'm not sure if @layershifter is taking pull requests, but maybe some in the community can assist.

layershifter commented 1 week ago

I'm not sure if @layershifter is taking pull requests, but maybe some in the community can assist.

Yep, if somebody is brave enough to get rid of EventStack, I would be happy to review the changes.

triemstr commented 1 week ago

@layershifter Would you consider just going with the current state as version 3 and then working on the rest as version 4?

Only reason is that so many people are getting the props and other javascript warnings now and they don't know that the version 3 beta solves them. Running outdated on npm sources wouldn't show the version 3 beta. Might be a good way to keep the upgrades occurring so that a few more community members may jump in on EventStack.

Just a thought, unless someone is about there on EventStack.

dominikdosoudil commented 1 week ago

@triemstr I am up to looking into the EventStack however there might be one more thing blocking the release that needs to be fixed: https://github.com/Semantic-Org/Semantic-UI-React/pull/4233/files#r1837715017

dominikdosoudil commented 4 days ago

@layershifter So few past days, I've been looking into the EventStack in the Modal (and source code of the event-stack) and there is the thing "eventPool". As I think that I understand that it might help keeping multiple references to same callback (I imagine some independent unsubscribing), I can't really see the real purpose of it (or what and if something would break after removing it).

Could you possibly give me some hint or direction or use case where it's necessary?

layershifter commented 16 hours ago

@dominikdosoudil My previous attempt there #3734 (ignore it, just to provide a perspective). The EventStack pattern is so fundamentally broken that it’s not even worth explaining what it does 💩. The eventPool prop should definitely be removed.

Let me break down the complexity behind this issue. The .contains() method is used to determine whether to close a Modal (for example) on an inside or outside click. This works well in straightforward cases like the following (e.g., clicking a button): 

// JSX
<Modal>
  <Button />
</Modal>

// HTML
<body>
  <div class="ui modal">
    <button class="ui button"></button>
  </div>
</body>

However, it fails in nested scenarios. For example: 

// JSX
<Modal>
  <Popup>
    <Button />
  </Popup>
</Modal>

// HTML
<body>
  <div class="ui modal">
  </div>
  <div class="ui popup">
    <button class="ui button"></button>
  </div>
</body>

In this case, the ui popup is not a child of ui modal, causing .contains() to break. A more detailed explanation of this issue can be found here: Virtual Parents.

To address this, I propose the following steps:

  1. Add a test case for this scenario (refer to cypress/integration/Sidebar/Sidebar.spec.js as an example).
  2. Implement the virtual parent approach, as seen in this PR: microsoft/fluentui#18148, and the related code: https://github.com/microsoft/fluentui/tree/master/packages/react-components/react-utilities/src/virtualParent).

Hope this helps.

dominikdosoudil commented 15 hours ago

@layershifter I see, the nesting is tricky. Converted #4504 to draft. I am gonna look into it and decide if i am "brave enough" after all. 😆

Thank you for explaining it.