Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

馃挜 Ant Design 4.0 is in progress! #16911

Open
zombieJ opened this issue May 31, 2019 · 23 comments

Comments

Projects
None yet
@zombieJ
Copy link
Member

commented May 31, 2019

Recap

It has been 16 months since December 2017 when Ant Design 3.0 was released. We fixed plenty of bugs and added lots of new features(changelog) within 4289 commits, 138 releases, 7675 issues & PRs, that brought us 25375 stars in GitHub.聽We also released Ant Design Pro 4.0. Support for TypeScript, blocks, and abstraction of layouts. We want to thank every contributors and your contribution makes Ant Design better and better.

At the same time, we released Ant Design Pro 4.0. Support TypeScript, Block and Provides Layout component.

At this moment, we are thinking: Ok then, what's next? What can we do to make Ant Design going further?** It is the time to plan for the Ant Design 4.0**!聽馃嵒

Following is the detail plan about 4.0. We may adjust some of them since it's still in planning.

馃寭 About Compatibility

We will remove deprecated props in 4.0, which means deprecated props will be no longer supported. If you're not getting any warning from latest 3.x, it will be seamless to upgrade. Otherwise, there will be half year maintenance phase for 3.0 after 4.0 is released.

We know it's troublesome to do upgrades. We're planning to provide compatible package to handle this:

import Compatible from '@ant-design/compatible';

// It works, but will warning in console
const Demo = () => (
  <Compatible>
    <YourApp />
  </Compatible>
);

This package will be available till the end of 3.x maintenance phase.

Use latest React API

We have provided React 15聽support for a long time. But it seems not necessary from social feedback (There are nearly 0% of issues about React 15), since React has strong compatibility. To support React 15, we use new API very carefully. This will be not a problem after 4.0 anymore:

  • Provides Hooks api for related component
  • Support Concurrent mode (Still preparing, will continue adjust in 4.0)
  • Embrace React 17(wow锛亊)

Stop聽IE9/10 support

Ant Design 3.0 spends lots of effort to support old IE. But according to the industry statistics, usage of聽IE9/10 get lower and lower with Windows upgrade. We will stop support IE 9/10 in 4.0 (but still support IE 11), which means newer browser feature support will be possible.

Other compatible update

  • Less 2.x upgrade to Less 3.x
  • Icon adjustment
  • Mention deprecated

馃摝 Reduce size

Optimize icon size

We use svg icon (why svg?) after聽聽antd@3.9.0聽. We use string name to map the icon, which can not load on demand. We import all the icon file into antd which makes bundle size large. We will handle this in 4.0.

Old Icon usage way will be** deprecated**:

import { Icon, Button } from 'antd';

const Demo = () => (
  <div>
    <Icon type="smile" />
    <Button icon="smile" />
  </div>
);

Will use import single Icon instead in 4.0 :

// Directly import
import SmileOutline from 'antd/icons/SmileOutline';

// If tree-shaking supported
import { SmileOutline } from 'antd/icons';

const Demo = () => (
  <div>
    <SmileOutline />
    <Button icon={<SmileOutline />} />
  </div>
);

You can still use compatible way聽in old way.

Remove Draft.js

We use Draft.js in Mention component to confirm popup location, but only a small part functionality of it is used. It seems over cost. We plan to remove Draft.js in 4.0,聽 and use other light solution instead. At the same time, to distinguish with origin Mention component in 3.0, a new component Mentions will be introduced to avoid api conflict. Also, it supports聽compatible way:

// Follow Code will not work
import { Mention } from 'antd';

const Demo = () => (
  <Mention />
);
// Added `Mentions` in 4.0
import { Mentions } from 'antd';

const Demo = () => (
  <Mentions />
);

馃Л Performance optimization

We get few performance issue聽for large data set from community. We'll make sure some optimization will be done here.

Virtual scrolling

Virtual scrolling is a common way to do performance optimization. We're planning to support this natively in components. It may not finish immediately in 4.0 release. Will integrate step by step.

Refactor Animation

We did some hack with animation in the past. It works well in most case. We plan to use much pure React way instead of hack one. This update will be in silence, nothing will affect you.

馃З Components Optimization

We've add many components in 3.0, and will continue in 4.0. These components will come from business scenario, Ant Design Pro and social requirement.聽 New components process will be same as Ant Design 3.0, we will put related design file in PR and collect it in the official website. Release in each minor version.

Besides, we plan to refactor some key components to make easier to use. Includes but not only:

Form

Form is one of the most usage component. We notice that social have many comments on the API design.
聽We wish to simplify the API in 4.0:

  • Form will include data store. No need to use聽Form.create()聽anymore.
  • Fom.Item will include field bind. No need to use聽getFieldDecorator聽anymore.
  • Form.Item will keep the value, but the validator will be disabled when field removed.
const Demo = () => {
  const [form] = Form.useForm();
  
  const onFinish = () => {
    // Do something...
  };
  
  useEffect(() => {
    // Something like ajax call
    form.setFieldsValue({
      username: 'light',
    });
  }, []);

  return (
    <Form form={form} onFinish={onFinish}>
      <Form.Item name="username" rules={[{ required: true }]}>
        <Input />
      </Form.Item>
    </Form>
  );
}

In the real world, we meets lots of聽communication between forms (usually in detail configuration). We want to make it easier:

const { useForm, createContext } = Form;
const FormContext = createContext();

const Demo = () => {
  return (
    <FormContext>
      <YourForm1 />
      <YourForm2 />
    </FormContext>
  );
};

If you want to follow Form progress, you can see here.

Table

In the past, we received lots of聽Table聽feedback. We know that expand and scroll props not works well together. This time, we will focus to fix it. Besides, we will do much on the Table optimization. And easy way to do the layout锛

