Merge branch 'master' into feature-3.2

CHANGELOG.en-US.md

@@ -15,12 +15,33 @@ timeline: true
 
 ---
 
+## 3.1.1
+
+`2018-01-08`
+
+- 📖 Published the new site and design guideline.
+- 📖 Updated the guideline of real project with dva to [roadhog 2.0](https://github.com/sorrycc/blog/issues/55). [5dcf1c0](https://github.com/ant-design/ant-design/commit/5dcf1c015fc2674adb09434bf766549d6f3f0022)
+- 📖 Published the new sketch resource of Ant Design 3.0. [22dfe88](https://github.com/ant-design/ant-design/commit/22dfe88ab043c1e116382fc96b7d78cabf125054)
+- 🐞 Fix contextMenu event for trigger prop in the TypeScript definition of Dropdown. [#8646](https://github.com/ant-design/ant-design/issues/8646) [@cjahv](https://github.com/cjahv)
+- 🐞 Fix HOC in Button not inserted space between chinese words.
+- 🐞 Fix the style compatibility in IE 11 for List Component. [#8784](https://github.com/ant-design/ant-design/issues/8784)
+- 🐞 Fix notFoundContent prop not working for Select Component. [#8809](https://github.com/ant-design/ant-design/issues/8809)
+- 🐞 Fix the warning for BackTop Component in React 16. [#8848](https://github.com/ant-design/ant-design/issues/8848)
+- 🐞 Fix unexpected scrollbar for List Component when setting gutter. [#8799](https://github.com/ant-design/ant-design/issues/8799)
+- 🐞 Fix to support complete href link for Anchor.Link Component. [#8808](https://github.com/ant-design/ant-design/issues/8808)
+- 🌟 Optimize the font family of Chinese quote. [c6fcc31](https://github.com/ant-design/ant-design/commit/c6fcc3121758dfe6ac5b50c1b55790eb42b805c5)
+
 ## 3.1.0
 
+`2017-12-29`
+
+Happy 2018 !~ 2018 2018 2018 coming!~~~
+
 - 🐞 Fix ant-spin-container overflow resizing for Spin component. [#8602](https://github.com/ant-design/ant-design/issues/8602) [@jhsu](https://github.com/jhsu)
 - 🐞 Fix extra padding in Table small with fixed columns. [#8724](https://github.com/ant-design/ant-design/issues/8724)
 - 🐞 Fix Checkbox.Group align issue in Form. [#8739](https://github.com/ant-design/ant-design/issues/8739)
 - 🐞 Fix unexpected scrollbar in Affix. [#8606](https://github.com/ant-design/ant-design/issues/8606)
+- 🐞 Fix List component "No Data" mixed with loading. [#8647](https://github.com/ant-design/ant-design/issues/8647)
 - 🌟 Add onKeyUp TypeScript definition to Input component. [#8705](https://github.com/ant-design/ant-design/issues/8705) [@delesseps](https://github.com/delesseps)
 - 🌟 Add `showArrow` for disabling arrow icon in collapse panel. [#8536](https://github.com/ant-design/ant-design/pull/8536) [@apieceofbart](https://github.com/apieceofbart)
 - 🌟 Rate add `allowClear` for reset when click again. [#8627](https://github.com/ant-design/ant-design/issues/8627)

CHANGELOG.zh-CN.md

@@ -15,12 +15,33 @@ timeline: true
 
 ---
 
+## 3.1.1
+
+`2018-01-08`
+
+- 📖 发布了全新的官网和设计文档。
+- 📖 更新了项目实战文档到 [roadhog 2.0](https://github.com/sorrycc/blog/issues/55)。[5dcf1c0](https://github.com/ant-design/ant-design/commit/5dcf1c015fc2674adb09434bf766549d6f3f0022)
+- 📖 发布了 Ant Design 3.0 的 sketch 模板包。[22dfe88](https://github.com/ant-design/ant-design/commit/22dfe88ab043c1e116382fc96b7d78cabf125054)
+- 🐞 修复 Dropdown 组件的 TypeScript 类型定义中 trigger 属性缺少 contextMenu 事件的问题。[#8646](https://github.com/ant-design/ant-design/issues/8646) [@cjahv](https://github.com/cjahv)
+- 🐞 修复 Button 内使用 HOC 组件时两个中文字符间未添加空格的问题。
+- 🐞 修复 List 组件在 IE 11 下的样式兼容问题。[#8784](https://github.com/ant-design/ant-design/issues/8784)
+- 🐞 修复 Select 组件 notFoundContent 属性不生效的问题。[#8809](https://github.com/ant-design/ant-design/issues/8809)
+- 🐞 修复 BackTop 组件在 React 16 下 target 属性出现警告的问题。[#8848](https://github.com/ant-design/ant-design/issues/8848)
+- 🐞 修复当设置 gutter 后 List 组件出现横向滚动条的问题。[#8799](https://github.com/ant-design/ant-design/issues/8799)
+- 🐞 修复 Anchor.Link 的 href 属性不支持完整链接的问题。[#8808](https://github.com/ant-design/ant-design/issues/8808)
+- 🌟 优化中文引号的字体。[c6fcc31](https://github.com/ant-design/ant-design/commit/c6fcc3121758dfe6ac5b50c1b55790eb42b805c5)
+
 ## 3.1.0
 
+`2017-12-29`
+
+新年快乐！~ 2018年了，00后都成年了！少年赶紧提个 PR 给我们吧！~
+
 - 🐞 修复组件 Spin 可能出现跳动的问题。[#8602](https://github.com/ant-design/ant-design/issues/8602) [@jhsu](https://github.com/jhsu)
 - 🐞 修复 Table 在设置 `size=small` 的情况下出现多余 padding 的问题。[#8724](https://github.com/ant-design/ant-design/issues/8724)
 - 🐞 修复 Checkbox.Group 在 Form 中和 label 的对齐问题。[#8739](https://github.com/ant-design/ant-design/issues/8739)
 - 🐞 修复 Affix 组件出现滚动条的问题。[#8606](https://github.com/ant-design/ant-design/issues/8606)
+- 🐞 修复组件 List "No Data" 和加载动画重叠的问题. [#8647](https://github.com/ant-design/ant-design/issues/8647)
 - 🌟 为 Input 添加 onKeyUp。[#8705](https://github.com/ant-design/ant-design/issues/8705) [@delesseps](https://github.com/delesseps)
 - 🌟 折叠面板 Collapse 添加 `showArrow` 来支持隐藏箭头。[#8536](https://github.com/ant-design/ant-design/pull/8536) [@apieceofbart](https://github.com/apieceofbart)
 - 🌟 评分 Rate 组件添加 `allowClear`，支持再次点击后重置。[#8627](https://github.com/ant-design/ant-design/issues/8627)

components/alert/__tests__/__snapshots__/demo.test.js.snap

@@ -301,7 +301,7 @@ exports[`renders ./components/alert/demo/icon.md correctly 1`] = `
     <span
       class="ant-alert-message"
     >
-      success tips
+      Success Tips
     </span>
     <span
       class="ant-alert-description"

components/alert/demo/icon.md

@@ -23,7 +23,7 @@ ReactDOM.render(
     <Alert message="Warning" type="warning" showIcon />
     <Alert message="Error" type="error" showIcon />
     <Alert
-      message="success tips"
+      message="Success Tips"
       description="Detailed description and advices about successful copywriting."
       type="success"
       showIcon

components/anchor/Anchor.tsx

@@ -42,9 +42,12 @@ function easeInOutCubic(t: number, b: number, c: number, d: number) {
 }
 
 const reqAnimFrame = getRequestAnimationFrame();
+const sharpMatcherRegx = /#([^#]+)$/;
 function scrollTo(href: string, offsetTop = 0, target: () => Window | HTMLElement, callback = () => { }) {
   const scrollTop = getScroll(target(), true);
-  const targetElement = document.getElementById(href.substring(1));
+  const sharpLinkMatch = sharpMatcherRegx.exec(href);
+  if (!sharpLinkMatch) { return; }
+  const targetElement = document.getElementById(sharpLinkMatch[1]);
   if (!targetElement) {
     return;
   }
@@ -172,7 +175,9 @@ export default class Anchor extends React.Component<AnchorProps, any> {
 
     const linkSections: Array<Section> = [];
     this.links.forEach(link => {
-      const target = document.getElementById(link.substring(1));
+      const sharpLinkMatch = sharpMatcherRegx.exec(link.toString());
+      if (!sharpLinkMatch) { return; }
+      const target = document.getElementById(sharpLinkMatch[1]);
       if (target && getOffsetTop(target) < offsetTop + bounds) {
         const top = getOffsetTop(target);
         linkSections.push({

components/anchor/__tests__/Anchor.test.js

@@ -17,4 +17,48 @@ describe('Anchor Render', () => {
     wrapper.instance().handleScroll();
     expect(wrapper.instance().state).not.toBe(null);
   });
+
+  it('Anchor render perfectly for complete href - click', () => {
+    const wrapper = mount(
+      <Anchor>
+        <Link href="http://www.example.com/#API" title="API" />
+      </Anchor>
+    );
+    wrapper.find('a[href="http://www.example.com/#API"]').simulate('click');
+    expect(wrapper.instance().state.activeLink).toBe('http://www.example.com/#API');
+  });
+
+  it('Anchor render perfectly for complete href - scoll', () => {
+    let root = document.getElementById('root');
+    if (!root) {
+      root = document.createElement('div', { id: 'root' });
+      root.id = 'root';
+      document.body.appendChild(root);
+    }
+    mount(<div id="API">Hello</div>, { attachTo: root });
+    const wrapper = mount(
+      <Anchor>
+        <Link href="http://www.example.com/#API" title="API" />
+      </Anchor>
+    );
+    wrapper.instance().handleScroll();
+    expect(wrapper.instance().state.activeLink).toBe('http://www.example.com/#API');
+  });
+
+  it('Anchor render perfectly for complete href - scollTo', () => {
+    let root = document.getElementById('root');
+    if (!root) {
+      root = document.createElement('div', { id: 'root' });
+      root.id = 'root';
+      document.body.appendChild(root);
+    }
+    mount(<div id="API">Hello</div>, { attachTo: root });
+    const wrapper = mount(
+      <Anchor>
+        <Link href="##API" title="API" />
+      </Anchor>
+    );
+    wrapper.instance().handleScrollTo('##API');
+    expect(wrapper.instance().state.activeLink).toBe('##API');
+  });
 });

components/anchor/index.en-US.md

@@ -17,7 +17,7 @@ For displaying anchor hyperlinks on page and jumping between them.
 
 | Property | Description | Type | Default |
 | -------- | ----------- | ---- | ------- |
-| affix | Fixed mode of Anchor | boolean | false |
+| affix | Fixed mode of Anchor | boolean | true |
 | bounds | Bounding distance of anchor area | number | 5(px) |
 | offsetBottom | Pixels to offset from bottom when calculating position of scroll | number | - |
 | offsetTop | Pixels to offset from top when calculating position of scroll | number | 0 |

components/anchor/index.zh-CN.md

@@ -18,7 +18,7 @@ title: Anchor
 
 | 成员 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| affix | 固定模式 | boolean | false |
+| affix | 固定模式 | boolean | true |
 | bounds | 锚点区域边界 | number | 5(px) |
 | offsetBottom | 距离窗口底部达到指定偏移量后触发 | number |  |
 | offsetTop | 距离窗口顶部达到指定偏移量后触发 | number |  |

components/auto-complete/index.en-US.md

@@ -33,7 +33,7 @@ const dataSource = ['12345', '23456', '34567'];
 | optionLabelProp | Which prop value of option will render as content of select. | string | `children` |
 | placeholder | placeholder of input | string | - |
 | value | selected option | string\|string\[]\|{ key: string, label: string\|ReactNode }\|Array<{ key: string, label: string\|ReactNode }> | - |
-| onChange | Called when select an option or input value change, or value of input is changed | function(value, label) | - |
+| onChange | Called when select an option or input value change, or value of input is changed | function(value) | - |
 | onSearch | Called when searching items. | function(value) | - |
 | onSelect | Called when a option is selected. param is option's value and option instance. | function(value, option) | - |
 

components/back-top/index.tsx

@@ -118,6 +118,7 @@ export default class BackTop extends React.Component<BackTopProps, any> {
       'className',
       'children',
       'visibilityHeight',
+      'target',
     ]);
 
     const backTopBtn = this.state.visible ? (

components/button/__tests__/__snapshots__/index.test.js.snap

@@ -1,5 +1,32 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Button fixbug renders {0} , 0 and {false} 1`] = `
+<button
+  class="ant-btn"
+  type="button"
+>
+  0
+</button>
+`;
+
+exports[`Button fixbug renders {0} , 0 and {false} 2`] = `
+<button
+  class="ant-btn"
+  type="button"
+>
+  <span>
+    0
+  </span>
+</button>
+`;
+
+exports[`Button fixbug renders {0} , 0 and {false} 3`] = `
+<button
+  class="ant-btn"
+  type="button"
+/>
+`;
+
 exports[`Button renders Chinese characters correctly 1`] = `
 <button
   class="ant-btn"

components/button/__tests__/index.test.js

@@ -81,4 +81,19 @@ describe('Button', () => {
     );
     expect(wrapper.render()).toMatchSnapshot();
   });
+
+  it('fixbug renders {0} , 0 and {false}', () => {
+    const wrapper = render(
+      <Button>{0}</Button>
+    );
+    expect(wrapper).toMatchSnapshot();
+    const wrapper1 = render(
+      <Button>0</Button>
+    );
+    expect(wrapper1).toMatchSnapshot();
+    const wrapper2 = render(
+      <Button>{false}</Button>
+    );
+    expect(wrapper2).toMatchSnapshot();
+  });
 });

components/button/button.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { findDOMNode } from 'react-dom';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import omit from 'omit.js';
@@ -46,6 +47,7 @@ export interface ButtonProps {
   onClick?: React.FormEventHandler<any>;
   onMouseUp?: React.FormEventHandler<any>;
   onMouseDown?: React.FormEventHandler<any>;
+  tabIndex?: number;
   loading?: boolean | { delay?: number };
   disabled?: boolean;
   style?: React.CSSProperties;
@@ -86,9 +88,20 @@ export default class Button extends React.Component<ButtonProps, any> {
     this.state = {
       loading: props.loading,
       clicked: false,
+      hasTwoCNChar: false,
     };
   }
 
+  componentDidMount() {
+    // Fix for HOC usage like <FormatMessage />
+    const buttonText = (findDOMNode(this) as HTMLElement).innerText;
+    if (this.isNeedInserted() && isTwoCNChar(buttonText)) {
+      this.setState({
+        hasTwoCNChar: true,
+      });
+    }
+  }
+
   componentWillReceiveProps(nextProps: ButtonProps) {
     const currentLoading = this.props.loading;
     const loading = nextProps.loading;
@@ -125,12 +138,18 @@ export default class Button extends React.Component<ButtonProps, any> {
     }
   }
 
+  isNeedInserted() {
+    const { loading, icon, children } = this.props;
+    const iconType = loading ? 'loading' : icon;
+    return React.Children.count(children) === 1 && (!iconType || iconType === 'loading');
+  }
+
   render() {
     const {
       type, shape, size, className, htmlType, children, icon, prefixCls, ghost, ...others,
     } = this.props;
 
-    const { loading, clicked } = this.state;
+    const { loading, clicked, hasTwoCNChar } = this.state;
 
     // large => lg
     // small => sm
@@ -155,12 +174,13 @@ export default class Button extends React.Component<ButtonProps, any> {
       [`${prefixCls}-loading`]: loading,
       [`${prefixCls}-clicked`]: clicked,
       [`${prefixCls}-background-ghost`]: ghost,
+      [`${prefixCls}-two-chinese-chars`]: hasTwoCNChar,
     });
 
     const iconType = loading ? 'loading' : icon;
     const iconNode = iconType ? <Icon type={iconType} /> : null;
-    const needInserted = React.Children.count(children) === 1 && (!iconType || iconType === 'loading');
-    const kids = children ? React.Children.map(children, child => insertSpace(child, needInserted)) : null;
+    const kids = (children || children === 0)
+      ? React.Children.map(children, child => insertSpace(child, this.isNeedInserted())) : null;
 
     return (
       <ComponentProp

components/button/style/index.less

@@ -12,7 +12,7 @@
 // Button styles
 // -----------------------------
 .@{btn-prefix-cls} {
-  .reset-component;
+  line-height: @line-height-base;
   .btn;
   .btn-default;
 
@@ -162,6 +162,15 @@
   &-background-ghost&-danger {
     .button-variant-ghost(@btn-danger-color);
   }
+
+  &-two-chinese-chars:first-letter {
+    letter-spacing: .34em;
+  }
+
+  &-two-chinese-chars > * {
+    letter-spacing: .34em;
+    margin-right: -.34em;
+  }
 }
 
 @keyframes buttonEffect {

components/button/style/mixin.less

@@ -139,7 +139,6 @@
 // --------------------------------------------------
 .btn() {
   display: inline-block;
-  margin-bottom: 0;
   font-weight: @btn-font-weight;
   text-align: center;
   touch-action: manipulation;

components/card/style/index.less

@@ -3,6 +3,7 @@
 
 @card-prefix-cls: ~"@{ant-prefix}-card";
 @card-head-height: 48px;
+@card-hover-border: rgba(0, 0, 0, 0.09);
 
 .@{card-prefix-cls} {
   .reset-component;
@@ -15,7 +16,7 @@
     cursor: pointer;
     &:hover {
       box-shadow: @card-shadow;
-      border-color: rgba(0, 0, 0, 0.09);
+      border-color: @card-hover-border;
     }
   }
 

components/checkbox/Checkbox.tsx

@@ -16,6 +16,7 @@ export interface AbstractCheckboxProps {
   onMouseEnter?: React.MouseEventHandler<any>;
   onMouseLeave?: React.MouseEventHandler<any>;
   value?: any;
+  tabIndex?: number;
   name?: string;
   children?: React.ReactNode;
 }

components/date-picker/demo/disabled-date.md

@@ -28,7 +28,7 @@ function range(start, end) {
 
 function disabledDate(current) {
   // Can not select days before today and today
-  return current && current.valueOf() < Date.now();
+  return current && current < moment().endOf('day');
 }
 
 function disabledDateTime() {

components/date-picker/index.tsx

@@ -69,11 +69,13 @@ export interface RangePickerProps extends PickerProps {
     [range: string]: moment.Moment[],
   };
   placeholder?: [string, string];
+  mode?: string | string[];
   disabledTime?: (current: moment.Moment, type: string) => {
     disabledHours?: () => number[],
     disabledMinutes?: () => number[],
     disabledSeconds?: () => number[],
   };
+  onPanelChange?: (value?: moment.Moment[], mode?: string | string[]) => void;
 }
 
 export interface WeexPickerProps extends PickerProps, SinglePickerProps {

components/dropdown/dropdown.tsx

@@ -5,7 +5,7 @@ import DropdownButton from './dropdown-button';
 import warning from '../_util/warning';
 
 export interface DropDownProps {
-  trigger?: ('click' | 'hover')[];
+  trigger?: ('click' | 'hover'| 'contextMenu')[];
   overlay: React.ReactNode;
   onVisibleChange?: (visible?: boolean) => void;
   visible?: boolean;

components/dropdown/index.en-US.md

@@ -20,7 +20,7 @@ If there are too many operations to display, you can wrap them in a `Dropdown`.
 | getPopupContainer | to set the container of the dropdown menu. The default is to create a `div` element in `body`, you can reset it to the scrolling area and make a relative reposition. [example](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | Function(triggerNode) | `() => document.body` |
 | overlay | the dropdown menu | [Menu](/components/menu) | - |
 | placement | placement of pop menu: `bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` |
-| trigger | the trigger mode which executes the drop-down action | Array<`click`\|`hover`\|`contentMenu`> | `['hover']` |
+| trigger | the trigger mode which executes the drop-down action | Array<`click`\|`hover`\|`contextMenu`> | `['hover']` |
 | visible | whether the dropdown menu is visible | boolean | - |
 | onVisibleChange | a callback function takes an argument: `visible`, is executed when the visible state is changed | Function(visible) | - |
 

components/dropdown/index.zh-CN.md

@@ -21,7 +21,7 @@ title: Dropdown
 | getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | Function(triggerNode) | `() => document.body` |
 | overlay | 菜单 | [Menu](/components/menu) | - |
 | placement | 菜单弹出位置：`bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` |
-| trigger | 触发下拉的行为 | Array<`click`\|`hover`\|`contentMenu`> | `['hover']` |
+| trigger | 触发下拉的行为 | Array<`click`\|`hover`\|`contextMenu`> | `['hover']` |
 | visible | 菜单是否显示 | boolean | - |
 | onVisibleChange | 菜单显示状态改变时调用，参数为 visible | Function(visible) | - |
 
@@ -39,7 +39,7 @@ title: Dropdown
 | overlay | 菜单 | [Menu](/components/menu/) | - |
 | placement | 菜单弹出位置：`bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` |
 | size | 按钮大小，和 [Button](/components/button/) 一致 | string | 'default' |
-| trigger | 触发下拉的行为 | Array<`click`\|`hover`\|`contentMenu`> | `['hover']` |
+| trigger | 触发下拉的行为 | Array<`click`\|`hover`\|`contextMenu`> | `['hover']` |
 | type | 按钮类型，和 [Button](/components/button/) 一致 | string | 'default' |
 | visible | 菜单是否显示 | boolean | - |
 | onClick | 点击左侧按钮的回调，和 [Button](/components/button/) 一致 | Function | - |

components/form/Form.tsx

@@ -85,15 +85,17 @@ export type WrappedFormUtils = {
   /** 设置一组输入控件的值*/
   setFields(obj: Object): void;
   /** 校验并获取一组输入域的值与 Error */
-  validateFields(fieldNames: Array<string>, options: Object, callback: ValidateCallback): any;
-  validateFields(fieldNames: Array<string>, callback: ValidateCallback): any;
-  validateFields(options: Object, callback: ValidateCallback): any;
-  validateFields(callback: ValidateCallback): any;
+  validateFields(fieldNames: Array<string>, options: Object, callback: ValidateCallback): void;
+  validateFields(fieldNames: Array<string>, callback: ValidateCallback): void;
+  validateFields(options: Object, callback: ValidateCallback): void;
+  validateFields(callback: ValidateCallback): void;
+  validateFields(): void;
   /** 与 `validateFields` 相似，但校验完后，如果校验不通过的菜单域不在可见范围内，则自动滚动进可见范围 */
   validateFieldsAndScroll(fieldNames?: Array<string>, options?: Object, callback?: ValidateCallback): void;
   validateFieldsAndScroll(fieldNames?: Array<string>, callback?: ValidateCallback): void;
   validateFieldsAndScroll(options?: Object, callback?: ValidateCallback): void;
   validateFieldsAndScroll(callback?: ValidateCallback): void;
+  validateFieldsAndScroll(): void;
   /** 获取某个输入控件的 Error */
   getFieldError(name: string): Object[];
   getFieldsError(names?: Array<string>): Object;

components/form/FormItem.tsx

@@ -174,9 +174,9 @@ export default class FormItem extends React.Component<FormItemProps, any> {
       this.getValidateStatus() :
       props.validateStatus;
 
-    let classes = '';
+    let classes = `${this.props.prefixCls}-item-control`;
     if (validateStatus) {
-      classes = classNames({
+      classes = classNames(`${this.props.prefixCls}-item-control`, {
         'has-feedback': props.hasFeedback || validateStatus === 'validating',
         'has-success': validateStatus === 'success',
         'has-warning': validateStatus === 'warning',
@@ -185,7 +185,7 @@ export default class FormItem extends React.Component<FormItemProps, any> {
       });
     }
     return (
-      <div className={`${this.props.prefixCls}-item-control ${classes}`}>
+      <div className={classes}>
         {c1}{c2}{c3}
       </div>
     );

components/form/__tests__/__snapshots__/demo.test.js.snap

@@ -31,7 +31,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
             class="ant-form-item-control-wrapper"
           >
             <div
-              class="ant-form-item-control "
+              class="ant-form-item-control"
             >
               <input
                 class="ant-input"
@@ -68,7 +68,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
             class="ant-form-item-control-wrapper"
           >
             <div
-              class="ant-form-item-control "
+              class="ant-form-item-control"
             >
               <input
                 class="ant-input"
@@ -105,7 +105,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
             class="ant-form-item-control-wrapper"
           >
             <div
-              class="ant-form-item-control "
+              class="ant-form-item-control"
             >
               <input
                 class="ant-input"
@@ -142,7 +142,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
             class="ant-form-item-control-wrapper"
           >
             <div
-              class="ant-form-item-control "
+              class="ant-form-item-control"
             >
               <input
                 class="ant-input"
@@ -179,7 +179,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
             class="ant-form-item-control-wrapper"
           >
             <div
-              class="ant-form-item-control "
+              class="ant-form-item-control"
             >
               <input
                 class="ant-input"
@@ -216,7 +216,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
             class="ant-form-item-control-wrapper"
           >
             <div
-              class="ant-form-item-control "
+              class="ant-form-item-control"
             >
               <input
                 class="ant-input"
@@ -253,7 +253,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
             class="ant-form-item-control-wrapper"
           >
             <div
-              class="ant-form-item-control "
+              class="ant-form-item-control"
             >
               <input
                 class="ant-input"
@@ -290,7 +290,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
             class="ant-form-item-control-wrapper"
           >
             <div
-              class="ant-form-item-control "
+              class="ant-form-item-control"
             >
               <input
                 class="ant-input"
@@ -327,7 +327,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
             class="ant-form-item-control-wrapper"
           >
             <div
-              class="ant-form-item-control "
+              class="ant-form-item-control"
             >
               <input
                 class="ant-input"
@@ -364,7 +364,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
             class="ant-form-item-control-wrapper"
           >
             <div
-              class="ant-form-item-control "
+              class="ant-form-item-control"
             >
               <input
                 class="ant-input"
@@ -445,7 +445,7 @@ exports[`renders ./components/form/demo/coordinated.md correctly 1`] = `
       class="ant-col-12 ant-form-item-control-wrapper"
     >
       <div
-        class="ant-form-item-control "
+        class="ant-form-item-control"
       >
         <input
           class="ant-input"
@@ -476,7 +476,7 @@ exports[`renders ./components/form/demo/coordinated.md correctly 1`] = `
       class="ant-col-12 ant-form-item-control-wrapper"
     >
       <div
-        class="ant-form-item-control "
+        class="ant-form-item-control"
       >
         <div
           class="ant-select ant-select-enabled"
@@ -520,7 +520,7 @@ exports[`renders ./components/form/demo/coordinated.md correctly 1`] = `
       class="ant-col-12 ant-col-offset-5 ant-form-item-control-wrapper"
     >
       <div
-        class="ant-form-item-control "
+        class="ant-form-item-control"
       >
         <button
           class="ant-btn ant-btn-primary"
@@ -611,7 +611,7 @@ exports[`renders ./components/form/demo/customized-form-controls.md correctly 1`
       class="ant-form-item-control-wrapper"
     >
       <div
-        class="ant-form-item-control "
+        class="ant-form-item-control"
       >
         <button
           class="ant-btn ant-btn-primary"
@@ -638,7 +638,7 @@ exports[`renders ./components/form/demo/dynamic-form-item.md correctly 1`] = `
       class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-20 ant-col-sm-offset-4"
     >
       <div
-        class="ant-form-item-control "
+        class="ant-form-item-control"
       >
         <button
           class="ant-btn ant-btn-dashed"
@@ -662,7 +662,7 @@ exports[`renders ./components/form/demo/dynamic-form-item.md correctly 1`] = `
       class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-20 ant-col-sm-offset-4"
     >
       <div
-        class="ant-form-item-control "
+        class="ant-form-item-control"
       >
         <button
           class="ant-btn ant-btn-primary"
@@ -698,7 +698,7 @@ exports[`renders ./components/form/demo/dynamic-rule.md correctly 1`] = `
       class="ant-col-8 ant-form-item-control-wrapper"
     >
       <div
-        class="ant-form-item-control "
+        class="ant-form-item-control"
       >
         <input
           class="ant-input"
@@ -730,7 +730,7 @@ exports[`renders ./components/form/demo/dynamic-rule.md correctly 1`] = `
       class="ant-col-8 ant-form-item-control-wrapper"
     >
       <div
-        class="ant-form-item-control "
+        class="ant-form-item-control"
       >
         <input
           class="ant-input"
@@ -751,7 +751,7 @@ exports[`renders ./components/form/demo/dynamic-rule.md correctly 1`] = `
       class="ant-col-8 ant-col-offset-4 ant-form-item-control-wrapper"
     >
       <div
-        class="ant-form-item-control "
+        class="ant-form-item-control"
       >
         <label
           class="ant-checkbox-wrapper"
@@ -781,7 +781,7 @@ exports[`renders ./components/form/demo/dynamic-rule.md correctly 1`] = `
       class="ant-col-8 ant-col-offset-4 ant-form-item-control-wrapper"
     >
       <div
-        class="ant-form-item-control "
+        class="ant-form-item-control"
       >
         <button
           class="ant-btn ant-btn-primary"
@@ -870,7 +870,7 @@ exports[`renders ./components/form/demo/horizontal-login.md correctly 1`] = `
       class="ant-form-item-control-wrapper"
     >
       <div
-        class="ant-form-item-control "
+        class="ant-form-item-control"
       >
         <span
           class="ant-input-affix-wrapper"
@@ -903,7 +903,7 @@ exports[`renders ./components/form/demo/horizontal-login.md correctly 1`] = `
       class="ant-form-item-control-wrapper"
     >
       <div
-        class="ant-form-item-control "
+        class="ant-form-item-control"
       >
         <span
           class="ant-input-affix-wrapper"
@@ -936,7 +936,7 @@ exports[`renders ./components/form/demo/horizontal-login.md correctly 1`] = `
       class="ant-form-item-control-wrapper"
     >
       <div
-        class="ant-form-item-control "
+        class="ant-form-item-control"
       >
         <button
           class="ant-btn ant-btn-primary"
@@ -974,7 +974,7 @@ exports[`renders ./components/form/demo/layout.md correctly 1`] = `
         class="ant-col-14 ant-form-item-control-wrapper"
       >
         <div
-          class="ant-form-item-control "
+          class="ant-form-item-control"
         >
           <div
             class="ant-radio-group"
@@ -1055,7 +1055,7 @@ exports[`renders ./components/form/demo/layout.md correctly 1`] = `
         class="ant-col-14 ant-form-item-control-wrapper"
       >
         <div
-          class="ant-form-item-control "
+          class="ant-form-item-control"
         >
           <input
             class="ant-input"
@@ -1082,7 +1082,7 @@ exports[`renders ./components/form/demo/layout.md correctly 1`] = `
         class="ant-col-14 ant-form-item-control-wrapper"
       >
         <div
-          class="ant-form-item-control "
+          class="ant-form-item-control"
         >
           <input
             class="ant-input"
@@ -1099,7 +1099,7 @@ exports[`renders ./components/form/demo/layout.md correctly 1`] = `
         class="ant-col-14 ant-col-offset-4 ant-form-item-control-wrapper"
       >
         <div
-          class="ant-form-item-control "
+          class="ant-form-item-control"
         >
           <button
             class="ant-btn ant-btn-primary"
@@ -1127,7 +1127,7 @@ exports[`renders ./components/form/demo/normal-login.md correctly 1`] = `
       class="ant-form-item-control-wrapper"
     >
       <div
-        class="ant-form-item-control "
+        class="ant-form-item-control"
       >
         <span
           class="ant-input-affix-wrapper"
@@ -1160,7 +1160,7 @@ exports[`renders ./components/form/demo/normal-login.md correctly 1`] = `
       class="ant-form-item-control-wrapper"
     >
       <div
-        class="ant-form-item-control "
+        class="ant-form-item-control"
       >
         <span
           class="ant-input-affix-wrapper"
@@ -1264,7 +1264,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
       class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-16"
     >
       <div
-        class="ant-form-item-control "
+        class="ant-form-item-control"
       >
         <input
           class="ant-input"
@@ -1295,7 +1295,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
       class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-16"
     >
       <div
-        class="ant-form-item-control "
+        class="ant-form-item-control"
       >
         <input
           class="ant-input"
@@ -1326,7 +1326,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
       class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-16"
     >
       <div
-        class="ant-form-item-control "
+        class="ant-form-item-control"
       >
         <input
           class="ant-input"
@@ -1362,7 +1362,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
       class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-16"
     >
       <div
-        class="ant-form-item-control "
+        class="ant-form-item-control"
       >
         <input
           class="ant-input"
@@ -1442,7 +1442,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
       class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-16"
     >
       <div
-        class="ant-form-item-control "
+        class="ant-form-item-control"
       >
         <span
           class="ant-input-group-wrapper"
@@ -1519,7 +1519,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
       class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-16"
     >
       <div
-        class="ant-form-item-control "
+        class="ant-form-item-control"
       >
         <div
           class="ant-select-show-search ant-select-auto-complete ant-select ant-select-combobox ant-select-enabled"
@@ -1593,7 +1593,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
       class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-16"
     >
       <div
-        class="ant-form-item-control "
+        class="ant-form-item-control"
       >
         <div
           class="ant-row"
@@ -1641,7 +1641,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
       class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-16 ant-col-sm-offset-8"
     >
       <div
-        class="ant-form-item-control "
+        class="ant-form-item-control"
       >
         <label
           class="ant-checkbox-wrapper"
@@ -1678,7 +1678,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
       class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-16 ant-col-sm-offset-8"
     >
       <div
-        class="ant-form-item-control "
+        class="ant-form-item-control"
       >
         <button
           class="ant-btn ant-btn-primary"
@@ -1716,7 +1716,7 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] =
       class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-16"
     >
       <div
-        class="ant-form-item-control "
+        class="ant-form-item-control"
       >
         <span
           class="ant-calendar-picker"
@@ -1754,7 +1754,7 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] =
       class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-16"
     >
       <div
-        class="ant-form-item-control "
+        class="ant-form-item-control"
       >
         <span
           class="ant-calendar-picker"
@@ -1792,7 +1792,7 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] =
       class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-16"
     >
       <div
-        class="ant-form-item-control "
+        class="ant-form-item-control"
       >
         <span
           class="ant-calendar-picker"
@@ -1830,7 +1830,7 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] =
       class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-16"
     >
       <div
-        class="ant-form-item-control "
+        class="ant-form-item-control"
       >
         <span
           class="ant-calendar-picker"
@@ -1884,7 +1884,7 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] =
       class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-16"
     >
       <div
-        class="ant-form-item-control "
+        class="ant-form-item-control"
       >
         <span
           class="ant-calendar-picker"
@@ -1939,7 +1939,7 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] =
       class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-16"
     >
       <div
-        class="ant-form-item-control "
+        class="ant-form-item-control"
       >
         <span
           class="ant-time-picker "
@@ -1964,7 +1964,7 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] =
       class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-16 ant-col-sm-offset-8"
     >
       <div
-        class="ant-form-item-control "
+        class="ant-form-item-control"
       >
         <button
           class="ant-btn ant-btn-primary"
@@ -2001,7 +2001,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
       class="ant-col-14 ant-form-item-control-wrapper"
     >
       <div
-        class="ant-form-item-control "
+        class="ant-form-item-control"
       >
         <span
           class="ant-form-text"
@@ -2029,7 +2029,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
       class="ant-col-14 ant-form-item-control-wrapper"
     >
       <div
-        class="ant-form-item-control "
+        class="ant-form-item-control"
       >
         <div
           class="ant-select ant-select-enabled"
@@ -2084,7 +2084,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
       class="ant-col-14 ant-form-item-control-wrapper"
     >
       <div
-        class="ant-form-item-control "
+        class="ant-form-item-control"
       >
         <div
           class="ant-select ant-select-enabled"
@@ -2229,7 +2229,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
       class="ant-col-14 ant-form-item-control-wrapper"
     >
       <div
-        class="ant-form-item-control "
+        class="ant-form-item-control"
       >
         <span
           class="ant-switch"
@@ -2263,7 +2263,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
       class="ant-col-14 ant-form-item-control-wrapper"
     >
       <div
-        class="ant-form-item-control "
+        class="ant-form-item-control"
       >
         <div
           class="ant-slider ant-slider-with-marks"
@@ -2375,7 +2375,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
       class="ant-col-14 ant-form-item-control-wrapper"
     >
       <div
-        class="ant-form-item-control "
+        class="ant-form-item-control"
       >
         <div
           class="ant-radio-group"
@@ -2457,7 +2457,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
       class="ant-col-14 ant-form-item-control-wrapper"
     >
       <div
-        class="ant-form-item-control "
+        class="ant-form-item-control"
       >
         <div
           class="ant-radio-group"
@@ -2657,7 +2657,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
       class="ant-col-14 ant-form-item-control-wrapper"
     >
       <div
-        class="ant-form-item-control "
+        class="ant-form-item-control"
       >
         <span
           class=""
@@ -2696,7 +2696,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
       class="ant-col-14 ant-form-item-control-wrapper"
     >
       <div
-        class="ant-form-item-control "
+        class="ant-form-item-control"
       >
         <div
           class="dropbox"
@@ -2722,7 +2722,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
       class="ant-col-12 ant-col-offset-6 ant-form-item-control-wrapper"
     >
       <div
-        class="ant-form-item-control "
+        class="ant-form-item-control"
       >
         <button
           class="ant-btn ant-btn-primary"
@@ -3118,7 +3118,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
       class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-12"
     >
       <div
-        class="ant-form-item-control "
+        class="ant-form-item-control"
       >
         <div
           class="ant-col-11"
@@ -3175,7 +3175,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
               class="ant-form-item-control-wrapper"
             >
               <div
-                class="ant-form-item-control "
+                class="ant-form-item-control"
               >
                 <span
                   class="ant-calendar-picker"
@@ -3291,7 +3291,7 @@ exports[`renders ./components/form/demo/without-form-create.md correctly 1`] = `
       class="ant-col-12 ant-form-item-control-wrapper"
     >
       <div
-        class="ant-form-item-control "
+        class="ant-form-item-control"
       >
         <div
           class="ant-input-number"

components/form/style/index.less

@@ -85,9 +85,6 @@ input[type="checkbox"] {
     line-height: @form-component-max-height - 0.0001px; // https://github.com/ant-design/ant-design/issues/8220
     position: relative;
     .clearfix;
-    > * {
-      font-size: @font-size-base;
-    }
   }
 
   &-with-help {
@@ -253,16 +250,9 @@ form {
 
   // fix input with addon position. https://github.com/ant-design/ant-design/issues/8243
   .@{ant-prefix}-input-group-wrapper {
+    vertical-align: middle;
     position: relative;
-    top: (@form-component-max-height - @input-height-base) / 2;
-
-    &.@{ant-prefix}-input-group-wrapper-lg {
-      top: (@form-component-max-height - @input-height-lg) / 2;
-    }
-
-    &.@{ant-prefix}-input-group-wrapper-sm {
-      top: (@form-component-max-height - @input-height-sm) / 2;
-    }
+    top: -1px;
   }
 }
 
@@ -325,6 +315,20 @@ form {
   .make-vertical-layout-label();
 }
 
+.@{form-prefix-cls}-vertical {
+  .@{form-prefix-cls}-item {
+    padding-bottom: 8px;
+  }
+  .@{form-prefix-cls}-item-control {
+    line-height: @line-height-base;
+  }
+  .@{form-prefix-cls}-explain,
+  .@{form-prefix-cls}-extra {
+    margin-top: 2px;
+    margin-bottom: -4px;
+  }
+}
+
 @media (max-width: @screen-xs-max) {
   .make-vertical-layout();
   .@{ant-prefix}-col-xs-24.@{form-prefix-cls}-item-label {

components/input-number/index.tsx

@@ -9,6 +9,7 @@ export interface InputNumberProps {
   value?: number;
   step?: number | string;
   defaultValue?: number;
+  tabIndex?: number;
   onKeyDown?: React.FormEventHandler<any>;
   onChange?: (value: number | string | undefined) => void;
   disabled?: boolean;

components/input/Input.tsx

@@ -18,6 +18,7 @@ export interface AbstractInputProps {
   className?: string;
   defaultValue?: any;
   value?: any;
+  tabIndex?: number;
   style?: React.CSSProperties;
 }
 

components/input/__tests__/__snapshots__/demo.test.js.snap

@@ -484,7 +484,7 @@ exports[`renders ./components/input/demo/group.md correctly 1`] = `
       class="ant-input ant-input-disabled"
       disabled=""
       placeholder="~"
-      style="width:24px;border-left:0;pointer-events:none;background-color:#fff"
+      style="width:30px;border-left:0;pointer-events:none;background-color:#fff"
       type="text"
     />
     <input

components/input/demo/group.md

@@ -115,7 +115,7 @@ class CompactDemo extends React.Component {
             <Option value="2">Except</Option>
           </Select>
           <Input style={{ width: 100, textAlign: 'center' }} placeholder="Minimum" />
-          <Input style={{ width: 24, borderLeft: 0, pointerEvents: 'none', backgroundColor: '#fff' }} placeholder="~" disabled />
+          <Input style={{ width: 30, borderLeft: 0, pointerEvents: 'none', backgroundColor: '#fff' }} placeholder="~" disabled />
           <Input style={{ width: 100, textAlign: 'center', borderLeft: 0 }} placeholder="Maximum" />
         </InputGroup>
         <br />

components/input/style/index.tsx

@@ -1,2 +1,5 @@
 import '../../style/index.less';
 import './index.less';
+
+// style dependencies
+import '../../button/style';

components/list/style/index.less

@@ -39,9 +39,9 @@
     &-meta {
       align-items: flex-start;
       display: flex;
+      flex: 1;
       font-size: 0;
       &-avatar {
-        flex: 0;
         margin-right: 16px;
       }
       &-content {
@@ -107,9 +107,6 @@
       display: flex;
       flex: 1;
     }
-    &-extra {
-      flex: 0;
-    }
   }
 
   &-header,
@@ -165,7 +162,6 @@
     }
     &-extra {
       margin-left: 58px;
-      flex: 0;
     }
     &-meta {
       margin-bottom: 16px;

components/modal/index.en-US.md

@@ -60,6 +60,7 @@ The properties of the object are follows:
 | Property | Description | Type | Default |
 | -------- | ----------- | ---- | ------- |
 | cancelText | Text of the Cancel button | string | `Cancel` |
+| className | className of container | string | - |
 | content | Content | string\|ReactNode | - |
 | iconType | Icon `type` of the Icon component | string | `question-circle` |
 | maskClosable | Whether to close the modal dialog when the mask (area outside the modal) is clicked | Boolean | `false` |

components/modal/index.zh-CN.md

@@ -58,6 +58,7 @@ title: Modal
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | cancelText | 取消按钮文字 | string | 取消 |
+| className | 容器类名 | string | - |
 | content | 内容 | string\|ReactNode | 无 |
 | iconType | 图标 Icon 类型 | string | question-circle |
 | maskClosable | 点击蒙层是否允许关闭 | Boolean | `false` |

components/pagination/style/index.less

@@ -27,7 +27,7 @@
     display: inline-block;
     vertical-align: middle;
     height: @pagination-item-size;
-    line-height: @pagination-item-size;
+    line-height: @pagination-item-size - 2px;
     margin-right: 8px;
   }
 
@@ -37,7 +37,7 @@
     user-select: none;
     min-width: @pagination-item-size;
     height: @pagination-item-size;
-    line-height: @pagination-item-size;
+    line-height: @pagination-item-size - 2px;
     text-align: center;
     list-style: none;
     display: inline-block;
@@ -290,7 +290,7 @@
     margin: 0;
     min-width: @pagination-item-size-sm;
     height: @pagination-item-size-sm;
-    line-height: @pagination-item-size-sm;
+    line-height: @pagination-item-size-sm - 2px;
   }
 
   &.mini &-item:not(&-item-active) {

components/radio/style/index.less

@@ -147,6 +147,9 @@ span.@{radio-prefix-cls} + * {
   cursor: pointer;
   border: @border-width-base @border-style-base @border-color-base;
   border-left: 0;
+  // strange align fix for chrome but works
+  // https://gw.alipayobjects.com/zos/rmsportal/VFTfKXJuogBAXcvfAUWJ.gif
+  border-top-width: @border-width-base + 0.02px;
   background: @radio-button-bg;
   padding: 0 @padding-md - 1px;
   position: relative;

components/select/__tests__/index.test.js

@@ -1,6 +1,58 @@
+import React from 'react';
+import { mount } from 'enzyme';
 import Select from '..';
 import focusTest from '../../../tests/shared/focusTest';
 
 describe('Select', () => {
   focusTest(Select);
+
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  it('should have default notFoundContent', () => {
+    const wrapper = mount(
+      <Select mode="multiple" />
+    );
+    wrapper.find('.ant-select').simulate('click');
+    jest.runAllTimers();
+    const dropdownWrapper = mount(wrapper.find('Trigger').instance().getComponent());
+    expect(dropdownWrapper.find('MenuItem').length).toBe(1);
+    expect(dropdownWrapper.find('MenuItem').at(0).text()).toBe('Not Found');
+  });
+
+  it('should support set notFoundContent to null', () => {
+    const wrapper = mount(
+      <Select mode="multiple" notFoundContent={null} />
+    );
+    wrapper.find('.ant-select').simulate('click');
+    jest.runAllTimers();
+    const dropdownWrapper = mount(wrapper.find('Trigger').instance().getComponent());
+    expect(dropdownWrapper.find('MenuItem').length).toBe(0);
+  });
+
+  it('should not have default notFoundContent when mode is combobox', () => {
+    const wrapper = mount(
+      <Select mode="combobox" />
+    );
+    wrapper.find('.ant-select').simulate('click');
+    jest.runAllTimers();
+    const dropdownWrapper = mount(wrapper.find('Trigger').instance().getComponent());
+    expect(dropdownWrapper.find('MenuItem').length).toBe(0);
+  });
+
+  it('should not have notFoundContent when mode is combobox and notFoundContent is set', () => {
+    const wrapper = mount(
+      <Select mode="combobox" notFoundContent="not at all" />
+    );
+    wrapper.find('.ant-select').simulate('click');
+    jest.runAllTimers();
+    const dropdownWrapper = mount(wrapper.find('Trigger').instance().getComponent());
+    expect(dropdownWrapper.find('MenuItem').length).toBe(1);
+    expect(dropdownWrapper.find('MenuItem').at(0).text()).toBe('not at all');
+  });
 });

components/select/index.en-US.md

@@ -26,14 +26,14 @@ Select component to select value from options.
 | allowClear | Show clear button. | boolean | false |
 | autoFocus | Get focus by default | boolean | false |
 | defaultActiveFirstOption | Whether active first option by default | boolean | true |
-| defaultValue | Initial selected option. | string\|string\[] | - |
+| defaultValue | Initial selected option. | string\|number\|string\[]\|number\[] | - |
 | disabled | Whether disabled select | boolean | false |
 | dropdownClassName | className of dropdown menu | string | - |
 | dropdownMatchSelectWidth | Whether dropdown's with is same with select. | boolean | true |
 | dropdownStyle | style of dropdown menu | object | - |
 | filterOption | If true, filter options by input, if function, filter options against it. The function will receive two arguments, `inputValue` and `option`, if the function returns `true`, the option will be included in the filtered set; Otherwise, it will be excluded. | boolean or function(inputValue, option) | true |
 | firstActiveValue | Value of action option by default | string\|string\[] | - |
-| getPopupContainer | Parent Node which the selector should be rendered to. Default to `body`. When position issues happen, try to modify it into scrollable content and position it relative. [Example](https://codesandbox.io/s/4j168r7jw01) | function(triggerNode) | () => document.body |
+| getPopupContainer | Parent Node which the selector should be rendered to. Default to `body`. When position issues happen, try to modify it into scrollable content and position it relative. [Example](https://codesandbox.io/s/4j168r7jw0) | function(triggerNode) | () => document.body |
 | labelInValue | whether to embed label in value, turn the format of value from `string` to `{key: string, label: ReactNode}` | boolean | false |
 | maxTagCount | Max tag count to show | number | - |
 | maxTagPlaceholder | Placeholder for not showing tags | ReactNode/function(omittedValues) | - |
@@ -45,7 +45,7 @@ Select component to select value from options.
 | showSearch | Whether show search input in single mode. | boolean | false |
 | size | Size of Select input. `default` `large` `small` | string | default |
 | tokenSeparators | Separator used to tokenize on tag/multiple mode | string\[] |  |
-| value | Current selected option. | string\|string\[] | - |
+| value | Current selected option. | string\|number\|string\[]\|number\[] | - |
 | onBlur | Called when blur | function | - |
 | onChange | Called when select an option or input value change, or value of input is changed in combobox mode | function(value, label) | - |
 | onDeselect | Called when a option is deselected, the params are option's value (or key) . only called for multiple or tags, effective in multiple or tags mode only. | function(value) | - |
@@ -71,7 +71,7 @@ Select component to select value from options.
 | disabled | Disable this option | boolean | false |
 | key | Same usage as `value`. If React request you to set this property, you can set it to value of option, and then omit value property. | string |  |
 | title | `title` of Select after select this Option | string | - |
-| value | default to filter with this property | string | - |
+| value | default to filter with this property | string\|number | - |
 
 ### OptGroup props
 

components/select/index.tsx

@@ -43,6 +43,8 @@ export interface SelectProps extends AbstractSelectProps {
   onBlur?: () => any;
   onFocus?: () => any;
   onInputKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+  maxTagCount?: number;
+  maxTagPlaceholder?: React.ReactNode | ((omittedValues: SelectValue[]) => React.ReactNode);
   dropdownMatchSelectWidth?: boolean;
   optionFilterProp?: string;
   labelInValue?: boolean;
@@ -109,6 +111,16 @@ export default class Select extends React.Component<SelectProps, {}> {
     this.rcSelect = node;
   }
 
+  getNotFoundContent(locale: SelectLocale) {
+    const { notFoundContent, mode } = this.props;
+    const isCombobox = mode === 'combobox';
+    if (isCombobox) {
+      // AutoComplete don't have notFoundContent defaultly
+      return notFoundContent === undefined ? null : notFoundContent;
+    }
+    return notFoundContent === undefined ? locale.notFoundContent : notFoundContent;
+  }
+
   renderSelect = (locale: SelectLocale) => {
     const {
       prefixCls,
@@ -122,7 +134,7 @@ export default class Select extends React.Component<SelectProps, {}> {
       [`${prefixCls}-sm`]: size === 'small',
     }, className);
 
-    let { notFoundContent, optionLabelProp } = this.props;
+    let { optionLabelProp } = this.props;
     const isCombobox = mode === 'combobox';
     if (isCombobox) {
       // children 带 dom 结构时，无法填入输入框
@@ -135,9 +147,6 @@ export default class Select extends React.Component<SelectProps, {}> {
       combobox: isCombobox,
     };
 
-    // AutoComplete don't have notFoundContent defaultly
-    const notFoundContentLocale = isCombobox ?
-      (notFoundContent || '') : (notFoundContent || locale.notFoundContent);
     return (
       <RcSelect
         {...restProps}
@@ -145,7 +154,7 @@ export default class Select extends React.Component<SelectProps, {}> {
         prefixCls={prefixCls}
         className={cls}
         optionLabelProp={optionLabelProp || 'children'}
-        notFoundContent={notFoundContentLocale}
+        notFoundContent={this.getNotFoundContent(locale)}
         ref={this.saveSelect}
       />
     );

components/select/index.zh-CN.md

@@ -28,7 +28,7 @@ title: Select
 | autoFocus | 默认获取焦点 | boolean | false |
 | combobox | 输入框自动提示模式（2.9 之后废弃，请使用 `mode`） | boolean | false |
 | defaultActiveFirstOption | 是否默认高亮第一个选项。 | boolean | true |
-| defaultValue | 指定默认选中的条目 | string\|string\[] | - |
+| defaultValue | 指定默认选中的条目 | string\|string\[]\|number\|number\[] | - |
 | disabled | 是否禁用 | boolean | false |
 | dropdownClassName | 下拉菜单的 className 属性 | string | - |
 | dropdownMatchSelectWidth | 下拉菜单和选择器同宽 | boolean | true |
@@ -49,7 +49,7 @@ title: Select
 | size | 选择框大小，可选 `large` `small` | string | default |
 | tags | 可以把随意输入的条目作为 tag，输入项不需要与下拉选项匹配（2.9 之后废弃，请使用 `mode`） | boolean | false |
 | tokenSeparators | 在 tags 和 multiple 模式下自动分词的分隔符 | string\[] |  |
-| value | 指定当前选中的条目 | string\|string\[] | - |
+| value | 指定当前选中的条目 | string\|string\[]\|number\|number\[] | - |
 | onBlur | 失去焦点的时回调 | function | - |
 | onChange | 选中 option，或 input 的 value 变化（combobox 模式下）时，调用此函数 | function(value) | - |
 | onDeselect | 取消选中时调用，参数为选中项的 value (或 key) 值，仅在 multiple 或 tags 模式下生效 | function(value) | - |
@@ -76,7 +76,7 @@ title: Select
 | disabled | 是否禁用 | boolean | false |
 | key | 和 value 含义一致。如果 React 需要你设置此项，此项值与 value 的值相同，然后可以省略 value 设置 | string |  |
 | title | 选中该 Option 后，Select 的 title | string | - |
-| value | 默认根据此属性值进行筛选 | string | - |
+| value | 默认根据此属性值进行筛选 | string\|number | - |
 
 ### OptGroup props
 

components/spin/style/index.less

@@ -72,8 +72,8 @@
   }
 
   &-container {
-    overflow: auto;
     position: relative;
+    .clearfix;
   }
 
   &-blur {

components/style/core/base.less

@@ -2,7 +2,7 @@
 
 // Reboot
 //
-// Normalization of HTML elements, manually forked from Normalize.css to emove
+// Normalization of HTML elements, manually forked from Normalize.css to remove
 // styles targeting irrelevant browsers while applying new styles.
 //
 // Normalize is licensed MIT. https://github.com/necolas/normalize.css
@@ -14,12 +14,18 @@
   unicode-range: U+30-39;
 }
 
+@font-face {
+  font-family: "Chinese Quote";
+  src: local("PingFang SC"), local("SimSun");
+  unicode-range: U+2018, U+2019, U+201c, U+201d;
+}
+
 // HTML & Body reset
 html, body {
   .square(100%);
 }
 
-// emove the clear button of a text input control in IE10+
+// remove the clear button of a text input control in IE10+
 input::-ms-clear, input::-ms-reveal {
   display: none;
 }
@@ -61,7 +67,7 @@ article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, s
 
 // Body
 //
-// 1. emove the margin in all browsers.
+// 1. remove the margin in all browsers.
 // 2. As a best practice, apply a default `body-background`.
 
 body {
@@ -97,7 +103,7 @@ hr {
 // Typography
 //
 
-// emove top margins from headings
+// remove top margins from headings
 //
 // By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top
 // margin for easier control within type scales as it avoids margin collapsing.
@@ -119,7 +125,7 @@ p {
 
 // Abbreviations
 //
-// 1. emove the bottom border in Firefox 39-.
+// 1. remove the bottom border in Firefox 39-.
 // 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 // 3. Add explicit cursor to indicate changed behavior.
 // 4. Duplicate behavior to the data-* attribute for our tooltip plugin
@@ -139,6 +145,8 @@ address {
 }
 
 input[type="text"],
+input[type="password"],
+input[type="number"],
 textarea {
   -webkit-appearance: none;
 }
@@ -205,12 +213,12 @@ sup { top: -.5em; }
 
 a {
   color: @link-color;
-  background-color: transparent; // emove the gray background on active links in IE 10.
+  background-color: transparent; // remove the gray background on active links in IE 10.
   text-decoration: @link-decoration;
   outline: none;
   cursor: pointer;
   transition: color .3s;
-  -webkit-text-decoration-skip: objects; // emove gaps in links underline in iOS 8+ and Safari 8+.
+  -webkit-text-decoration-skip: objects; // remove gaps in links underline in iOS 8+ and Safari 8+.
 
   &:focus {
     text-decoration: underline;
@@ -251,7 +259,7 @@ samp {
 }
 
 pre {
-  // emove browser default top margin
+  // remove browser default top margin
   margin-top: 0;
   // Reset browser default of `1em` to use `em`s
   margin-bottom: 1em;
@@ -273,7 +281,7 @@ figure {
 
 img {
   vertical-align: middle;
-  border-style: none; // emove the border on images inside links in IE 10-.
+  border-style: none; // remove the border on images inside links in IE 10-.
 }
 
 svg:not(:root) {
@@ -283,7 +291,7 @@ svg:not(:root) {
 // Avoid 300ms click delay on touch devices that support the `touch-action` CSS property.
 //
 // In particular, unlike most other browsers, IE11+Edge on Windows 10 on touch devices and IE Mobile 10-11
-// DON'T emove the click delay when `<meta name="viewport" content="width=device-width">` is present.
+// DON'T remove the click delay when `<meta name="viewport" content="width=device-width">` is present.
 // However, they DO support emoving the click delay via `touch-action: manipulation`.
 // See:
 // * https://getbootstrap.com/docs/4.0/content/reboot/#click-delay-optimization-for-touch
@@ -333,7 +341,7 @@ button,
 select,
 optgroup,
 textarea {
-  margin: 0; // emove the margin in Firefox and Safari
+  margin: 0; // remove the margin in Firefox and Safari
   font-family: inherit;
   font-size: inherit;
   line-height: inherit;
@@ -347,7 +355,7 @@ input {
 
 button,
 select {
-  text-transform: none; // emove the inheritance of text transform in Firefox
+  text-transform: none; // remove the inheritance of text transform in Firefox
 }
 
 // 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
@@ -360,7 +368,7 @@ html [type="button"], // 1
   -webkit-appearance: button; // 2
 }
 
-// emove inner border and padding from Firefox, but don't restore the outline like Normalize.
+// remove inner border and padding from Firefox, but don't restore the outline like Normalize.
 button::-moz-focus-inner,
 [type="button"]::-moz-focus-inner,
 [type="reset"]::-moz-focus-inner,
@@ -372,14 +380,14 @@ button::-moz-focus-inner,
 input[type="radio"],
 input[type="checkbox"] {
   box-sizing: border-box; // 1. Add the correct box sizing in IE 10-
-  padding: 0; // 2. emove the padding in IE 10-
+  padding: 0; // 2. remove the padding in IE 10-
 }
 
 input[type="date"],
 input[type="time"],
 input[type="datetime-local"],
 input[type="month"] {
-  // emove the default appearance of temporal inputs to avoid a Mobile Safari
+  // remove the default appearance of temporal inputs to avoid a Mobile Safari
   // bug where setting a custom line-height prevents text from being vertically
   // centered within the input.
   // See https://bugs.webkit.org/show_bug.cgi?id=139848
@@ -388,7 +396,7 @@ input[type="month"] {
 }
 
 textarea {
-  overflow: auto; // emove the default vertical scrollbar in IE.
+  overflow: auto; // remove the default vertical scrollbar in IE.
   // Textareas should really only resize vertically so they don't break their (horizontal) containers.
   resize: vertical;
 }
@@ -440,7 +448,7 @@ progress {
 }
 
 //
-// emove the inner padding and cancel buttons in Chrome and Safari on macOS.
+// remove the inner padding and cancel buttons in Chrome and Safari on macOS.
 //
 
 [type="search"]::-webkit-search-cancel-button,

components/style/themes/default.less

@@ -34,7 +34,7 @@
 @body-background        : #fff;
 // Base background color for most components
 @component-background   : #fff;
-@font-family-no-number  : -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+@font-family-no-number  : "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
 @font-family            : "Helvetica Neue For Number", @font-family-no-number;
 @code-family            : Consolas, Menlo, Courier, monospace;
 @heading-color          : fade(#000, 85%);
@@ -393,6 +393,7 @@
 @switch-height: 22px;
 @switch-sm-height: 16px;
 @switch-disabled-opacity: 0.4;
+@switch-color: @primary-color;
 
 // Pagination
 // ---

components/switch/style/index.less

@@ -68,11 +68,11 @@
   }
 
   &-checked&-loading:before {
-    color: @primary-color;
+    color: @switch-color;
   }
 
   &:focus {
-    box-shadow: 0 0 0 2px fade(@primary-color, 20%);
+    box-shadow: 0 0 0 2px fade(@switch-color, 20%);
     outline: 0;
   }
 
@@ -127,7 +127,7 @@
   }
 
   &-checked {
-    background-color: @primary-color;
+    background-color: @switch-color;
 
     .@{switch-prefix-cls}-inner {
       margin-left: 6px;

components/table/Table.tsx

@@ -948,7 +948,7 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
         className={classString}
         expandIconColumnIndex={expandIconColumnIndex}
         expandIconAsCell={expandIconAsCell}
-        emptyText={() => locale.emptyText}
+        emptyText={locale.emptyText}
       />
     );
   }

components/table/__tests__/__snapshots__/demo.test.js.snap

@@ -1250,7 +1250,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
           class="ant-form-item-control-wrapper"
         >
           <div
-            class="ant-form-item-control "
+            class="ant-form-item-control"
           >
             <span
               class="ant-switch"
@@ -1280,7 +1280,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
           class="ant-form-item-control-wrapper"
         >
           <div
-            class="ant-form-item-control "
+            class="ant-form-item-control"
           >
             <span
               class="ant-switch"
@@ -1310,7 +1310,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
           class="ant-form-item-control-wrapper"
         >
           <div
-            class="ant-form-item-control "
+            class="ant-form-item-control"
           >
             <span
               checked=""
@@ -1341,7 +1341,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
           class="ant-form-item-control-wrapper"
         >
           <div
-            class="ant-form-item-control "
+            class="ant-form-item-control"
           >
             <span
               checked=""
@@ -1372,7 +1372,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
           class="ant-form-item-control-wrapper"
         >
           <div
-            class="ant-form-item-control "
+            class="ant-form-item-control"
           >
             <span
               checked=""
@@ -1403,7 +1403,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
           class="ant-form-item-control-wrapper"
         >
           <div
-            class="ant-form-item-control "
+            class="ant-form-item-control"
           >
             <span
               checked=""
@@ -1434,7 +1434,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
           class="ant-form-item-control-wrapper"
         >
           <div
-            class="ant-form-item-control "
+            class="ant-form-item-control"
           >
             <span
               checked=""
@@ -1465,7 +1465,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
           class="ant-form-item-control-wrapper"
         >
           <div
-            class="ant-form-item-control "
+            class="ant-form-item-control"
           >
             <span
               checked=""
@@ -1496,7 +1496,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
           class="ant-form-item-control-wrapper"
         >
           <div
-            class="ant-form-item-control "
+            class="ant-form-item-control"
           >
             <span
               class="ant-switch"
@@ -1526,7 +1526,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
           class="ant-form-item-control-wrapper"
         >
           <div
-            class="ant-form-item-control "
+            class="ant-form-item-control"
           >
             <div
               class="ant-radio-group ant-radio-group-default"

components/table/interface.tsx

@@ -47,11 +47,11 @@ export interface TableComponents {
 
 export interface TableLocale {
   filterTitle?: string;
-  filterConfirm?: string;
-  filterReset?: string;
-  emptyText?: string;
-  selectAll?: string;
-  selectInvert?: string;
+  filterConfirm?: React.ReactNode;
+  filterReset?: React.ReactNode;
+  emptyText?: React.ReactNode | (() => React.ReactNode);
+  selectAll?: React.ReactNode;
+  selectInvert?: React.ReactNode;
 }
 
 export type RowSelectionType = 'checkbox' | 'radio';

components/time-picker/index.tsx

@@ -22,7 +22,7 @@ export interface TimePickerProps {
   className?: string;
   size?: 'large' | 'default' | 'small';
   value?: moment.Moment;
-  defaultValue?: moment.Moment;
+  defaultValue?: moment.Moment | moment.Moment[];
   open?: boolean;
   format?: string;
   onChange?: (time: moment.Moment, timeString: string) => void;

components/timeline/Timeline.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import TimelineItem, { TimeLineItemProps } from './TimelineItem';
+import Icon from '../icon';
 
 export interface TimelineProps {
   prefixCls?: string;
@@ -30,7 +31,12 @@ export default class Timeline extends React.Component<TimelineProps, any> {
       }),
     );
     const pendingItem = (!!pending) ? (
-      <TimelineItem pending={!!pending}>{pendingNode}</TimelineItem>
+      <TimelineItem
+        pending={!!pending}
+        dot={<Icon type="loading" />}
+      >
+        {pendingNode}
+      </TimelineItem>
     ) : null;
     return (
       <ul {...restProps} className={classString}>

components/timeline/__tests__/__snapshots__/demo.test.js.snap

@@ -278,16 +278,16 @@ exports[`renders ./components/timeline/demo/pending.md correctly 1`] = `
       class="ant-timeline-item-tail"
     />
     <div
-      class="ant-timeline-item-head ant-timeline-item-head-blue"
-    />
+      class="ant-timeline-item-head ant-timeline-item-head-custom ant-timeline-item-head-blue"
+    >
+      <i
+        class="anticon anticon-spin anticon-loading"
+      />
+    </div>
     <div
       class="ant-timeline-item-content"
     >
-      <a
-        href="#"
-      >
-        See more
-      </a>
+      Recording...
     </div>
   </li>
 </ul>

components/timeline/demo/pending.md

@@ -7,9 +7,7 @@ title:
 
 ## zh-CN
 
-在最后位置添加一个幽灵节点，表示时间轴未完成，还在记录过程中。可以指定 `pending={true}` 或者 `pending={一个 React 元素}`。
-
-一般用于按时间正序排列的模式。
+当任务状态正在发生，还在记录过程中，可用幽灵节点来表示当前的时间节点。（用于时间正序排列）
 
 ## en-US
 
@@ -19,7 +17,7 @@ When the timeline is incomplete and ongoing, put a ghost node at last. set `pend
 import { Timeline } from 'antd';
 
 ReactDOM.render(
-  <Timeline pending={<a href="#">See more</a>}>
+  <Timeline pending="Recording...">
     <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
     <Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>
     <Timeline.Item>Technical testing 2015-09-01</Timeline.Item>

components/timeline/style/index.less

@@ -25,6 +25,10 @@
       border-left: 2px solid @timeline-color;
     }
 
+    &-pending &-head {
+      font-size: @font-size-sm;
+    }
+
     &-pending &-tail {
       display: none;
     }

docs/pattern/advanced-search.en-US.md

@@ -1,53 +0,0 @@
----
-order: 6
-title: Advanced Search
----
-
-With Advanced Search, users can narrow down the range of complex lists / tables.
-
----
-
-## Conventions
-
-### Interaction
-
-<img class="preview-img" align="right" alt="Interactive examples" description="While in a stowed state, a user clicks Advanced Search to expand search options; if the user has previously entered a query, it's a best practice to transfer the corresponding value to the input box." src="https://os.alipayobjects.com/rmsportal/NpRKspdYRDwsKnw.png">
-
-Conventionally used with deep tables, suitable for search conditions as well as searching for a number of unknown values ​​within a range.
-
-Advanced search is generally used by intermediate / expert users, typically by clicking advanced search. If you are displaying complex data, you can expand advanced search by default.
-
-<br>
-
-<img class="preview-img" align="right" alt="Interactive examples" description="Place an Alert to show the value that has already been entered; the user can click "Clear" to empty all the input values. Click advanced search to expand Advanced Search again.' src="https://os.alipayobjects.com/rmsportal/gKiZtjopvLufqSP.png">
-
-When advanced search is hidden, you should display the search criteria and values when a value is entered.
-
-### Arrangement
-
-<img class="preview-img" align="right" alt="Arrangement Example" src="https://os.alipayobjects.com/rmsportal/TsdXCWLPIETykye.png">
-
-The order of the search criteria should be the same as the order of the titles in the table, and frequently used search conditions can be placed at the top.
-
-### Specifications
-
-<img class="preview-img" align="right" alt="Specification Example" src="https://os.alipayobjects.com/rmsportal/fuPcwZCYiohhdSt.png">
-
-<img class="preview-img" align="right" alt="Specification Example" src="https://os.alipayobjects.com/rmsportal/bFLUSbwoNoakKYS.png">
-
-- Landscape layout
-
-Try not to place more than three columns of input boxes on one line. All Labels and input boxes should fall on the grid.
-
-- Vertical layout
-
-Use `16px` for vertical margins.
-
-
-## Field Type
-
-### Interaction
-
-<img class="preview-img" align="right" alt="Interactive Example" src = "https://os.alipayobjects.com/rmsportal/TUxfnHjfTJeKaDq.png">
-
-Field types usually appear at the bottom of the main search box. This is suitable when search conditions and values ​​are relatively small in the display.

docs/pattern/advanced-search.zh-CN.md

@@ -1,53 +0,0 @@
----
-order: 6
-title: 高级搜索
----
-
-借助『高级搜索』，用户可以缩小复杂列表／表格等的展示范围。
-
----
-
-## 常规型
-
-### 交互
-
-<img class="preview-img" align="right" alt="交互示例" description="在收起状态时，用户点击『高级搜索』展开；如果此前用户已经输入过文案，需要将值带到对应的输入框中。" src="https://os.alipayobjects.com/rmsportal/NpRKspdYRDwsKnw.png">
-
-常规型常和表格搭配使用，适合在搜索条件多以及搜索值个数不确定的场景中。
-
-『高级搜索』功能一般开放给中间用户／专家用户使用，一般通过点击『高级搜索』触发；如果非常高频使用，可以默认展开『高级搜索』。
-
-<br>
-
-<img class="preview-img" align="right" alt="交互示例" description="在『高级搜索』顶部放置 Alert ，用于展现已经输入的值；用户点击『清空』可以清空所有输入值；点击『高级搜索』可以再次展开『高级搜索』。" src="https://os.alipayobjects.com/rmsportal/gKiZtjopvLufqSP.png">
-
-当已经输入了值的『高级搜索』被隐藏时，需要展示检索条件和值。
-
-### 排列规则
-
-<img class="preview-img" align="right" alt="排列示例" src="https://os.alipayobjects.com/rmsportal/TsdXCWLPIETykye.png">
-
-搜索条件的排布顺序需要和表格中的标题顺序，尽可能保持一致；如果非常高频使用的搜索条件，可以放在最前面。
-
-### 规格
-
-<img class="preview-img" align="right" alt="规格示例" src="https://os.alipayobjects.com/rmsportal/fuPcwZCYiohhdSt.png">
-
-<img class="preview-img" align="right" alt="规格示例" src="https://os.alipayobjects.com/rmsportal/bFLUSbwoNoakKYS.png">
-
-- 横向排版
-
-  在一行不要放置 3 列以上的输入框；标签和输入框应该落在栅格上。
-
-- 纵向排版
-
-  使用 `16px` 作为间距。
-
-
-## 字段型
-
-### 交互
-
-<img class="preview-img" align="right" alt="交互示例" src="https://os.alipayobjects.com/rmsportal/TUxfnHjfTJeKaDq.png">
-
-字段型一般会出现在主搜索框底部，适合搜索条件和值都比较少的场景中。

docs/pattern/complex-table.en-US.md

@@ -1,52 +0,0 @@
----
-order: 5
-title: Complex Table
----
-
-Table is widely used to show complicated structued data.
-
----
-
-## Showcase
-
-### Multiple Columns
-
-<img class="preview-img" align="right" alt="Multiple Columns Demo" src="https://os.alipayobjects.com/rmsportal/QZGYpJVtsTwFPmj.png">
-
-Load more data or switch left/right by pressing buttons.
-
-<br>
-
-<img class="preview-img" align="right" alt="Custom Columns Demo" src="https://os.alipayobjects.com/rmsportal/zWUjQRpJZhYsZbY.png">
-
-Allow user to choose columns they want.
-
-<br>
-
-<img class="preview-img" align="right" alt="Horizontal Scroll Demo" src="https://os.alipayobjects.com/rmsportal/UOTwZLweENvwlnL.png">
-
-Fixed header，view more by scroll horizontally.
-
-### With Icon
-
-<img class="preview-img" align="right" alt="Table with Icon Demo" src="https://os.alipayobjects.com/rmsportal/OWEXWoGlsqyhVBB.png">
-
-Emphasis with icon, use to show trend.
-
-### With Chart
-
-<img class="preview-img" align="right" alt="Table with Chart Demo" src="https://os.alipayobjects.com/rmsportal/znVwTXxQpXuVqPl.png">
-
-Emphasis with chart, use to show trend.
-
-### Two Dimension
-
-<img class="preview-img" align="right" alt="Two Dimensional Table Demo" src="https://os.alipayobjects.com/rmsportal/RQvqwEkXpHaFago.png">
-
-A title vertically and horizontally each.
-
-### Mini-table
-
-<img class="preview-img" align="right" alt="Mini-table Demo" src="https://os.alipayobjects.com/rmsportal/dMxxUThciHFQyXS.png">
-
-Suitable for card and pop-ups where space is limited

docs/pattern/complex-table.zh-CN.md

@@ -1,52 +0,0 @@
----
-order: 5
-title: 表格：复杂数据
----
-
-表格也用于展示复杂和高度结构化数据。
-
----
-
-## 案例
-
-### 多列数据
-
-<img class="preview-img" align="right" alt="多列数据示例" src="https://os.alipayobjects.com/rmsportal/QZGYpJVtsTwFPmj.png">
-
-通过按钮，可实现更多列数据的加载以及左右切换。
-
-<br>
-
-<img class="preview-img" align="right" alt="自定义列示例" src="https://os.alipayobjects.com/rmsportal/zWUjQRpJZhYsZbY.png">
-
-提供用户自定义列的功能，方便用户查看需要的列。
-
-<br>
-
-<img class="preview-img" align="right" alt="横向滚动示例" src="https://os.alipayobjects.com/rmsportal/UOTwZLweENvwlnL.png">
-
-固定表头列，通过横向滚动条来查看剩余内容。
-
-### 带图标的表格
-
-<img class="preview-img" align="right" alt="带图标表格示例" src="https://os.alipayobjects.com/rmsportal/OWEXWoGlsqyhVBB.png">
-
-通过图标强化信息的传递，适用在表达数据变化趋势。
-
-### 带图表的表格
-
-<img class="preview-img" align="right" alt="带图表表格示例" src="https://os.alipayobjects.com/rmsportal/znVwTXxQpXuVqPl.png">
-
-通过图表来强化信息的传递，适用在表达数据变化趋势。
-
-### 二维表格
-
-<img class="preview-img" align="right" alt="二维表格示例" src="https://os.alipayobjects.com/rmsportal/RQvqwEkXpHaFago.png">
-
-横向和纵向各一个标题来展现数据。
-
-### 小表格
-
-<img class="preview-img" align="right" alt="小表格示例" src="https://os.alipayobjects.com/rmsportal/dMxxUThciHFQyXS.png">
-
-适用在卡片、弹出框等空间较小的场景中。

docs/pattern/form.en-US.md

@@ -1,164 +0,0 @@
----
-order: 2
-title: Form
----
-
-As an important interface to obtain user input, forms play the important role of matching answers to questions.
-
-When designing a form, it's recommended to:
-
-1. Make sure users know what is required to enter and why.
-
-  Use sample language as `label` for ordinary users and professional terms for experts. If sensitive information (for example ID card number, mobile phone number) is required, explain why.
-
-2. Provide rich context to help users complete the form.
-
-  Using "proper default value", "structured format", "tooltip" and "reminder" are practical for describing such context.
-
-3. Be error-sensitive and fault-tolerant.
-
-  Be error-sensitive means giving feedback to users quickly through a variety of validation rules of user input. If the validation starts only after a form is submitted, it would be too late. Being fault-tolerant means it should be allowed to use different kinds of formats as well as syntax. For example, if a user types in some spaces into a phone number input box, the system should delete those spaces automatically instead of telling the user to correct them.
-
-4. Don't ask unnecessary questions.
-
----
-
-## Content
-
-<img class="preview-img" align="right" alt="Example of a form" src="https://os.alipayobjects.com/rmsportal/mLkQbODgVsdGUTe.png">
-
-A form usually consists of 4 parts:
-
-1. Label
-2. Input box
-3. Validation feedback
-4. Action
-
-> Note: `*` indicates that the input is required.
-
-
-## Interactions
-
-### Gap filling input
-
-<img class="preview-img" align="right" alt="Example of gap filling input" src="https://os.alipayobjects.com/rmsportal/SdzCTaevNMvJFBR.png">
-
-Gap filling input usually appears in a descriptive context to help users understand the current situation and provide information correctly.
-
-### Combined input
-
-<img class="preview-img" align="right" alt="Example of combined input" src="https://os.alipayobjects.com/rmsportal/waStvhMnuoqqsCE.png">
-
-When two input boxes have strong correlation, they can be combined together so as to save some space.
-
-### Alignment
-
-<img class="preview-img" align="right" alt="Example of alignment" src="https://os.alipayobjects.com/rmsportal/cjHTEtXFxUSdHnE.png">
-
-When designing a form, button groups should be aligned to the left of the input boxes.
-
-### Disabled main button
-
-When there are just a few (less than 3) input boxes in a form, "submit" button or other main buttons should be disabled if a user has not yet filled in all required input boxes. However, when there are too many input boxes (more than 5), do not disable those main buttons.
-
-
-<br>
-
-<img class="preview-img" align="right" alt="main button is disabled when there are not enough characters" src="https://os.alipayobjects.com/rmsportal/VabHKlbouFxSQXz.png">
-
-<img class="preview-img" align="right" alt="main button is enabled when there are enough characters" src="https://os.alipayobjects.com/rmsportal/usdFxJmWDawqUuq.png">
-
-When there are just a few input boxes, users can see feedback once they type in something and thus the rule is easy to understand.
-
-<br>
-
-<img class="preview-img" align="right" alt="Don't use disabled main button" src="https://os.alipayobjects.com/rmsportal/GwZhvOuXmwqUIUW.png">
-
-When there are many input boxes (especially when required input boxes are altogether with optional ones), the logic of feedback can be very complicated. Thus, disabling main buttons may cause confusion.
-
-### Structured format
-
-<img class="preview-img" align="right" alt="Example of structured format" src="https://os.alipayobjects.com/rmsportal/SQgGfreRAqPZPsm.png">
-
-The structured format can be used if users are familiar with the input content and the system doesn't accept any deviation from the desired format.
-
-### Tooltip & reminder
-
-<img class="preview-img inline" align="right" alt="Example of tooltip" description="when an input box is focused, the tooltip will appear until the input box loses focus again" src="https://os.alipayobjects.com/rmsportal/cTlmdEprGSzMZfs.png">
-<img class="preview-img inline" align="right" alt="Example of reminder" description="when an input box is focused, the reminder will appear until a user types in at least one character" src="https://os.alipayobjects.com/rmsportal/QPhvLWfMbLTvjRw.png">
-
-Use a tooltip if a brief input label may cause confusion while you still want to keep the label text to be short.
-
-Use a reminder if you want users to pay attention to the format or purpose of an input box. A reminder will disappear once there is something typed in the input box, so it should be used only when users are familiar with the content.
-
-### Password input box
-
-<img class="preview-img" align="right" alt="Example of password input box" src="https://os.alipayobjects.com/rmsportal/wKpOgeyyoOUeCrk.png">
-
-Password input box provides real time feedback on password strength and validity. It's quite applicable to a registration page.
-
-### Validation
-
-<img class="preview-img inline" align="right" description="Validation in real time" src="https://os.alipayobjects.com/rmsportal/urCdIJFuNYCenqH.png">
-<img class="preview-img inline" align="right" description="Validation after losing focus" src="https://os.alipayobjects.com/rmsportal/KkcSBkbTJirIxCw.png">
-
-<img class="preview-img" align="right" description="When a 'submit' button is clicked, the system will deal with user inputs and display feedback (the number of errors and the types of errors) on the page." src="https://zos.alipayobjects.com/rmsportal/xTtVSREbASRMstTggVGD.png">
-
-Use different validation rules and a variety of feedback to help users correct errors before they click on a "submit" button.
-
-### Character counting box
-
-<img class="preview-img" align="right" alt="Example of word counting" src="https://os.alipayobjects.com/rmsportal/JxzQIRfMCtMjuaH.png">
-
-A character counting box can show the current number of characters and checks if this number exceeds the limit.
-
-## Format
-
-### Margin
-
-<img class="preview-img" align="right" alt="Example of margin between inputs" src="https://os.alipayobjects.com/rmsportal/dlTiHzZvCGRbMzL.png">
-
-A typical example of using margin between inputs.
-
-### Width
-
-<img class="preview-img good" align="right" alt="Good" src="https://os.alipayobjects.com/rmsportal/vypllNQZsEHRszB.png">
-<img class="preview-img bad" align="right" alt="Bad" src="https://os.alipayobjects.com/rmsportal/XSLwnrlLbKFjiNj.png">
-
-If the maximum length of an input content is known, it's recommended to define the input width according to the maximum length.
-
-<br>
-
-### Alignment
-
-There are both advantages and disadvantages for any particular alignment. Thus, you need to be clear about your purposes (if you want to speed up or slow down a user) and the limitations (screen width restrictions, problems of localization, etc.) before choosing one of those alignments.
-
-<br>
-
-<img class="preview-img" align="right" alt="Right alignment (recommended)" src="https://os.alipayobjects.com/rmsportal/UxGJfenYBKvkEEB.png">
-
-Right alignment (recommended)
-
-- Advantage: saves vertical space.
-- Disadvantages: reduces readability; reduces flexibility of the input length
-- When to use: you want to save more vertical space and speed up users for filling a form.
-
-<br>
-
-<img class="preview-img" align="right" alt="Top alignment" src="https://os.alipayobjects.com/rmsportal/AsyyNKormNdEMLi.png">
-
-Top alignment
-
-- Advantages: high readability; high flexibility of the label length.
-- Disadvantages: takes a lot of vertical space.
-- When to use: you want users to finish filling the form quickly.
-
-<br>
-
-<img class="preview-img" align="right" alt="Left alignment" src="https://os.alipayobjects.com/rmsportal/eqUyDExbRlAQoas.png">
-
-Left alignment
-
-- Advantages: easy to read and saves vertical space.
-- Disadvantages: slows down users and reduces flexibility for the input length.
-- When to use: you want to slow down users so that they can take more considerations when filling a form.

docs/pattern/form.zh-CN.md

@@ -1,163 +0,0 @@
----
-order: 2
-title: 表单
----
-
-作为获取用户输入的重要交互方式，表单也承担将问题和答案进行配对的角色。
-
-设计者进行表单设计时，应当注意这几点：
-
-1. 确保用户了解要提供什么信息，以及为什么要提供这些信息。
-
-  为初级用户／偶尔访问的用户提供白话作为『标签』；为领域专家提供专业术语作为『标签』。当需要用户提供敏感信息时，通过『输入提示』来说明系统为什么要这么做，eg：需要获取身份证号码、手机号码时。
-
-2. 让用户能在上下文中获取信息，帮助他完成输入。
-
-  使用『良好的默认值』、『结构化的格式』、『输入提示』、『输入提醒』等方式，避免让用户在空白中完成输入。
-
-3. 对错误敏感，并尽可能宽容。
-
-  通过不同的『校验』规则和形式进行反馈，避免用户在点击提交后才刚刚开始『校验』，让用户提前纠正错误；依据『容错格式』，允许用户以多种格式和语法输入，eg：用户在电话号码输入框中多输入了一个空格，系统存储时可以主动删掉空格，但是不需要告诉用户这是一个错误。
-
-4. 不要提出不必要的问题。
-
----
-
-## 内容
-
-<img class="preview-img" align="right" alt="结构示例" src="https://os.alipayobjects.com/rmsportal/mLkQbODgVsdGUTe.png">
-
-通常表单会有四个部分组成。
-
-1. 标签
-2. 输入框
-3. 校验反馈
-4. 动作
-
-> 注：`*` 表明该项为必填项。
-
-## 交互
-
-### 填空
-
-<img class="preview-img" align="right" alt="填空示例" src="https://os.alipayobjects.com/rmsportal/SdzCTaevNMvJFBR.png">
-
-在一种描述性的上下文中出现输入项，可以帮助用户理解当前的状况，以及需要提供什么数据。
-
-### 组合输入框
-
-<img class="preview-img" align="right" alt="组合输入框示例" src="https://os.alipayobjects.com/rmsportal/waStvhMnuoqqsCE.png">
-
-当两个输入框关联性很强时，可以前后拼接，减少页面空间。
-
-### 对齐方式
-
-<img class="preview-img" align="right" alt="对齐方式示例" src="https://os.alipayobjects.com/rmsportal/cjHTEtXFxUSdHnE.png">
-
-在页面设计表单时，按钮组必须和输入框左对齐。
-
-### 禁用主按钮
-
-当输入框非常少时（一般少于 3 个），如果用户没有在必填项中输入内容，可禁用『提交』等主按钮；当输入框非常多时（超过 5 项以上），不建议禁用主按钮。
-
-<br>
-
-<img class="preview-img" align="right" alt="未达字符标准时，主按钮禁用状态" src="https://os.alipayobjects.com/rmsportal/VabHKlbouFxSQXz.png">
-
-<img class="preview-img" align="right" alt="达到字符标准时，主按钮可用状态" src="https://os.alipayobjects.com/rmsportal/usdFxJmWDawqUuq.png">
-
-当输入框非常少时，用户一输入就会有反馈，因而主按钮的禁用规则非常清晰，容易被用户理解。
-
-<br>
-
-<img class="preview-img" align="right" alt="不禁用示例" src="https://os.alipayobjects.com/rmsportal/GwZhvOuXmwqUIUW.png">
-
-当输入框非常多时（尤其是输入项中交叉了必填项和非必填项），整个反馈链路冗长又复杂，禁用规则难以被识别，容易引起困惑。
-
-### 结构化的格式
-
-<img class="preview-img" align="right" alt="结构化的格式示例" src="https://os.alipayobjects.com/rmsportal/SQgGfreRAqPZPsm.png">
-
-用户对输入的内容很熟悉，且系统不希望接受任何偏离期望的格式。
-
-### 输入提示 & 输入提醒
-
-<img class="preview-img inline" align="right" alt="输入提示示例" description="在输入框激活后，输入提示一直出现至该输入框失去焦点。" src="https://os.alipayobjects.com/rmsportal/cTlmdEprGSzMZfs.png">
-<img class="preview-img inline" align="right" alt="输入提醒示例" description="在输入框激活后，输入提醒不要马上消失，等用户完成第一个词输入后再消失。" src="https://os.alipayobjects.com/rmsportal/QPhvLWfMbLTvjRw.png">
-
-输入提示：不希望在标签上放置太多文字进行解释，同时只有标签又会引起误解。
-
-输入提醒：提醒用户该控件的目的或所需格式，由于在用户输入后提醒就会消失，所以适用在用户对内容比较熟悉时。
-
-### 密码加强计
-
-<img class="preview-img" align="right" alt="密码强度示例" src="https://os.alipayobjects.com/rmsportal/wKpOgeyyoOUeCrk.png">
-
-提供关于密码强度和有效性的及时反馈，适用在注册页面时的密码输入框。
-
-### 校验
-
-<img class="preview-img inline" align="right" description="输入时的实时校验。" src="https://os.alipayobjects.com/rmsportal/urCdIJFuNYCenqH.png">
-<img class="preview-img inline" align="right" description="输入框失去焦点后的校验。" src="https://os.alipayobjects.com/rmsportal/KkcSBkbTJirIxCw.png">
-
-<img class="preview-img" align="right" description="点击『提交』后，系统将处理结果直接在页面上进行反馈（统计错误数量和标记错误内容）。" src="https://zos.alipayobjects.com/rmsportal/xTtVSREbASRMstTggVGD.png">
-
-通过不同的『校验』规则和形式进行反馈，避免用户在点击提交后才刚刚开始『校验』，让用户提前纠正错误。
-
-### 字数校验框
-
-<img class="preview-img" align="right" alt="字数校验框示例" src="https://os.alipayobjects.com/rmsportal/JxzQIRfMCtMjuaH.png">
-
-用于统计当前输入长度，以及是否超过系统阈值。
-
-
-## 规格
-
-### 间距
-
-<img class="preview-img" align="right" alt="间隔示例" src="https://os.alipayobjects.com/rmsportal/dlTiHzZvCGRbMzL.png">
-
-典型表单的间隔规范。
-
-### 输入框宽度
-
-<img class="preview-img good" align="right" alt="正确示例" src="https://os.alipayobjects.com/rmsportal/vypllNQZsEHRszB.png">
-<img class="preview-img bad" align="right" alt="错误示例" src="https://os.alipayobjects.com/rmsportal/XSLwnrlLbKFjiNj.png">
-
-当内容可预知，可以根据内容长短进行定义其落在多少个栅格上。
-
-<br>
-
-### 对齐方式
-
-无论左对齐、右对齐还是顶部对齐，都有其优缺点和应用场景，所以正确的解决方案取决于具体目标和制约因素，诸如：希望用户加快或者降低填写速度（有时设计者希望用户深思熟虑每个输入）、屏幕显示的限制、本地化考虑等多种因素。
-
-<br>
-
-<img class="preview-img" align="right" alt="右对齐（推荐）" src="https://os.alipayobjects.com/rmsportal/UxGJfenYBKvkEEB.png">
-
-右对齐（推荐）。
-
-- 优点：节约垂直空间。
-- 缺点：降低可读性；标签长度和输入框弹性小。
-- 场景：既要减少垂直空间，又要加快填写速度。
-
-<br>
-
-<img class="preview-img" align="right" alt="顶部对齐" src="https://os.alipayobjects.com/rmsportal/AsyyNKormNdEMLi.png">
-
-顶部对齐。
-
-- 优点：有最快的浏览和处理速度；标签长度弹性大。
-- 缺点：非常占垂直空间。
-- 场景：希望用户快速填写表单，完成任务。
-
-<br>
-
-<img class="preview-img" align="right" alt="左对齐" src="https://os.alipayobjects.com/rmsportal/eqUyDExbRlAQoas.png">
-
-左对齐。
-
-- 优点：文字开头按阅读视线对齐，方便阅读；节约垂直空间。
-- 缺点：填写速度慢；标签长度和输入框弹性小。
-- 场景：希望用户放慢速度，仔细思考表单中的每个输入框。

docs/pattern/list.en-US.md

@@ -1,99 +0,0 @@
----
-order: 3
-title: List
----
-
-Lists are very common UI elements which can be applied to various scenarios:
-
-- Get an overview
-- Browse item by item
-- Find specific list item
-- Sort and filter
-- Rearrange, add, delete or re-categorize list items
-
----
-
-## Interaction
-
-### Display Details
-
-<img class="preview-img" align="right" alt="Popover Example" description="When triggered by click, symmetry between activated and disabled states should be maintained, in other words, popover should be closed where it was opened. When triggered by hover, activate the popover 0.5 second after a mouse-enter event, and close the popover immediately after a mouse-leave event." src="https://os.alipayobjects.com/rmsportal/GmpRYixxnePBPPW.png">
-
-Popover: When a user clicks or hovers a link or piece of content, display a small amount of detailed information for the corresponding list item in a floating layer.
-
-<br />
-
-<img class="preview-img" align="right" alt="Embedding Example 1" src="https://os.alipayobjects.com/rmsportal/WIoplWDRZspuuhD.png">
-
-<img class="preview-img" align="right" alt="Embedding Example 2" src="https://os.alipayobjects.com/rmsportal/tNAnTEaZtswRknD.png">
-
-<img class="preview-img" align="right" alt="Embedding Example 3" src="https://os.alipayobjects.com/rmsportal/MXXjEoLdnBxqcne.png">
-
-Embedding: A user can directly view detailed information in the context via a click, without opening a new page or modal.
-
-<br />
-
-<img class="preview-img" align="right" alt="Modal Example" src="https://os.alipayobjects.com/rmsportal/HeqNyjscGEHyHmt.png">
-
-Modal: A user can view detailed information in a modal dialog via a click. But it loses the contextual/visual tie to the clicked list item, because, unlike popover and embedding, modal is usually presented in a fixed position regardless of the position of clicked list item.
-
-<br />
-
-<img class="preview-img" align="right" alt="Dual-Panel Selector Example" src="https://os.alipayobjects.com/rmsportal/JXWVQXvlPSDlvyk.png">
-
-Dual-Panel Selector: A user can view a large amount of detailed information in a (usually right) panel beside the list.
-
-<br />
-
-<img class="preview-img" align="right" alt="Full-Window Example (No New Window)" src="https://os.alipayobjects.com/rmsportal/YTdIMZLeobNrjmU.png">
-
-<img class="preview-img" align="right" alt="Full-Window Example (New Window)" description="Detailed information of clicked list item would replace the list area, user can go back to the list via breadcrumb, button or browser Back button." src="https://os.alipayobjects.com/rmsportal/uAeEOeoCAeTHgsQ.png">
-
-
-Full-Window: A user can view a large amount of detailed information in current page. This mode loses contextual/visual tie to the clicked list item, however it is suitable for scenarios where detailed information is completely irrelevant, or screen size is small (i.e. mobile), or list and details are huge.
-
-### Display More Text
-
-<img class="preview-img" align="right" alt="Text Wrap Example" src="https://os.alipayobjects.com/rmsportal/wWcixIvqaFXfTHd.png">
-
-Text Wrap: Expand certain list item into multi-line text.
-
-<br />
-
-<img class="preview-img no-padding" align="right" alt="Grid Example" src="https://os.alipayobjects.com/rmsportal/VDhwGyyblTSJpeV.png">
-
-Grid: Arrange list items in a grid or matrix where each item shares a similar visual weight.
-
-### Display Images
-
-<img class="preview-img no-padding" align="right" alt="Carousel Example" src="https://os.alipayobjects.com/rmsportal/hKtAKuDfyfDpPrL.png">
-
-Carousel: Display images in one dimension, scrolling of images can be triggered either manually by user or automatically by system.
-
-<br />
-
-<img class="preview-img no-padding" align="right" alt="Thumbnail Grid Example" src="https://os.alipayobjects.com/rmsportal/LAnBHEYiqWSfQAS.png">
-
-Thumbnail Grid: Display images/icons in two dimensions, this approach has strong visual effects which attracts user attention.
-
-### Display Long List
-
-<img class="preview-img" align="right" description="Pagination is a good choice if performance is a main concern." src="https://os.alipayobjects.com/rmsportal/aZwrmpnaIEoxiXJ.png">
-
-Pagination: Load list in a sectioned way, user determines whether to load other list items.
-
-<br />
-
-<img class="preview-img" align="right" description="Pagination can make things clunky when there is intensive operation on listed data, especially when there is selection across pages. So infinite scrolling would be a better choice. Infinite scrolling is also suitable for presenting all data for a user (i.e. user's orders) or non-temporary data." src="https://os.alipayobjects.com/rmsportal/afDpGUyoyQZFgks.png">
-
-Infinite Scrolling: When user reaches the bottom of the first section, load next section via listening to scroll event or a button click.
-
-### Display Categorized/Layered List
-
-<img class="preview-img" align="right" alt="Two-Layer Collapse" src="https://os.alipayobjects.com/rmsportal/efRpmejABrXjiwF.png">
-
-<img class="preview-img" align="right" alt="Multi-Layer Collapse" src="https://os.alipayobjects.com/rmsportal/bXwBcaLQPAWTIQV.png">
-
-<img class="preview-img" align="right" alt="Two-Layer Collapsible Table" src="https://os.alipayobjects.com/rmsportal/XaJeuLfHeSSXCJq.png">
-
-<br />

docs/pattern/list.zh-CN.md

@@ -1,99 +0,0 @@
----
-order: 3
-title: 列表
----
-
-列表是非常常见的界面元素，有多种使用场景：
-
-- 获取概览
-- 逐项浏览
-- 查找特定列表项
-- 排序与过滤
-- 重新安排、添加、删除或重新分类列表项
-
----
-
-## 交互
-
-### 显示详情信息
-
-<img class="preview-img" align="right" alt="气泡显示示例" description="使用『点击』触发时，应当保证激活／禁用的对称性，即在哪里打开，就在哪里关闭；另外。也支持用户点击空白区域关闭。使用『悬停』触发时，移入时设计约 0.5 秒的延时，然后激活详情气泡；移出时，立即关闭详情气泡。" src="https://os.alipayobjects.com/rmsportal/GmpRYixxnePBPPW.png">
-
-气泡显示：用户鼠标点击／悬停某个链接或内容时，在悬浮层上显示该条列表项少量的详情信息。
-
-<br />
-
-<img class="preview-img" align="right" alt="列表嵌入示例1" src="https://os.alipayobjects.com/rmsportal/WIoplWDRZspuuhD.png">
-
-<img class="preview-img" align="right" alt="列表嵌入示例2" src="https://os.alipayobjects.com/rmsportal/tNAnTEaZtswRknD.png">
-
-<img class="preview-img" align="right" alt="列表嵌入示例3" src="https://os.alipayobjects.com/rmsportal/MXXjEoLdnBxqcne.png">
-
-列表嵌入：用户可以不用打开新页面或者打开弹框，只要通过点击，就可以直接在上下文中查看该列表项的详情信息。
-
-<br />
-
-<img class="preview-img" align="right" alt="弹出层显示示例" src="https://os.alipayobjects.com/rmsportal/HeqNyjscGEHyHmt.png">
-
-弹出层显示：用户通过点击，在弹出框中查看该列表项的详情信息，但是当前列表项的上下文关系会被打断。
-
-<br />
-
-<img class="preview-img" align="right" alt="双面板选择器示例" src="https://os.alipayobjects.com/rmsportal/JXWVQXvlPSDlvyk.png">
-
-双面板选择器：用户通过点击，在列表的一侧（一般为右侧）查看该列表项大量的详情信息。
-
-<br />
-
-<img class="preview-img" align="right" alt="单窗口深入示例（窗口未弹出）" src="https://os.alipayobjects.com/rmsportal/YTdIMZLeobNrjmU.png">
-
-<img class="preview-img" align="right" alt="单窗口深入示例（窗口弹出）" description="用户通过点击，该列表项的详情信息会替换列表所在的显示区域；用户通过『面包屑』、按钮或者浏览器自带返回按钮，从详情返回列表。" src="https://os.alipayobjects.com/rmsportal/uAeEOeoCAeTHgsQ.png">
-
-
-单窗口深入：用户通过点击，在当前页查看大量的详情信息。此模式打破了整个列表项的上下文关系，适用在详情信息之间完全无关，或者屏幕空间实在狭小（eg：移动应用），又或者列表和内容可能非常多的应用场景中。
-
-### 显示更多文本
-
-<img class="preview-img" align="right" alt="宽行示例" src="https://os.alipayobjects.com/rmsportal/wWcixIvqaFXfTHd.png">
-
-宽行：使某些列表项可以扩展为多行文本行来显示足够的文本内容。
-
-<br />
-
-<img class="preview-img no-padding" align="right" alt="对等网格示例" src="https://os.alipayobjects.com/rmsportal/VDhwGyyblTSJpeV.png">
-
-对等网格：以网格或者矩阵的方式排列内容元素，其中每个元素都有相仿的视觉重量。
-
-### 显示图片
-
-<img class="preview-img no-padding" align="right" alt="走马灯示例" src="https://os.alipayobjects.com/rmsportal/hKtAKuDfyfDpPrL.png">
-
-走马灯：以一维的形式来显示图片，可用户主动触发或者系统自动播放。
-
-<br />
-
-<img class="preview-img no-padding" align="right" alt="缩略图网格示例" src="https://os.alipayobjects.com/rmsportal/LAnBHEYiqWSfQAS.png">
-
-缩略图网格：以二维的形式来展现图片/Icon，具有强烈的视觉效果，可以吸引用户注意。
-
-### 显示长列表
-
-<img class="preview-img" align="right" description="当系统性能是一个主要考虑因素时，适合使用分页器。" src="https://os.alipayobjects.com/rmsportal/aZwrmpnaIEoxiXJ.png">
-
-分页器：以分段的形式加载列表，将是否需要加载其他项的选择权交给用户。
-
-<br />
-
-<img class="preview-img" align="right" description="当需要对数据进行频繁操作时，分页器会导致操作变的笨拙，尤其是出现一些跨页选择时，所以适合用无限加载；当倾向显示用户的个人所有的数据时（例如：个人订单），或者数据不是临时性的，适合使用无限加载。" src="https://os.alipayobjects.com/rmsportal/afDpGUyoyQZFgks.png">
-
-无限加载：当用户加载到第一段内容的最下方，通过监听滚轮事件或者用户点击按钮，继续加载下一段内容。
-
-### 显示分类或者层级的列表
-
-<img class="preview-img" align="right" alt="两层折叠面板示例" src="https://os.alipayobjects.com/rmsportal/efRpmejABrXjiwF.png">
-
-<img class="preview-img" align="right" alt="多层折叠面板示例" src="https://os.alipayobjects.com/rmsportal/bXwBcaLQPAWTIQV.png">
-
-<img class="preview-img" align="right" alt="两层折叠面板表格" src="https://os.alipayobjects.com/rmsportal/XaJeuLfHeSSXCJq.png">
-
-<br />

docs/pattern/navigation.en-US.md

@@ -1,96 +0,0 @@
----
-order: 1
-title: Navigation
----
-
-Broadly speaking, anything telling users where they are, where to go and how to get there can be called navigation. We abstract common navigation patterns and provide handy components to help designers and developers build a clear and smooth navigational system. When using navigation or customizing navigational structures, please pay attention to following common pitfalls:
-
-- Provide visual and contextual cues as much as possible, to prevent users from getting lost
-- Maintain consistency between form and behavior, or reduce the number of items in navigation, to decrease user's learning cost
-- Minimize page transitions (i.e. reduce the number of page transitions required by a task from several to just once or twice), to ensure that the user travels only a short distance from one page to another
-
----
-
-## Commonly Used Navigation Patterns
-
-<Table style="font-size:12px;float:right;width:600px;margin-left:60px;margin-bottom:100px;">
-  <tr>
-    <th></th>
-    <th>Side Navigation</th>
-    <th>Top Navigation</th>
-  </tr>
-  <tr>
-    <th>Pros</th>
-    <td>Hierarchy is easily extensible; Makes room for page content horizontally; Allows fixed position, so that user can navigate to intended page quickly.</td>
-    <td>Conforms to common human habit of browsing top-down, easy to browse and click; Content area usually stays in a fixed width (i.e. 1208px), so page layout is more stable and less sensitive to screen sizes.</td>
-  </tr>
-  <tr>
-    <th>Cons</th>
-    <td>Sensitive to screen sizes because content area usually resides in a Grid.</td>
-    <td>At present, most monitors are widescreen, so top navigation occupies a large area of valuable vertical space while waste a lot of horizontal space; Number and title length of menu items are limited.</td>
-  </tr>
-  <tr>
-    <th>Summary</th>
-    <td>Suitable for multi-level, operation intensive and dashboard-like web apps.</td>
-    <td>Suitable for landing pages and consumer facing web apps.</td>
-  </tr>
-</Table>
-
-We categorize common navigation patterns into side and top navigations. Either has its own pros and cons, and should be chosen accordingly.
-
-Examples for reference [Commonly Used Layout](/docs/spec/layout#docs-spec-layout-demo-top)。
-
-## Side Navigation
-
----
-
-<img class="preview-img no-padding" align="right" alt="Structure Example" src="https://os.alipayobjects.com/rmsportal/hutiGZWQYmIspjw.png">
-
-Navigational structure consists of following parts:
-
-1. Product Logo and Name
-2. Menu Items
-3. Login
-4. Breadcrumb (optional)
-
-#### About Breadcrumb
-
-> 1. Avoid using breadcrumbs as much as you can, especially when a page contains other navigation components sufficiently telling where users are.
-> 2. Breadcrumb can be categorized as:
->    - Path-Centric: dynamically showing a path of how user reaches current page
->    - Position-Centric: usually fixed, showing position of current page among entire site structure
->    - Property-Centric: showing categorical property of current page
-
-<br>
-
-<img class="preview-img no-padding" align="right" alt="1st Level Menu Items" src="https://os.alipayobjects.com/rmsportal/IeuIHdFfKCIABHV.png">
-
-<img class="preview-img no-padding" align="right" alt="2nd Level Menu Items" src="https://os.alipayobjects.com/rmsportal/kAbbeJekohMtubV.png">
-
-<img class="preview-img no-padding" align="right" alt="3rd or Higher Level Menu Items" src="https://os.alipayobjects.com/rmsportal/qaOifucSTWooBTL.png">
-
-Here we provide navigation patterns for different kinds of menu hierarchy.
-
-
-## Top Navigation
-
----
-
-<img class="preview-img no-padding" align="right" alt="Structure Example" src="https://os.alipayobjects.com/rmsportal/MVccMQxgCeYfwjS.png">
-
-Navigational structure consists of following parts:
-
-1. Product Logo and Name
-2. Menu Items
-3. Login
-4. Breadcrumb (optional)
-
-<br>
-
-<img class="preview-img no-padding" align="right" alt="1st Level Menu Items" src="https://os.alipayobjects.com/rmsportal/KvEsIDOYzknbsPT.png">
-
-<img class="preview-img no-padding" align="right" alt="2nd Level Menu Items" src="https://os.alipayobjects.com/rmsportal/xXaCRVPIfmjDyIL.png">
-
-<img class="preview-img no-padding" align="right" alt="3rd or Higher Level Menu Items" src="https://os.alipayobjects.com/rmsportal/ollkHeFUFQElelm.png">
-
-Multi-level Menu Items.

docs/pattern/navigation.zh-CN.md

@@ -1,96 +0,0 @@
----
-order: 1
-title: 导航
----
-
-在广义上，任何告知用户他在哪里，他能去什么地方以及如何到达那里的方式，都可以称之为导航。而我们将中后台常见的导航方式进行提炼和封装，帮助设计者快速构建清晰和流畅的系统。当设计者使用导航或者自定义一些导航结构时，请注意：
-
-1. 尽可能提供标示、上下文线索以及网站地图，避免用户迷路；
-2. 保持导航样式和行为一致或者减少导航数量，降低用户学习成本；
-3. 尽可能减少页面间的跳转（eg：一个常见任务需要多个页面跳转时，请减少至一至两次），让用户移动距离保持简短。
-
----
-
-## 常见导航
-
-<Table style="font-size:12px;float:right;width:600px;margin-left:60px;margin-bottom:100px;">
-  <tr>
-    <th></th>
-    <th>侧栏导航</th>
-    <th>顶部导航</th>
-  </tr>
-  <tr>
-    <th>优点</th>
-    <td>导航的层级扩展性强；水平空间利用率高，可展示更多内容；导航可以固定，使得用户在操作和浏览时可以快速定位和切换当前位置，非常高效。</td>
-    <td>人的浏览习惯是自上而下的，便于浏览和点击；通常将内容放在固定尺寸（例如：1208px）内，整个页面排版稳定，不受用户终端显示器影响。</td>
-  </tr>
-  <tr>
-    <th>缺点</th>
-    <td>内容区域一般放置在栅格上，所以排版受用户终端显示器影响大。</td>
-    <td>目前显示器多为宽屏，顶部导航对垂直空间占用率大，而对水平空间利用率低；由于中英文都是横向书写，顶部导航会限制导航类目的数量和长度。</td>
-  </tr>
-  <tr>
-    <th>总结</th>
-    <td>适用在操作性强、中后台管理性质的应用。</td>
-    <td>一般适用在浏览性强、门户性质的网站，以及一些比较前台化的应用。</td>
-  </tr>
-</Table>
-
-我们将常见的导航模式分为：侧栏导航和顶部导航，两者各有优缺点，设计者可以根据各自的业务需求进行选择。
-
-前端实现代码可以参考 [常用布局](/docs/spec/layout#docs-spec-layout-demo-top)。
-
-## 侧栏导航
-
----
-
-<img class="preview-img no-padding" align="right" alt="结构示例" src="https://os.alipayobjects.com/rmsportal/hutiGZWQYmIspjw.png">
-
-导航的结构由以下几部分组成。
-
-1. 产品 Logo 和名称
-2. 业务类目
-3. 登录工具
-4. 面包屑（可选）
-
-#### 关于面包屑
-
-> 1. 尽可能不使用面包屑，尤其是当前页面的导航能清晰的告诉用户他在哪里时。
-> 2. 面包屑可以分为这几类：
->    - 路径型：是一个动态显示用户到达页面经过的途径。
->    - 位置型：位置型是固定的，显示了页面在网站结构中的位置。
->    - 属性型：属性型给出当前页面的分类信息。
-
-<br>
-
-<img class="preview-img no-padding" align="right" alt="一级类目" src="https://os.alipayobjects.com/rmsportal/IeuIHdFfKCIABHV.png">
-
-<img class="preview-img no-padding" align="right" alt="二级类目" src="https://os.alipayobjects.com/rmsportal/kAbbeJekohMtubV.png">
-
-<img class="preview-img no-padding" align="right" alt="三级类目及以上" src="https://os.alipayobjects.com/rmsportal/qaOifucSTWooBTL.png">
-
-我们定义了不同类目层级所对应的导航样式。
-
-
-## 顶部导航
-
----
-
-<img class="preview-img no-padding" align="right" alt="结构示例" src="https://os.alipayobjects.com/rmsportal/MVccMQxgCeYfwjS.png">
-
-导航的结构由以下几部分组成。
-
-1. 产品 Logo 和名称
-2. 业务类目
-3. 登录工具
-4. 面包屑（可选）
-
-<br>
-
-<img class="preview-img no-padding" align="right" alt="一级类目" src="https://os.alipayobjects.com/rmsportal/KvEsIDOYzknbsPT.png">
-
-<img class="preview-img no-padding" align="right" alt="二级类目" src="https://os.alipayobjects.com/rmsportal/xXaCRVPIfmjDyIL.png">
-
-<img class="preview-img no-padding" align="right" alt="三级类目及以上" src="https://os.alipayobjects.com/rmsportal/ollkHeFUFQElelm.png">
-
-不同类目层级。

docs/pattern/table.md

@@ -1,156 +0,0 @@
----
-order: 4
-title:
-  zh-CN: 表格
-  en-US: Table
----
-
-表格可被视为一种列表。它经常和其他界面元素一起协同，用于展示和操作结构化数据，并经常用于详情信息的入口。
-
----
-
-## 内容
-
-<img class="preview-img" align="right" alt="结构示例" src="https://os.alipayobjects.com/rmsportal/zFqqEqKKAylKkxv.png">
-
-通常表格的组成元素以及相关元素会有，这几部分组成。
-
-1. 按钮组
-2. 搜索条件
-3. 排序
-4. 筛选
-5. 状态点
-6. 单行操作
-7. 分页器／无限加载（可选）
-
-### 筛选
-
-<img class="preview-img" align="right" alt="筛选示例" src="https://os.alipayobjects.com/rmsportal/YRcnmAFUvcfMlpN.png">
-
-当该列选项有限，用户又希望只查看一个或者多个值时，可考虑使用。
-
-### 状态点
-
-<img class="preview-img" align="right" alt="状态示例" src="https://os.alipayobjects.com/rmsportal/EYmtSshUxKydwns.png">
-
-一般用四种颜色来表明系统的不同状态。
-
-### 更多操作
-
-<img class="preview-img" align="right" alt="更多操作示例" description="依次分别为：完整内容、暂时不可用、没有该权限。" src="https://os.alipayobjects.com/rmsportal/ZlcZDOZNZpYQcMM.png">
-
-该项暂时不可用时，直接灰化该操作；用户没有该权限时，直接隐藏该操作。
-
-### 跳转至详情
-
-<img class="preview-img" align="right" alt="名称跳转示例" src="https://os.alipayobjects.com/rmsportal/tfJiUmrUJRzBlzt.png">
-
-把 ID、名称等唯一性的表格项处理成文字链，点击后跳转至详情。
-
-- 优点：节省空间；
-- 缺点：可发现性较低；点击区域受到内容限制，可能出现不易点击的情况。
-
-<br>
-
-<img class="preview-img" align="right" alt="查看跳转示例" src="https://os.alipayobjects.com/rmsportal/zjDqNVTzSrzXaWg.png">
-
-在操作中增加一列『查看』，点击后进行跳转至详情。
-
-- 优点：可发现性高；点击范围固定，不受影响；
-- 缺点：比较占空间。
-
-<br>
-
-结论：可根据业务系统中表格的实际情况，统一使用一种类型。
-
-## 交互
-
-### 显示长表格
-
-参考『列表页面』中的 [显示长列表](/docs/pattern/list#%E6%98%BE%E7%A4%BA%E9%95%BF%E5%88%97%E8%A1%A8)。
-
-### 全选数据
-
-<img class="preview-img" align="right" alt="状态一" src="https://os.alipayobjects.com/rmsportal/QqafGErOPnuDKyy.png">
-
-<img class="preview-img" align="right" alt="状态二：点击 Table 顶部的复选框，出现『Alert』" src="https://os.alipayobjects.com/rmsportal/qwRSMFNilVCNoym.png">
-
-<img class="preview-img" align="right" alt="状态三：点击『选择全部』后" src="https://os.alipayobjects.com/rmsportal/POvEJGjMYAexGut.png">
-
-当使用了分页器，又想实现全选数据的功能，可以结合『Alert』来实现。
-
-### 跨页选数据
-
-<img class="preview-img" align="right" alt="状态一：选中一行数据" src="https://os.alipayobjects.com/rmsportal/OcIWSystreURrPV.png">
-
-<img class="preview-img" align="right" alt="状态二：切换分页后，记录所选的项目" src="https://os.alipayobjects.com/rmsportal/HuzwUWDzXszOkEI.png">
-
-<img class="preview-img" align="right" alt="状态三：在其他页中再选择一项，多记录一项选择" src="https://os.alipayobjects.com/rmsportal/yCjrxTSElzNUsFn.png">
-
-<img class="preview-img" align="right" alt="状态四：用户可以在记录条直接取消选择" src="https://os.alipayobjects.com/rmsportal/jtepHsDPApPnQlD.png">
-
-<img class="preview-img" align="right" alt="状态五：表格选择框同步取消选择" src="https://os.alipayobjects.com/rmsportal/OAVQZqxPyuAWvTh.png">
-
-当需要对表格／列表的数据进行跨分页器选择时，结合『Alert』来实现。
-
-### 固定按钮组
-
-<img class="preview-img" align="right" alt="顶部固定示例" src="https://os.alipayobjects.com/rmsportal/AhgnVIhTIvtHpok.png">
-
-<img class="preview-img" align="right" alt="底部固定示例" src="https://os.alipayobjects.com/rmsportal/hUHidNAJczLRVCg.png">
-
-用在表格行数很多时（一般多于 20 行），又想对表格数据进行频繁的操作时，尤其适用在无限加载的表格中。
-
-### 某一项内容过长
-
-<img class="preview-img" align="right" alt="气泡显示示例" description="当过长信息可以被隐藏时，用户悬浮／点击该项时，用『Tooltip／Popover』来显示完整内容。" src="https://os.alipayobjects.com/rmsportal/vgNHOYAiuQbXCOi.png">
-
-某一项内容过长／不确定长度，既不希望用户在列表和详情之间来回跳转，又不希望不确定的数据撑爆表格时。
-
-### 模块编辑
-
-<img class="preview-img" align="right" alt="模块编辑示例" description="启动和禁用要尽可能相似（对称性交互）；保证启用和禁用切换时，页面不在水平方向不错位。" src="https://os.alipayobjects.com/rmsportal/mUhSLOTjzGYTQaE.png">
-
-适用在易读性高于易编辑性时；适用在有一定数量的项需要编辑时。
-
-### 直接编辑
-
-<img class="preview-img" align="right" alt="直接编辑示例" description="用户输入后，系统需要及时保存数据。" src="https://os.alipayobjects.com/rmsportal/VgvZjqTZBuAfGuO.png">
-
-适用在易编辑性高于易读性时。
-
-### 悬浮层编辑
-
-<img class="preview-img" align="right" alt="悬浮层编辑示例" src="https://os.alipayobjects.com/rmsportal/QhIyXeNxAZEaLjT.png">
-
-悬浮层会遮挡部分页面，适用在上下文对编辑任务不那么重要时。
-
-
-## 规格
-
-### 行高
-
-<img class="preview-img" align="right" alt="标准" src="https://os.alipayobjects.com/rmsportal/OXTCkOkAtaWtzNA.png">
-
-<img class="preview-img" align="right" alt="适中" src="https://os.alipayobjects.com/rmsportal/irjamuwZFdQLYWJ.png">
-
-<img class="preview-img" align="right" alt="紧凑" src="https://os.alipayobjects.com/rmsportal/SdlTVIAoxickNMM.png">
-
-提供了多种规格的行高，适用在页面、弹出框等场景中。
-
-### 列宽
-
-<img class="preview-img bad" align="right" alt="错误示例" src="https://os.alipayobjects.com/rmsportal/TbuuZNfOTrSflVg.png" >
-
-<img class="preview-img good" align="right" alt="正确示例" src="https://os.alipayobjects.com/rmsportal/cSSSfNrFMioHDBJ.png">
-
-一般是根据栅格来排版，通过设定每一列的宽度比列，来保证一定尺寸之上（eg：1366px）有好的浏览效果。需要注意：
-
-1. 表头不换行；
-2. 固定字节长度的列尽量不换行（eg：创建时间、操作等）。
-
-### 对齐方式
-
-<img class="preview-img" align="right" alt="对齐示例" src="https://os.alipayobjects.com/rmsportal/RWCMGdnGSZXYULc.png">
-
-数值右对齐（带小数则按小数点对齐），其余左对齐。

docs/react/getting-started.en-US.md

@@ -167,7 +167,10 @@ If you want to customize your work flow, we recommend using [webpack](http://web
 
 Also, you can use any [scaffold](https://github.com/enaqx/awesome-react#boilerplates) available in the React ecosystem. If you encounter problems, you can use our [webpack config](https://github.com/ant-tool/atool-build/blob/master/src/getWebpackCommonConfig.js) and [modify it](http://ant-tool.github.io/webpack-config.html).
 
-There are some [scaffolds](https://github.com/ant-design/ant-design/issues/129) which have already integrated antd, so you can try and start with one of these, and even contribute.
+If you are trying [parcel](https://parceljs.org), here is [a demo repository](https://github.com/ant-design/parcel-antd).
+
+There are some [scaffolds](http://scaffold.ant.design/) which have already integrated antd, so you can try and start with one of these, and even contribute.
+
 
 ## Import on Demand
 

docs/react/getting-started.zh-CN.md

@@ -165,7 +165,9 @@ IE8 需要配合使用 [react@0.14.x](https://facebook.github.io/react/blog/2016
 
 如果想自己维护工作流，我们推荐使用 [webpack](http://webpack.github.io/) 进行构建和调试。理论上你可以利用 React 生态圈中的 [各种脚手架](https://github.com/enaqx/awesome-react#boilerplates) 进行开发，如果遇到问题可参考我们所使用的 [webpack 配置](https://github.com/ant-tool/atool-build/blob/master/src/getWebpackCommonConfig.js) 进行 [定制](http://ant-tool.github.io/webpack-config.html)。
 
-目前社区也有很多基于 antd 定制的 [脚手架](https://github.com/ant-design/ant-design/issues/129)，欢迎进行试用和贡献。
+如果你使用 [parcel](https://parceljs.org)，这里也有 [一个例子](https://github.com/ant-design/parcel-antd) 可以参考。
+
+目前社区也有很多基于 antd 定制的 [脚手架](http://scaffold.ant.design/)，欢迎进行试用和贡献。
 
 ## 按需加载
 

docs/react/practical-projects.en-US.md

@@ -13,12 +13,12 @@ Include the following:
 
 ## Install dva-cli
 
-Install dva-cli with npm, and make sure the version is later than `0.8.1`.
+Install dva-cli with npm, and make sure the version is later than `0.9.1`.
 
 ```bash
 $ npm install dva-cli -g
 $ dva -v
-0.8.1
+dva-cli version 0.9.1
 ```
 
 ## Create New App
@@ -61,17 +61,15 @@ Install `antd` and `babel-plugin-import` with npm. `babel-plugin-import` is used
 $ npm install antd babel-plugin-import --save
 ```
 
-Edit `.roadhogrc` to integrate `babel-plugin-import`.
+Edit `.webpackrc` to integrate `babel-plugin-import`.
 
 ```diff
-  "extraBabelPlugins": [
--    "transform-runtime"
-+    "transform-runtime",
++  "extraBabelPlugins": [
 +    ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
-  ],
++  ],
 ```
 
-> Notice: dva-cli's build and server is based on roadhog, view [roadhog#Configuration](https://github.com/sorrycc/roadhog/blob/master/README_en-us.md#configuration) for more `.roadhogrc` Configuration.
+> Notice: dva-cli's build and dev is based on roadhog, view [roadhog#Configuration](https://github.com/sorrycc/roadhog/blob/master/README_en-us.md#configuration) for more `.roadhogrc` Configuration.
 
 ## Define Router
 
@@ -174,7 +172,7 @@ Then don't forget to require it in `index.js`:
 
 ```diff
 // 3. Model
-+ app.model(require('./models/products'));
++ app.model(require('./models/products').default);
 ```
 
 ## Connect
@@ -275,4 +273,4 @@ You can:
 - Know all [dva APIs](https://github.com/dvajs/dva/blob/master/docs/API.md)
 - Checkout [dva knowledgemap](https://github.com/dvajs/dva-knowledgemap), including all the basic knowledge with ES6, React, dva
 - Checkout [more FAQ](https://github.com/dvajs/dva/issues?q=is%3Aissue+is%3Aclosed+label%3Afaq)
-- If your project is created with [dva-cli](https://github.com/dvajs/dva-cli) , checkout how to [Configure it](https://github.com/sorrycc/roadhog#配置)
+- If your project is created with [dva-cli](https://github.com/dvajs/dva-cli) , checkout how to [Configure it](https://github.com/sorrycc/roadhog#configuration)

docs/react/practical-projects.zh-CN.md

@@ -15,12 +15,12 @@ title: 项目实战
 
 ## 安装 dva-cli
 
-通过 npm 安装 dva-cli 并确保版本是 `0.8.1` 或以上。
+通过 npm 安装 dva-cli 并确保版本是 `0.9.1` 或以上。
 
 ```bash
 $ npm install dva-cli -g
 $ dva -v
-0.8.2
+dva-cli version 0.9.1
 ```
 
 ## 创建新应用
@@ -63,17 +63,15 @@ To create a production build, use npm run build.
 $ npm install antd babel-plugin-import --save
 ```
 
-编辑 `.roadhogrc`，使 `babel-plugin-import` 插件生效。
+编辑 `.webpackrc`，使 `babel-plugin-import` 插件生效。
 
 ```diff
-  "extraBabelPlugins": [
--    "transform-runtime"
-+    "transform-runtime",
++  "extraBabelPlugins": [
 +    ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
-  ],
++  ],
 ```
 
-> 注：dva-cli 基于 roadhog 实现 build 和 server，更多 `.roadhogrc` 的配置详见 [roadhog#配置](https://github.com/sorrycc/roadhog#配置)
+> 注：dva-cli 基于 roadhog 实现 build 和 dev，更多 `.roadhogrc` 的配置详见 [roadhog#配置](https://github.com/sorrycc/roadhog#配置)
 
 ## 定义路由
 
@@ -176,7 +174,7 @@ export default {
 
 ```diff
 // 3. Model
-+ app.model(require('./models/products'));
++ app.model(require('./models/products').default);
 ```
 
 ## connect 起来
@@ -277,4 +275,4 @@ File sizes after gzip:
 - 掌握 dva 的[所有 API](https://github.com/dvajs/dva/blob/master/docs/API_zh-CN.md)
 - 查看 [dva 知识地图](https://github.com/dvajs/dva-knowledgemap) ，包含 ES6, React, dva 等所有基础知识
 - 查看 [更多 FAQ](https://github.com/dvajs/dva/issues?q=is%3Aissue+is%3Aclosed+label%3Afaq)，看看别人通常会遇到什么问题
-- 如果你基于 dva-cli 创建项目，最好了解他的 [配置方式](https://github.com/sorrycc/roadhog#配置)
+- 如果你基于 dva-cli 创建项目，最好了解他的 [配置方式](https://github.com/sorrycc/roadhog/blob/master/README_zh-cn.md#配置)

docs/react/use-in-typescript.zh-CN.md

@@ -178,7 +178,7 @@ $ yarn add react-app-rewire-less --dev
   const { getLoader } = require("react-app-rewired");
 + const rewireLess = require('react-app-rewire-less');
 
-  module.exports = function override(config) {
+  module.exports = function override(config, env) {
     const tsLoader = getLoader(
       config.module.rules,
       rule =>

docs/resource/download.en-US.md

@@ -1,44 +0,0 @@
----
-order: 0
-title: Download
----
-
-Please find below some of the design resources and tools about Ant Design that we consider valuable. More of this is still being collected.
-
-<div class="resource-cards">
-<a target="_blank" href="https://github.com/ant-design/ant-design/releases/download/resource/Ant.Design.Template.sketch" class="resource-card">
-  <img src="https://zos.alipayobjects.com/rmsportal/vfxJzCLqZxehgquvQNqX.png">
-  <span class="resource-card-content">
-    <span class="resource-card-title">Desktop Components</span>
-    <span class="resource-card-description">Sketch Template for Desktop</span>
-  </span>
-</a>
-<a target="_blank" href="https://github.com/ant-design/ant-design/releases/download/resource/Ant.Design.Mobile.Template.sketch" class="resource-card">
-  <img src="https://zos.alipayobjects.com/rmsportal/vfxJzCLqZxehgquvQNqX.png">
-  <span class="resource-card-content">
-    <span class="resource-card-title">Mobile Components</span>
-    <span class="resource-card-description">Sketch Template for Mobile</span>
-  </span>
-</a>
-<a target="_blank" href="http://library.ant.design" class="resource-card">
-  <img src="https://zos.alipayobjects.com/rmsportal/qXrCHrsuyrINSeerFOerLcTTFZiEzHAJ.png">
-  <span class="resource-card-content">
-    <span class="resource-card-title">Ant Design Library</span>
-    <span class="resource-card-description">A powerful Axure library of Ant Design</span>
-  </span>
-</a>
-<a target="_blank" href="https://github.com/ant-design/ant-design/releases/download/resource/iconfont-3.x.zip" class="resource-card">
-  <img src="https://os.alipayobjects.com/rmsportal/UEpOFKUQTZaUfnW.png">
-  <span class="resource-card-content">
-    <span class="resource-card-title">Web Font</span>
-    <span class="resource-card-description">Icon font package for your local reference</span>
-  </span>
-</a>
-<a target="_blank" href="http://ux.ant.design" class="resource-card">
-  <img src="https://os.alipayobjects.com/rmsportal/yfTqrQuSKcqBDLY.png">
-  <span class="resource-card-content">
-    <span class="resource-card-title">Ant UX</span>
-    <span class="resource-card-description">A series prototypes that help creating application structure and user flow</span>
-  </span>
-</a>
-</div>

docs/resource/download.zh-CN.md

@@ -1,44 +0,0 @@
----
-order: 0
-title: 资源下载
----
-
-这里提供 Ant Design 相关设计资源和设计工具的下载，更多设计资源正在整理和完善中。
-
-<div class="resource-cards">
-<a target="_blank" href="https://github.com/ant-design/ant-design/releases/download/resource/Ant.Design.Template.sketch" class="resource-card">
-  <img src="https://zos.alipayobjects.com/rmsportal/vfxJzCLqZxehgquvQNqX.png">
-  <span class="resource-card-content">
-    <span class="resource-card-title">Desktop Components</span>
-    <span class="resource-card-description">桌面组件 Sketch 模板</span>
-  </span>
-</a>
-<a target="_blank" href="https://github.com/ant-design/ant-design/releases/download/resource/Ant.Design.Mobile.Template.sketch" class="resource-card">
-  <img src="https://zos.alipayobjects.com/rmsportal/vfxJzCLqZxehgquvQNqX.png">
-  <span class="resource-card-content">
-    <span class="resource-card-title">Mobile Components</span>
-    <span class="resource-card-description">移动组件 Sketch 模板</span>
-  </span>
-</a>
-<a target="_blank" href="http://library.ant.design" class="resource-card">
-  <img src="https://zos.alipayobjects.com/rmsportal/qXrCHrsuyrINSeerFOerLcTTFZiEzHAJ.png">
-  <span class="resource-card-content">
-    <span class="resource-card-title">Ant Design Library</span>
-    <span class="resource-card-description">一套强大的 Ant Design 的 Axure 部件库</span>
-  </span>
-</a>
-<a target="_blank" href="https://github.com/ant-design/ant-design/releases/download/resource/iconfont-3.x.zip" class="resource-card">
-  <img src="https://os.alipayobjects.com/rmsportal/UEpOFKUQTZaUfnW.png">
-  <span class="resource-card-content">
-    <span class="resource-card-title">Web Font</span>
-    <span class="resource-card-description">网络字体图标的本地文件包</span>
-  </span>
-</a>
-<a target="_blank" href="http://ux.ant.design" class="resource-card">
-  <img src="https://os.alipayobjects.com/rmsportal/yfTqrQuSKcqBDLY.png">
-  <span class="resource-card-content">
-    <span class="resource-card-title">Ant UX</span>
-    <span class="resource-card-description">一套页面逻辑原型库，帮你梳理页面逻辑</span>
-  </span>
-</a>
-</div>

docs/resource/github.md

@@ -1,5 +0,0 @@
----
-order: 3
-link: //github.com/ant-design/ant-design
-title: GitHub
----

docs/resource/reference.en-US.md

@@ -1,65 +0,0 @@
----
-order: 1
-title: Reference
----
-
-Please find below the books that inspired us, saved our time and helped us to overcome difficulties when designing components and patterns. If you want to know more about UI design, we recommend you these awesome books.
-
-<div class="resource-cards">
-<a target="_blank" href="http://as.wiley.com/WileyCDA/WileyTitle/productCd-1118766571.html" class="resource-card">
-  <img src="http://media.wiley.com/product_data/coverImage300/71/11187665/1118766571.jpg">
-  <span class="resource-card-content">
-    <span class="resource-card-title">About Face</span>
-    <span class="resource-card-description">Author: Alan Cooper, Robert Reimann, David Cronin, Christopher Noessel</span>
-    <span class="resource-card-description">Publisher: Wiley</span>
-  </span>
-</a>
-<a target="_blank" href="http://shop.oreilly.com/product/9780596516253.do" class="resource-card">
-  <img src="http://akamaicovers.oreilly.com/images/9780596516253/cat.gif">
-  <span class="resource-card-content">
-    <span class="resource-card-title">Designing Web Interfaces</span>
-    <span class="resource-card-description">Author: Bill Scott, Theresa Neil</span>
-    <span class="resource-card-description">Publisher: O'Reilly Media</span>
-  </span>
-</a>
-<a target="_blank" href="http://shop.oreilly.com/product/0636920000556.do" class="resource-card">
-  <img src="http://akamaicovers.oreilly.com/images/0636920000556/cat.gif">
-  <span class="resource-card-content">
-    <span class="resource-card-title">Designing Interfaces</span>
-    <span class="resource-card-description">Author: Jenifer Tidwell</span>
-    <span class="resource-card-description">Publisher: O'Reilly Media</span>
-  </span>
-</a>
-<a target="_blank" href="http://www.peachpit.com/store/non-designers-design-book-9780133966152" class="resource-card">
-  <img src="http://www.peachpit.com/ShowCover.aspx?isbn=9780133966152&type=f">
-  <span class="resource-card-content">
-    <span class="resource-card-title">Non-Designer's Design Book</span>
-    <span class="resource-card-description">Author: Robin Williams</span>
-    <span class="resource-card-description">Publisher: Peachpit Press</span>
-  </span>
-</a>
-<a target="_blank" href="http://www.jnd.org/books/design-of-everyday-things-revised.html" class="resource-card">
-  <img src="http://www.jnd.org/assets/images/the-design-of-everyday-things2.jpg">
-  <span class="resource-card-content">
-    <span class="resource-card-title">The Design of Everyday Things</span>
-    <span class="resource-card-description">Author: Don Norman</span>
-    <span class="resource-card-description">Publisher: Basic Books, A Member of the Perseus Books Group</span>
-  </span>
-</a>
-<a target="_blank" href="https://www.amazon.com/Emotional-Design-Love-Everyday-Things/dp/0465051367" class="resource-card">
-  <img src="https://images-na.ssl-images-amazon.com/images/I/41tEBlukEtL._SX328_BO1,204,203,200_.jpg">
-  <span class="resource-card-content">
-    <span class="resource-card-title">Emotional Design</span>
-    <span class="resource-card-description">Author: Don Norman</span>
-    <span class="resource-card-description">Publisher: Basic Books, A Member of the Perseus Books Group</span>
-  </span>
-</a>
-<a target="_blank" href="http://rosenfeldmedia.com/books/web-form-design/" class="resource-card">
-  <img src="http://rosenfeldmedia.com/wp-content/uploads/2014/11/2456180445_932e3749f4_o-640x960.jpg">
-  <span class="resource-card-content">
-    <span class="resource-card-title">Web Form Design</span>
-    <span class="resource-card-description">Author: Luke Wroblewski</span>
-    <span class="resource-card-description">Publisher: Rosenfeld Media</span>
-  </span>
-</a>
-</div>

docs/resource/reference.zh-CN.md

@@ -1,65 +0,0 @@
----
-order: 1
-title: 文献素材
----
-
-在进行模式、组件和语言的整理中，《About Face 4》、《Web 界面设计》、《界面设计模式》、《写给大家看的设计书》、《设计心理学》、《Web 表单设计：点石成金的艺术》等书籍给了我们很多的启示，帮助我们节约了大量时间，并成功克服了很多困难。如果想了解更多设计相关的内容，建议你去阅读这些非常棒的书籍。
-
-<div class="resource-cards">
-<a target="_blank" href="http://book.douban.com/subject/26642302/" class="resource-card">
-  <img src="https://os.alipayobjects.com/rmsportal/PeeRQQIGQJCswxe.png">
-  <span class="resource-card-content">
-    <span class="resource-card-title">About Face 4</span>
-    <span class="resource-card-description">作者: Alan.cooper</span>
-    <span class="resource-card-description">出版社: 电子工业出版社</span>
-  </span>
-</a>
-<a target="_blank" href="http://book.douban.com/subject/3821157/" class="resource-card">
-  <img src="https://os.alipayobjects.com/rmsportal/CoojVXLtoWrUSmI.png">
-  <span class="resource-card-content">
-    <span class="resource-card-title">Web 界面设计</span>
-    <span class="resource-card-description">作者: Bill Scott / Theresa Neil</span>
-    <span class="resource-card-description">出版社: 电子工业出版社</span>
-  </span>
-</a>
-<a target="_blank" href="http://book.douban.com/subject/25716088/" class="resource-card">
-  <img src="https://os.alipayobjects.com/rmsportal/oRxdwgZMwfEFeJa.png">
-  <span class="resource-card-content">
-    <span class="resource-card-title">界面设计模式</span>
-    <span class="resource-card-description">作者: Tidwell,J.</span>
-    <span class="resource-card-description">出版社: 电子工业出版社</span>
-  </span>
-</a>
-<a target="_blank" href="http://book.douban.com/subject/3323633/" class="resource-card">
-  <img src="https://os.alipayobjects.com/rmsportal/SNdJVyZaZwdwJmr.png">
-  <span class="resource-card-content">
-    <span class="resource-card-title">写给大家看的设计书</span>
-    <span class="resource-card-description">作者: Robin Williams</span>
-    <span class="resource-card-description">出版社: 人民邮电出版社</span>
-  </span>
-</a>
-<a target="_blank" href="http://book.douban.com/subject/26102860/" class="resource-card">
-  <img src="https://os.alipayobjects.com/rmsportal/txGrSvGFMTTrwjY.png">
-  <span class="resource-card-content">
-    <span class="resource-card-title">设计心理学 1</span>
-    <span class="resource-card-description">作者: 唐纳德•A•诺曼</span>
-    <span class="resource-card-description">出版社: 中信出版社</span>
-  </span>
-</a>
-<a target="_blank" href="http://book.douban.com/subject/26424688/" class="resource-card">
-  <img src="https://os.alipayobjects.com/rmsportal/cZQyAARFxzaKEOG.png">
-  <span class="resource-card-content">
-    <span class="resource-card-title">设计心理学 3</span>
-    <span class="resource-card-description">作者: 唐纳德•A•诺曼</span>
-    <span class="resource-card-description">出版社: 中信出版社</span>
-  </span>
-</a>
-<a target="_blank" href="http://book.douban.com/subject/4886100/" class="resource-card">
-  <img src="https://os.alipayobjects.com/rmsportal/moeFnnuXrputdag.png">
-  <span class="resource-card-content">
-    <span class="resource-card-title">Web 表单设计：点石成金的艺术</span>
-    <span class="resource-card-description">作者: Luke Wroblewski</span>
-    <span class="resource-card-description">出版社: 清华大学出版社</span>
-  </span>
-</a>
-</div>

docs/spec/alignment.en-US.md

@@ -12,8 +12,8 @@ As is described in the Law of Continuity of Gestalt psychology, in the perceptua
 
 ## Text Alignment
 
-<img class="preview-img good" align="right" alt="good example" description="Align the title and text to the left; use one visual starting point." src="https://os.alipayobjects.com/rmsportal/xvmiAZAIxrEcqdP.png">
-<img class="preview-img bad" align="right" asslt="bad example" description="The tile and the text start in different visual point. This is not recommended except the differences between title and text are emphasized. " src="https://os.alipayobjects.com/rmsportal/qvycImsTiDGVgLJ.png">
+<img class="preview-img good" align="right" alt="good example" description="Align the title and text to the left; use one visual starting point." src="https://gw.alipayobjects.com/zos/rmsportal/lVDlIgxvuXSMQvJJVMnu.png">
+<img class="preview-img bad" align="right" asslt="bad example" description="The tile and the text start in different visual point. This is not recommended except the differences between title and text are emphasized. " src="https://gw.alipayobjects.com/zos/rmsportal/DAhkAEIoXYdljmxsJTjl.png">
 
 If the paragraphs or the length of the words are too short or too loose, then a unified visual starting point is needed.
 
@@ -21,17 +21,15 @@ If the paragraphs or the length of the words are too short or too loose, then a
 
 ## Form Alignment
 
-<img class="preview-img" align="right" alt="example of colon alignment" src="https://os.alipayobjects.com/rmsportal/DmEbaUsrpJkRyUh.png">
+<img class="preview-img" align="right" alt="example of colon alignment" src="https://gw.alipayobjects.com/zos/rmsportal/OaTkwGfGxRSFsvAlzZMq.png">
 
 Colon alignment(right-align) can encircle the content into a certain range. Users can infer where the chart is through the regular arranged colon so that the speed of filling in the chart can be speeded up.
 
-More ways of aligning，please visit [(/docs/pattern/form#对齐方式)](/docs/pattern/form#对齐方式)。
-
 ---
 
 ## Numbers Alignment
 
-<img class="preview-img good" align="right" alt="good example" src="https://os.alipayobjects.com/rmsportal/hCSQTEmahFyQcWk.png">
-<img class="preview-img bad" align="right" alt="bad example" src="https://os.alipayobjects.com/rmsportal/FDjScmPlWFPxkxL.png">
+<img class="preview-img good" align="right" alt="good example" src="https://gw.alipayobjects.com/zos/rmsportal/bIJAZcUmaRxJeFxZJwUp.png">
+<img class="preview-img bad" align="right" alt="bad example" src="https://gw.alipayobjects.com/zos/rmsportal/zUmANVIhBanDnlyOhvaH.png">
 
 To compare the numbers faster, we suggest that all numbers should keep the same digit numbers after decimal point; meanwhile all numbers should be right-aligned. 。

docs/spec/alignment.zh-CN.md

@@ -1,5 +1,5 @@
 ---
-category: 设计原则
+category: 原则
 order: 2
 title: 对齐
 ---
@@ -12,8 +12,8 @@ title: 对齐
 
 ## 文案类对齐
 
-<img class="preview-img good" align="right" alt="推荐示例" description="标题和正文左对齐，使用了一个视觉起点。" src="https://os.alipayobjects.com/rmsportal/xvmiAZAIxrEcqdP.png">
-<img class="preview-img bad" align="right" alt="不推荐示例" description="标题和正文使用了两个视觉起点，不推荐该种对齐方式，除非刻意强调两者区别。" src="https://os.alipayobjects.com/rmsportal/qvycImsTiDGVgLJ.png">
+<img class="preview-img good" align="right" alt="推荐示例" description="标题和正文左对齐，使用了一个视觉起点。" src="https://gw.alipayobjects.com/zos/rmsportal/lVDlIgxvuXSMQvJJVMnu.png">
+<img class="preview-img bad" align="right" alt="不推荐示例" description="标题和正文使用了两个视觉起点，不推荐该种对齐方式，除非刻意强调两者区别。" src="https://gw.alipayobjects.com/zos/rmsportal/DAhkAEIoXYdljmxsJTjl.png">
 
 如果页面的字段或段落较短、较散时，需要确定一个统一的视觉起点。
 
@@ -21,17 +21,15 @@ title: 对齐
 
 ## 表单类对齐
 
-<img class="preview-img" align="right" alt="冒号对齐示例" src="https://os.alipayobjects.com/rmsportal/DmEbaUsrpJkRyUh.png">
+<img class="preview-img" align="right" alt="冒号对齐示例" src="https://gw.alipayobjects.com/zos/rmsportal/OaTkwGfGxRSFsvAlzZMq.png">
 
 冒号对齐（右对齐）能让内容锁定在一定范围内，让用户眼球顺着冒号的视觉流，就能找到所有填写项，从而提高填写效率。
 
-更多对齐方式，请查看[『模式／表单／规格／对齐方式』](/docs/pattern/form#对齐方式)。
-
 ---
 
 ## 数字类对齐
 
-<img class="preview-img good" align="right" alt="正确示例" src="https://os.alipayobjects.com/rmsportal/hCSQTEmahFyQcWk.png">
-<img class="preview-img bad" align="right" alt="错误示例" src="https://os.alipayobjects.com/rmsportal/FDjScmPlWFPxkxL.png">
+<img class="preview-img good" align="right" alt="正确示例" src="https://gw.alipayobjects.com/zos/rmsportal/bIJAZcUmaRxJeFxZJwUp.png">
+<img class="preview-img bad" align="right" alt="错误示例" src="https://gw.alipayobjects.com/zos/rmsportal/zUmANVIhBanDnlyOhvaH.png">
 
 为了快速对比数值大小，建议所有数值取相同有效位数，并且右对齐。

docs/spec/cases.en-US.md

@@ -1,74 +1,42 @@
 ---
+category: Ant Design
 order: 2
 title: Cases
 ---
 
-Starting in April 2015, more and more products of Ant Financial follow Ant Design specification, covering multiple business lines and more than 400 applications.
-Designed for enterprise-like complex UIs, used by both professional and non-professional designers,
-Ant Design has a low learning curve that helps you getting started fast and achieve rapid results.
+Starting in April 2015, more and more products of Ant Financial follow Ant Design specification, covering multiple business lines and more than 80 applications. Designed for enterprise-class complex UIs, used by both professional and non-professional designers, Ant Design has a low learning curve that helps you getting started fast and achieve rapid results.
 
-With a strong focus on proof-based design and user experience,
-Ant Design provides a complete front-end development solution that can greatly enhance the design and development efficiency.
-
-Currently, there are many products and sites using Ant Design.
-References to some of these implementations can be found [here](https://github.com/ant-design/ant-design/issues/477).
-If your solutions are using Ant Design, please leave us a message.
+Currently, there are many products and sites using Ant Design. If your solutions are using Ant Design, please [leave us a message](https://github.com/ant-design/ant-design/issues/477).
 
 ## Best Practices
 
 ---
 
-### Financial Cloud
-
-<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/kBgLUfEwxlBdwUr.png">
-<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/SeXqPPyixccDJBY.png">
-<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/IRjHVNFWRlCMdnb.png">
+### Ant Financial Cloud
 
 Cloud-oriented financial services, used by financial institutions that benefit from customized business cloud computing services.
 It assists financial institutions to upgrade to a new financial restructuring, promotion of capacity platforms, data and technology.
 
-<p><a class="outside-link" href="https://www.cloud.alipay.com/" target="_blank">Website</a></p>
+[Visit](https://www.cloud.alipay.com)
+
+![Ant Financial Cloud](https://gw.alipayobjects.com/zos/rmsportal/KtMLtXsTucsJLWgfwZcw.png)
 
 ---
 
 ### OceanBase Cloud Platform
 
-<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/JUAXPZYtVyUQfGu.png">
-<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/lpzTKvgLpJgKGpq.png">
-<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/GVJGaWbqfBFedWN.png">
+OceanBase Cloud is a distributed relational database in a real sense, and OceanBase Cloud Platform is the OceanBase cloud-based database service that can help users quickly create and use OceanBase service.
 
-OceanBase Cloud is a distributed relational database in a real sense, but OceanBase Cloud Platform is the OceanBase cloud-based database service that can help users quickly create and use OceanBase service.
+[Visit](http://oceanbase.alipay.com)
 
-<p><a class="outside-link internal" href="http://oceanbase.alipay.com/" target="_blank">Website</a></p>
+![OceanBase Cloud Platform](https://gw.alipayobjects.com/zos/rmsportal/hhtmRPAtPsUhwHpULFuu.png)
 
 ---
 
-### Service Experience Platform
+### Ant Design Pro
 
-<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/PiSveQClPzmxPTy.png">
-<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/vsoYArBwcPRZnVE.png">
-<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/TMyfsUGQSjOdGIm.png">
-<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/sBlmIcJXZdJTJbC.png">
-<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/fRDuTjVbVApxyzU.png">
+Based on Ant Design's design values, Ant Design Pro is an enterprise-class frontend/design solution that continues to build up and refine typical template/business components/ancillary design resources based on design specifications and foundation components, Further enhance the experience of "users" and "designers" in the design and development of enterprise-class product design.
 
-Experience Platform is used for collecting all the points of contact and information of the user (including microblogging and other channels).
-Through data mining, it exposes the users's experience and it helps the company's internal business team / product managers, facilitating the experience problem solving, in order to achieve healthy functioning streams.
+[Visit](https://pro.ant.design)
 
-<p><a class="outside-link internal" href="http://tiyan.alipay.com/" target="_blank">Website</a></p>
-
----
-
-[More cases](https://github.com/ant-design/ant-design/issues/477) from community.
-
-<style>
-.preview-image-boxes {
-  margin-top: -36px;
-}
-.preview-image-wrapper {
-  padding: 0;
-  background: #fff;
-}
-.toc {
-  display: none;
-}
-</style>
+![Ant Design Pro](https://gw.alipayobjects.com/zos/rmsportal/KZIUjJJZTEqMOgBHQkCb.png)

docs/spec/cases.zh-CN.md

@@ -1,65 +1,43 @@
 ---
+category: Ant Design
 order: 2
 title: 实践案例
 ---
 
-从 2015 年 4 月起，Ant Design 在蚂蚁金服中后台产品线迅速推广，对接多条业务线，覆盖系统 400 个以上。定位于中台业务的 Ant Design 兼顾专业和非专业的设计人员，具有学习成本低、上手速度快、实现效果好等特点，并且提供从界面设计到前端开发的全链路生态，可以大大提升设计和开发的效率。
+从 2015 年 4 月起，Ant Design 在蚂蚁金服中后台产品线迅速推广，对接多条业务线，覆盖系统 800 个以上。定位于中台业务的 Ant Design 兼顾专业和非专业的设计人员，具有学习成本低、上手速度快、实现效果好等特点，并且提供从界面设计到前端开发的全链路生态，可以大大提升设计和开发的效率。
 
-Ant Design 目前在外部也有 [许多产品实践](https://github.com/ant-design/ant-design/issues/477)，如果你的公司和产品从中受益，欢迎留言。
+Ant Design 目前在外部也有许多产品实践，如果你的公司和产品从中受益，[欢迎留言](https://github.com/ant-design/ant-design/issues/477)。
 
 ## 最佳实践
 
----
-
-### 金融云
-
-<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/kBgLUfEwxlBdwUr.png">
-<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/SeXqPPyixccDJBY.png">
-<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/IRjHVNFWRlCMdnb.png">
+### 蚂蚁金融云
 
 金融云是面向金融机构深度定制的行业云计算服务；助力金融机构向新金融转型升级，推动平台、数据和技术方面的能力全面对外开放。
 
-<p><a class="outside-link" href="https://www.cloud.alipay.com/" target="_blank">立即访问</a></p>
+[立即访问](https://www.cloud.alipay.com)
 
----
+![蚂蚁金融云](https://gw.alipayobjects.com/zos/rmsportal/KtMLtXsTucsJLWgfwZcw.png)
 
-### OceanBase Cloud Platform
-
-<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/JUAXPZYtVyUQfGu.png">
-<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/lpzTKvgLpJgKGpq.png">
-<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/GVJGaWbqfBFedWN.png">
+### OceanBase 云平台
 
 OceanBase 是一款真正意义上的云端分布式关系型数据库，而 OceanBase Cloud Platform（云平台）是以 OceanBase 数据库为基础的云服务，可以帮助用户快速创建、使用 OB 服务。
 
-<p><a class="outside-link internal" href="http://oceanbase.alipay.com/" target="_blank">立即访问</a></p>
+[立即访问](http://oceanbase.alipay.com)
 
----
+![OceanBase 云平台](https://gw.alipayobjects.com/zos/rmsportal/hhtmRPAtPsUhwHpULFuu.png)
 
-### 服务宝体验平台
+### 语雀
 
-<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/PiSveQClPzmxPTy.png">
-<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/vsoYArBwcPRZnVE.png">
-<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/TMyfsUGQSjOdGIm.png">
-<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/sBlmIcJXZdJTJbC.png">
-<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/fRDuTjVbVApxyzU.png">
+与团队一起编写文档，极致体验，高效协同。在微笑中构建专属知识库。
 
-体验平台是收集用户与公司所有的接触点（包括来电咨询／微博等渠道）的数据，通过数据挖掘和体验同学运营的方式推送给公司内部的业务团队／产品经理，并推动体验问题解决，从而实现良性运转流。
+[立即访问](http://yuque.com/)
 
-<p><a class="outside-link internal" href="http://tiyan.alipay.com/" target="_blank">立即访问</a></p>
+![语雀](https://gw.alipayobjects.com/zos/rmsportal/doPiJWqbRNWCrHPBOcuo.png)
 
----
+### Ant Design Pro
 
-更多 [社区案例](https://github.com/ant-design/ant-design/issues/477)。
+Ant Design Pro 是一个企业级中后台前端/设计解决方案，秉承 Ant Design 的设计价值观，致力于在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板/业务组件/配套设计资源，进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。
 
-<style>
-.preview-image-boxes {
-  margin-top: -36px;
-}
-.preview-image-wrapper {
-  padding: 0;
-  background: #fff;
-}
-.toc {
-  display: none;
-}
-</style>
+[立即访问](https://pro.ant.design)
+
+![Ant Design Pro](https://gw.alipayobjects.com/zos/rmsportal/KZIUjJJZTEqMOgBHQkCb.png)

docs/spec/colors.en-US.md

@@ -1,25 +1,26 @@
 ---
-order: 3
+category: Visual
+order: 0
 title: Colors
 ---
 
-Not only is color an effective way to create brand recognition, but it also plays an important role in conveying information, providing interactive feedback, and bringing attention to a particular element. Ant Design makes using color simple and practical through an emphasis on efficiency, clarity, and user experience. Please note the following three points when choosing colors:
+Ant Design interprets the color system into two levels: a system-level color system and a product-level color system.
 
-- Color usage and positioning should respect cognitive psychology (stay user-focused)
-- Visual hierarchy should be clear-cut, and color should establish visual continuity
-- Color usage should be in compliance with the [WCAG 2.0 standards](https://www.w3.org/WAI/WCAG20/glance/ "Web Content Accessibility Guidelines") by using sufficient contrast to ensure accessibility
+The system-level color system mainly defines the basic color palette, neutral color palette and data visualization color palette in the design of Ant Financial. The product-level color system is in the specific design process, based on the color of the system to further define the tone of the product in accordance with the requirements and function of the color.
 
 ---
 
-## Color Palettes
+## Color Model
 
-Ant Design's color palettes consist of 10 shallow-to-deep color swatches, and default palettes are defined for certain hues. Users can select a swatch from the color scheme using keywords. In theory, all colors used in the design should be taken from a color palette.
+Ant Design's design team preferred to design with the HSB color model, which makes it easier for designers to have a clear psychological expectation of color when adjusting colors, as well as facilitate communication in teams.
 
-After hard working of designers and programmers, we got a great [color palette generation algorithm](https://github.com/ant-design/ant-design/blob/244a2fd2da5561dc13a32ea894ba1bdbd13421aa/components/style/color/colorPalette.less) which can be used to generate a whole new palette based on an input color you specify, replacing our original tint / shade color system).
+## System-level Color System
 
-Ant Design's default theme consists of eight basic colors, each of which is derived from the above algorithm.
+Ant Design system-level color system also comes from the "natural" design language. Designers abstract the natural scenes through the capture, combined with the technical gene of Ant Financial, forming a unique 12 colors. Further through a large number of observations, to capture the different colors of natural light under the law of change, with the art of drawing ideas, the 12 colors were derived. The definition of neutral color palette is balanced with readability, aesthetics and usability.
 
-> Note: In these shallow-to-deep palettes, the 6th color cell [generally satisfies WCAG 2.0](https://leaverou.github.io/contrast-ratio/)'s 4.5:1 minimum contrast ratio (AA level), and is used as the default for the palette（Yellow color don't follow WCAG in white color because it is designed to be used with dark font/background).
+### Base Color Palettes
+
+Ant Design's base color palette totals 120 colors, including 12 primary colors and their derivative colors. These colors can basically include the need for color in background applications design.
 
 `````__react
 import ColorPalettes from '../../site/theme/template/Color/ColorPalettes';
@@ -27,7 +28,19 @@ import ColorPalettes from '../../site/theme/template/Color/ColorPalettes';
 ReactDOM.render(<ColorPalettes />, mountNode);
 `````
 
-In order to provide contrast against different background shades, we chose `White #FFFFFF` and `Black #000000` with varying transparency to distinguish foreground text. For details, please see [font color](/docs/spec/font#font-color).
+Ant Design's color palette also has the ability to further extend. After careful elaboration by designers and programmers, we have come up with a set of color generation tools that combine the natural variation of colors. When there is a need for further color design, designers simply define the primary colors according to certain rules and will get a complete range of derived colors automatically .
+
+### Neutral Color Palette
+
+`````__react
+import Palette from '../../site/theme/template/Color/Palette';
+
+ReactDOM.render(<Palette color={{ name: 'grey' }} direction="horizontal" />, mountNode);
+`````
+
+### Data Visualization  Color Palette (Coming soon)
+
+Data visualization color palette is based on the basic color palette and neutral color palette, and based on the principle that AntV's "effective, clear, accurate and beautiful".
 
 ### Palette Generation Tool
 
@@ -41,45 +54,28 @@ ReactDOM.render(<ColorPaletteTool />, mountNode);
 
 ---
 
-## Color application
+## Product-level Color System
 
-### Brand color application
+### Brand Color
 
-<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/lVKfKMuLmaTlnTDitPEJ.png" alt="Ant Design's commonly used brand color values">
+<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/diEtYItrQZpqsiPsadeU.png">
 
-The brand color is one of the most intuitive visual elements used that is used to embody product characteristics and communicate ideas. When selecting colors, it is important to understand how the brand color is used in the user interface. Taking the default styles of an Ant Design web component as an example, the brand color is mainly reflected in key actions and when highlighting important information.
+The brand color is one of the most intuitive visual elements used that is used to embody product characteristics and communicate ideas. When selecting colors, it is important to understand how the brand color is used in the user interface. In the basic color palette to choose the main color, we recommend choosing the color plate from the shallow depth of the sixth color as the main color. Ant Design's brand color comes from blue of the base color palette, it's Hex value is 1890FF, application scenarios include: key action point, the operation status, important information highlighting, graphics and other scenes.
 
-> Note: Images and logos can not automatically adhere to the color palette, but should be compatible.
+### Functional Color
 
-### Neutral color application
+<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/rfkSGJhMIhnUYILGIlrh.png">
 
-<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/AmXwsVOWrLxDfwLNlyvL.png" alt="Ant Design's neutral color values">
+Functional color represents a clear message as well as status, such as success, error, failure, reminder, link and so on. Functional color selection need to comply with the user's basic understanding of color. We suggest that the functional colors should be kept as consistent as possible under a set of product systems. Do not have too much customization to interfere with the user's cognitive experience. Ant Design's functional color palette is shown on the right:
 
-Gray as a neutral color is used extensively in Ant Design's web design, and its use facilitates the targeting and functional guidance of key content. This color is mainly seen in the navigation frame, backgrounds, secondary operations, and so on.
+### Neutral Color
 
-### Functional color application
+<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/mkaVzBvUUEcTKeUxhgpN.png">
 
-<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/mewwdThVwyTQzpZQtYXw.png" alt="Ant Design's functional color card">
+Neutral color is mainly used in a large part of the text interface, in addition to the background, borders, dividing lines, and other scenes are also very common. Neutral color definition needs to consider the difference between dark background and light background, while incorporating the WCAG 2.0 standard. The neutral color of Ant Design is based on transparency, as shown on the right:
 
-Functional colors are colors that are used to convey state. These are mainly used in notifications, form validations, status messages, etc. Green indicates success, yellow indicates alerts / warnings, red indicates errors, gray indicates skipped / disabled.
+---
 
-### Visual hierarchy
+## Color Application In Enterprise Product Design
 
-<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/ADUfVlZwjziJRUQSMbMt.png" alt="Good example" description="Guide the user's line of sight through brand color">
-
-Use the brand color to convey important information or to highlight important actions while surrounding it with large areas of neutral color. This allows users to focus more on the task itself, improving efficiency.
-
-<br />
-
-<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/RmSDSeAAYphuiDFszIMa.png" alt="Bad example" description="Avoid using too many colors or colors in large areas">
-
-> Note: We suggest using no more than three colors in the user interface (except for within data charts and graphic illustrations)
-
-### Color contrast
-
-<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/jeyvhMIQgoPUotNerRGy.png" alt="Good example">
-<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/ppdlrVnFCsYVicjDrnzi.png" alt="Bad example" description="When the contrast is less than 3:1, it becomes difficult to read">
-
-Ant Design's color palette conforms to the WCAG 2.0 standard. The foreground and background colors should always meet the minimum standard of a 3:1 contrast ratio.
-
-- [Contrast ratio tool](https://leaverou.github.io/contrast-ratio/#%23454545-on-%23fff)
+In the design of background applications of Ant Financial, our attitude towards color is restrained. Color is used more based on information delivery, operational guidance and interactive feedback purposes. Above these principles that do not undermine operational efficiency and affect the clear communication of information, a rational choice of color is key. Of course, with illustrations and display page can be properly broken this idea.

docs/spec/colors.zh-CN.md

@@ -1,25 +1,26 @@
 ---
-order: 3
+category: 视觉
+order: 0
 title: 色彩
 ---
 
-设计中对色彩的运用不仅应考虑品牌的识别性，还需达到信息传递、操作指引、交互反馈，或是强化和凸显某一个元素的目的。基于操作系统更注重高效、清晰等特点，Ant Design 的用色上更偏向简洁实用一些。在选择色彩时有以下三个注意点：
+Ant Design 将色彩体系解读成两个层面：系统级色彩体系和产品级色彩体系。
 
-- 色彩应与产品定位相匹配，且符合用户心理认知；
-- 视觉层次应清晰分明，为重要行动点或关键信息定义一个主色，并建立视觉连续性；
-- 遵守 WCAG 2.0 的 标准，保证足够的对比度，让色彩更容易被视障碍（色盲）用户识别。
+系统级色彩体系主要定义了蚂蚁中台设计中的基础色板、中性色板和数据可视化色板。产品级色彩体系则是在具体设计过程中，基于系统色彩进一步定义符合产品调性以及功能诉求的颜色。
 
 ---
 
-## 色板
+## 色彩模型
 
-Ant Design PC 端的色板由 10 个由浅至深的色彩单元格组成，我们为部分色彩格定义了默认使用场景，用户在进行色彩配色时只需根据关键词选择一条色板即可得到一套完整的系统配色方案。在理论上，在 UI 设计中的色彩都应取自这份色板。
+Ant Design 的设计团队倾向于采用 HSB 色彩模型进行设计，该模型更便于设计师在调整色彩时对于颜色有明确的心理预期，同时也方便团队间的沟通。
 
-经过设计师和程序员的精心调教，总结出一套 [色板生成算法](https://github.com/ant-design/ant-design/blob/244a2fd2da5561dc13a32ea894ba1bdbd13421aa/components/style/color/colorPalette.less)（用以取代 1.x 的 tint/shade 色彩系统和 2.x 的贝塞尔曲线色彩算法）。使用者只需指定主色，便可导出一条完整的渐变色板。
+## 系统级色彩体系
 
-Ant Design 的色板由 8 种基本色彩组成，每种基本色（第 6 格）又按上述算法衍生出 10 种渐变色。
+Ant Design 系统级色彩体系同样源于『自然』的设计价值观。设计师通过对自然场景的抽象捕捉，结合蚂蚁的技术基因，形成了特有的 12 色。进一步又通过大量的观察，捕捉不同色彩在自然光下的变化规律，借助美术中素描的思路，对 12 个颜色进行了衍生。在中性色板的定义上，则是平衡了可读性、美感以及可用性得出的。
 
-> 注：在由浅至深的色板里，第 6 格色彩单元格普遍满足 [WCAG 2.0](http://leaverou.github.io/contrast-ratio/) 的 4.5:1 最小对比度（AA 级），我们将其定义为色板的默认品牌色。（黄色用于搭配黑色字体/背景，故不满足和白色的对比度）
+### 基础色板
+
+Ant Design 的基础色板共计 120 个颜色，包含 12 个主色以及衍生色。这些颜色基本可以满足中后台设计中对于颜色的需求。
 
 `````__react
 import ColorPalettes from '../../site/theme/template/Color/ColorPalettes';
@@ -27,7 +28,21 @@ import ColorPalettes from '../../site/theme/template/Color/ColorPalettes';
 ReactDOM.render(<ColorPalettes />, mountNode);
 `````
 
-为了考虑文本在不同颜色背景下的呈现，我们选择了『White #FFFFFF』和『Black #000000』并配以透明度来区分文本的等级层次。详情请查看 [字体颜色](/docs/spec/font#字体颜色)。
+Ant Design 的色板还具备进一步拓展的能力。经过设计师和程序员的精心调制，结合了色彩自然变化的规律，我们得出了一套色彩生成工具，当有进一步色彩设计需求时，设计者只需按照一定规则定义完毕主色，便可以自动获得一系列完整的衍生色。
+
+### 中性色板
+
+中性色包含了黑、白、灰。在蚂蚁中后台的网页设计中被大量使用到，合理的选择中性色能够令页面信息具备良好的主次关系，助力阅读体验。Ant Design 的中性色板一共包含了从白到黑的 10 个颜色。
+
+`````__react
+import Palette from '../../site/theme/template/Color/Palette';
+
+ReactDOM.render(<Palette color={{ name: 'grey' }} direction="horizontal" />, mountNode);
+`````
+
+### 数据可视化色板（敬请期待）
+
+数据可视化色板是在基础色板以及中性色板的基础上，融合 AntV 『有效、清晰、准确、美』的原则产生的。
 
 ### 色板生成工具
 
@@ -41,45 +56,29 @@ ReactDOM.render(<ColorPaletteTool />, mountNode);
 
 ---
 
-## 色彩应用
+## 产品级色彩体系
 
 ### 品牌色的应用
 
-<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/lVKfKMuLmaTlnTDitPEJ.png" alt="Ant Design 品牌色常用色值">
+<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/msiCkgfDaDgrTUuumxlq.png">
 
-品牌色是体现产品特性和传播理念最直观的视觉元素之一。在色彩选取时，需先了解品牌色在界面中的使用场景及选色范围。以 Ant Design 网页组件的默认样式为例，品牌色主要体现在关键行动点及操作状态、重要信息高亮等场景。
+品牌色是体现产品特性和传播理念最直观的视觉元素之一。在色彩选取时，需要先明确品牌色在界面中的使用场景及范围。在基础色板中选择主色，我们建议选择色板从浅自深的第六个颜色作为主色。
+Ant Design 的品牌色取自基础色板的蓝色，Hex 值为 1890FF，应用场景包括：关键行动点，操作状态、重要信息高亮，图形化等场景。
 
-> 注：图形插画和 logo 可以不必遵循色板，但需保持相近的色系。
+### 功能色
 
-### 中性色的应用
+<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/XrBtAnEiozhuTdrifhFr.png">
 
-<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/AmXwsVOWrLxDfwLNlyvL.png" alt="Ant Design 中性色常用色值">
+功能色代表了明确的信息以及状态，比如成功、出错、失败、提醒、链接等。功能色的选取需要遵守用户对色彩的基本认知。我们建议在一套产品体系下，功能色尽量保持一致，不要有过多的自定义干扰用户的认知体验。Ant Design 的功能色板如右图：
 
-灰色作为中性色在 Ant Design 的网页设计中被大量使用到，它的使用有利于关键内容的衬托和功能的引导。这类色彩主要体现在导航框架、背景底色、描边、或次级操作等等。
+### 中性色
 
-### 功能色的应用
+<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/WAlfDnpYniUjaLzmnIqf.png">
 
-<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/mewwdThVwyTQzpZQtYXw.png" alt="Ant Design 功能色卡">
+Ant Design 的中性色主要被大量的应用在界面的文字部分，此外背景、边框、分割线、等场景中也非常常见。产品中性色的定义需要考虑深色背景以及浅色背景的差异，同时结合 WCAG 2.0 标准。Ant Design 的中性色在落地的时候是按照透明度的方式实现的，具体色板如右图：
 
-UI 设计中，比较稳定的色彩除了中性色外还有具备特定含义的功能色，这类色彩起到传递功能信息、代表某种状态等作用。主要应用于消息通知、反馈提醒、表单校验这类场景中的成功、出错、失败、提醒、链接等状态。
+---
 
-### 视觉层次
+## 企业级产品设计中的色彩应用
 
-<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/ADUfVlZwjziJRUQSMbMt.png" alt="正确示例" description="通过品牌色引导用户的视线路径">
-
-将品牌色赋予在重要信息或关键主动点上，并衬以大面积的中性色，可以让用户更聚焦到任务本身，从而提高任务的执行效率。
-
-<br />
-
-<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/RmSDSeAAYphuiDFszIMa.png" alt="错误示例" description="操作界面使用的色彩应尽量避免面积过大或种类过多而造成用户视觉疲劳">
-
-> 注：界面用色建议不超过三种（数据图表和图形类插画除外）。
-
-### 色彩的易识别性
-
-<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/jeyvhMIQgoPUotNerRGy.png" alt="正确示例">
-<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/ppdlrVnFCsYVicjDrnzi.png" alt="错误示例" description="当对比度数值低于 3:1 时，弱视用户将很难识别">
-
-Ant Design 的色板颜色遵守 WCAG 2.0 的标准，操作类的色彩搭配都应满足颜色对比值 3:1 的最低标准。
-
-- [色彩对比值校验工具](http://leaverou.github.io/contrast-ratio/#%23454545-on-%23fff)
+在蚂蚁中后台的设计中，我们对于色彩的态度是克制的。色彩在使用时更多的是基于信息传递、操作引导和交互反馈等目的。在不破坏操作效率，影响信息的清晰传达的这些原则之上，理性的选择颜色是关键。当然在配图插画以及展示性页面中可以适当打破这一思路。

docs/spec/contrast.en-US.md

@@ -12,8 +12,8 @@ Contrast is one of the effective ways to add visual interest to your page, and t
 
 ## The Contrast of major and minor relationship
 
-<img class="preview-img good" align="right" alt="good example" src="https://os.alipayobjects.com/rmsportal/RruKZUSYEwauGdF.png">
-<img class="preview-img bad" align="right" alt="bad example" src="https://os.alipayobjects.com/rmsportal/TOupLSPNQkBTmYw.png">
+<img class="preview-img good" align="right" alt="good example" src="https://gw.alipayobjects.com/zos/rmsportal/DXDSNzVmrVwVRJCTyaTH.png">
+<img class="preview-img bad" align="right" alt="bad example" src="https://gw.alipayobjects.com/zos/rmsportal/tMlELOuJrJrrYtTAbnlu.png">
 
 In order to help user make a quick operation (something like the form，modal), a more important operation or a operation with higher frequency would be emphasized.
 
@@ -21,7 +21,7 @@ In order to help user make a quick operation (something like the form，modal),
 
 <br>
 
-<img class="preview-img" align="right" alt="Example of ignoring the primary and secondary sequence" description="Accept and Reject should use default button, for UI should not affect user's decision." src="https://os.alipayobjects.com/rmsportal/xskurfmyKPumFSv.png">
+<img class="preview-img" align="right" alt="Example of ignoring the primary and secondary sequence" description="Accept and Reject should use default button, for UI should not affect user's decision." src="https://gw.alipayobjects.com/zos/rmsportal/gniiMTPEHagxaelGBjAe.png">
 
 When there’s something needs users to make decision prudently, the system should remain neutral. It shouldn’t make the decision for users or lead them to make judgement.
 
@@ -29,9 +29,9 @@ When there’s something needs users to make decision prudently, the system shou
 
 ## Contrast of whole and part
 
-<img class="preview-img" align="right" alt="Example of whole and part 1" src="https://os.alipayobjects.com/rmsportal/HEDJpTyufnfXUOP.png">
+<img class="preview-img" align="right" alt="Example of whole and part 1" src="https://gw.alipayobjects.com/zos/rmsportal/mGCufzQKHZvViwxAVPPY.png">
 
-<img class="preview-img" align="right" alt="Example of whole and part 2" src="https://os.alipayobjects.com/rmsportal/bafqoUWFgXjsuSG.png">
+<img class="preview-img" align="right" alt="Example of whole and part 2" src="https://gw.alipayobjects.com/zos/rmsportal/vQrVvLzKbGXbZotcaMVg.png">
 
 Taking advantage of changing the typesetting, the typeface and the size, we highlight the different levels and differentiate the ensemble and the part, which would make the page be more flexible and rhythmic.
 
@@ -39,9 +39,9 @@ Taking advantage of changing the typesetting, the typeface and the size, we high
 
 ## Contrast of the state relation
 
-<img class="preview-img" align="right" alt="Example of static contrast" description="Points with various colors would be used to show different states. " src="https://os.alipayobjects.com/rmsportal/UHjarNwxrXndznP.png">
+<img class="preview-img" align="right" alt="Example of static contrast" description="Points with various colors would be used to show different states. " src="https://gw.alipayobjects.com/zos/rmsportal/PMVYKxaLBApJFyXAxkHy.png">
 
-<img class="preview-img" align="right" alt="Example of dynamic contrast" description="When the mouse doesn’t be moved, this item and other items would show different visual effects obviously, which would influence the user’s operation." src="https://os.alipayobjects.com/rmsportal/DCAtXAEaFnAXEmG.png">
+<img class="preview-img" align="right" alt="Example of dynamic contrast" description="When the mouse doesn’t be moved, this item and other items would show different visual effects obviously, which would influence the user’s operation." src="https://gw.alipayobjects.com/zos/rmsportal/WXNjOhgQDMnNoieFrFMP.png">
 
 Taking advantage of changing colors and adding assistant shapes, we realize the comparison of state relation, which could help users differentiate various information better
 

docs/spec/contrast.zh-CN.md

@@ -1,5 +1,5 @@
 ---
-category: 设计原则
+category: 原则
 order: 3
 title: 对比
 ---
@@ -12,8 +12,8 @@ title: 对比
 
 ## 主次关系对比
 
-<img class="preview-img good" align="right" alt="正确示例" src="https://os.alipayobjects.com/rmsportal/RruKZUSYEwauGdF.png">
-<img class="preview-img bad" align="right" alt="错误示例" src="https://os.alipayobjects.com/rmsportal/TOupLSPNQkBTmYw.png">
+<img class="preview-img good" align="right" alt="正确示例" src="https://gw.alipayobjects.com/zos/rmsportal/DXDSNzVmrVwVRJCTyaTH.png">
+<img class="preview-img bad" align="right" alt="错误示例" src="https://gw.alipayobjects.com/zos/rmsportal/tMlELOuJrJrrYtTAbnlu.png">
 
 为了让用户能在操作上（类似表单、弹出框等场景）快速做出判断， 来突出其中一项相对更重要或者更高频的操作。
 
@@ -21,7 +21,7 @@ title: 对比
 
 <br>
 
-<img class="preview-img" align="right" alt="不区分主次的示例" description="『通过』和『驳回』都使用次按钮，系统保持中立。" src="https://os.alipayobjects.com/rmsportal/xskurfmyKPumFSv.png">
+<img class="preview-img" align="right" alt="不区分主次的示例" description="『通过』和『驳回』都使用次按钮，系统保持中立。" src="https://gw.alipayobjects.com/zos/rmsportal/gniiMTPEHagxaelGBjAe.png">
 
 在一些需要用户慎重决策的场景中，系统应该保持中立，不能替用户或者诱导用户做出判断。
 
@@ -29,9 +29,9 @@ title: 对比
 
 ## 总分关系对比
 
-<img class="preview-img" align="right" alt="总分关系示例 1" src="https://os.alipayobjects.com/rmsportal/HEDJpTyufnfXUOP.png">
+<img class="preview-img" align="right" alt="总分关系示例 1" src="https://gw.alipayobjects.com/zos/rmsportal/mGCufzQKHZvViwxAVPPY.png">
 
-<img class="preview-img" align="right" alt="总分关系示例 2" src="https://os.alipayobjects.com/rmsportal/bafqoUWFgXjsuSG.png">
+<img class="preview-img" align="right" alt="总分关系示例 2" src="https://gw.alipayobjects.com/zos/rmsportal/vQrVvLzKbGXbZotcaMVg.png">
 
 通过调整排版、字体、大小等方式来突出层次感，区分总分关系，使得页面更具张力和节奏感。
 
@@ -39,9 +39,9 @@ title: 对比
 
 ## 状态关系对比
 
-<img class="preview-img" align="right" alt="静态对比示例" description="用不同颜色点，来表明不同状态。" src="https://os.alipayobjects.com/rmsportal/UHjarNwxrXndznP.png">
+<img class="preview-img" align="right" alt="静态对比示例" description="用不同颜色点，来表明不同状态。" src="https://gw.alipayobjects.com/zos/rmsportal/PMVYKxaLBApJFyXAxkHy.png">
 
-<img class="preview-img" align="right" alt="动态对比示例" description="鼠标悬停时，该项和其他项呈现出明显不同的视觉效果，响应用户操作。" src="https://os.alipayobjects.com/rmsportal/DCAtXAEaFnAXEmG.png">
+<img class="preview-img" align="right" alt="动态对比示例" description="鼠标悬停时，该项和其他项呈现出明显不同的视觉效果，响应用户操作。" src="https://gw.alipayobjects.com/zos/rmsportal/WXNjOhgQDMnNoieFrFMP.png">
 
 通过改变颜色、增加辅助形状等方法来实现状态关系的对比，以便用户更好的区分信息。
 

docs/spec/copywriting.md

@@ -1,4 +1,7 @@
 ---
+category:
+  zh-CN: 模式
+  en-US: Patterns
 order: 6
 title:
   zh-CN: 文案
@@ -22,8 +25,8 @@ title:
 
 ### 明确表述立足点
 
-<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/YNOszTuSiTsssVpHhEGs.png" alt="正确示范">
-<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/NRHIpjNTFNPcrWIDnJwS.png" alt="错误示范" description="侧重在『我们』为用户提供了什么，而不是以用户视角的关注点为中心。">
+<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/uBzzoUAMupDWPXFUeRIn.png" alt="正确示范">
+<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/EOVTgwoOsYptbkUqpMKn.png" alt="错误示范" description="侧重在『我们』为用户提供了什么，而不是以用户视角的关注点为中心。">
 
 在表述内容时，关注点应该是用户和他们能用你的产品做什么，而不是你和你的产品在为他们做什么，所以内容表述的立足点很重要。
 
@@ -33,8 +36,8 @@ title:
 
 ### 精简语句
 
-<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/ZiROyfAdBfUrEdOBYAIb.png" alt="正确示范">
-<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/TLTPbYTIYtiFBdhGzzuH.png" alt="错误示范">
+<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/dAcEgVUcAcUqbMjaEydw.png" alt="正确示范">
+<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/xRUVqOQsBOqzdmZIQDLa.png" alt="错误示范">
 
 省略无用词汇，不重复用户已知事实；在绝大多数交互场景下，都无需界面描述出全部的细节。
 
@@ -42,8 +45,8 @@ title:
 
 ### 使用用户熟悉的语言
 
-<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/mnKFWLrBvzWLrfYALlkZ.png" alt="正确示范">
-<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/KOubjQVgYFwpvYJwXXrQ.png" alt="错误示范" description="站在用户的角度，说用户熟悉的话。">
+<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/FOcLNnbiaZOTMRHAyeVZ.png" alt="正确示范">
+<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/tUmMsssHDlGqlKbRwYlH.png" alt="错误示范" description="站在用户的角度，说用户熟悉的话。">
 
 使用简单、直接、易于理解的词汇，让内容和指示更容易被用户接受和理解。
 
@@ -51,13 +54,13 @@ title:
 
 ### 表述一致
 
-<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/kZxTKnieUptIioCYsMFD.png" alt="正确示范" description="备注描述使用相同的介词。">
-<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/moXaaoyeNxPHLcanTNVG.png" alt="错误示范" description="同一区块描述中出现了『受』和『被』两个不同的介词。">
+<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/ToMaEybHQCrcAfcYRbxF.png" alt="正确示范" description="备注描述使用相同的介词。">
+<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/BUFFQwfvLqTLrOzaEccX.png" alt="错误示范" description="同一区块描述中出现了『受』和『被』两个不同的介词。">
 
-<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/gwNjncNTEREdWiKYrUAL.png" alt="正确示范" description="在同一页面、同一区域在语序上一致。">
-<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/DYJkKoQzEKCQGxATBdsB.png" alt="错误示范" description="语序上不一致，会影响用户理解成本。">
+<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/AAaXSGqNUBlZChkrMbYl.png" alt="正确示范" description="在同一页面、同一区域在语序上一致。">
+<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/DYCoXTphnpdkMMCtyMdN.png" alt="错误示范" description="语序上不一致，会影响用户理解成本。">
 
-<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/pZZSDjsQLqSVPKOYPgso.png" description="操作名称和目标页面的标题一致。">
+<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/sNqQYWEJCAzCxcYCBGYD.png" description="操作名称和目标页面的标题一致。">
 
 - 描述同一个事物的词汇要保持统一;
 - 上下文的语法、语种、语序要保持统一;
@@ -65,8 +68,8 @@ title:
 
 ### 重要的信息放在显著位置
 
-<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/AGAnUPBZlPrjyXIktJCq.png" alt="正确示范" description="在有限的空间内将重要的信息放在最前面（或通过高亮、留白等方式突出重要信息）。">
-<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/mylnmEBXVmlLurzJWiZq.png" alt="错误示范" description="用户最关心的信息内容藏在段落中，不易搜寻。">
+<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/clWcgMqBypLAAosLQHes.png" alt="正确示范" description="在有限的空间内将重要的信息放在最前面（或通过高亮、留白等方式突出重要信息）。">
+<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/hSiLeNGgmeqWvVHCNoeE.png" alt="错误示范" description="用户最关心的信息内容藏在段落中，不易搜寻。">
 
 让用户第一眼看到最重要的内容，不用到段落中寻找。
 
@@ -74,30 +77,30 @@ title:
 
 ### 完整、直接得阐述信息
 
-<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/GASGWmhAxtIgBeJWVtBu.png" alt="正确示范" description="用户可以从中了解了设置后会有什么好处。">
-<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/pEJsSOGVBiAjcSPhYWkh.png" alt="错误示范" description="用户感受不到设置的意义，不会去设置。">
+<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/ioBKvBqCNzUwQDyjMiIa.png" alt="正确示范" description="用户可以从中了解了设置后会有什么好处。">
+<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/EiwnPMETQAmWlHSGAWEX.png" alt="错误示范" description="用户感受不到设置的意义，不会去设置。">
 
 当我们希望用户进行一个操作时，要专注于用户能得到什么，以及用户的感受。在操作前引导告知用户操作的目的或重要性，能促进用户更愿意去执行。
 
 <br />
 
-<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/tizekZPwmzDRErFQHORz.png" alt="正确示范" description="相对于『失败』，『无法完成』是更加客观的结果，更容易让用户在心理上接受。用户需要知道在出现问题的情况下如何进行下一步操作。">
-<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/AdKMFRcCKgTLUuYaAAkN.png" alt="错误示范" description="对于异常情况不是冷冰冰告诉你『失败』。">
+<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/dlAkFzezQEwtNnZDWpQh.png" alt="正确示范" description="相对于『失败』，『无法完成』是更加客观的结果，更容易让用户在心理上接受。用户需要知道在出现问题的情况下如何进行下一步操作。">
+<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/qqrgyclPnhBFgPEYsBXd.png" alt="错误示范" description="对于异常情况不是冷冰冰告诉你『失败』。">
 
 报错是 UI 中常见的功能，它同样是用户体验中不可小视的组成部分。当用户填写的内容出错的时候，你的报错信息应当符合用户的认知，用易于理解的方式表述出来。
 
 ### 用词精准完整
 
-<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/munDtTOsHjRcvOfVEsCS.png" alt="正确示范" description="完整的表达。">
-<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/itpQLlpjvEGgdvHkdGOC.png" alt="错误示范" description="不完整，有歧义或太口语化。">
+<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/mCusyeTfzbyDCYxvwEPM.png" alt="正确示范" description="完整的表达。">
+<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/cugctFUEXcVUNnsZRLMD.png" alt="错误示范" description="不完整，有歧义或太口语化。">
 
-<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/DOJdYTWqpbrwFJMTDAZD.png" alt="正确示范" description="专业用语精准。">
-<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/EYQBkePnyOXZhirDXBJu.png" alt="错误示范" description="专业的行业用词有别字。">
+<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/jvYzIkRbdICzNvxeVfBr.png" alt="正确示范" description="专业用语精准。">
+<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/TFhFTbqHlEXTMOyCxIvN.png" alt="错误示范" description="专业的行业用词有别字。">
 
-<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/KMnFshyMGODpIBEzWGci.png" alt="正确示范" description="时间信息的表述精准完整。">
-<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/MOppPcGzLxutrzmtxNSd.png" alt="错误示范" description="时间信息的描述词不是具体的『日』、『月』，容易让用户产生困扰。">
+<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/qIwLlXOyJQlAqFwWSUuo.png" alt="正确示范" description="时间信息的表述精准完整。">
+<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/HBCyJcXZYmtLECZUtjzE.png" alt="错误示范" description="时间信息的描述词不是具体的『日』、『月』，容易让用户产生困扰。">
 
-<table style="font-size:12px;float:right;width:600px;margin-left:60px;margin-bottom:100px;">
+<table style="font-size:12px;float:right;width:496px;margin-left:60px;margin-bottom:100px;clear:both;">
   <tr>
     <th style="border-bottom: 2px solid #108ee9;width:20%;">使用</th>
     <th style="border-bottom: 2px solid #f04134;width:25%;">不使用</th>
@@ -147,22 +150,22 @@ title:
 
 ### 拉近彼此的距离
 
-<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/qYJmqCMojZrLHDhTeDDC.png" alt="正确示范">
-<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/VtTmFViiLyzffMlylBab.png" alt="错误示范" description="建议不要使用『您』，太过客气，让用户感觉有些疏远。">
+<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/LXVkAEabvRXwOTYkewzV.png" alt="正确示范">
+<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/KxSWWhUiCPYaadFucIEr.png" alt="错误示范" description="建议不要使用『您』，太过客气，让用户感觉有些疏远。">
 
 直接使用『你』、『我』来和用户对话，与用户建立亲密感。避免使用『您』，让用户感觉太过疏远。
 
 <br />
 
-<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/yjQeptUiKWSvRBhgiBEi.png" alt="正确示范">
-<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/EvbzsGGPhPvPwUEAEjui.png" alt="错误示范" description="同时出现了称谓『我』和『你』，用户会感到迷惑，不清楚到底指代对象是谁。">
+<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/mkFlHfRJxVaFpCVnhJxz.png" alt="正确示范">
+<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/SwzkNWboQRPncuORBPmL.png" alt="错误示范" description="同时出现了称谓『我』和『你』，用户会感到迷惑，不清楚到底指代对象是谁。">
 
 > 注：不要在同一个句式中混用『你』和『我』，交互中指代混乱会让用户相当纠结。
 
 ### 友好、尊重用户
 
-<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/MxAUSbigfmwsTsDGrKAh.png" alt="正确示范" description="引导用户正确输入内容。">
-<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/XvmDmIOKZiKbPdXiVlow.png" alt="错误示范" description="不能、不要、请勿都给人命令或强迫的感觉。">
+<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/SiyDiAnuljqDrZgcFiXn.png" alt="正确示范" description="引导用户正确输入内容。">
+<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/ZSgEJWJJeOYBDDsenOuS.png" alt="错误示范" description="不能、不要、请勿都给人命令或强迫的感觉。">
 
 多给用户支持与鼓励，不要命令和强迫用户。
 
@@ -170,8 +173,8 @@ title:
 
 ### 表述不应过于极端
 
-<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/nZjyHDlBnVtMSTBbhlxj.png" alt="正确示范">
-<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/ruQzHpRSGjXwERKXiVXi.png" alt="错误示范" description="『绝不』过于绝对，让用户感到不适。">
+<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/zXLrYMCesvdZXdSoJEcP.png" alt="正确示范">
+<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/MTIsErHJIswPHVfUFQnI.png" alt="错误示范" description="『绝不』过于绝对，让用户感到不适。">
 
 不要使用过于绝对的表述，这样会让用户觉得不适。
 
@@ -179,8 +182,8 @@ title:
 
 ### 英文名词大小写规范
 
-<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/CytTOToWDKUvpWlAHwBu.png" alt="正确示范">
-<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/JuyMVqYJOnQzwZnwucml.png" alt="错误示范">
+<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/ruuIBHvkqfJrCNuWrGZZ.png" alt="正确示范">
+<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/yEqZfFLnyUACJhprXCqt.png" alt="错误示范">
 
 产品名称全称，首字母大写。产品名称缩写需要全部大写，如：ESC、SLB 等；
 
@@ -188,29 +191,29 @@ title:
 
 <br />
 
-<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/nKHHKvQMIKGTmNSVtIZQ.png" alt="正确示范">
-<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/ndRBdHSdlsTogOxfiyYg.png" alt="错误示范">
+<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/aVOygdsFMYeQZJNWDouv.png" alt="正确示范">
+<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/obNsZSLYKAqMtsXrEHYg.png" alt="错误示范">
 
 正确使用专有名词的大小写规范。
 
 <br />
 
-<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/GCqgBzYXTRBbfffRoFaK.png" alt="正确示范">
-<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/hDoSuattUMGWQNPOMysN.png" alt="错误示范">
+<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/sDSMymVeCJGoMJLBpoHe.png" alt="正确示范">
+<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/tUQvbqMLPGFjwiywBmJP.png" alt="错误示范">
 
 全英文的标题，标签，菜单项等等都要遵循英文句式中首字母大写的规范。
 
 ### 统计数据使用阿拉伯数字
 
-<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/jUlNKkbKgKsviSGZpEyu.png" alt="正确示范" description="阿拉伯数字的信息传递效率更高">
-<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/pLAutmjpTnexUTaUAEXN.png" alt="错误示范">
+<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/WOtjvzMQnfuAHJXcifgW.png" alt="正确示范" description="阿拉伯数字的信息传递效率更高">
+<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/LhJSOSsQrMFCxtFHqNqL.png" alt="错误示范">
 
 这也是常见问题，用户对于数字的感知速度更快，使用数字而非文字表述会更加有效。
 
 ### 省略不必要的标点
 
-<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/asvLGJUPfJmkSthIWzcG.png" alt="正确示范">
-<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/mrUQxiFLinuBELviCRIP.png" alt="错误示范">
+<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/QGpLpUFgZnTDzYJCeuun.png" alt="正确示范">
+<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/fQhiFpjLcHJtJJGzElUT.png" alt="错误示范">
 
 为了帮助用户更加高效得扫视文本内容，可以省略不必要的断句点。
 
@@ -222,8 +225,8 @@ title:
 - 悬停文本中的提示
 - 表格中的句子
 
-<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/bviZMQSqXqCSNTBTJwzs.png" alt="正确示范">
-<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/QrcYEddtAMTHkPeeqiFw.png" alt="错误示范">
+<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/UMLpWSOrmsYFlozQFGXu.png" alt="正确示范">
+<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/raqemTlQncDdOczUCKvo.png" alt="错误示范">
 
 以下元素单独出现时需要加上标点：
 
@@ -232,8 +235,8 @@ title:
 
 ### 谨慎使用感叹号
 
-<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/omCTCcBDzuFueCjjPxNJ.png" alt="正确示范">
-<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/XlPHSVrOFXYkYbgKEwYQ.png" alt="错误示范">
+<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/CJAEXjDelaghIOHZAxgh.png" alt="正确示范">
+<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/SgcrhDeaVpNmeFWRiJnc.png" alt="错误示范">
 
 感叹号会让文案显得过于激动，容易让气氛变得过于紧张。
 
@@ -241,7 +244,7 @@ title:
 
 ### 基本标点规范
 
-<table style="font-size:12px;float:right;width:600px;margin-left:60px;margin-bottom:100px;">
+<table style="font-size:12px;float:right;width:496px;margin-left:60px;margin-bottom:100px;">
   <tr>
     <th>标点名称</th>
     <th>字符</th>

docs/spec/data-display.md

@@ -1,4 +1,7 @@
 ---
+category:
+  zh-CN: 模式
+  en-US: Patterns
 order: 10
 title:
   zh-CN: 数据展示
@@ -14,7 +17,7 @@ title:
 
 ## 表格（Table）
 
-<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/OGkfpUVQFWqlioeslvue.png">
+<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/PetAXSByOolFbtmLazQz.png">
 
 表格被公认为是展现数据最为清晰、高效的形式之一。它常和排序、搜索、筛选、分页等其他界面元素一起协同，适用于信息的收集和展示、数据的分析和归纳整理、以及操作结构化数据。它结构简单，分隔归纳明确，使信息之间更易于对比，大大提升了用户对信息的接收效率和理解程度。
 
@@ -24,7 +27,7 @@ title:
 
 ## 折叠面板（Collapse）
 
-<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/UzmOpWyvIZmFibFPOjuo.png">
+<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/ypeOSafZJYqVJUHcJeef.png">
 
 折叠面板通过对信息的分组和收纳，指引用户递进式的获取信息，使界面保持整洁的同时增加空间的有效利用率。
 
@@ -37,19 +40,19 @@ title:
 
 ## 卡片（Card）
 
-<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/fpXuAguWCWWbmQNzOmnM.png" description="如页面内容加载过慢时，可采用『预加载』或『分步获取』的方式来缓解用户在等待时间中的焦虑感。">
+<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/xtIGZmqUHAovPPKjwyVT.png" description="如页面内容加载过慢时，可采用『预加载』或『分步获取』的方式来缓解用户在等待时间中的焦虑感。">
 
 卡片是一种承载信息的容器，对可承载的内容类型无过多限制，它让一类信息集中化，增强区块感的同时更易于操作；卡片通常以网格或矩阵的方式排列，传达相互之间的层级关系。适合较为轻量级和个性化较强的信息区块展示。
 
 > 注：
 > 1.  卡片通常根据栅格进行排列，建议一行最多不超过四个
-> 2. 在有限的卡片空间内需注意信息之间的间距，若信息过长可做截断处理。例如『Ant Design 适用用于中台…』
+> 2. 在有限的卡片空间内需注意信息之间的间距，若信息过长可做截断处理。例如『Ant Design 适用于中台…』
 
 ---
 
 ## 走马灯（Carousel）
 
-<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/fELwaApwGyZoUDCZQtLb.png">
+<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/FaAbGkTwlhykSDSBqWbW.png">
 
 作为一组平级内容的并列展示模式，常用于图片或卡片轮播，可由用户主动触发或者系统自动轮播。适合用于官网首页、产品介绍页等展示型区块。
 
@@ -61,7 +64,7 @@ title:
 
 ## 树形控件（Tree）
 
-<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/iIicElfzdIoNzyRJXlqx.png">
+<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/QZyxnLWUkbIuTqGYxTQs.png">
 
 『树形控件』通过逐级大纲的形式来展现信息的层级关系，高效且具有极佳的视觉可视性，使得整体信息框架一目了然。
 
@@ -71,7 +74,7 @@ title:
 
 ## 时间轴（Timeline）
 
-<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/bIYaUSPaBWSzXEpRsIjO.png">
+<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/WmQeylAyWUNKmQIyoQGH.png">
 
 垂直展示的时间流信息，一般按照时间倒叙记录事件，追踪用户当下以及过去做了什么。
 

docs/spec/data-entry.md

@@ -1,4 +1,7 @@
 ---
+category:
+  zh-CN: 模式
+  en-US: Patterns
 order: 9
 title:
   zh-CN: 数据录入
@@ -18,7 +21,7 @@ title:
 
 ### 文本框（Input）
 
-<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/BPMNkGkHFqbBCRMUdfRh.png">
+<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/tlOeUNcdGkvWedJpiTSz.png">
 
 输入较少的字符总数，使用单行的输入形式。
 
@@ -26,25 +29,25 @@ title:
 
 ### 文本域（Textarea）
 
-<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/QVRSSdYrWjthpCOupqON.png">
+<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/HwJLPhuelqEaeQvsYlFz.png">
 
 录入长篇幅的单一的文本使用多行的文本区域。
 
 ### 提示与帮助
 
-<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/KSWwgpyjPkbwclNvbvvR.png" alt="基本样式">
+<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/cggdJfFgvDlOwaFRylSk.png" alt="基本样式">
 
 为提升数据录入效率，通常可以在输入框内增加暗提示以帮助提醒用户。
 
 > 注：输入框通常与标签（label）搭配使用，标签（label）默认放于输入区域的左侧，当文案过长或英文环境下也可放于在上方，但同个系统中需保持统一。
 
-<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/RtFCPKSMfRlgISbMJJRy.png" description="当说明文案较长时，你可以使用一个『信息』图标或者提示工具。">
+<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/xcDCXmgTCeXWelIovxvh.png" description="当说明文案较长时，你可以使用一个『信息』图标或者提示工具。">
 
-<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/rElfIRpcmLsCTFzZDINy.png" description="对于那些短的输入提醒（短于一句），你可以将其放置在输入框的下方。">
+<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/AUTvHOWDsCTgSojYrQms.png" description="对于那些短的输入提醒（短于一句），你可以将其放置在输入框的下方。">
 
 ### 搜索（Search）
 
-<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/ycPmRlbZtsoYAibbwMCZ.png">
+<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/xLIltABSbmNgukJTZShA.png">
 
 搜索可以让用户在巨大的信息池中缩小目标范围，并快速获取需要的信息。
 
@@ -56,7 +59,7 @@ title:
 
 #### 单选框（Radio Button）
 
-<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/EvxgOJzHiQAxpuRaEhbH.png">
+<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/mLZUWZmJZKiTmcGFzaOC.png">
 
 单选按钮允许用户从多个选项中选择一个选项。Radio 所有选项默认可见，方便用户在比较中选择，因此选项不宜过多。
 
@@ -64,7 +67,7 @@ title:
 
 ### 复选框（Checkbox）
 
-<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/duKUrQDKiyPnYaWtvkQK.png">
+<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/DvQNtGZJgMZNAtfgweGo.png">
 
 复选框用于在一组可选项中进行多项选择时。
 
@@ -74,20 +77,20 @@ title:
 
 ### 开关（Switch）
 
-<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/aIdIORGzFNjqMwrmiguZ.png">
+<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/MsOFIDWorXeobBLkEwjS.png">
 
 用于切换单个选项的状态。『开关』的内联标签应该显示清楚，例如：禁用/启用，不允许/允许等。
 
 <br />
 
-<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/qoqGjsZYATDiXiWEjNIK.png" alt="正确示范">
-<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/ZcWvStIELApkpnkDOWDG.png" alt="错误示范" description="切换『开关』结果会立即生效，无需与操作按钮搭配使用。">
+<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/GJNIykRlFgmVRSKNGOCg.png" alt="正确示范">
+<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/gLJCJDtOquBTRdBSoGYe.png" alt="错误示范" description="切换『开关』结果会立即生效，无需与操作按钮搭配使用。">
 
 > 注：当用户切换『开关』按钮将直接触发状态改变。
 
 ### 选择列表（Dropdown）
 
-<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/iGSmUHkADwVyhuTOBkpJ.png">
+<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/wbOaUEKPkjzVFNLabvtF.png">
 
 选择列表（通常称为下拉菜单）允许用户从列表中选择一个选项或多个选项，为用户在选项的数量上提供了更多的灵活性。
 
@@ -97,25 +100,25 @@ title:
 
 ### 滑块选择（Slider）
 
-<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/JJZycUHtpopKCMxXyQpx.png">
+<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/kfDmEBuFbbDsrsqTyxIH.png">
 
 滑块选择可以在连续或间断的区间内，通过滑动锚点来选择一个合适的数值。这种交互特性使得它在设置诸如音量，亮度，色彩饱和度等需要反映强度等级的选项时是一种极好的选择。
 
 <br />
 
-<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/hWhUUUzikHarZSBhefDI.png">
+<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/jRUNDmdChSEsFAXVBzAx.png">
 
 > 注：在不要求精准数值的场景下用户使用『连续滑块』可得到更灵活便捷的操作；在用户需要精确数值时，可与『数字输入框』搭配使用。
 
 ### 穿梭框（Transfer）
 
-<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/VpfyicZPlNugqEjQKSDf.png">
+<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/fxYgAmCVVkduXRfBYUCo.png">
 
 穿梭框用直观的方式在两栏中移动元素，完成选择行为。
 
 ### 日期选择器（DatePicker）
 
-<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/gaaLemRmjgNpcnlthmkr.png">
+<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/IyntUBesFLpPNQTHtgVk.png">
 
 日期选择器为用户提供了一种可视化的方式去浏览和选择一个日期或者日期范围。
 
@@ -127,19 +130,19 @@ title:
 
 ### 简单点击上传
 
-<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/aqMzAypQRBkmWfMOpOCE.png">
+<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/nslSHZVgVxmBNgKhFcqT.png">
 
 一般用于单个上传且不需要预览效果的文件上传，点击按钮弹出文件选择框。
 
 ### 显示缩略图上传
 
-<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/oUsyeTsjadJfieTspgVq.png">
+<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/HQvQFtYdIQKoUOjgSFQP.png">
 
 一般用于图片文件上传，用户可以上传图片并在列表中显示缩略图。当上传照片数到达限制后，上传按钮消失。
 
 ### 拖拽上传
 
-<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/euEBewdgKmhThFWrWHIm.png">
+<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/evyhWzbCtinnGURCPJSn.png">
 
 把文件拖入指定区域，完成上传，同样支持点击上传。
 

docs/spec/direct.en-US.md

@@ -10,7 +10,7 @@ As Alan Cooper states：『Where there is output, let there be input』. This is
 
 ## In-Page Editing
 
-<img class="preview-img" align="right" alt="Example of click to edit" description="Status 1: Common browsing mode, do not distinguish between editable  and  non-editable lines；<br>Status 2: On mouse hover, the background is backlit with yellow. A tool tip invites the user to “Click to edit”；<br>Status 3: Once the user clicks on the title, the form elements 『Input box』, 『Ok』 and 『Cancel』 appear, and the cursor is positioned in the 『input box』." src="https://os.alipayobjects.com/rmsportal/PmVuUUKeamHdveT.png">
+<img class="preview-img" align="right" alt="Example of click to edit" description="Status 1: Common browsing mode, do not distinguish between editable  and  non-editable lines；<br>Status 2: On mouse hover, the background is backlit with yellow. A tool tip invites the user to 'Click to edit'；<br>Status 3: Once the user clicks on the title, the form elements 『Input box』, 『Ok』 and 『Cancel』 appear, and the cursor is positioned in the 『input box』." src="https://gw.alipayobjects.com/zos/rmsportal/EXKwsvUkIUNkHBSsOlRi.png">
 
 Single-Field Inline Edit
 
@@ -19,31 +19,26 @@ If 『readability』 is more important than 『editability』, 『click to edit
 <br>
 
 <img class="preview-img" align="right" alt="Example of Text link/Icon Edit" description="Status 1: Text link/icon appears near the editable line.；<br>Status 2: Once the mouse clicks 『edit』,the form elements 『Input box』, 『Ok』 and 『Cancel』 appear, and the cursor is positioned in the 『input box』.
-" src="https://os.alipayobjects.com/rmsportal/ZmRlahliUbCurhu.png">
+" src="https://gw.alipayobjects.com/zos/rmsportal/qiAYBQKcQnmavxHzkeaK.png">
 
 If the priority is given to 『readability』 and the 『editability』 of operation lines need to be highlighted at the same time, 『text link/icon edit』can be used.
 
 <br>
 
-<img class="preview-img" align="right" alt="Example of Multi-Field Inline Edit" description="Edit mode without destroying integrity can enlarge the space in order to put down the 『Input box』 and other form elements. Besides, when switching the edit mode in the Table, it is necessary to ensure that each column does not beat." src="https://os.alipayobjects.com/rmsportal/hGXGErepBnrwqzj.png">
+<img class="preview-img" align="right" alt="Example of Multi-Field Inline Edit" description="Edit mode without destroying integrity can enlarge the space in order to put down the 『Input box』 and other form elements. Besides, when switching the edit mode in the Table, it is necessary to ensure that each column does not beat." src="https://gw.alipayobjects.com/zos/rmsportal/ukbXcTHrgPmTfHmCassD.png">
 
 Multi-Field Inline Edit
 
 >Note：In『Multi-Field Inline Edit』，there are huge different between the content and required field，So it is more needed to use the [『Explain What Just Happened』](../docs/spec/transition#解释刚刚发生了什么) in 『Use Transition』to eliminate this visual effects.
 
 
-<br>
-
-More mode of 『In-page Edit』 ，please visit [『Mode／Table／Interaction』](/docs/pattern/table#模块编辑)
-
-
 <br>
 
 ---
 
 ## Drag and Drop
 
-<img class="preview-img" align="right" alt="Example of Drag and Drop List" description="Status 1: On mouse hover,a removable 『icon』 appears.；<br>Status 2： When hovering over the 『icon』，the pointer changes into a 『hand』， click-and-drag operation can be used；<br>Status 3：Drag  target to the placeable block. When  blue stroke appears, inform  user that object can be placed in the block." src="https://os.alipayobjects.com/rmsportal/DjMFcqSxZrulbGF.png">
+<img class="preview-img" align="right" alt="Example of Drag and Drop List" description="Status 1: On mouse hover,a removable 『icon』 appears.；<br>Status 2： When hovering over the 『icon』，the pointer changes into a 『hand』， click-and-drag operation can be used；<br>Status 3：Drag  target to the placeable block. When  blue stroke appears, inform  user that object can be placed in the block." src="https://gw.alipayobjects.com/zos/rmsportal/xZWSNecZhGXaAVluxOAK.png">
 
 Drag and Drop List
 
@@ -51,7 +46,7 @@ Drag and Drop can only limited in one dimension（upper/down or left/right）
 
 <br>
 
-<img class="preview-img" align="right" alt="Example of Drag and Drop picture/file" src="https://os.alipayobjects.com/rmsportal/KVhqdSoLUjXPXuN.png">
+<img class="preview-img" align="right" alt="Example of Drag and Drop picture/file" src="https://gw.alipayobjects.com/zos/rmsportal/wuAOmxmpXkcZlHzTbIvY.png">
 
 Drag and Drop picture/file
 

docs/spec/direct.zh-CN.md

@@ -1,5 +1,5 @@
 ---
-category: 设计原则
+category: 原则
 order: 5
 title: 直截了当
 ---
@@ -10,7 +10,7 @@ title: 直截了当
 
 ## 页内编辑
 
-<img class="preview-img" align="right" alt="单击编辑示例" description="状态一：普通的浏览模式，不区分可编辑行和不可编辑行；<br>状态二：鼠标悬停时，『指针』变为『手型』，编辑区域底色变黄，出现『Tooltips』提示单击编辑；<br>状态三：鼠标点击后，出现『输入框』、『确定』、『取消』表单元素，同时光标定位在『输入框』中。" src="https://os.alipayobjects.com/rmsportal/PmVuUUKeamHdveT.png">
+<img class="preview-img" align="right" alt="单击编辑示例" description="状态一：普通的浏览模式，不区分可编辑行和不可编辑行；<br>状态二：鼠标悬停时，『指针』变为『手型』，编辑区域底色变黄，出现『Tooltips』提示单击编辑；<br>状态三：鼠标点击后，出现『输入框』、『确定』、『取消』表单元素，同时光标定位在『输入框』中。" src="https://gw.alipayobjects.com/zos/rmsportal/EXKwsvUkIUNkHBSsOlRi.png">
 
 单字段行内编辑
 
@@ -18,13 +18,13 @@ title: 直截了当
 
 <br>
 
-<img class="preview-img" align="right" alt="文字链/图标编辑示例" description="状态一：在可编辑行附近出现文字链/图标；<br>状态二：鼠标点击『编辑』后，出现『输入框』、『确定』、『取消』表单元素，同时光标定位在『输入框』中。" src="https://os.alipayobjects.com/rmsportal/ZmRlahliUbCurhu.png">
+<img class="preview-img" align="right" alt="文字链/图标编辑示例" description="状态一：在可编辑行附近出现文字链/图标；<br>状态二：鼠标点击『编辑』后，出现『输入框』、『确定』、『取消』表单元素，同时光标定位在『输入框』中。" src="https://gw.alipayobjects.com/zos/rmsportal/qiAYBQKcQnmavxHzkeaK.png">
 
 当『易读性』为主，同时又要突出操作行的『易编辑性』时，可使用『文字链/图标编辑』。
 
 <br>
 
-<img class="preview-img" align="right" alt="多字段行内编辑示例" description="编辑模式在不破坏整体性的前提下，可扩大空间，以便放下『输入框』等表单元素；其中，在 Table 中进行编辑模式切换时，需要保证每列的不跳动。" src="https://os.alipayobjects.com/rmsportal/hGXGErepBnrwqzj.png">
+<img class="preview-img" align="right" alt="多字段行内编辑示例" description="编辑模式在不破坏整体性的前提下，可扩大空间，以便放下『输入框』等表单元素；其中，在 Table 中进行编辑模式切换时，需要保证每列的不跳动。" src="https://gw.alipayobjects.com/zos/rmsportal/ukbXcTHrgPmTfHmCassD.png">
 
 多字段行内编辑
 
@@ -32,15 +32,11 @@ title: 直截了当
 
 <br>
 
-更多有关『页内编辑』的模式，可查看[『模式／表格／交互』](/docs/pattern/table#模块编辑)中的内容。
-
-<br>
-
 ---
 
 ## 利用拖放
 
-<img class="preview-img" align="right" alt="拖放列表示例" description="状态一：鼠标悬停该行时，出现可移动的『图标』；<br>状态二：鼠标悬停在该『图标』时，指针变为『手型』，点击即可进行拖动；<br>状态三：拖动到可放置区块，出现蓝色描边，告知用户该区块可放置该对象。" src="https://os.alipayobjects.com/rmsportal/DjMFcqSxZrulbGF.png">
+<img class="preview-img" align="right" alt="拖放列表示例" description="状态一：鼠标悬停该行时，出现可移动的『图标』；<br>状态二：鼠标悬停在该『图标』时，指针变为『手型』，点击即可进行拖动；<br>状态三：拖动到可放置区块，出现蓝色描边，告知用户该区块可放置该对象。" src="https://gw.alipayobjects.com/zos/rmsportal/xZWSNecZhGXaAVluxOAK.png">
 
 拖放列表
 
@@ -48,7 +44,7 @@ title: 直截了当
 
 <br>
 
-<img class="preview-img" align="right" alt="拖放图片/文件示例" src="https://os.alipayobjects.com/rmsportal/KVhqdSoLUjXPXuN.png">
+<img class="preview-img" align="right" alt="拖放图片/文件示例" src="https://gw.alipayobjects.com/zos/rmsportal/wuAOmxmpXkcZlHzTbIvY.png">
 
 拖放图片/文件
 

docs/spec/download.en-US.md

@@ -0,0 +1,64 @@
+---
+category: Other
+order: 0
+title: Resources
+---
+
+Please find below some of the design resources and tools about Ant Design that we consider valuable. More of this is still being collected.
+
+<div class="resource-cards">
+  <a target="_blank" href="https://github.com/ant-design/ant-design/releases/download/resource/Ant.Design.3.0.Components.sketch" class="resource-card">
+    <div class="resource-card-icon">
+      <img width="65" src="https://gw.alipayobjects.com/zos/rmsportal/pKfDZnzocrbAOSzDQOQq.png">
+    </div>
+    <div class="resource-card-content">
+      <span class="resource-card-title">Desktop Components</span>
+      <span class="resource-card-description">Sketch Template for Desktop</span>
+    </div>
+  </a>
+  <a target="_blank" href="https://github.com/ant-design/ant-design/releases/download/resource/Ant.Design.Mobile.Template.sketch" class="resource-card">
+    <div class="resource-card-icon">
+      <img width="41" src="https://gw.alipayobjects.com/zos/rmsportal/rFMdPVzabtQwxONUuVFr.png">
+    </div>
+    <div class="resource-card-content">
+      <span class="resource-card-title">Mobile Components</span>
+      <span class="resource-card-description">Sketch Template for Mobile</span>
+    </div>
+  </a>
+  <a target="_blank" href="http://library.ant.design" class="resource-card">
+    <div class="resource-card-icon">
+      <img width="50" src="https://gw.alipayobjects.com/zos/rmsportal/TXrKQUJBTuwSTGimGYYn.png">
+    </div>
+    <div class="resource-card-content">
+      <span class="resource-card-title">Ant Design Library</span>
+      <span class="resource-card-description">A powerful Axure library of Ant Design</span>
+    </div>
+  </a>
+  <span class="resource-card">
+    <div class="resource-card-icon">
+      <img width="65" src="https://gw.alipayobjects.com/zos/rmsportal/ATYZYtJhchhONKObIwXT.png">
+    </div>
+    <div class="resource-card-content">
+      <span class="resource-card-title">Kitchen（coming soon）</span>
+      <span class="resource-card-description">A Sketch plugin for designers，make your design beautiful</span>
+    </div>
+  </span>
+  <a target="_blank" href="http://ux.ant.design" class="resource-card">
+    <div class="resource-card-icon">
+      <img width="64" src="https://gw.alipayobjects.com/zos/rmsportal/yMULSUQQyhoEGrCXlovN.png">
+    </div>
+    <div class="resource-card-content">
+      <span class="resource-card-title">Ant UX</span>
+      <span class="resource-card-description">A series prototypes that help creating application structure and user flow</span>
+    </div>
+  </a>
+  <a target="_blank" href="https://github.com/ant-design/ant-design/releases/download/resource/iconfont-3.x.zip" class="resource-card">
+    <div class="resource-card-icon">
+      <img width="54" src="https://gw.alipayobjects.com/zos/rmsportal/bWBRrdYsVnVkXpFRCVFy.png">
+    </div>
+    <div class="resource-card-content">
+      <span class="resource-card-title">Web Font</span>
+      <span class="resource-card-description">Icon font package for your local reference</span>
+    </div>
+  </a>
+</div>

docs/spec/download.zh-CN.md

@@ -0,0 +1,64 @@
+---
+category: 其他
+order: 0
+title: 设计资源
+---
+
+这里提供 Ant Design 相关设计资源和设计工具的下载，更多设计资源正在整理和完善中。
+
+<div class="resource-cards">
+  <a target="_blank" href="https://github.com/ant-design/ant-design/releases/download/resource/Ant.Design.3.0.Components.sketch" class="resource-card">
+    <div class="resource-card-icon">
+      <img width="65" src="https://gw.alipayobjects.com/zos/rmsportal/pKfDZnzocrbAOSzDQOQq.png">
+    </div>
+    <div class="resource-card-content">
+      <span class="resource-card-title">Desktop Components</span>
+      <span class="resource-card-description">桌面组件 Sketch 模板</span>
+    </div>
+  </a>
+  <a target="_blank" href="https://github.com/ant-design/ant-design/releases/download/resource/Ant.Design.Mobile.Template.sketch" class="resource-card">
+    <div class="resource-card-icon">
+      <img width="41" src="https://gw.alipayobjects.com/zos/rmsportal/rFMdPVzabtQwxONUuVFr.png">
+    </div>
+    <div class="resource-card-content">
+      <span class="resource-card-title">Mobile Components</span>
+      <span class="resource-card-description">移动组件 Sketch 模板</span>
+    </div>
+  </a>
+  <a target="_blank" href="http://library.ant.design" class="resource-card">
+    <div class="resource-card-icon">
+      <img width="50" src="https://gw.alipayobjects.com/zos/rmsportal/TXrKQUJBTuwSTGimGYYn.png">
+    </div>
+    <div class="resource-card-content">
+      <span class="resource-card-title">Ant Design Library</span>
+      <span class="resource-card-description">一套强大的 Ant Design 的 Axure 部件库</span>
+    </div>
+  </a>
+  <span class="resource-card">
+    <div class="resource-card-icon">
+      <img width="65" src="https://gw.alipayobjects.com/zos/rmsportal/ATYZYtJhchhONKObIwXT.png">
+    </div>
+    <div class="resource-card-content">
+      <span class="resource-card-title">Kitchen（敬请期待）</span>
+      <span class="resource-card-description">一个为设计师提效的 Sketch 工具集，让你的设计秀色可餐</span>
+    </div>
+  </span>
+  <a target="_blank" href="http://ux.ant.design" class="resource-card">
+    <div class="resource-card-icon">
+      <img width="64" src="https://gw.alipayobjects.com/zos/rmsportal/yMULSUQQyhoEGrCXlovN.png">
+    </div>
+    <div class="resource-card-content">
+      <span class="resource-card-title">Ant UX</span>
+      <span class="resource-card-description">一套页面逻辑原型库，帮你梳理页面逻辑</span>
+    </div>
+  </a>
+  <a target="_blank" href="https://github.com/ant-design/ant-design/releases/download/resource/iconfont-3.x.zip" class="resource-card">
+    <div class="resource-card-icon">
+      <img width="54" src="https://gw.alipayobjects.com/zos/rmsportal/bWBRrdYsVnVkXpFRCVFy.png">
+    </div>
+    <div class="resource-card-content">
+      <span class="resource-card-title">Web Font</span>
+      <span class="resource-card-description">网络字体图标的本地文件包</span>
+    </div>
+  </a>
+</div>

docs/spec/feature.en-US.md

@@ -1,109 +0,0 @@
----
-order: 1
-title: Features
----
-
-Unlike other design specifications, Ant Design pursues not only user experience, but also experience of designers and developers, which practice a humanist design idea.
-
-<div style="margin-left:-40px;margin-right:-40px;overflow:hidden;margin-top:30px;">
-  <div class="ant-col-8 features">
-    <img src="https://os.alipayobjects.com/rmsportal/OVirOHTeAdzDBuQ.png">
-    <h5>Subtleties</h5>
-    <div>By devoted to create tiny and beautiful change, make efforts in details, we could not only make products more solid and reliable, but also bring good suprises for users.</div>
-  </div>
-  <div class="ant-col-8 features">
-    <img src="https://os.alipayobjects.com/rmsportal/iJbUiLYpuPBXUhV.png">
-    <h5>Definiteness</h5>
-    <div>Create an atmosphere of high definiteness and lower entropy, by making simple and scientific design patterns and using the same communicate channel.</div>
-  </div>
-  <div class="ant-col-8 features">
-    <img src="https://os.alipayobjects.com/rmsportal/uSOjjlCRjRIhtIY.png">
-    <h5>Happiness</h5>
-    <div>Don't design for minimalism，design for getting job done and whatever makes designer happy and satisfied.</div>
-  </div>
-</div>
-
-<style>
-.features {
-  padding: 0 40px;
-  font-size: 12px;
-}
-.features h5 {
-  font-size: 14px;
-  margin-top: 16px;
-}
-@media only screen and (min-width: 320px) and (max-width: 767px) {
-  .features {
-    width: 100%;
-    text-align: center;
-    margin-bottom: 20px;;
-  }
-  .features img {
-    width: 80%;
-  }
-}
-</style>
-
----
-
-## Subtleties
-
-### Micro innovation
-
-<img class="preview-img" align="right" alt="Number Input Sample" description="Clickable area zoom out when hovering" src="https://os.alipayobjects.com/rmsportal/GGXdyrOtvUtOKXe.png">
-
-<img class="preview-img" align="right" alt="Pagination Sample" description="Click the ellipsis to switch multiple pager" src="https://os.alipayobjects.com/rmsportal/UEYPnVhQsOjytSa.png">
-
-<img class="preview-img" align="right" alt="Charactor Count Sample" description="Make overflow text with color and underline instantly." src="https://os.alipayobjects.com/rmsportal/JxzQIRfMCtMjuaH.png">
-
-"Difference" is not always "better", but "better" is always different. Pursuing "better" in every details make our components is different, and also better naturally.
-
-### Compositive innovation
-
-<img class="preview-img" align="right" alt="Input inside text" description="Compose tag, input and text to help people understand what data need to input" src="https://os.alipayobjects.com/rmsportal/RGFMJRSgCAVCKOl.png">
-
-<img class="preview-img" align="right" alt="Table with charts" description="Compose Table and Chart" src="https://os.alipayobjects.com/rmsportal/hjHOMRIbvIUUBXS.png">
-
-Compose different components for more powerful functions, it is a good path to meet varies of different bussiness requirements.
-
----
-
-## Definiteness
-
-### Object oriented
-
-<img class="preview-img" align="right" alt="Color Sample" description="Generate status colors via tint/shade functions from a original primary color" src="https://os.alipayobjects.com/rmsportal/MqsXoBBSDmoEDqn.png">
-
-<img class="preview-img" align="right" alt="Typography Sample" description="Following『intimacy』principle, get the distance by a specified n value" src="https://os.alipayobjects.com/rmsportal/WNEbRORxzEvvFKy.png">
-
-<img class="preview-img no-padding good" align="right" alt="Feedback - Good" description="Unify and simpcify the button text to same text like `Ok` or `Actions` in all situations, improve designers experience by sacrifice a little user experience." src="https://os.alipayobjects.com/rmsportal/rtbYGKfPOpWRJID.png">
-
-<img class="preview-img no-padding bad" align="right" alt="Feedback - Bad" description="It is better for this certain situation but a disaster for text maintainers. It is very easy to make typo mistakes cause text are different and unpredicable in every pages." src="https://os.alipayobjects.com/rmsportal/OWLtvGCGmqawyPt.png">
-
-We create a object-oriented design method and abstract UI patterns. That help us to do our jobs with continuity.
-
-### Scientific design principles
-
-See more at [『Ant Design Principles』](/docs/spec/proximity).
-
----
-
-## Happiness
-
-### Happiness of user
-
-<img class="preview-img no-padding" align="right" alt="User Happiess Levels" description="Please read <em>Emotional Design 3</em> for more infomation." src="https://os.alipayobjects.com/rmsportal/sBjNEGgHEpNfqTs.png">
-
-Beatuful looks, tide typography and smooth animation produce positive reaction at instinct level.
-
-Good functions, performance and usability produce positive reaction at behavious level.
-
-Self-image, satisfaction, and good memories bring user a combining experience of thoughts and emotions at learning level.
-
-### Happiness of designer
-
-<img class="preview-img no-padding" align="right" alt="Designer Happiess" description="Ant Design can not guarantee the success of products, but try to help those products <strong>successed correctly</strong> or <strong>failed correctly</strong>." src="https://os.alipayobjects.com/rmsportal/eMcdBWuZxRbvlvW.png">
-
-From 0 to 1, Ant Design help designers to implement a quick prototype for trial and error.
-
-From 1 to 100, Ant Design provide a complete UI solution, help designers to create their own product personality and improve user experience.

docs/spec/feature.zh-CN.md

@@ -1,109 +0,0 @@
----
-order: 1
-title: 基本理念
----
-
-与众不同的是，Ant Design 不但追求『用户』的使用体验，还追求『设计者』和『开发者』的使用体验，践行『以人为本』的设计理念。
-
-<div style="margin-left:-40px;margin-right:-40px;overflow:hidden;margin-top:30px;">
-  <div class="ant-col-8 features">
-    <img src="https://os.alipayobjects.com/rmsportal/OVirOHTeAdzDBuQ.png">
-    <h5>微小</h5>
-    <div>致力于微小而美好的改变，力求在细节上精益求精，不仅让业务产品更加实用和可靠，而且还能让『用户』感到小惊喜。</div>
-  </div>
-  <div class="ant-col-8 features">
-    <img src="https://os.alipayobjects.com/rmsportal/iJbUiLYpuPBXUhV.png">
-    <h5>确定</h5>
-    <div>制定通俗而科学的设计原则、运用面向对象的方法、使用一致的文档沟通机制，给予研发团队一种高确定性、低熵值的研发状态。</div>
-  </div>
-  <div class="ant-col-8 features">
-    <img src="https://os.alipayobjects.com/rmsportal/uSOjjlCRjRIhtIY.png">
-    <h5>幸福</h5>
-    <div>不苛求简单，但是力求让『用户』和『设计者』流畅的完成目标，并带着成功和满足离开。</div>
-  </div>
-</div>
-
-<style>
-.features {
-  padding: 0 40px;
-  font-size: 12px;
-}
-.features h5 {
-  font-size: 14px;
-  margin-top: 16px;
-}
-@media only screen and (min-width: 320px) and (max-width: 767px) {
-  .features {
-    width: 100%;
-    text-align: center;
-    margin-bottom: 20px;;
-  }
-  .features img {
-    width: 80%;
-  }
-}
-</style>
-
----
-
-## 微小
-
-### 微创新
-
-<img class="preview-img" align="right" alt="数值输入框示例" description="鼠标『悬停』时，可点击区域会放大。" src="https://os.alipayobjects.com/rmsportal/GGXdyrOtvUtOKXe.png">
-
-<img class="preview-img" align="right" alt="分页示例" description="鼠标点击省略符，可以实现批量切换。" src="https://os.alipayobjects.com/rmsportal/UEYPnVhQsOjytSa.png">
-
-<img class="preview-img" align="right" alt="字数校验框示例" description="使用颜色和下划线标注超出的文案，系统即时反应，以便用户进行调整。" src="https://os.alipayobjects.com/rmsportal/JxzQIRfMCtMjuaH.png">
-
-『不同』不一定『更好』，但是『更好』一定『不同』。不断追求细节上的『更好』，使得我们的组件和同类产品都不一样，自然而然的更好。
-
-### 集成创新
-
-<img class="preview-img" align="right" alt="填空示例" description="组合了标签和输入项，可以帮助用户理解当前的状况，以及需要提供什么数据。" src="https://os.alipayobjects.com/rmsportal/RGFMJRSgCAVCKOl.png">
-
-<img class="preview-img" align="right" alt="带图表的表格" description="组合了 Table 和 Chart ，鼠标『悬停』时展现更多详情内容。" src="https://os.alipayobjects.com/rmsportal/hjHOMRIbvIUUBXS.png">
-
-选择合适的组件进行组合和集成，形成优势互补的创新过程，来满足多变的业务需求。
-
----
-
-## 确定
-
-### 面向对象的方法
-
-<img class="preview-img" align="right" alt="色值换算工具示例" description="定义『原色』后，用『加黑』和『加白』的方式快速、科学的得出 Normal、Hover 等多个『状态色』。" src="https://os.alipayobjects.com/rmsportal/MqsXoBBSDmoEDqn.png">
-
-<img class="preview-img" align="right" alt="排版规则示例" description="运用『亲密性』原则，只需定义 n 的值，就可以得出确定的间距。" src="https://os.alipayobjects.com/rmsportal/WNEbRORxzEvvFKy.png">
-
-<img class="preview-img no-padding good" align="right" alt="操作反馈 - 正确示例" description="将可被通用的文案抽象成『确定』、『操作』等通用术语，集中进行调用和维护。虽然『用户』体验 -1 分，但是『设计者』体验 +5 分。" src="https://os.alipayobjects.com/rmsportal/rtbYGKfPOpWRJID.png">
-
-<img class="preview-img no-padding bad" align="right" alt="操作反馈 - 错误示例" description="这是体验更好的反馈方式，但是对『设计者』来说是灾难。因为这些『删除』文案只能通过人肉维护，难免产生遗漏和错别字，增大了系统的不确定性，这在多人合作和需求变更时尤为明显。" src="https://os.alipayobjects.com/rmsportal/OWLtvGCGmqawyPt.png">
-
-探索设计规律，并将其抽象成『对象』，增强界面设计的灵活性和可维护性，同时也减少『设计者』的主观干扰，从而降低系统的不确定性。
-
-### 通俗而科学的设计原则
-
-详见[『设计原则』](/docs/spec/proximity)。
-
----
-
-## 幸福
-
-### 用户的幸福
-
-<img class="preview-img no-padding" align="right" alt="用户的幸福示例" description="想了解更多内容，可阅读唐纳德•A•诺曼所著的 《设计心理学 3》。" src="https://os.alipayobjects.com/rmsportal/sBjNEGgHEpNfqTs.png">
-
-漂亮的组件、精致的排版、流畅的动画等的元素，使用户在『本能层次』中产生积极反应；
-
-良好的功能、性能和可用性，使用户在『行为层次』中产生积极反应；
-
-自我形象、个人满足和美好记忆，使用户在『反思层次』中体验思想和情感的交融。
-
-### 设计者的幸福
-
-<img class="preview-img no-padding" align="right" alt="设计者的幸福示例" description="Ant Design 无法保证业务产品能否成功，但是能帮助业务产品『正确的成功』或者『正确的失败』。" src="https://os.alipayobjects.com/rmsportal/eMcdBWuZxRbvlvW.png">
-
-从『无』到『有』时，提供一整套设计解决方案，帮助『设计者』将商业想法快速形成产品并推向市场，快速、低成本试错。
-
-从『有』到『优』时，提供一系列自定义建议，帮助『设计者』塑造产品个性并提升整体体验，服务海量用户。

docs/spec/feedback.md

@@ -1,4 +1,7 @@
 ---
+category:
+  zh-CN: 模式
+  en-US: Patterns
 order: 11
 title:
   zh-CN: 反馈
@@ -20,7 +23,7 @@ title:
 
 #### 警告提示（Alert）
 
-<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/MPBsvIMFPMeocAailbIW.png">
+<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/eviVRYTdxOxOfVENLnxq.png">
 
 是一种非阻碍式的信息展示，它不打断用户的当前操作，一般停留至页面某个位置（优先顶部），非浮层的静态展现形式，始终展现，不会自动消失，用户可以点击关闭。
 
@@ -30,13 +33,13 @@ title:
 
 #### 通知提醒（Notification）
 
-<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/icHybUesGmjYbfxfSoQY.png" description="较为复杂的通知内容时使用。">
+<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/nElczRfDzAXRZSkpiJBQ.png" description="较为复杂的通知内容时使用。">
 
 系统主动推送的重要的全局性通知信息，在系统右上角显示。
 
 #### 徽标数（Badge）
 
-<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/tmthsGOQKqdMUEAFeTYT.png" description="当有 icon 的情况时一般居于 icon 右上角；无 icon 的情况下一般位于标题后侧。">
+<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/bVonmOmmkuvybQxTDGTC.png" description="当有 icon 的情况时一般居于 icon 右上角；无 icon 的情况下一般位于标题后侧。">
 
 用于聚合型的消息提示，一般出现在通知图标或头像的右上角，通过醒目的视觉形式吸引用户眼球。
 
@@ -46,7 +49,7 @@ title:
 
 #### 气泡卡片（Popover）
 
-<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/vDfayzqikMEWAcTrXRzD.png">
+<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/zsPOjQqkiwMnMhIsbDHz.png">
 
 当目标元素有进一步的描述和相关操作时，可以收纳到卡片中，根据用户的操作行为进行展现。
 
@@ -54,7 +57,7 @@ title:
 
 #### 文字提示（Tooltip）
 
-<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/oOXzRKnHokbLCbRWPNrk.png">
+<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/CKDiGEsluwkRRGqujpgv.png">
 
 用于精确地描述被指向的对象，例如图标、图形、链接等，鼠标移入则显示提示，移出消失，不承载复杂文本和操作。
 
@@ -66,19 +69,19 @@ title:
 
 ### 加载状态进度反馈
 
-<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/iwEcSHfcdVYLkcWopOzK.png" description="当用户不必等待较长时间的加载时使用。">
+<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/cHaaqZTvzgCZiYUnfNom.png" description="当用户不必等待较长时间的加载时使用。">
 
 在操作需要一段时间（一般为超过2秒）完成时系统应即时给予提醒，明确告知加载的状态或加载进度条，保持与用户的沟通。
 
 <br />
 
-<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/iwEcSHfcdVYLkcWopOzK.png" description="在操作需要较长时间才能完成时使用，显示该操作的当前进度和状态。">
+<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/cHaaqZTvzgCZiYUnfNom.png" description="在操作需要较长时间才能完成时使用，显示该操作的当前进度和状态。">
 
 > 注：若加载时间较长，应提供取消操作。
 
 ### 录入反馈
 
-<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/luLujTAQqovClEOmgqzj.png">
+<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/CCeqqndHQgWnqVqvRptA.png">
 
 操作过程中可通过不同的校验规则和形式，让用户及时发现并纠正错误。
 
@@ -86,7 +89,7 @@ title:
 
 #### 气泡确认框（Popconfirm）
 
-<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/adnYamnCJfmYrNLZOxdn.png" description="和全屏居中模态对话框相比，交互形式更轻量。">
+<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/lPZZxOAakfNhwfrpRPht.png" description="和全屏居中模态对话框相比，交互形式更轻量。">
 
 目标元素的操作需要用户进一步的确认时，在目标元素附近弹出浮层提示，询问用户。
 
@@ -98,20 +101,20 @@ title:
 
 ### 顶部全局提示反馈（Message）
 
-<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/rLXuVmbjsSNJWClJyocT.png" description="当用户不必等待较长时间的加载时使用。">
+<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/pqJMJfJGLkYTDbLyJwIg.png" description="当用户不必等待较长时间的加载时使用。">
 
 通过一个操作引发的反馈浮层位于顶部居中显示并自动消失，是一种不打断用户操作的轻量级提示方式。
 
 <br />
 
-<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/FJkgswzSavkIhZjFAqjj.png" alt="正确示例" description="重要的失败信息建议使用对话框形式提示并告知失败原因。">
-<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/dBBUQzfBveiWCLwjiCSX.png" alt="错误示例" description="重要的失败信息时不建议使用轻量级提示方式。">
+<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/DrKzGoqfLRtrPuZaHUiq.png" alt="正确示例" description="重要的失败信息建议使用对话框形式提示并告知失败原因。">
+<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/akPBJQUiUWNsULtGOnyx.png" alt="错误示例" description="重要的失败信息时不建议使用轻量级提示方式。">
 
-由于反馈浮层的展示时长较短（默认 4.5s），对于比较重要的失败通知，建议改用对话框的形式进行通知，以避免用户遗漏信息。
+由于反馈浮层的展示时长较短（默认 3s），对于比较重要的失败通知，建议改用对话框的形式进行通知，以避免用户遗漏信息。
 
 ### 对话框反馈
 
-<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/QxDepeJNSzmgjuNjRVoU.png">
+<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/OTzldmUjUgERMbUCHwzt.png">
 
 通过一个操作引发的反馈浮层位于页面中心，反馈内容可通过确认或取消按钮进行关闭，用户在反馈层出现时不可进行任何的操作，用于重要的反馈。
 

docs/spec/font.md

@@ -1,25 +1,29 @@
 ---
-order: 5
+category:
+  zh-CN: 视觉
+  en-US: Visual
+order: 3
 title:
   zh-CN: 字体
   en-US: Font
 ---
 
-跨平台的字体设定，力求在各个操作系统下都有最佳展示效果。
+字体是体系化界面设计中最基本的构成之一。
 
-字体是界面设计中最重要的基本构成之一，用户通过文本来消化内容和完成工作，优雅的字体将大大提升用户的阅读体验及工作效率。Ant Design 的字体方案，在满足不同终端始终保持良好的阅读体验的同时，使页面的视觉层次更加清晰。使用时有以下三点需要注意：
+我们的用户通过文本来理解内容和完成工作，科学的字体系统将大大提升用户的阅读体验及工作效率。Ant Design 字体方案，是基于『动态秩序』的设计原则，结合了自然对数以及音律的规则得出的，再经过了大量的蚂蚁中后台产品验证之后，推荐给大家。
+在中后台视觉体系中定义字体系统，我们建议从下面五个方面出发：
 
-- 合理的使用不同的字重、字号和颜色来强调界面中最重要的信息；
-- 尽可能的使用单种字体，混合使用多种字体会让界面看起来零散和草率；
-- 遵循 WCAG 2.0 标准，字体在使用时与背景颜色的对比值满足无障碍阅读的最低标准。
+1. 字体家族
+2. 主字体
+3. 字阶与行高
+4. 字重
+5. 字体颜色
 
 ---
 
 ## 字体家族
 
-字体家族 css 代码如下：
-
-优秀的字体系统的核心是选择一个好的字体。Ant Design 的字体家族中优先使用系统默认的界面字体，同时提供了一套利于屏显的备用字体库，来维护在不同平台以及浏览器的显示下字体始终保持良好的易读性和可读性，体现了友好，稳定和专业的特性。
+优秀的字体系统首先是要选择合适的字体家族。Ant Design 的字体家族中优先使用系统默认的界面字体，同时提供了一套利于屏显的备用字体库，来维护在不同平台以及浏览器的显示下，字体始终保持良好的易读性和可读性，体现了友好、稳定和专业的特性。此外，考虑到中后台产品常常会有大量的数字对比展示的诉求，我们单独将数字的字体定义为等宽的 Helvatica Neue，以便于提升数字间纵向比较时的阅读体验。
 
 ```css
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
@@ -33,26 +37,64 @@ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
 
 > 技术方案：http://stackoverflow.com/questions/13611420/set-a-font-specifically-for-all-numbers-on-the-page
 
-## 字号
+## 主字体
 
-Ant Design 使用不同的字号和字重来传递视觉的信息层次。默认字体为 `12pt`，展示型页面可以设置为 `14pt`，其他字体字号相应升级。
+我们基于电脑显示器阅读距离（50 cm）以及最佳阅读角度（0.3）对 Ant Design 的主字体进行了一次升级，从原先的 12 上升至 14，以保证在多数常用显示器上的用户阅读效率最佳。
 
-![](https://zos.alipayobjects.com/rmsportal/UkvKkdJgvFqlewCWFyQE.png)
+<div>
+  <img src="https://gw.alipayobjects.com/zos/rmsportal/yriUFbqOPtVniYYiikfb.png" />
+</div>
 
-## 行高
+## 字阶与行高
 
-行高会影响阅读的体验，西文的基本行高通常是字号的 `1.2em` 上下，而中文因为字符密实且高度一致，所以一般行高需要更大，`1.5em` 至 `1.8em` 之间是一个比较好的视觉阅读效果，Ant Design 规定默认文案字体行高为 `1.5em`，展示型页面可根据实际情况调整行高。
+字阶和行高决定着一套字体系统的动态与秩序之美。字阶是指一系列有规律的不同尺寸的字体。行高可以理解为一个包裹在字体外面的无形的盒子。
 
-### 行高公式
+<div>
+  <img src="https://gw.alipayobjects.com/zos/rmsportal/xpykKKFJQorFJltdXkie.png" />
+</div>
 
-<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/qFKnfXanJURiDsjJTKDP.png">
+Ant Design 受到 5 音阶以及自然律的启发定义了 10 个不同尺寸的字体以及与之相对应的行高。
 
-字体行高绝对值为『字号 x 1.5倍』。例如：12 号字体的行高为 `18px`，14 号字体的行高为 `21px`。
+<div>
+  <img src="https://gw.alipayobjects.com/zos/rmsportal/iFjgfIBExksqCqGMwUlw.png" />
+</div>
+
+在 Ant Design 的视觉体系中，我们建议的主要字体为 14，与之对应的行高为 22。其余的字阶的选择可根据具体情况进行自由的定义。建议在一个系统设计中（展示型页面除外），字阶的选择尽量控制在 3-5 种之间，保持克制的原则。
+
+## 字重
+
+字重的选择同样基于秩序、稳定、克制的原则。多数情况下，只出现 regular 以及 medium 的两种字体重量，分别对应代码中的 400 和 500。在英文字体加粗的情况下会采用 semibold 的字体重量，对应代码中的600。
+
+<div class="font-samples">
+	<div>
+	  <img src="https://gw.alipayobjects.com/zos/rmsportal/orIVrEOZIpjMbqZGiXEi.png" />
+	</div>
+	<div>
+  	<img src="https://gw.alipayobjects.com/zos/rmsportal/sasWhUzTGjlZKftukraH.png" />
+	</div>
+	<div>
+  	<img src="https://gw.alipayobjects.com/zos/rmsportal/QqxifAZlISrSUwnlonyx.png" />
+	</div>
+</div>
+
+<style>
+.font-samples {
+  display: flex;
+}
+</style>
 
 ## 字体颜色
 
-<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/kNFpUKqccPYxzfiQlFTh.png" description="注：表格中 @Black = #000000、@White = #FFFFFF、@Blue-6 = #108EE9">
+文本颜色如果和背景颜色太接近就会难以阅读。考虑到无障碍设计的需求，我们参考了 WCAG的标准，将正文文本、标题和背景色之间保持在了 7:1 以上的 AAA 级对比度。
 
-文本颜色如果和背景颜色太接近就会很难以阅读，这对于深色背景和浅色背景同样适用。
+<div>
+  <img src="https://gw.alipayobjects.com/zos/rmsportal/jPbEabWakVQHosHxhQPR.png" />
+</div>
 
-考虑到无障碍设计的需求，帮助那些弱视和色盲的用户也能轻松识别和阅读屏幕上的文字，我们参考了 WACG 2.0 的标准，文本和背景色之间至少保持最小 4.5:1 的对比度（AA 级），正文内容都保持了 7:1 以上的 AAA 级对比度。
+## 建议
+
+字体系统的构建，是『动态秩序之美』的第一步。在实际的设计中，我们还有三点建议：
+
+1. **建立体系化的设计思路：**在同一个系统的 UI 设计中先建立体系化的设计思路，对主、次、辅助、标题、展示等类别的字体做统一的规划，再落地到具体场景中进行微调。建立体系化的设计思路有助于强化横向字体落地的一致性，提高字体应用的性价比，减少不必要的样式浪费。
+1. **少即是多：**在视觉展现上能够用尽量少的样式去实现设计目的。避免毫无意义的使用大量字阶、颜色、自重强调视觉重点或对比关系。
+1. **尝试让字体像音符一样跳跃：**在需要拉开差距的时候可以尝试在字阶表中跳跃的选择字体大小，会令字阶之间产生一种微妙的韵律感。

docs/spec/icon.en-US.md

@@ -1,4 +1,5 @@
 ---
+category: Visual
 order: 4
 title: Icons
 ---
@@ -10,71 +11,69 @@ An icon is a graphical representation of meaning. Icons can be used to express a
 
 ---
 
-## System icons
+## System Icons
 
-<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/gcOflMziKUIdaeLlObPj.png">
+<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/XzOPonWCsPjvgkrklCzo.png">
 
-System icons are often used to represent commonly used operations, such as: save, edit, delete. The library also includes icons to represent file types and state.
+System icons are often used to represent commonly used operations, such as: save, edit, delete. Ant Design also includes icons to represent file types and state.
 
-- [View the icon library](/components/icon/#Application-Icons)
+- [View the icon](/components/icon/)
 
-### Key contour lines
+### Key Contour Lines
 
-<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/psKuOznmgqzqQoumcAxT.png" alt="Ant Design's grid and key contour lines">
+<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/beTZeZjJBVuhMyTOhebs.png" alt="Ant Design's grid and key contour lines">
 
-Contour lines play an important role in making various icons with the same visual effect. We recommend using a template following Ant Design's contour lines when creating new icons.
+Contour lines play an important role in making various icons with the same visual effect.
 
 Please make all icons in the 1024×1024 resolution (16×16 64 times).
 
 - [Illustrator tips](https://zos.alipayobjects.com/rmsportal/hmNuLjCkBssupcZgYAde.png)
 
-<img class="preview-img no-padding inline" align="right" src="https://zos.alipayobjects.com/rmsportal/XzoySLGeUaMCOVymkyZq.png" alt="Square contour">
-<img class="preview-img no-padding inline" align="right" src="https://zos.alipayobjects.com/rmsportal/fdWiCCIQiJIViSNhmcHo.png" alt="Horizontal rectangle contour">
+<img class="preview-img no-padding inline" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/rxuHAKGEGLuqBJAAhnSm.png" alt="Square contour">
+<img class="preview-img no-padding inline" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/fhkmysGZiTkPVszWHgUy.png" alt="Horizontal rectangle contour">
 
-<img class="preview-img no-padding inline" align="right" src="https://zos.alipayobjects.com/rmsportal/xEvvEZHaSlstcozKgoBd.png" alt="Circular contour">
-<img class="preview-img no-padding inline" align="right" src="https://zos.alipayobjects.com/rmsportal/GyBKoeSnRDFPvJudEgOA.png" alt="Vertical rectangle contour">
+<img class="preview-img no-padding inline" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/BiraoJgbXokyzmUFqVuf.png" alt="Circular contour">
+<img class="preview-img no-padding inline" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/wgQLwFnPaeEalmmSuBMO.png" alt="Vertical rectangle contour">
 
-### Design details
+### Stroke Weight
 
-#### Stroke weight
-
-<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/WnOptTBWISNYeRpYnlcg.png" alt="Correct example" description="Line thickness is consistently 72px">
-<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/pdLgzaadpHndkqAPLNmx.png" alt="Incorrect example" description="Line thickness is not uniform">
+<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/uoNmxXiqKpfoFDdEVjUB.png" alt="Correct example" description="Line thickness is consistently 72px">
+<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/cnFYbWzcKaPFSiHcptCF.png" alt="Incorrect example" description="Line thickness is not uniform">
 
 Consistent stroke weight is the key to maintaining the visual unity of the entire icon system. Ant Design's icons have a consistent line width of 72px.
 
-#### Corners
+### Corners
 
-<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/FBhKrLDoNmfgwZRbfXRi.png" alt="Correct example" description="The icon's corners are properly rounded">
-<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/NtrZWeUsfVWiOjRcWDqv.png" alt="Incorrect example" description="The icon's corners are not rounded">
+<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/tGbuhPmvEJXmOFoYAkPK.png" alt="Correct example" description="The icon's corners are properly rounded">
+<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/JekevTlqdDJQLIQwrppm.png" alt="Incorrect example" description="The icon's corners are not rounded">
 
 Consistent rounding of corners and sizing of angles is also an important element in maintaining visual unity.
 
-Icons that follow Ant Design should have rounded corners and edges using a 72px radius. Angles should be a multiple of 45°.
+Icons that follow Ant Design should have rounded corners and edges using a 72px radius.
 
-#### Visual correction
+### Visual Correction
 
-<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/xOFtYOCPdCHNwAzYVqSJ.png" alt="Correct example" description="For the intricate “JPG” lettering, an outline is added for readability">
-<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/pxpaZCbYqucHqnxyazta.png" alt="Incorrect example" description="The text in the icon is crowded and hard to read">
+<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/VghPLyDUdFmjhGJlNxjV.png" alt="Correct example" description="For the intricate “JPG” lettering, an outline is added for readability">
+<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/qnzloxRQmvHzHAhWWwCS.png" alt="Incorrect example" description="The text in the icon is crowded and hard to read">
 
 In certain special cases (for example, when the icon is too compact), adjustments to line width, outlines, or other subtle changes may be made to increase readability.
 
 ### Perspective
 
-<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/YqNpTvpCeBeRAPWSFJbz.png" alt="Correct example" description="Maintains a flat, simple style">
-<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/tqMBxDQruzWhunynJaNC.png" alt="Incorrect example" description="Icons should not have depth nor varying perspectives">
+<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/tIePnIOTXtgzVKbqwucm.png" alt="Correct example" description="Maintains a flat, simple style">
+<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/ALNOEelXeFhxUobLqyCq.png" alt="Incorrect example" description="Icons should not have depth nor varying perspectives">
 
 Always keep a simple, flat style. Icons should not have a sense of depth nor a large amount of detail.
 
-### Naming conventions
+### Naming Conventions
 
-<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/RjDmLIjLtUdoIQDIuVrw.png">
+<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/NFOvbdbVWeeEqOkdUfVB.png">
 
 Uniform naming conventions make finding icons faster and easier. For example, icons with a surrounding outline have a uniform "-o" suffix.
 
-### Icon sizing
+### Icon Sizing
 
-<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/nHFxbYpwlUHwOcrkvgGw.png">
+<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/jAuedlyhNIDyOIZTqbqN.png">
 
 Icons should be scaled according to the text size, according to the Ant Design specification.
 
@@ -82,28 +81,28 @@ For example, icons inline with 12pt font should be 12px in size with 8px of spac
 
 ### Color
 
-<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/uYhuxxiWZlgVwdmfqUli.png" description="Colors demonstrated - @Black = #000000、@White = #FFFFFF、@Blue-6 = #108EE9">
+<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/LxGLhtnwvCqZWYqGDAAr.png" description="Colors demonstrated - @Black = #000000、@White = #FFFFFF、@Blue-6 = #1890FF">
 
 The color of the icon should be consistent the color of the surrounding copy, unless the icon is being used to express state (in which case it should be colored accordingly).
 
 ---
 
-## Pictographs
+## Business Icons
 
-<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/tFBnAjChLpybfxtnotTx.png">
+<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/EADAnRecKSTxvpxPzKoq.png">
 
-While certain icons may be used to express an action or to communicate state, other icons may act as pictographs which can be used to either communicate meaning or to help a user remember an abstract concept.
+Business icons, unlike system icons, do not themselves have functional operations, but rather an abstraction that assists with copywriting. Compared to the system icon, the business icon is more rich in the details of the design, the size of the use of relatively large.
 
-> Note: The design principles for system icons (stroke weight, etc.) also apply to pictographs.
+> Note: Business icons design principles and system icons are basically the same, the details of the processing (such as stroke weight, fillet size, etc.) depending on the specific scene may be.
 
-### Pictograph sizing
+### Icon Sizing
 
-<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/ByDcWtCrgspVLqjTsFdu.png">
+<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/uwAgfciGszhdiVlMSBXK.png">
 
-Conventionally, we recommend storing pictograph icons in three sizes: 32px, 48px, and 64px. That said, the physical dimensions of an icon should match the dimensions of where it is used.
+In normal use, there are 32px (minimum size), 48px and 64px (maximum size) three options.
 
-### Colors
+### Color
 
-<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/QfFDvJISCInKnjsshowY.png">
+<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/wUxhTxZlHoTxDvneWBWO.png">
 
-Pictographs should either be monochrome (using a neutral color) or consist of two colors (the neutral color + primary color), with the primary color not exceeding 40% of the pictograph's area.
+There are two kinds of business icon, single-color (neutral color) and double-color (neutral color + primary color), the area of primary color does not exceed 40% of the entire icon.

docs/spec/icon.zh-CN.md

@@ -1,10 +1,10 @@
 ---
+category: 视觉
 order: 4
 title: 图标
 ---
 
-图标是具有指代意义的图形，也是一种标识。通过使用图标表达命令，强调状态，表示产品或类别。为了系统及跨平台之间图形认知保持一致，
-Ant Design 的图标在设计和使用时有以下两个原则点需要注意：
+图标是具有指代意义的图形，也是一种标识。通过使用图标表达命令，强调状态，表示产品或类别。为了系统及跨平台之间图形认知保持一致，Ant Design 的图标在设计和使用时有以下两个原则点需要注意：
 
 - 简单的图形语言以及高辨识度。清晰、直观的图标更能明确指代含义便于识别记忆；
 - 保持图标之间一致的风格和表现方式。界面中的所有图标都应该在细节设计、透视和笔画权重上保持一致。
@@ -13,7 +13,7 @@ Ant Design 的图标在设计和使用时有以下两个原则点需要注意：
 
 ## 系统图标
 
-<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/gcOflMziKUIdaeLlObPj.png">
+<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/XzOPonWCsPjvgkrklCzo.png">
 
 系统图标通常用来表示常用的操作，比如：删除、保存、编辑。也可以用来表示一个文件或者状态。
 
@@ -21,7 +21,7 @@ Ant Design 的图标在设计和使用时有以下两个原则点需要注意：
 
 ### 关键轮廓线
 
-<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/psKuOznmgqzqQoumcAxT.png" alt="网格和关键轮廓线">
+<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/beTZeZjJBVuhMyTOhebs.png" alt="网格和关键轮廓线">
 
 根据不同的图标形状类型使用不同的轮廓线，可以使图标之间保持一致的视觉效果。
 
@@ -29,53 +29,51 @@ Ant Design 的图标在设计和使用时有以下两个原则点需要注意：
 
 - [制作小技巧](https://zos.alipayobjects.com/rmsportal/hmNuLjCkBssupcZgYAde.png)
 
-<img class="preview-img no-padding inline" align="right" src="https://zos.alipayobjects.com/rmsportal/XzoySLGeUaMCOVymkyZq.png" alt="正方形外轮廓">
-<img class="preview-img no-padding inline" align="right" src="https://zos.alipayobjects.com/rmsportal/fdWiCCIQiJIViSNhmcHo.png" alt="横向矩形外轮廓">
+<img class="preview-img no-padding inline" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/rxuHAKGEGLuqBJAAhnSm.png" alt="正方形外轮廓">
+<img class="preview-img no-padding inline" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/fhkmysGZiTkPVszWHgUy.png" alt="横向矩形外轮廓">
 
-<img class="preview-img no-padding inline" align="right" src="https://zos.alipayobjects.com/rmsportal/xEvvEZHaSlstcozKgoBd.png" alt="圆形外轮廓">
-<img class="preview-img no-padding inline" align="right" src="https://zos.alipayobjects.com/rmsportal/GyBKoeSnRDFPvJudEgOA.png" alt="纵向矩形外轮廓">
+<img class="preview-img no-padding inline" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/BiraoJgbXokyzmUFqVuf.png" alt="圆形外轮廓">
+<img class="preview-img no-padding inline" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/wgQLwFnPaeEalmmSuBMO.png" alt="纵向矩形外轮廓">
 
-### 细节
+### 笔画
 
-#### 笔画
-
-<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/WnOptTBWISNYeRpYnlcg.png" alt="正确示范" description="icon 的线条粗细统一保持为 72px">
-<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/pdLgzaadpHndkqAPLNmx.png" alt="错误示范" description="icon 的线条粗细不统一">
+<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/uoNmxXiqKpfoFDdEVjUB.png" alt="正确示范" description="icon 的线条粗细统一保持为 72px">
+<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/cnFYbWzcKaPFSiHcptCF.png" alt="错误示范" description="icon 的线条粗细不统一">
 
 一致的笔画权重是保持整个图标系统视觉统一的关键，Ant Design 系统图标的线条统一为 72px 宽度。
 
-#### 边角
+### 边角
 
-<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/FBhKrLDoNmfgwZRbfXRi.png" alt="正确示范" description="图标的边角设计都遵循了 Ant Design 的规范">
-<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/NtrZWeUsfVWiOjRcWDqv.png" alt="错误示范" description="线条的终端并不是圆角">
+<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/tGbuhPmvEJXmOFoYAkPK.png" alt="正确示范" description="图标的边角设计都遵循了 Ant Design 的规范">
+<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/JekevTlqdDJQLIQwrppm.png" alt="错误示范" description="线条的终端并不是圆角">
 
 一致的角度半径也是保持整个图标系统视觉统一的重要元素。
 
 Ant Design 的图标设计中，外轮廓线统一半径为 72px 的圆角，icon 内部空间的边角保持直角，笔画的终端为圆角。
 
-#### 视觉修正
+### 视觉修正
 
-<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/xOFtYOCPdCHNwAzYVqSJ.png" alt="正确示范" description="对于图标内较复杂的 “JPG” 字母在笔画权重上进行了微调，让图标看上去更和谐">
-<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/pxpaZCbYqucHqnxyazta.png" alt="错误示范" description="icon 图形太复杂，空间显得拥挤">
+<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/VghPLyDUdFmjhGJlNxjV.png" alt="正确示范" description="对于图标内较复杂的『JPG』字母在笔画权重上进行了微调，让图标看上去更和谐">
+<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/qnzloxRQmvHzHAhWWwCS.png" alt="错误示范" description="icon 图形太复杂，空间显得拥挤">
 
 在一些特殊情况下（比如，icon 的形状比较复杂紧凑），可以通过调整线条的粗细或圆角的大小等微妙的变化来增加图标的易读性。
 
 ### 透视角度
 
-<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/YqNpTvpCeBeRAPWSFJbz.png" alt="正确示范" description="保持平面、简洁的风格">
-<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/tqMBxDQruzWhunynJaNC.png" alt="错误示范" description="图标具有俯视角度，并不是在一个维度空间内">
+<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/tIePnIOTXtgzVKbqwucm.png" alt="正确示范" description="保持平面、简洁的风格">
+<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/ALNOEelXeFhxUobLqyCq.png" alt="错误示范" description="图标具有俯视角度，并不是在一个维度空间内">
 
 始终保持简洁、平面的风格,不要让图标具有多维度空间感，或者充满了细节。
 
 ### 命名规则
 
-<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/RjDmLIjLtUdoIQDIuVrw.png">
+<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/NFOvbdbVWeeEqOkdUfVB.png">
 
 统一的命名方式有助于管理图标，也能更快速的找到需要的图标。例如，环绕型的图标统一以「-o」后缀。
 
 ### 图标尺寸
 
-<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/nHFxbYpwlUHwOcrkvgGw.png">
+<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/jAuedlyhNIDyOIZTqbqN.png">
 
 应用于页面时请使用 Ant Design 的规范尺寸，与字体搭配时和字体的尺寸保持一致。
 
@@ -83,7 +81,7 @@ Ant Design 的图标设计中，外轮廓线统一半径为 72px 的圆角，ico
 
 ### 颜色
 
-<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/uYhuxxiWZlgVwdmfqUli.png" description="注：表格中 @Black = #000000、@White = #FFFFFF、@Blue-6 = #108EE9">
+<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/LxGLhtnwvCqZWYqGDAAr.png" description="表格中 @Black = #000000、@White = #FFFFFF、@Blue-6 = #1890FF">
 
 图标的颜色需要与搭配文案的色值保持一致（表示状态的除外）。
 
@@ -91,7 +89,7 @@ Ant Design 的图标设计中，外轮廓线统一半径为 72px 的圆角，ico
 
 ## 业务图标
 
-<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/sBoyTTymmdhEuYUPEGAd.png">
+<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/EADAnRecKSTxvpxPzKoq.png">
 
 业务图标不同于系统图标，本身不带有功能性的操作，而是辅助配合文案的一个抽象化图形。相较于系统图标，业务图标在设计的细节上更为丰富，使用的尺寸也比较大。
 
@@ -99,12 +97,12 @@ Ant Design 的图标设计中，外轮廓线统一半径为 72px 的圆角，ico
 
 ### 图标尺寸
 
-<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/ByDcWtCrgspVLqjTsFdu.png">
+<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/uwAgfciGszhdiVlMSBXK.png">
 
 在常规使用中，有 32px（最小尺寸）、48px 和 64px（最大尺寸）三种选择。
 
 ### 颜色
 
-<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/QfFDvJISCInKnjsshowY.png">
+<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/wUxhTxZlHoTxDvneWBWO.png">
 
 业务图标有单色（中性色）和双色（中性色+主色）两种，主色的面积不超过整个 icon 的 40%。

docs/spec/introduce.en-US.md

@@ -1,10 +1,11 @@
 ---
+category: Ant Design
 order: 0
-title: Ant Design
+title: Introduction
 ---
 
-<div style="text-align:center;background:#FBFBFB;margin:40px 0;">
-  <img style="width: 600px" src="https://os.alipayobjects.com/rmsportal/mgesTPFxodmIwpi.png">
+<div style="text-align:center;margin:40px 0;">
+  <img width="600" src="https://gw.alipayobjects.com/zos/rmsportal/lcamFWetlMgLkLmDUgmZ.png">
 </div>
 
 In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development. After massive project practice and summaries, Ant Design, a design language for background applications, is refined by Ant UED Team, which aims to uniform the user interface specs for internal background projects, lower the unnecessary cost of design differences and implementation and liberate the resources of design and front-end development.

docs/spec/introduce.zh-CN.md

@@ -1,15 +1,16 @@
 ---
+category: Ant Design
 order: 0
-title: Ant Design
+title: 介绍
 ---
 
-<div style="text-align:center;background:#FBFBFB;margin:40px 0;">
-  <img width="600" src="https://os.alipayobjects.com/rmsportal/mgesTPFxodmIwpi.png">
+<div style="text-align:center;margin:40px 0;">
+  <img width="600" src="https://gw.alipayobjects.com/zos/rmsportal/lcamFWetlMgLkLmDUgmZ.png">
 </div>
 
-不同的设计规范和实现方式会给企业中后台产品研发的设计师和工程师带来很多困扰和重复建设，大大降低了产品的研发效率。在大量真实项目研发实践中，我们建设了一套中后台设计体系 Ant Design，旨在统一中后台项目的前端 UI 设计，屏蔽不必要的设计差异和实现成本，解放设计和前端的研发资源。
+蚂蚁的企业级产品是一个庞大且复杂的体系。这类产品不仅量级巨大且功能复杂，而且变动和并发频繁，常常需要设计与开发能够快速的做出响应。同时这类产品中有存在很多类似的页面以及组件，可以通过抽象得到一些稳定且高复用性的内容。
 
-Ant Design 是一个致力于提升『用户』和『设计者』使用体验的中后台设计语言，利用统一的设计规范、前端实现、设计/研发工具链对产品研发赋能，全面提高中后台产品体验和研发效率。
+随着商业化的趋势，越来越多的企业级产品对更好的用户体验有了进一步的要求。带着这样的一个终极目标，我们（蚂蚁金服体验技术部）经过大量的项目实践和总结，逐步打磨出一个服务于企业级产品的设计体系 Ant Design。基于『确定』和『自然』的设计价值观，通过模块化的解决方案，降低冗余的生产成本，让设计者专注于更好的用户体验。
 
 ---
 
@@ -18,8 +19,8 @@ Ant Design 是一个致力于提升『用户』和『设计者』使用体验的
 我们提供完善的设计原则、最佳实践和设计资源文件（Sketch 和 Axure），来帮助业务快速设计出高质量的产品原型。
 
 - [设计原则](/docs/spec/proximity)
-- [设计模式](/docs/pattern/navigation)
-- [设计资源](/docs/resource/download)
+- [设计模式](/docs/spec/overview)
+- [设计资源](/docs/spec/download)
 
 ## 前端实现
 

docs/spec/invitation.en-US.md

@@ -21,25 +21,22 @@ By providing cues for interaction directly on the page we can statically indicat
 
 <br>
 
-<img class="preview-img" align="right" alt="example of Text Invitation" src="https://os.alipayobjects.com/rmsportal/pWnlJpbkCPIaKdP.png">
+<img class="preview-img" align="right" alt="example of Text Invitation" src="https://gw.alipayobjects.com/zos/rmsportal/ZeMSbCHmvWETbssJHRvo.png">
 
-<img class="preview-img" align="right" alt="example of Blank Slate Invitation" src="https://os.alipayobjects.com/rmsportal/DkOYgfJHDuzhyBg.png">
+<img class="preview-img" align="right" alt="example of Blank Slate Invitation" src="https://gw.alipayobjects.com/zos/rmsportal/PHxVAFKncyXDCFUJInbB.png">
 
-<img class="preview-img" align="right" alt="example of Unfinished Invitation" src="https://os.alipayobjects.com/rmsportal/cojQlWfINmsVDGd.png">
+<img class="preview-img" align="right" alt="example of Unfinished Invitation" src="https://gw.alipayobjects.com/zos/rmsportal/ChvxJAQTwWbqzBnUBLec.png">
 
 Call to Action Invitations are generally provided as static instructions on the page. But visually they can be provided in many different ways such as Text Invitation, Blank Slate Invitation and Unfinished Invitation.
 
 <br>
 
-<img class="preview-img" align="right" alt="example 1 of Tour Invitation" description="A few of tour points are provided when the user first logs in. Clicking the “Got It” button leads the user to the next tour step." src="https://os.alipayobjects.com/rmsportal/TGnzYViseCoFBYL.png">
-
-<img class="preview-img" align="right" alt="example 2 of Tour Invitation" src="https://os.alipayobjects.com/rmsportal/KQabdaTbolVuMld.png">
+<img class="preview-img" align="right" alt="example 1 of Tour Invitation" description="A few of tour points are provided when the user first logs in. Clicking the 'Got It' button leads the user to the next tour step." src="https://gw.alipayobjects.com/zos/rmsportal/dMrVeJJiaCLzoYfJrJKe.png">
 
 Tour invitation can be a nice way to explain design changes to a web application, especially for a well-designed interface. But providing tours will not solve the real problems an interface may have during interaction.
 
 >Note that make Tour Invitations short and simple, easy to exit, and clear to restart.
 
-
 <br>
 
 ---
@@ -50,16 +47,16 @@ Dynamic Invitations engage users at the point of the interaction and guide them
 
 <br>
 
-<img class="preview-img" align="right" alt="example 1 of Hover Invitation" description="During mouse hover on the whole card, the clickable parts turn to blue hypertext." src="https://os.alipayobjects.com/rmsportal/gzfDJLcETyTOfFg.png">
+<img class="preview-img" align="right" alt="example 1 of Hover Invitation" description="During mouse hover on the whole card, the clickable parts turn to blue hypertext." src="https://gw.alipayobjects.com/zos/rmsportal/ejvYAogJXLPqoMUqyvIV.png">
 
-<img class="preview-img" align="right" alt="example 2 of Hover Invitation" description="During mouse hover, the button of &quot;Select this Template&quot; appears." src="https://os.alipayobjects.com/rmsportal/tdJWZFIDWYuMVIe.png">
+<img class="preview-img" align="right" alt="example 2 of Hover Invitation" description="During mouse hover, the button of &quot;Select this Template&quot; appears." src="https://gw.alipayobjects.com/zos/rmsportal/umGVwLlIJSmxaQXcjlbh.png">
 
 Hover Invitation: Provide an invitation during mouse hover.
 
 
 <br>
 
-<img class="preview-img" align="right" alt="example of Inference Invitation" description="The system predicts that the user's interest in an article extends to a type of articles, and it provides an invitation after the user click &quot;like&quot;." src="https://os.alipayobjects.com/rmsportal/SyurwytfcvpbNLG.png">
+<img class="preview-img" align="right" alt="example of Inference Invitation" description="The system predicts that the user's interest in an article extends to a type of articles, and it provides an invitation after the user click &quot;like&quot;." src="https://gw.alipayobjects.com/zos/rmsportal/iuLdCuNQWCvYuTxxQUuL.png">
 
 Inference Invitation: Use visual inferences during interaction to cue users as to what the system has inferred about their intent.
 
@@ -70,4 +67,4 @@ Inference Invitation: Use visual inferences during interaction to cue users as t
 More Content Invitation: Indicate that there is more content on the page.
 
 
-<br>
+<br>

docs/spec/invitation.zh-CN.md

@@ -1,5 +1,5 @@
 ---
-category: 设计原则
+category: 原则
 order: 8
 title: 提供邀请
 ---
@@ -21,20 +21,18 @@ title: 提供邀请
 
 <br>
 
-<img class="preview-img" align="right" alt="文本邀请示例" src="https://os.alipayobjects.com/rmsportal/pWnlJpbkCPIaKdP.png">
+<img class="preview-img" align="right" alt="文本邀请示例" src="https://gw.alipayobjects.com/zos/rmsportal/ZeMSbCHmvWETbssJHRvo.png">
 
-<img class="preview-img" align="right" alt="白板式邀请示例" src="https://os.alipayobjects.com/rmsportal/DkOYgfJHDuzhyBg.png">
+<img class="preview-img" align="right" alt="白板式邀请示例" src="https://gw.alipayobjects.com/zos/rmsportal/PHxVAFKncyXDCFUJInbB.png">
 
-<img class="preview-img" align="right" alt="未完成邀请示例" src="https://os.alipayobjects.com/rmsportal/cojQlWfINmsVDGd.png">
+<img class="preview-img" align="right" alt="未完成邀请示例" src="https://gw.alipayobjects.com/zos/rmsportal/ChvxJAQTwWbqzBnUBLec.png">
 
 引导操作邀请：一般以静态说明形式出现在页面上，不过它们在视觉上也可以表现出多种不同样式。
 常见类型：『文本邀请』、『白板式邀请』、『未完成邀请』。
 
 <br>
 
-<img class="preview-img" align="right" alt="漫游探索邀请示例 1" description="在用户首次登录时出现少量『探索点』，当用户点击『我知道了』，能快速切换到下一个探索点。" src="https://os.alipayobjects.com/rmsportal/TGnzYViseCoFBYL.png">
-
-<img class="preview-img" align="right" alt="漫游探索邀请示例 2" src="https://os.alipayobjects.com/rmsportal/KQabdaTbolVuMld.png">
+<img class="preview-img" align="right" alt="漫游探索邀请示例 " description="在用户首次登录时出现少量『探索点』，当用户点击『我知道了』，能快速切换到下一个探索点。" src="https://gw.alipayobjects.com/zos/rmsportal/dMrVeJJiaCLzoYfJrJKe.png">
 
 漫游探索邀请：是向用户介绍新功能的好方法，尤其是对于那些设计优良的界面。但是它不是『创口贴』，仅通过它不能解决界面交互的真正问题。
 
@@ -51,16 +49,16 @@ title: 提供邀请
 
 <br>
 
-<img class="preview-img" align="right" alt="悬停邀请示例 1" description="鼠标『悬停』整个卡片时，可被点击部分变为蓝色的『文字链』。" src="https://os.alipayobjects.com/rmsportal/gzfDJLcETyTOfFg.png">
+<img class="preview-img" align="right" alt="悬停邀请示例 1" description="鼠标『悬停』整个卡片时，可被点击部分变为蓝色的『文字链』。" src="https://gw.alipayobjects.com/zos/rmsportal/ejvYAogJXLPqoMUqyvIV.png">
 
-<img class="preview-img" align="right" alt="悬停邀请示例 2" description="鼠标『悬停』时，出现『选择此模板』的按钮。" src="https://os.alipayobjects.com/rmsportal/tdJWZFIDWYuMVIe.png">
+<img class="preview-img" align="right" alt="悬停邀请示例 2" description="鼠标『悬停』时，出现『选择此模板』的按钮。" src="https://gw.alipayobjects.com/zos/rmsportal/umGVwLlIJSmxaQXcjlbh.png">
 
 悬停邀请：在鼠标悬停期间提供邀请。
 
 
 <br>
 
-<img class="preview-img" align="right" alt="推论邀请示例" description="用户点击『赞』后，同时系统分析（既然用户喜欢这篇文章，那么可能对这一类文章都有兴趣）并提供开启『精打细算』的邀请。" src="https://os.alipayobjects.com/rmsportal/SyurwytfcvpbNLG.png">
+<img class="preview-img" align="right" alt="推论邀请示例" description="用户点击『赞』后，同时系统分析（既然用户喜欢这篇文章，那么可能对这一类文章都有兴趣）并提供开启『精打细算』的邀请。" src="https://gw.alipayobjects.com/zos/rmsportal/iuLdCuNQWCvYuTxxQUuL.png">
 
 推论邀请：用于交互期间，合理推断用户可能产生的需求。
 

docs/spec/layout.en-US.md

@@ -1,114 +0,0 @@
----
-order: 7
-title: Layout
----
-
-Layout is the prerequisite for a webpage. It's also the foundation of follow-up interactive and visual design. In order to guarantee consistency among similar products, Ant Design provides some common layout templates. Before choosing one of these templates, you need to have a clear mind about:
-
-- The main tasks that a user needs to accomplish and all necessary information for making such decisions.
-- The priorities and features of those tasks and information, so as to select a reasonable layout
-
----
-
-## Commonly used layout
-
-Through a large number of practices, Ant Design summarized six commonly used layout templates. There are home page, dashboard, list page, table page, details page and form page. Knowing these templates helps to find out a suitable layout for your product quickly.
-
-### Home page
-
-
-<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/olHkTiGQqfwThlgPIXzx.png">
-
-<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/uxbNrsFCmPFjYdhDowky.png">
-
-Home page is usually the first step for a user to understand a website or the products. Generally, home page consists of product drawings, brief product introductions, and user login interfaces. In the design, we recommend you to:
-
-- Keep the copywriting clear and simply, which helps you better express the ideas.
-- Use intuitive pictures for a product, which helps to deepen a user's understanding and impression.
-
-### Dashboard
-
-<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/fCVwqOiItdbzyZkQOOiQ.png">
-
-<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/LvYKhbKsPzIRLGsBxUJA.png">
-
-Dashboard collects a variety of information, such as digitals, graphics, copywriting, etc. Key information should be clearly represented and easily understood. Thus, displaying the complex information in a clear way is important in the design. For this propose, we recommend you to:
-
-- Organize the page layout according to the importance of information, so as to highlight key points.
-- Visualize the data, which allows users to understand key information as well as the overall situation in an intuitive way.
-- Use color and grid layout logically, which helps to reduce a user's visual fatigue.
-
-
-### List page
-
-<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/GSIyiSRJmxUhmxpMoyrj.png">
-
-<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/VyFWYXzkQYYzMzqBXfzO.png">
-
-List is a way to display information in parallel. A well designed list can be helpful for users to read basic information and perform corresponding operations quickly. Therefore, the "readability" and "operability" of a list are the keys to the design. For this propose, we recommend you to:
-
-- Identify the importance of information accordingly and show nothing but key information as well as the corresponding operations.
-- Fold secondary information or put it into the details page. It allows a user to access information in a progressive way when the content is too complex.
-
-### Table page
-
-<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/ArRESSbBrLJWhjscKiZh.png">
-
-<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/gDwAZagDBphbcePRDnBZ.png">
-
-Table is a carrier for multi-dimensional information. It can make complex information to be read and understood easily. Its readability, convenience and operability play an essential role in the user experience. Therefore, we should pay attention to the following points in the design:
-
-- Construct a clear table layout. It can be helpful for a user to receive and understand information.
-- Highlight key information through some visual adjustments.
-- Use the horizontal or vertical zebra strip smartly when there is a large multi-row table or there are multiple columns in each row. By doing so, information is more distinguishable and easier to be understood.
-
-### Details page
-
-<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/wRdLpkIoTNfxOvNOqKyf.png">
-
-<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/IWXpmErtdIHzDYbtNohi.png">
-
-Details page usually carries a large amount of basic information, extended information as well as status information. It's important to identify priorities of the information. A clear layout can be helpful for a user to get key information at a glance and make decisions efficiently. In the design, it's worth noting that:
-
-- Layout format, text size and text spacing, are the key factors that affect a user's efficiency to access information.
-- Text with graphic can be better understood than pure text.
-
-### Form page
-
-<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/AVxFnNgjBPIaxLnCOxJv.png">
-
-<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/sqeTZuWlqiGboOITncCh.png">
-
-Form page is often used for tasks such as login, register, booking, comment, etc. Form page is indispensable when you need to record the user information. Therefore, a well designed form page can guide the user to complete the data recording workflow behind the form efficiently. We recommended you to:
-
-- Provide a clear user's view path, in consideration of how a user will browse the information;
-- Simplify the content of a form (try to avoid redundant inputs)
-- Name the tags that can be easy to read and understand. Avoid confusions caused by ambiguous descriptions;
-- Place eye-catching submit buttons on the end of a user's view path, which makes it more conducive for a user to complete all the operations.
-
----
-
-## Grid
-
-There are `Grid` and `Gutter` in AntD layout. During the design, you can make an assumption that the "total page width is 1440px, and the "content area width is 1208px". Based on this assumption, you can design the page in 24 evenly divided columns.
-
-![](https://os.alipayobjects.com/rmsportal/bohSixChLxFkwsOEiNaF.png)
-
-It is recommended that the number of blocks arranged in the horizontal direction be at most four, at least one, so as to guarantee the comfort of view.
-
-![](https://os.alipayobjects.com/rmsportal/JmrNLpHxwcLebVpBIGqD.png)
-
-> Note: The gray parts are called "Column", and the white parts are called "Gutter".
-
-### Grid formula
-
-<img class="preview-img no-padding" align="right" src="https://os.alipayobjects.com/rmsportal/htXqyMPydaagYLdAGEJK.png">
-
-The `Gutter` value in ant design is fixed. When the width of a browser decrease or increase within a certain range, the width of `grids` will be changed accordingly, but the width of `Gutter` remains unchanged.
-
-There are two `Gutter`s in Ant Design
-
-- 24px width `Gutter`, which is used in home page and Dashboard
-- 16px width `Gutter`, which is used in list Page, table page, details page and form page.
-
-> [tips for setting the grid ](https://zos.alipayobjects.com/rmsportal/cbxeMLaFnqQEvFgmhSTS.png).

docs/spec/layout.md

@@ -0,0 +1,74 @@
+---
+category:
+  zh-CN: 视觉
+  en-US: Visual
+order: 2
+title:
+  zh-CN: 布局
+  en-US: Layout
+---
+
+空间布局是体系化视觉设计的起点，和传统的平面设计的不同之处在于，UI界面的布局空间要基于『动态、体系化』的角度出发展开。我们受到建筑界大师柯布西耶的模度思想的启发，基于『秩序之美』的原则，探索 UI 设计中的动态空间秩序，形成了 Ant Design 的界面布局方式，为设计者构筑具备理性之美的布局空间创造了条件。
+
+在中后台视觉体系中定义布局系统，我们建议从 5 个方面出发：
+
+1. 统一的画板尺寸
+1. 适配方案
+1. 网格单位
+1. 栅格
+1. 常用模度
+
+## 统一画板
+
+为了尽可能减少沟通与理解的成本，有必要在组织内部统一设计板的尺寸。蚂蚁中台设计团队统一的画板尺寸为 1440。
+
+## 适配
+
+在设计过程中，设计师还需要建立适配的概念，根据具体情况判断系统是否需要进行适配，以及哪些区块需要考虑动态布局。据统计，使用中台系统的用户的主流分辨率主要为 1920、1440 和 1366，个别系统还存在 1280 的显示设备。
+
+Ant Design 两种较为典型的适配方案：
+
+### 一、左右布局的适配方案
+
+常被用于左右布局的设计方案中，常见的做法是将左边的导航栏固定，对右边的工作区域进行动态缩放。
+
+![左右布局的适配方案](https://gw.alipayobjects.com/zos/rmsportal/vSqMhPolCtINKLvVVdLt.png)
+
+### 二、上下布局的适配方案
+
+常被用于上下布局的设计方案中，做法是对两边留白区域进行最小值的定义，当留白区域到达限定值之后再对中间的主内容区域进行动态缩放。
+
+![上下布局的适配方案](https://gw.alipayobjects.com/zos/rmsportal/VQEiJqtZfvvdyZSKcEsE.png)
+
+这里提及的只是非常简单的两种适配的思路，实际设计中一套完美的适配方案需要设计师具备前端视角、平面构图视角以及交互视角。
+
+## 网格单位
+
+Ant Design 通过网格体系来实现视觉体系的秩序。网格的基数为 8，不仅符合偶数的思路同时能够匹配多数主流的显示设备。通过建立网格的思考方式，还能帮助设计者快速实现布局空间的设计决策同时也能简化设计到开发的沟通损耗。
+
+## 关于栅格
+
+Ant Design 采用 24 栅格体系。以 1440 上下布局的结构为例，对宽度为 1168 的内容区域 进行 24 栅格的划分设置，如下图所示。我们为页面中栅格的 Gutter 设定了定值，即浏览器在一定范围扩大或缩小，栅格的 Column 宽度会随之扩大或缩小，但 Gutter 的宽度值固定不变。
+
+![栅格 layout](https://gw.alipayobjects.com/zos/rmsportal/YPUZpPCzFgQHVxXCIAzq.png)
+
+对开发者而言栅格是实现动态布局的手段，而设计师对于栅格的理解源自平面设计中的栅格。在具体落地中视角的不同就容易造成偏差，最终影响还原度，继而增加沟通成本。
+
+Ant Design 的设计师通过 4 点来实现设计过程中和工程师的沟通：
+
+1. 清晰的定义动态布局范围
+1. 尽量保持偶数思维
+1. 关键数据的交付（Gutter、Column）
+1. 区块的定义要从 column 开始到 column 结束
+
+## 常用模度
+
+蚂蚁中后台涵盖了大量的不同类型和量级的产品，为了帮助不同设计能力的设计者们在界面布局上的一致性和韵律感，统一设计到开发的布局语言，减少还原损耗，Ant Design 提出了 UI 模度的概念。在大量的实践中，我们提取了一组可以用于UI布局空间决策的数组，他们都保持了 8 倍数的原则、具备动态的韵律感。经过验证，可以在一定程度上帮助我们更快更好的实现布局空间上的设计决策。
+
+![双数组](https://gw.alipayobjects.com/zos/rmsportal/ZBeDQMLMHLRfmUlUaaII.png)
+
+![常用](https://gw.alipayobjects.com/zos/rmsportal/QWsZUeuqYGQJqJxIPHOx.png)
+
+## 是启发，而非限制
+
+Ant Design 在布局空间上的成果并非要限制设计产出，更多的在于引导设计者如何做到『更好』。8 倍数的双数组通过排列组合的方式可以形成千变万化种可能性，但在无限的可能性之中依然存在着『只是简单的套用数据组合』同『看起来很精妙』的差别。实现合理优雅的界面布局，在对美感的追求之上，还应当结合可用性来看待，对于企业级应用界面布局的探索，我们依然在路上。