Ant Design 5.0 Alpha is Ready 🎉！

Early this year (2022) we released Plan about Ant Design V5 to introduce the 5.0 plan we will launch. After 8 months of work with community and 30 experimental version released, new technical architecture has been stabilized, and here comes the Ant Design 5.0 alpha version!

There is still a long way to go before the release. But if you cannot wait to try it, you can visit our next official website. And if you are interested in migrating to 5.0, please check our document for migration.

New Design

5.0 brings a brand new design concept. Focusing on user goals, according to the three principles of “more focus”, “distraction”, and “relaxation”, the Ant Design design system is visually remodeled to help users “work delightfully” in the virtual office space.

In response to these principles, we have optimized the following aspects, including but not limited to:

• Provide gradient border radius and increase the size of the basic border radius, making the overall style easier;
• Reduce line usage for higher space usage and a cleaner experience;
• Optimize the interactive animation speed for smoother experience.
• Add unified focus style, which only appears when the keyboard is used to focus, for better accessibility;

New Dynamic Themes

In version 4.x, we have to face problems: how to dynamically change themes and how to mix themes. After a period of exploration, in version 5.0, we migrate Less that antd has long followed and introduce CSS-in-JS instead. CSS-in-JS perfectly solves the two problems above through the style calculation of runtime, and brings us more improvements:

• Smaller BundleSize;
• Tree shaking.

With CSS-in-JS, we have launched a new custom theme scheme. In 5.0, Design Token will be the basic part of theme, and all components will consume them to build styles. At the same time, we rely on Design Token to establish a style cache, that is, considering the component styles corresponding to the same Design Token under the same antd version are equivalent, thus avoiding the operation of repeatedly generating styles for comparison and avoiding performance issue.

Based on Design Token and CSS-in-JS, we have developed a more flexible custom theme scheme. In 5.0, you can do things including but not limited to:

1. Global theme;
2. Partial theme (nested theme/multiple theme);
3. Custom theme for single component.
4. Use the themed design directly in Sketch.

To learn more, see the Custom Themes documentation.

New Components

In 5.0 we plan to provide some new components for users to choose, they are:

• Tour
• QrCode
• WaterMark
• FloatButton

Currently FloatButton is ready for use, any feedback is welcome!

Other updates

Check out the migration documentation for more changes.

Browser compatibility

In June of this year, IE browser officially stopped serving. So Ant Design 5.0 will no longer support IE browser. After giving up compatibility with some lower versions of browsers, we can enrich our component library with more new features passed by w3c.

Popup component API unified

In 4.x and earlier versions, the API for the controlled display of components with popups has been split into two factions, one is open, and the other is visible. In order to reduce the inconsistency in coding and use in the future, and reduce the memory cost, we decided to deprecate visiblein related components in 5.0. We chose open after many considerations. For example, the dialog tag in native HTML has the open attribute instead of visible. You can still use visible in 5.0, but we will present a deprecation warning in the console and remove this property in the next major (6.0) release.

Similarly, className of the popup has been split into two props: popupClassName and dropdownClassName, which we will also unify as popupClassName in 5.0.

Deprecate structural syntactic sugar

In version 4.x and earlier, we provided JSX syntactic sugar such as Menu.Item to write code. But this came with extra maintenance cost and poor performance. Therefore, after 5.0, we recommend the use of data-driven components, that is, passing in objects through the items prop instead of structural syntactic sugar, which will have better performance and more convenient data organization, and will provide future ready for optimization.

Deprecate static methods

In components such as Message , we provide static methods such as message.error. However, after React 18, static methods that are not in the React life cycle will have incompatibility problems. In 5.0, we recommend using the hooks version of these components, which is more in line with the React life cycle. It is also recommended to encapsulate your own hooks at the application level for better experience.

What’s Next

We still have a lot of work in progress before the official release, including:

• Provide codemod tools for migrating from V4 to V5;
• Provide fully functional theme editor;
• Refactor our official website to provide more useful functions, such as component demos support for copying and pasting into Sketch;
• More new components.

Please continue to look forward to the new experience brought by Ant Design 5.0!

Epilogue

Ant Design 5.0 has been developed for 8 months. During this period, many volunteers from community participated and contributed code. We would like to express our heartfelt thanks to everyone for their enthusiasm and recognition of Ant Design.

Welcome to try Ant Design 5.0 alpha version! And if you encounter problems, you are also welcome to raise them in our issue section. At the same time, more volunteers are welcome to build Ant Design together, Ant Design loves you ❤️ !