const Demo = () => {
  return (
    <Table
      header={{
        templateAreas: `
          name    address     address
          name    building    no
        `,
        cells: [
          { key: 'name', title: 'Name' },
          { key: 'address', title: 'Address' },
          { key: 'building', title: 'Building' },
          { key: 'no', title: 'No' },
        ],
      }}
    />
  );
};

antd4-table

We also plan to add聽Summary Footer聽to support summary row.

New DatePicker

Current DatePicker satisfies most requirement. But from community discussion, we can dig it more. We will provide rest year picker and ranger picker聽(discuss). And also, we will update the DatePicker design style to enhance user experience.

馃殌 Continue updating

Besides content above, we also plan to do some continue updating. These will keep updating in 4.0 to enhance development and user experience.

馃Ф Improve accessibility

Ant Design 3.0 has limited support for accessibility, we plan to adjust the dom structure and add more aria mark to enhance the screen reader experience. Besides, we also prepare to optimize key board interaction.

馃幆 Developer API standard

We find some聽 API naming style is little different with others. It's not a problem for Typescript developer, but it's hard to remember otherwise.
Thus, we will create a naming standard document which includes current APIs and related naming rules. In new feature, will follow the naming rule to avoid API naming conflict. Also, we welcome community opinions about this in PR.

馃捈 React Strict Mode

If you tried wrap antd component with <React.StrictMode>聽, you will get warning. We've already replace some components with new life cycle method. This work will continue in 4.0.

馃挕 Improve developer experience

In the past, we found that some issue comes repeatedly. These issues somehow are usage question. We think we can do something on this (actually already start in 3.0). In development environment, we will warning unexpected status (like invalidate Moment object, prefix/affix adjustment cause dom structure change, etc.). We believe that console is the first place to focus when meet problem. Provides proper tips can help to find the problem. At same time, we will summary other questions into FAQ of each Component document. From the side of maintenance, we can't help on each usage question, but they do exist,聽particularly with new come developers. FAQ may help to save lots of searching time. If you have interest on this, welcome to help enhancing developer experience with us.

馃惐聽Design Resource

Ant Design is not only a component library. Design is the support power. We will sync update the design resource (Sketch component package, Kitchen tools, Design Token, etc.).聽 We will also adjust current component style to enhance user experience.

Milestones

Here is our milestones plan. We will create related issue on Github. And also welcome social contributor:

Q2

  • Mark related API as Deprecated and remove from document.
  • Low level component warn update.

Q3

  • Create antd 4.0 branch and update the document.
  • Components development.

Q4

  • Release Ant Design 4.0.

Welcome aboard

We will keep you posted during the developing process. Content above may not be final. Thought/advice from community will be more than welcome! Let's make Ant Design 4.0 better!


寮曡█

Ant Design 浜 17 骞 12 鏈堝彂甯 3.0 浠ユ潵锛屽凡缁忕粡鍘嗕簡 16 涓湀鐨勬椂闂淬傚湪姝ゆ湡闂达紝鎴戜滑淇浜嗘捣閲 Bug銆佷互鍙婂鍔犲ぇ閲忔柊鍔熻兘锛鏇存柊鏃ュ織锛夈傛彁浜や簡 4289 涓 commits锛屽彂甯冧簡 138 涓増鏈紝鍏抽棴浜 7675 涓 issues 鍜 PRs锛屾柊澧炰簡 25375 涓 stars銆傛垜浠篃鍙戝竷浜 Ant Design Pro 4.0銆傛敮鎸佷簡 TypeScript銆佸尯鍧椾互鍙婂甯冨眬杩涜鎶借薄銆傛垜浠兂鎰熻阿鍚勪綅绀惧尯蹇楁効鑰咃紝鏄綘浠殑濂夌尞浣 Ant Design 鍙樺緱鏇村姞濂界敤銆

涓庢鍚屾椂锛屾垜浠篃鍦ㄦ濊冧笅涓姝ユ槸浠涔堬紝濡備綍鎵嶈兘浣 Ant Design 璧扮殑鏇磋繙锛屾垜浠璁鍦ㄤ粖骞 Q4 鍙戝竷 Ant Design 4.0 鐗堟湰馃嵒

浠ヤ笅鏄叧浜 4.0 鐨勮缁嗚鍒掞紝褰撶劧杩欎粛鍦ㄨ鍒掍腑銆傛寮忓彂甯冩椂鍙兘浼氭湁璋冩暣銆

馃寭 鍏煎鎬ц皟鏁

鎴戜滑灏嗗湪 4.0 涓紝瀵规爣璁颁负 Deprecated 鐨勫睘鎬ц繘琛岀Щ闄ゃ傚眾鏃朵綘灏嗕笉鑳藉啀浣跨敤搴熷純鐨勬柟娉曘傚鏋滀綘灏嗕綘鐨勯」鐩崌绾у埌鏈鏂扮殑 3.x 浜庢帶鍒跺彴涓病鏈夌湅鍒版潵鑷 antd 鐨 warning 淇℃伅锛岄偅涔堜綘鍗囩骇 4.0 涔熷皢鏄棤缂濈殑銆傚浜 3.x 鐗堟湰锛屾垜浠粛灏嗗湪 4.0聽鍙戝竷鍚庨澶栬繘琛屽崐骞寸殑缁存姢宸ヤ綔銆

鎴戜滑鐭ラ亾鍗囩骇鐗堟湰鑸嶅純搴熷純 API 鐨勭簿鍔涢潪甯稿ぇ锛屾垜浠鍒掑湪鍙戝竷 4.0 鐨勫悓鏃朵篃鎻愪緵鍏煎鍖呬互鍗忓姪椤圭洰杩囨浮锛堢浉鍏 API 浠嶅湪璁捐涓紝姝e紡鍙戝竷鏃跺彲鑳戒細鏈夋墍涓嶅悓锛夛細

