Ant Design v5?

[cericoli]

Hi,

I've looked for an answer to this question, but can't find one. Ant Design is currently at 5.4x, and NG-Zorro Ant Design for Angular is at 15.1.x.

When Ant Design moved to v5.x there were a number of design changes (border radius to 4px, nav changes, etc). Is there any current plan or progress on synchronising design of NG-Zorro to this later version of Ant Design?

Apologies if I've missed the explanation of how this works, but I'm keen to understand if these changes are expected to be implemented soon, or at all.

Chris

[imaliouris]

So, is there any plan to migrate to Ant Design v5?

[baarney]

I'm keen to know the answer to this too. I started a new app using the experimental dynamic theme, which looks very promising as far as it goes but there's a bunch it can't do yet (still experimental). E.g. #8837.

There's a whole article on Ant D 5 and CSS Variables. I guess my question is do the team think the current experimental approach will evolve into the Ant D 5 theme approach or will that be something completely different, and what kind of timescale are we looking at to find out.

[ParsaArvanehPA]

Hi everyone,

The migration to Ant Design 5 is a big project, and I’ve personally tried to start it three times but got a bit lost each time due to the many changes needed. Here’s why:

• Right now, NG-ZORRO is fully in sync with Ant Design 4. Every HTML element is structured to match Ant Design, down to the same IDs and class names. We even have a bot that checks for updates in Ant Design and creates PRs to notify us of any changes.
• One major reason I haven’t yet started the Ant Design 5 migration is the big changes in file structures. If you look at Ant Design 5’s code, you’ll see they’re using a custom setup to handle styles and other aspects, which can be a bit confusing.
• Plus, NG-ZORRO is entirely community-based, so we don’t have a set date for completing the migration just yet.

I've actually been using a custom set of styles that align with Ant Design 5, and after seeing this conversation, I thought, why not share it so you can try it out too?

Here’s the repo where you can find the package: ng-zorro-v5-experimental-view. I've used it in a few projects, so it should cover most bases, but since it’s not an official release, there might be a few bugs here and there.
You can also see a demo of it here.

Also, this package isn’t tied to a specific NG-ZORRO version, so you should be able to use it even if you're on version 13 or 14, it just need to be synced with Ant 4.

Hope it’s helpful!

[imaliouris]

Hi @ParsaArvanehPA,
I think that we want Ant Design 5 because it offers customization with css variables only.
Now with Ant Design 4 we can't customize the styles with css variables, only a small part of them.
Nor can we apply css variables to less variables because there are many computations on less.
If we could replace less computations with css computations it would be awesome!
Or another option would be to replace less computations with less variables so that we can apply css variables to those less variables.
Check that discussion if you want #8694

[ParsaArvanehPA]

Hi @imaliouris
You're absolutely right—Ant Design 5’s CSS variables will be a huge upgrade, giving us much more control over customization than version 4. For this, we have to wait for the official release to get the full flexibility without LESS limitations.
Thanks for sharing the discussion—it’s spot on! 😊

The package that i mentioned earlier will just change the vibe to ant version 5.
It doesnt change the main implementation, it just overrides some of the styles to match with the Ant 5 compoents.

[imaliouris]

@ParsaArvanehPA when you refer to official release you mean for ng-zorro-antd, right?
Because And Design already uses css variables https://ant.design/docs/react/css-variables.

[ParsaArvanehPA]

@imaliouris
Yeah i meant NG-zorro