Ant Design 3 RC

It’s more than a year from last major release of antd, now the first RC of antd 3 is avaliable for public testing. Here is the preview address http://beta.ant.design.

Installation

The RC has been published to NPM with the tag “next”.

$ yarn add antd@next

or

$ npm install --save antd@next

Major Changes

• We changed our primary color from #108EE9 to #1890FF, we called the new primary color “拂晓蓝” which means the color of the sky at daybreak.
• Increased the base font size from 12px to 14px.
• Changed default locale to en_US.
• Improved global css style.
• A lot of style improvements.
• Support React 16.
• New List Component.
• New Divider Component.
• New icons.

Breaking Changes

• Card’s noHovering has changed to hoverable，and it’s default value now is true.

• Added new Grid breakpoints. #7230

• Form

  • Removed exclusive option of getFieldDecorator.
  • Added createFormField, and you must use it to wrap field data in option.mapPropsToFields of Form.create: After antd@3.0.0

    import { Form } from 'antd';
    Form.create({
      mapPropsToFields() {
        return {         
    -     name: { value: 'antd' },
    +     name: Form.createFormField({ value: 'antd' }),
        };
      },
    })
    

• Since we improved the global reset style, if you prefer the v2 way, we provide a compatible style.

  import 'antd/style/v2-compatible-reset';
  

  or

  @import '~antd/style/v2-compatible-reset.css';
  

• Since we changed default locale to en_US, so LocalProvide is not required for English users now, but for Chinese user, locale must set by LocalProvide .

New Features

• Tabs added new large size。
• Grid’s Row[gutter] now support responsive setting.
• Badge added offset to allow setting offset of the badge.
• Spin adde indicator to allow setting custom indicator. #7977 @kossel
• Progress adde new @processing-color less variable.
• Menu added subMenuOpenDelay and subMenuCloseDelay to allow setting delay time foor submeny toggling。
• Input added Input.Search[enterButton] to allow setting custom search button.
• Mention added placement to allow setting the popup direction.
• Carousel added next(), prev(), goTo(slideNumber) to allow controlling slides programmatically.
• Card
  • Added new inner type. Demo。
  • Added cover、actions and a new Meta component. Demo。
• DatePicker
  • Added mode and onPanelChange to allow controlling the panel mode. Demo。
  • Added new WeekPicker.
  • Added dateRender to allow customizing date cell.
• TimePicker
  • Added hourStep、minuteStep、secondStep to allow customizing time setps. Demo
  • Added focusOnOpen to allow opening panal when input gets focus.
  • Added @timepicker-item-height less variable.
• Table

  • Added components to allow overriding default table elements.

    const components = {
      table: MyTable,
      header: {
        wrapper: HeaderWrapper,
        row: HeaderRow,
        cell: HeaderCell,
      },
      body: {
        wrapper: BodyWrapper,
        row: BodyRow,
        cell: BodyCell,
      },
    };
    
    <Table components={components} columns={columns data={data}}  />
    

  • Added onRow to allow passing custom props to table body row.

  • Added onHeaderRow to allow passing custom props to table header row.

  • Added column[onCell] to allow passing custom props to table body cell.

  • Added column[onHeaderCell] to allow passing custom props to table header cell.

  • Added column[align] to allow setting how text aligns.

    • Added column[defaultSortOrder] to allow setting #8111
    • Added `rowSelection[fixed] to allow fixing the selection column.

  • Following props are deprecated:

    • onRowClick
    • onRowDoubleClick
    • onRowContextMenu
    • onRowMouseEnter
    • onRowMouseLeave

    Please use onRow instead:

    <Table onRow={(record) => ({
      onClick: () => {},
      onDoubleClick: () => {},
      onContextMenu: () => {},
      onMouseEnter: () => {},
      onMouseLeave: () => {},
    })} />
    

  • Deprecate getBodyWrapper, please use components instead。

• Select
  • Option’s value can be number in single or multiple mode.
  • Added maxTagCount and maxTagPlaceholder.
  • Added showAction to allow setting the trigger action for popup.
  • Added onMouseEnter and onMouseLeave。
• LocaleProvider
  • Added Icelandic. #7561 @paunovic-stefan
  • Added Egyptian Arabic. #7888 @mohamed-seada-1994
  • Added Ukrainian. #8169 @anxolerd

Bug Fixes and Improvements

• Badge’s status can use with children now. #8164
• Form
  • Added animation when showing validate message.
  • Fixed issue result in Input icon is hovered by feedback icon.
  • Now allow to bind same field name for dynamic components rendering.
• Menu
  • Imporoved animation.
  • Fixed keydown error. #8089
• Rate changed to a new color.
• Message
  • duration can be optional. #7857 @monkindey
  • Fixed destroy issue, when multiple message exists. #8201

Removed deprecations

• DatePicker.Calendar has been removed, you can use Calendar directly.
• DatePicker’s toggleOpen prop has been removed, use onOpenChange instead.
• Form’s inline, horizontal, vertical props has been removed, use layout instead.
• Input’s type prop has dropped textarea, please use Input.TextArea.
• Mention’s toEditorState has been removed.
• Select’s multiple, combobox, tags props has been removed, use mode instead.

Other Changes

• Don’t need set allowSyntheticDefaultImports when using in TypeScript.
• We removed react@0.14 and react@15 from peerDependencies, since we may use the new features only exists in React 16 in the future.
• Fully es module support, if you are using webpack 3, you can set babel-import-plugin’s libraryDirectory to es to enable tree shaking .

[afc163]

https://medium.com/ant-design/announcing-ant-design-3-0-70e3e65eca0c

Ant Design 3.0 released now! 🎉 🎉 🎉

[antonmedv]

What do we need Form.createFormField? What’s purpose of?