import Compatible from '@ant-design/compatible';

// It works, but will warning in console
const Demo = () => (
  <Compatible>
    <YourApp />
  </Compatible>
);

璇ュ吋瀹瑰寘鍚屾牱浼氱淮鎸佹洿鏂扮洿鍒 3.0 缁存姢宸ヤ綔鍋滄涓烘銆

浣跨敤鏈鏂扮増鏈 React API

鎴戜滑鐩稿綋闀夸竴娈垫椂闂村唴閮藉湪鏀寔 React 15 鐗堟湰锛屼絾鏄粠绀惧尯鍙嶉涓婄湅锛岃繖鍏跺疄骞朵笉閲嶈锛圧eact 15 鐨 issue 鏁拌秼杩戜簬 0%锛夈傚洜涓 React 鏈韩灏卞叿澶囬潪甯稿仴澹殑鍏煎鎬с傝屼负浜嗘敮鎸 React 15锛屾垜浠湪寮鍙戣繃绋嬩腑瀵逛簬鏂扮殑 API 浣跨敤闈炲父鎱庨噸銆傚湪 4.0 鐗堟湰鍚庯紝鎴戜滑浼氫互鏈鏂 React 鐗堟湰浣滀负鍩哄噯杩涜寮鍙戯細

  • 鎻愪緵鐩稿叧缁勪欢鐨 Hooks 鐗堟湰
  • 鏀寔 Concurrent 妯″紡锛堝綋鐒讹紝闇瑕佸噯澶囩殑浜嬫儏姣旇緝澶氾紝浼氬湪 4.0 鍙戝竷涓寔缁皟鏁淬傦級
  • 鎷ユ姳 React 17 锛坵ow锛亊锛

鍋滄 IE9/10 鏀寔

Ant Design 3.0 涓轰簡鍏煎鏃х増 IE聽鍋氬嚭浜嗛潪甯稿鐨勫姫鍔涖傜劧鑰屾牴鎹笟鐣岀粺璁★紝IE9/10 娴忚鍣ㄦ棤璁烘槸鍦ㄥ叏鐞冭繕鏄湪鍥藉唴浠介閮藉湪闅忕潃 Windows 绯荤粺鏇存柊鑰屽湪涓嶆柇缂╁噺銆傛垜浠湪 4.0 鐗堟湰锛屼細鍋滄瀵 IE 9/10 鐨勬敮鎸佸伐浣滐紙浣嗕粛鐒朵細鏀寔 IE 11锛夈傝繖涔熸剰鍛崇潃锛屾敮鎸佹柊鐨勬父瑙堝櫒鐗规ф垚涓哄彲鑳姐

鍏朵粬鍏煎鎬ц皟鏁

  • Less 2.x 鍗囩骇涓 Less 3.x
  • Icon 浣跨敤鍙樻洿
  • Mention 搴熷純

馃摝聽鍑忓皬浣撶Н

浼樺寲鍥炬爣灏哄

antd@3.9.0聽涓紝鎴戜滑寮曞叆浜 svg 鍥炬爣锛涓轰綍浣跨敤 svg 鍥炬爣锛锛夈備娇鐢ㄤ簡瀛楃涓插懡鍚嶈缃浘鏍囩殑 API锛屽湪杩欑璁捐涓嬫垜浠棤娉曞仛鍒版寜闇鍔犺浇锛屽洜鑰屾垜浠叏閲忓紩鍏ヤ簡 svg 鍥炬爣鏂囦欢锛岃繖澶уぇ澧炲姞浜嗘墦鍖呬骇鐗╃殑灏哄銆傚湪 4.0 涓紝鎴戜滑灏嗕細瀵规杩涜璋冩暣浠ヤ紭鍖栦綋绉

鏃х増 Icon 浣跨敤鏂瑰紡灏嗚搴熷純

import { Icon, Button } from 'antd';

const Demo = () => (
  <div>
    <Icon type="smile" />
    <Button icon="smile" />
  </div>
);

4.0 涓細閲囩敤鎸夐渶寮曞叆鐨勬柟寮忥細

// Directly import
import SmileOutline from 'antd/icons/SmileOutline';

// If tree-shaking supported
import { SmileOutline } from 'antd/icons';

const Demo = () => (
  <div>
    <SmileOutline />
    <Button icon={<SmileOutline />} />
  </div>
);

浣犲皢浠嶇劧鍙互閫氳繃涓婃枃鍏煎鏂规硶缁х画浣跨敤銆

绉婚櫎 Draft.js

鎴戜滑鍦 Mention 缁勪欢涓紩鍏ヤ簡 Draft.js 浠ュ疄鐜颁笅鎷夋彁绀哄畾浣嶅姛鑳斤紝鐒惰屾垜浠彧浣跨敤浜嗗畠寰堝皬涓閮ㄥ垎鐨勫姛鑳姐備粠鎬т环姣斾笂鑰冭檻锛屾樉寰楁湁浜涙氮璐广傛垜浠鍒掑湪 4.0 涓Щ闄ゅ鍏剁殑渚濊禆锛岃浆鑰屼娇鐢ㄦ洿杞婚噺绾х殑瑙e喅鏂规銆傚悓鏃讹紝涓轰簡鍖哄垎 3.0 涓殑 Mention 缁勪欢锛屾垜浠細鎻愪緵涓涓柊鐨勭粍浠 Mentions 浠ラ槻姝 API 鍐茬獊銆傚悓鏍风殑锛屽畠涔熸敮鎸侀氳繃涓婃枃鍏煎鏂规硶鏉ョ户缁娇鐢細

// Follow Code will not work
import { Mention } from 'antd';

