Ant Design 4.0 is out!

Introduction

We released the 4.0 rc version on SEE Conf. After more than a month of feedback collection and adjustment, it time to release 4.0! Thanks to everyone who provided feedback, suggestions, and contributions during this period. We will combine the updates already involved in the rc version and some update recently here. The complete updated documentation can be found here. v4 document address: https://ant.design

It should be noted that the v3 version merged into the 3.x-stable branch in December 2019 and went into maintenance. We will still perform half-year maintenance work for the v3 version. Maintenance deadline is May 2020.

Design specification upgrade

We have adjusted the base rounded corners from 4px to2px. The fillet itself is a detail, and in the middle and background scenes, we take efficiency as the first priority, so we reduce the visual details of the interface and improve the efficiency of interface information reading. In addition, we have adjusted the shadows to make them more consistent with real shadows, while also emphasizing the information hierarchy.

Dark theme

We have upgraded the color system based on the v3 version, and v4 provides a dark theme. You can click the switch theme function on the page to see the dark theme effect:

Borderless component

In the daily work, we found that there are lightweight selection components in some scenarios. So we provide a new borderless style that allows developers to more easily embed these components without overriding the style.

Compatibility adjustment

Ant Design 3.0 has made a lot of efforts to be compatible with older versions of IE. However, according to industry statistics, both the global and domestic IE9 / 10 browsers are shrinking with Windows system updates. We stopped supporting IE 9/10 at 4.0 (but will still support IE 11). Therefore, some low-performance components in the past will also gain performance with the new css features.

At the same time, we also upgraded the minimum version of React that v4 depends on to React 16.9. This means that the v4 version will provide more hooks to simplify your code.

In addition, we have removed some obsolete APIs that were warned in the v3 release. We strongly recommend that you upgrade your current project to the last version of v3 and update the deprecated API based on the warning message.

Smaller size

In antd @ 3.9.0, we introduced the svg icon (Why use the svg icon?). The icon API using the string name cannot be loaded on demand, so the svg icon file is fully introduced, which greatly increases the size of the packaged product. In 4.0, we adjusted the icon usage API to support tree shaking, reducing the default package size of Antant by about 150 KB (Gzipped).

Legacy Icon usage will be discarded:

import { Icon, Button } from 'antd';
const Demo = () => (
  <div>
    <Icon type="smile" />
    <Button icon="smile" />
  </div>
);

In 4.0, it will be introduced on demand:

  import { Button } from 'antd'; // tree-shaking supported
- import { Icon } from 'antd';
+ import { SmileOutlined } from '@ant-design/icons';  const Demo = () => (
    <div>
-     <Icon type="smile" />
+     <SmileOutlined />
      <Button icon={<SmileOutlined />} />
    </div>
  );  // or directly import
  import SmileOutlined from '@ant-design/icons/SmileOutlined';

In addition, we have also removed some related dependencies to reduce gzipped bundle size:

Component rewrite

Form rewrite

Form, as a high-frequency component, has a slightly redundant API. The user needs to obtain the form instance through the HOC of Form.create, and use form.getFieldDecorator to perform data binding on the component. In addition, the entire form is re-rendered every time the data changes, which makes performance worrying in big data forms. In the v4 version, Form will come with a form instance. You can directly bind data through the name property of Form.Item, thereby simplifying your code:

- const { form } = this.props;
- const onSubmit = () => {
-   form.validateFields((err, values) => {
-     if (!err) {
-      console.log('Received values of form: ', values);
-    }
-   });
- };+ const onFinish = (values) => {
+   console.log('Received values of form: ', values);
+ };- <Form onSubmit={onSubmit}>
+ <Form onFinish={onFinish}>
-   <Form.Item>
+   <Form.Item name="username">
-     {getFieldDecorator('username')(
-       <Input />,
-     )}
+     <Input />
    </Form.Item>
  </Form>

We found that in most scenarios, the developer is actually only concerned with the values that the form submits successfully. So we provide onFinish, which will only fire after the form validation passes, and validateFields are no longer needed.

Besides, Form provides the hooks method Form.useForm to allow you to control the form example:

const [form] = Form.useForm();React.useEffect(() => {
  form.setFieldValues({ ... });
});<Form form={form} />

At the same time, we provide the Form.List component, so that you can easily control the list fields:

<Form.List name="names">
  {(fields, { add, remove }) => (
    <div>
      {fields.map(field) => <Form.Item {...field}><Input /></Form.Item>}
      <Button onClick={() => add(initialValue)}>Add</Button>
    </div>
  }
</Form.List>

Table rewrite

Because we have adjusted the minimum requirements for compatibility, we have changed to the implementation of fixed columns using the sticky style, thereby greatly reducing the performance consumption when the form has fixed columns. For IE 11 that does not support sticky, we take downgrade processing.

At the same time, we provide a new summary API to achieve the effect of the summary line:

The sorter provides a multi-column sorting function:

In addition, we adjusted the underlying logic so that fixedColumn,expandable and scroll can now be mixed. Provides a body API for customizing table content implementations, from which you can implement effects such as virtual scrolling.

New DatePicker, TimePicker and Calendar

We have rewritten the date component as a whole to decouple it from moment. You can generate Picker components for custom date libraries using the generate method we provide. To maintain compatibility, the default Picker component still uses moment as the date library. Please refer to here for custom date library.

In addition, we provide a full set of time, date, week, month, year selectors and corresponding range selectors. You can set it through the picker property, instead of implementing the special selector through the controlled method of mode:

<RangePicker />
<RangePicker showTime />
<RangePicker picker="week" />
<RangePicker picker="month" />
<RangePicker picker="year" />

For range selector, we have also optimized the interaction. You can now select the start or end time individually, and it perfectly optimizes the manual date entry experience.

Notification/Modal support Hooks

In the past, you may have encountered the problem that Modal.xxx and Notification.xxx call methods cannot get Context. This is because we will additionally create a React instance through ReactDOM.render for these syntactic sugars, which also causes the problem of context loss. In the new version, we provide the hooks method, which allows you to inject nodes where you need to get the context:

const [api, contextHolder] = notification.useNotification();
return (
  <Context1.Provider value="Ant">
    {/* contextHolder is in Context1 which mean api will not get context of Context1 */}
    {contextHolder}
    <Context2.Provider value="Design">
      {/* contextHolder is out of Context2 which mean api will not get context of Context2 */}
    </Context2.Provider>
  </Context1.Provider>
);

Virtual scroll

In v4, we have upadated Tree, TreeSelect, and Select. By default, they use virtual scrolling technology to optimize their performance to carry a large amount of option rendering.

Living demo

In addition, keyboard interaction and accessibility are optimized.

More new features / features / optimizations

• ConfigProvider provides direction configuration to supportrtl language internationalization.
• Form and ConfigProvider support size setting including component size.
• Typography adds suffix attribute.
• Progress adds steps subcomponent.
• TextArea supports onResize.
• Grid uses flex layout.
• ……

You can click here to see the full update log.

How to upgrade

To make the upgrade as easy as possible, we maintain maximum compatibility. But there are still some breaking changes that need attention. You can first try to migrate using the codemod tool provided by us, and manually migrate some parts that cannot be migrated. Please refer to the document for upgrading.

Above all

The birth of Ant Design 4.0 is inseparable from the contributions and support of community volunteers. Thanks to @saeedrahimi for the internationalization of rtl, [@shaodahong](https: / /github.com/shaodahong) Contributions to Compatibility Packs, and everyone involved in helping development. It is your contribution to open source that makes Ant Design even better!