const Demo = () => (
  <Mention />
);
// Added `Mentions` in 4.0
import { Mentions } from 'antd';

const Demo = () => (
  <Mentions />
);

馃Л 鎬ц兘浼樺寲

鍦ㄧ淮鎶よ繃绋嬩腑锛屾垜浠敹鍒颁笉灏戝叧浜庡ぇ鏁版嵁鐨勪笅鐨鎬ц兘璁ㄨ銆備负姝わ紝鎴戜滑涔熻鍒掑鎬ц兘杩涜浼樺寲銆

铏氭嫙婊氬姩

铏氭嫙婊氬姩鏄竴涓父瑙佺殑浼樺寲鎵嬫锛屼絾鏄湪 Ant Design 涓敱浜庡瓨鍦ㄥ姩鐢绘晥鏋滐紝浣垮緱鑷畾涔夎櫄鎷熸粴鍔ㄥ苟涓嶉偅涔堝鏄撱傜幇鍦紝鎴戜滑璁″垝甯︽粴鍔ㄧ殑缁勪欢涓師鐢熸敮鎸佽櫄鎷熸粴鍔ㄣ傚綋鐒讹紝鎴戜滑骞朵笉浼氫繚璇佸湪 4.0 鍙戝竷鏃舵墍鏈夌粍浠跺凡缁忔洿鏂板畬鎴愶紝浼氭寔缁洿鏂般

鍔ㄧ敾鏀硅繘

杩囧幓锛屾垜浠娇鐢ㄤ簡涓浜 hack 鐨勬柟寮忔潵瀵瑰姩鐢昏繘琛屽鐞嗐傚ぇ閮ㄥ垎鍦烘櫙涓嬶紝閮藉伐浣滅殑鐩稿綋濂姐傚湪 4.0 涓紝鎴戜滑璁″垝瀵规杩涜璋冩暣锛屾憭寮 hack 鐨勬柟寮忚浆鍚戞洿鍔 React 鐨勯亾璺傝璋冩暣灏嗕細闈欓粯鏇存柊锛屼綘涓嶉渶瑕佸姝ゅ仛浠讳綍鏇存敼銆

馃З聽鍏充簬缁勪欢

鍦 3.0 涓紝鎴戜滑宸茬粡鎸佺画娣诲姞浜嗕笉灏戠粍浠躲傚湪 4.0 涓紝鎴戜滑浠嶅皢杩涜涓嬪幓銆傝繖浜涚粍浠跺皢浠庢垜浠殑涓氬姟鍦烘櫙銆丄nt Design Pro 浠ュ強绀惧尯闇姹備腑杩涜鎻愮偧锛岃繖鏄竴涓寔缁殑杩囩▼銆傛柊澧炵粍浠剁殑娴佺▼涓 Ant Design 3.0 鐩稿悓锛屾垜浠細娌夋穩鐩稿叧缁勪欢鐨勮璁$ǹ鍦 PR 涓睍绀哄苟涓庡畼缃戣繘琛屾洿鏂帮紝寮鍙戝畬鎴愬悗浼氬湪姣忎釜鏈堢殑 minor 鐗堟湰涓彂甯冦

姝ゅ锛屾垜浠繕鍑嗗閲嶆瀯涓浜涘叧閿粍浠讹紝浠ユ彁楂樺叾寮鍙戜笌浜や簰涓婄殑鏄撶敤鎬с傚叾涓寘鍚絾涓嶉檺浜庯細

Form 缁勪欢

琛ㄥ崟缁勪欢鐨勫彈浼楃兢浣撳崄鍒嗗簽澶э紝鎴戜滑涔熸敞鎰忓埌绀惧尯瀵圭箒鐞愮殑琛ㄥ崟 API 鐨勬姳鎬紝鍦 4.0 閲屾垜浠笇鏈涙帰绱㈡洿濂界殑 API 褰㈠紡浠ョ畝鍖栧紑鍙戞垚鏈細

  • Form 灏嗛粯璁よ仛鍚堣〃鍗曟暟鎹煙锛屼綘涓嶅啀闇瑕侀氳繃 Form.create()聽鍒涘缓涓婁笅鏂囥
  • Fom.Item 灏嗛粯璁よ仛鍚堣〃鍗曞瓧娈碉紝浣犱笉闇瑕侀氳繃 getFieldDecorator聽缁戝畾 Field銆
  • Form.Item 鐨勫煎皢鎬讳細淇濈暀锛屼絾鏄叾楠岃瘉鍔熻兘鍙湁琛ㄥ崟椤瑰彲瑙佹椂鎵嶄細鐢熸晥銆
const Demo = () => {
  const [form] = Form.useForm();
  
  const onFinish = () => {
    // Do something...
  };
  
  useEffect(() => {
    // Something like ajax call
    form.setFieldsValue({
      username: 'light',
    });
  }, []);

  return (
    <Form form={form} onFinish={onFinish}>
      <Form.Item name="username" rules={[{ required: true }]}>
        <Input />
      </Form.Item>
    </Form>
  );
}

鍦ㄧ幇瀹炲満鏅腑锛屾垜浠亣鍒颁簡澶氳〃鍗曡仈鍔ㄧ殑鍦烘櫙锛堝父瑙佷簬璇︾粏鍖栭厤缃級銆傛垜浠煡閬撹繖浣跨敤璧锋潵骞朵笉鏂逛究锛屽洜鑰屼篃灏嗘彁渚涜〃鍗曢棿鑱斿姩鐨勫姛鑳斤細

const { useForm, createContext } = Form;
const FormContext = createContext();

const Demo = () => {
  return (
    <FormContext>
      <YourForm1 />
      <YourForm2 />
    </FormContext>
  );
};

濡傛灉浣犳兂鍏虫敞 Form 杩涘害锛屾杩庢煡鐪杩涘害

Table 缁勪欢

鍦ㄨ繃鍘荤殑鐗堟湰涓紝鎴戜滑鎺ュ埌浜嗗叧浜 Table聽缁勪欢闈炲父澶氱殑鍙嶉銆傛垜浠煡閬撹繃鍘 Table 鐨 expand 鍜 scroll 灞炴т竴鐩翠笉鑳藉緢濂界殑宸ヤ綔銆傝繖涓娆★紝鎴戜滑浼氱潃鍔涜В鍐宠繖鏂归潰鐨勫啿绐侀棶棰樸傛澶栵紝鎴戜滑杩樹細杩涗竴姝ュ Table 缁勪欢杩涜鎬ц兘璋冧紭銆備互鍙婃帰绱竴浜涙洿鍔犵畝鏄撶殑琛ㄦ牸甯冨眬鏂瑰紡锛

const Demo = () => {
  return (
    <Table
      header={{
        templateAreas: `
          name    address     address
          name    building    no
        `,
        cells: [
          { key: 'name', title: 'Name' },
          { key: 'address', title: 'Address' },
          { key: 'building', title: 'Building' },
          { key: 'no', title: 'No' },
        ],
      }}
    />
  );
};

antd4-table

姝ゅ锛屾垜浠繕璁″垝娣诲姞聽Summary Footer锛屼互鏀寔姹囨婚渶姹傘

DatePicker 閲嶅仛

鐜版湁鐨 DatePicker 宸茬粡婊¤冻浜嗗ぇ閮ㄥ垎闇姹傦紝浣嗘槸浠绀惧尯璁ㄨ鏉ョ湅銆傛垜浠繕鏈夋洿鍔犳繁鍏ユ寲鎺樼殑鏈轰細锛屾垜浠皢琛ュ叏鍓╀綑鐨勫勾閫夋嫨鍣ㄤ互鍙婂搴旂殑鑼冨洿閫夋嫨鍣紙璁ㄨ锛夈傛澶栵紝鎴戜滑浼氳皟鏁寸浉鍏虫棩鏈熸椂闂撮夋嫨鍣ㄦ牱寮忥紝杩涗竴姝ラ檷浣庣敤鎴风殑璁ょ煡鎴愭湰銆

馃殌聽鎸佺画鏇存柊

闄や簡浠ヤ笂鍐呭澶栵紝鎴戜滑涔熻鍒掍竴閮ㄥ垎鎸佺画鏇存柊鐨勫唴瀹广傝繖浼氬湪 4.0 涓繚鎸佽窡杩涳紝浠ユ洿濂界殑鎻愬崌鐢ㄦ埛寮鍙戜笌浣跨敤浣撻獙銆

馃Ф 鏀硅繘鏃犻殰纰嶄綋楠

Ant Design 3.0 涓浜庢棤闅滅浣撻獙鏀寔搴︾◢鏄炬瑺缂猴紝涓烘鎴戜滑璁″垝璋冩暣缁勪欢缁撴瀯骞舵坊鍔犳洿澶氱殑 aria 鏍囪浠ユ敼杩涜灞忎綋楠屻傛澶栵紝鎴戜滑杩樺噯澶囦紭鍖栫幇鏈夌殑缁勪欢閿洏浜や簰鏂瑰紡锛屼互纭繚鍙互鏈夋洿濂界殑鍏ㄩ敭鐩樹氦浜掍綋楠屻

馃幆 寮鍙戣 API 瑙勮寖

鍦ㄦ紨杩涜繃绋嬩腑锛屾垜浠彂鐜板皯閲 API 椋庢牸浼氫笌鍏朵粬缁勪欢鏄惧緱鏍兼牸涓嶅叆銆傚浜 TypeScript 鐢ㄦ埛鑰岃█杩欎笉鏄粈涔堥棶棰橈紝浣嗘槸瀵逛簬鍏朵粬鐢ㄦ埛鑰岃█锛岃繖浼氶犳垚璁板繂鍥版壈銆

鍥犳鎴戜滑浼氭暣鐞嗗嚭涓浠芥爣鍑嗗懡鍚嶆枃妗c傝鏂囨。浼氬寘鍚幇鏈夌殑 API 鍒楄〃浠ュ強鎭板綋鐨勫懡鍚嶈鑼冦傚湪鏂板鍔熻兘鏃讹紝涔熶細渚濇嵁璇ヨ鑼冭繘琛屽懡鍚嶃備互閬垮厤鏈潵鍙兘浜х敓鐨 API 鍒嗘銆傚綋鐒讹紝鎴戜滑涔熸杩庣ぞ鍖哄悓瀛﹀湪 PR 涓繘琛屽弽棣堛

馃捈 React 涓ユ牸妯″紡

濡傛灉浣犲皾璇曞湪 antd 缁勪欢澶栧寘瑁 <React.StrictMode>聽浣犱細寰楀埌涓嶅皯鏉ヨ嚜 antd 缁勪欢鐨勮鍛婁俊鎭傛垜浠湪 3.0 鏃跺凡缁忔洿鏂颁簡涓閮ㄥ垎缁勪欢鐨勭敓鍛藉懆鏈熸柟娉曘傚湪 4.0 涓紝鎴戜滑浠嶅皢缁х画銆

馃挕 鏀硅繘寮鍙戣呬綋楠

鍦ㄨ繃鍘荤殑缁存姢杩囩▼涓紝鎴戜滑鍙戠幇鏌愪簺 issue 浼氬線澶嶇殑鍑虹幇銆傝繖浜 issue 甯歌浜庝竴浜涗娇鐢ㄨ鑼冩垨鑰呭簲鐢ㄥ満鏅殑闂銆備负姝わ紝鎴戜滑鍐冲畾鍦ㄨ繖杈瑰仛鍑烘敼杩涳紙鍏跺疄浠 3.0 寮濮嬶紝鎴戜滑宸茬粡鍦ㄦ敼杩涗簡锛夈傚湪寮鍙戠幆澧冧腑锛屾垜浠浜庝竴浜涙剰澶栨儏鍐碉紙渚嬪鏃犳晥鐨 Moment 瀵硅薄銆両nput 鐨 preffix/affix 鍔ㄦ佽皟鏁村鑷寸殑 Dom 缁撴瀯鍙樺寲绛夌瓑锛変細鍦ㄦ帶鍒跺彴杩涜鎻愮ず銆傛垜浠‘淇★紝鎺у埗鍙版槸寮鍙戣呭湪閬囧埌闂鏃堕鍏堜細鍏虫敞鐨勫湴鏂癸紝鍦ㄦ鎻愪緵閫傚綋鐨勬彁绀哄彲浠ュ府鍔╁揩閫熷畾浣嶉棶棰樸傚悓鏃讹紝瀵逛簬涓浜涚壒娈婄殑浣跨敤鏂瑰紡鎴栬呭満鏅傛垜浠細鍦ㄧ浉搴旂殑缁勪欢鏂囨。涓彁渚 FAQ銆備粠椤圭洰缁存姢瑙掑害鐪嬶紝鎴戜滑鐨勭簿鍔涙棤娉曢拡瀵逛娇鐢ㄦ柟寮忕殑 issue 鍋氳缁嗙殑瑙g瓟銆備絾鏄繖浜涚枒闂槸鐜板疄瀛樺湪鐨勶紝灏ゅ叾瀵逛簬鏂颁汉寮鍙戣呰岃█锛屼竴涓 FAQ 鍙互甯姪鑺傜渷澶ч噺鎼滅储鏃堕棿銆傚鏋滀綘鏈夊叴瓒o紝涔熸杩庣ぞ鍖哄織鎰胯呭府鍔╀竴璧峰畬鍠勫紑鍙戣呬綋楠屻

馃惐聽璁捐璧勪骇绠$悊

Ant Design 涓嶄粎浠呮槸涓濂楃粍浠跺簱锛岃儗鍚庢湁鐫寮哄ぇ鐨勮璁′綋绯讳綔涓烘敮鎾戙傛垜浠湪 4.0 浼氬悓姝ユ洿鏂版渶鏂扮殑璁捐鐩稿叧璧勪骇锛圫ketch 缁勪欢鍖呫並itchen 宸ュ叿闆嗐丏esign Token 绛夌瓑锛夛紝浠ユ柟渚胯璁″笀浠ュ強瀵硅璁℃劅鍏磋叮鐨勫悓瀛︿綔涓哄弬鑰冦備篃浼氬鐜版湁鐨勭粍浠惰璁℃牱寮忚繘琛屽井璋冿紝浠ユ彁鍗囪瑙夋晥鏋滀互鍙婄敤鎴蜂綋楠屻

鏃堕棿璁″垝

浠ヤ笅鏄垜浠殑鏃堕棿瀹夋帓锛屽叾涓儴鍒嗙粍浠舵洿鏂版槸鎸佺画杩涜鐨勩傛垜浠細鍦 github 涓婂缓绔嬬浉鍏 issue锛屼篃娆㈣繋绀惧尯蹇楁効鑰呬竴鍚屽弬涓庯細

Q2

  • 灏嗛渶瑕佸簾寮 API 鏍囪涓 Deprecated 鐘舵侊紝骞朵簬鏂囨。涓竻闄ゃ
  • 搴曞眰缁勪欢杩涜棰勭儹銆

Q3

  • 寤虹珛 antd 4.0 鍒嗘敮锛屽苟杩涜鏂囨。鏇存柊銆
  • 搴曞眰缁勪欢寮鍙戙

Q4

  • 鍙戝竷 4.0 鐗堟湰銆

娆㈣繋鍙備笌

鍦 4.0 寮鍙戣繃绋嬩腑锛屼笂杩板唴瀹瑰彲鑳戒細鏈夋墍璋冩暣銆傛杩庣ぞ鍖哄悓瀛︽彁渚涘疂璐电殑鎯虫硶鍜屽缓璁紝璁╂垜浠妸 Ant Design 4.0 涓璧峰仛鐨勬洿鏂逛究濂界敤锛

@zombieJ zombieJ pinned this issue May 31, 2019

@zachguo zachguo referenced this issue May 31, 2019

Open

Svg icons make bunlde size too large #12011

0 of 1 task complete
@hk-ng

This comment has been minimized.

Copy link

commented May 31, 2019

#15311
Will we replace Moment.js in version 4?

@lcoder

This comment has been minimized.

Copy link

commented Jun 1, 2019

寰堣禐锛岃揩涓嶅強寰呮兂鍗囩骇浜

@afc163 afc163 referenced this issue Jun 1, 2019

Closed

V4 alpha prepare #16898

2 of 33 tasks complete
@afc163

This comment has been minimized.

Copy link
Member

commented Jun 1, 2019

V4 alpha prepare

Mainly Target

  • v4 branch
  • Compatible package
  • Remove Deprecated Content
    • Mention Component
      • New Mentions Component #16532
    • Form.create
    • Icon with type #12011
    • Other with deprecated warning props
  • Less v3
  • Performance
    • rc-animate upgrade
      • concurrent mode support
      • Virtual scroll animation support
    • Virtual Scroll
      • rc component
      • Tree
      • Select
      • TreeSelect
    • Form: react-component/form#292
      • Provides Hooks version
    • Table
      • templateAreas
      • Support expand & scroll co-work
  • DatePicker with new design
    • YearPicker
    • RangePicker.YearPicker
    • RangePicker.MonthPicker
    • RangePicker.YearMonthPicker
    • RangePicker.WeekPicker
    • TimePicker.RangePicker

Continue Target

  • Accessibility
  • API standard
  • React.StrictMode
@jas0ncn

This comment has been minimized.

Copy link
Contributor

commented Jun 1, 2019

Here are some suggestions about Ant 4

About templateAreas

templateArea parses string at runtime, it will cause unexcepted parsing errors or slient errors when string typo. Runtime parsing is also unfriendly to TypeScript. Would Ant Team considers the proposal below:

const columnTemplate = [
  ['name', 'address', 'adress'],
  ['name', 'building', 'no']
]

About dependence

Would Ant Team considers remove moment dependence?

Moment is too big to front-end project, there are many alternatives, but TimePicker and DatePicker's props relay on Moment. It leads us cannot replace moment with date-fns or other library which smaller than Moment.

About Icon

I think the way that Ant Icons used now should not be deprecated, the new way that import icon may cause common bundle chunk change when I add or remove one Icon.

Ant Team can provider two ways to use Ant Icons:

  1. Package all Icons into one jsfile, developers can import whole file use <script> tag, and set externals in webpack.
  2. The new way that introduce above.

杩欐槸鎴戝 Ant4 鐨勪竴浜涘缓璁

鍏充簬 templateAreas

templateAreas 鍦ㄨ繍琛屾椂瀵瑰瓧绗︿覆杩涜瑙f瀽锛屽綋瀛楃涓插嚭鐜版嫾鍐欓敊璇殑鏃跺欙紝鍙兘浼氬鑷磋В鏋愬け璐ユ垨鑰呴潤榛橀敊璇傝繍琛屾椂瑙f瀽瀵 TypeScript 涔熶笉鍙嬪ソ銆侫nt 鍥㈤槦鏄惁鑰冭檻濡備笅鏂规锛

const columnTemplate = [
  ['name', 'address', 'adress'],
  ['name', 'building', 'no']
]

鍏充簬渚濊禆

鏄惁鑰冭檻绉婚櫎瀵 Moment 鐨勪緷璧栵紵

Moment 瀵逛簬鍓嶇椤圭洰鏉ユ椂瀹炲湪鏄お澶т簡锛屽競闈笂鏈夎澶氬彲渚涙浛浠g殑搴擄紝浣嗘槸 TimePickerDatePicker 鐨勫弬鏁颁緷璧栦簬 Moment 瀵硅薄锛岃繖瀵艰嚧浜嗘垜浠病鍔炴硶浣跨敤 date-fns 鎴栬呬竴浜涙瘮 Moment 鏇村皬鐨勫簱鏉ユ浛浠 Moment銆

鍏充簬鍥炬爣

鎴戣涓哄綋鍓嶄娇鐢 Ant 鍥炬爣鐨勬柟寮忎笉搴旇琚搴熷純銆傛柊鐨勪娇鐢ㄦ柟寮忓湪鎴戞柊澧炴垨鑰呭垹闄や竴涓浘鏍囧紩鐢ㄧ殑鏃跺欙紝鍙兘浼氬鑷村叕鍏 chunk 鍙嶅鍙樻洿銆

Ant 鍥㈤槦鍙互鎻愪緵濡備笅涓ょ鏂规鏉ヤ娇鐢 Ant 鍥炬爣锛

  1. 鎵撳寘鎵鏈夊浘鏍囧埌涓涓 js 鏂囦欢涓紝寮鍙戣呴氳繃 <script> 鏍囩寮曠敤鍏ㄩ儴鍥炬爣锛屽苟涓斿湪 Webpack 涓缃负 externals
  2. 4.0 鏂颁粙缁嶇殑鍥炬爣浣跨敤鏂瑰紡

@afc163 afc163 changed the title Ant Design 4.0 is in progress! 4锔忊儯 Ant Design 4.0 is in progress! Jun 1, 2019

@afc163 afc163 changed the title 4锔忊儯 Ant Design 4.0 is in progress! 馃挜 Ant Design 4.0 is in progress! Jun 1, 2019

@ifiknew

This comment has been minimized.

Copy link

commented Jun 2, 2019

Any plan to support virtual scroll for table? Infinite table is preferred in some cases rather than pagination.
And as 'Comment' is included in 3.11, maybe ChatBox and ChatMessage?

@jas0ncn

This comment has been minimized.

Copy link
Contributor

commented Jun 2, 2019

Any plan to support virtual scroll for table? Infinite table is preferred in some cases rather than pagination.
And as 'Comment' is included in 3.11, maybe ChatBox and ChatMessage?

UserInfo maybe priorities.

@muzea

This comment has been minimized.

Copy link
Contributor

commented Jun 2, 2019

about templateAreas

鎴戝悓鏍锋敮鎸佷簩缁存暟缁勭殑璇硶
I also support the syntax of two-dimensional arrays.

鍏充簬 templateAreas 锛岃繖閲岀粰鍑轰竴涓潤鎬佹鏌ョ殑绀轰緥
This is an example of a type static check using ts for templateAreas

interface Cell<T extends string = string> {
  key: T;
  title: string;
}

interface Config<K extends string = string> {
  header: {
    templateAreas: ReadonlyArray<ReadonlyArray<K>>;
    cells: ReadonlyArray<Cell<K>>
  };
}


declare function check<T extends string>(config: Config<T>): void;

const config = {
  header: {
    templateAreas: [
      ['name', 'address', 'address'],
      ['name', 'building', 'error'],
    ],
    cells: [
      { key: "name", title: "Name" },
      { key: "address", title: "Address" },
      { key: "building", title: "Building" },
      { key: "no", title: "No" }
    ]
  }
} as const;

check(config);

Playground

image

@Huanglei2010

This comment has been minimized.

Copy link

commented Jun 3, 2019

@zachguo

This comment has been minimized.

Copy link
Contributor

commented Jun 4, 2019

#15311
Will we replace Moment.js in version 4?

I think the main issue for moving away from moment is breaking change around locales. #15311 (comment)

@fwh1990

This comment has been minimized.

Copy link

commented Jun 5, 2019

甯屾湜瀵箃ypescript鐨勬敮鎸佽兘鏇村ソ鐐

@orecus

This comment has been minimized.

Copy link

commented Jun 5, 2019

Great seeing 4.0 is in progress! I have a few suggestions below for consideration, i'm not quite sure if they fit into the design pattern, but for customisability they would be great in my opinion.

  • Being able to control the background color of a row within <Table>. For example colouring a row as orange to highlight warning for that row.
  • Button colors, did not find any previous discussions around this. But it would be great to be able to have a similar API as <Tag color="red">RED<Tag /> for Buttons, example <Button color="red">Red Button<Button/>.
  • Support for Font-Awesome 5.x icons within the different components, or ensure that they will work with the other Icon work ongoing. I've noticed some issues with alignment when using FA instead of the native <Icon> component.
  • The <Pagination> component does not support supplying the amount of pages directly, the use case is that I only have the amount of pages and the current page available to me for example, but not how many items within each page. I have not found a good way to handle this yet.
@muzea

This comment has been minimized.

Copy link
Contributor

commented Jun 5, 2019

@orecus

For example colouring a row as orange to highlight warning for that row

I tend to use rowClassName to attach a class to this row and then override the default style with css.

The component does not support supplying the amount of pages directly

Can pass a fake total. For example, if you want 50 pages, can pass total = pageSize * 50.

@bend-up

This comment has been minimized.

Copy link

commented Jun 5, 2019

That's really a good news 馃殌 Focus on performance is visible and that's great, because some component's are not usable with large amounts of data.

How do you want to implement virtual scroll? Using react-window?

Are there priorities for Mainly target features?
I'd like to try virtual select in alpha stage and I think I'm not alone regarding this one.

Thanks.

@faradaytrs

This comment has been minimized.

Copy link

commented Jun 6, 2019

Why string name cannot load on demand? doesn't react's lazy() solve the problem?

@muzea

This comment has been minimized.

Copy link
Contributor

commented Jun 6, 2019

@faradaytrs
鍙互鏄彲浠ワ紝浣嗘槸渚濊禆 webpack 鐨勭壒鎬э紝鍏蜂綋鎿嶄綔

涓や釜闂姣旇緝绐佸嚭

  • /* webpackChunkName: "icons/icon-" */ 杩欑鍐欐硶鏄 webpack 鎻愪緵鐨 Magic Comments
  • 濡傚師鏂囨墍璇 "姣忎竴涓浘鏍囬兘鍖呭惈浜嗛櫎鍥炬爣鍐呭浠ュ鐨勯澶栫殑 Webpack 妯″潡淇℃伅"
@wangjianio

This comment has been minimized.

Copy link

commented Jun 9, 2019

Any ideas about global style pollution? #4331 #9363

@abenhamdine

This comment has been minimized.

Copy link
Contributor

commented Jun 9, 2019

Any ideas about global style pollution? #4331 #9363

IMHO it would be great for 4.0 to allow users to scope antdesign styles under a global name (see my comment #4331 (comment))

@zombieJ zombieJ referenced this issue Jun 11, 2019

Closed

Generate ColumnGroup by config #17037

0 of 1 task complete
@sbusch

This comment has been minimized.

Copy link
Contributor

commented Jun 11, 2019

Great to hear about next milestone!

My 2 Ct. regarding docs and streamlining:

There聽are often props passed through to the underlying DOM elements, that are not documented (IIRC In some cases, all props that aren't picked by the component implementation are passed through). It would be very helpful to have them documented, grouped by target element (there may me more than one): "The following props are passed through to the container

" or "The following props are passed through the element..." or "All other props are passed to ...". For those props is no need for detailed explanation, links to MDN could be sufficient.

Such a change would also be great for us TypeScript developers, currently it's a lot of tedious work to keep the TS definition up-to-date in this regard.

In the "Developer API standard", this should be documented, and there should be a decision which props should always be passed (className, id, ?)

@sbusch

This comment has been minimized.

Copy link
Contributor

commented Jun 11, 2019

Another question:

Are you planning to switch more files (or even rc-components) from JavaScript with TypeScript definitions to native TypeScript?

@iamvanja

This comment has been minimized.

Copy link

commented Jun 12, 2019

Consider replacing rc-form with something more flexible, like Formik.

@kaiyoma

This comment has been minimized.

Copy link

commented Jun 15, 2019

Question for the maintainers:

My team is interested in trying out Ant, but #11097 (Antd Less creates global JavaScript leaks) is blocking us. The roadmap above says that Ant will be moving to LESS version 3, and I've read that the insecure, deprecated inline JavaScript feature in question is disabled by default. Does this mean that Ant version 4 will no longer have the LESS issue?

@wanliyunyan

This comment has been minimized.

Copy link
Contributor

commented Jun 19, 2019

Not only IE9/10 , but stop IE support,

@yoyo837 yoyo837 referenced this issue Jun 20, 2019

Closed

鍏充簬Table鍒楃殑涓浜涘缓璁 #17183

0 of 1 task complete
@and-semakin

This comment has been minimized.

Copy link

commented Jun 20, 2019

Oh gosh, it would be so useful to not pollute global styles (html, body, *::before, ...)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can鈥檛 perform that action at this time.