Merge branch 'master' into feature

* master:
  📝 fix demo order
  Fixes #10576 (#13703)
  doc: update form & layout docs (#13701)
  update doc close #11802
  🐛 Fix Badge offset not working when count is ReactNode

components/badge/ScrollNumber.tsx

@@ -173,7 +173,10 @@ export default class ScrollNumber extends Component<ScrollNumberProps, ScrollNum
     }
     if (displayComponent) {
       return React.cloneElement(displayComponent, {
-        className: `${prefixCls}-custom-component`,
+        className: classNames(
+          `${prefixCls}-custom-component`,
+          displayComponent.props && displayComponent.props.className,
+        ),
       });
     }
     return createElement(component as any, newProps, this.renderNumberElement(prefixCls));

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

@@ -2195,3 +2195,18 @@ exports[`Badge should render when count is changed 5`] = `
   </Consumer>
 </Badge>
 `;
+
+exports[`Badge should support offset when count is a ReactNode 1`] = `
+<span
+  class="ant-badge"
+>
+  <a
+    class="head-example"
+    href="#"
+  />
+  <span
+    class="ant-scroll-number-custom-component custom"
+    style="right:-10px;margin-top:20px;color:#f5222d"
+  />
+</span>
+`;

components/badge/__tests__/index.test.js

@@ -72,4 +72,14 @@ describe('Badge', () => {
     );
     expect(wrapper).toMatchSnapshot();
   });
+
+  // https://github.com/ant-design/ant-design/issues/13694
+  it('should support offset when count is a ReactNode', () => {
+    const wrapper = render(
+      <Badge count={<span className="custom" style={{ color: '#f5222d' }} />} offset={[10, 20]}>
+        <a href="#" className="head-example" />
+      </Badge>,
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
 });

components/badge/index.tsx

@@ -111,7 +111,16 @@ export default class Badge extends React.Component<BadgeProps, any> {
 
   renderDispayComponent() {
     const { count } = this.props;
-    return count && typeof count === 'object' ? (count as React.ReactElement<any>) : undefined;
+    const customNode = count as React.ReactElement<any>;
+    if (!customNode || typeof customNode !== 'object') {
+      return undefined;
+    }
+    return React.cloneElement(customNode, {
+      style: {
+        ...this.getStyleWithOffset(),
+        ...(customNode.props && customNode.props.style),
+      },
+    });
   }
 
   renderBadgeNumber(prefixCls: string, scrollNumberPrefixCls: string) {
@@ -129,8 +138,6 @@ export default class Badge extends React.Component<BadgeProps, any> {
       [`${prefixCls}-status-${status}`]: !!status,
     });
 
-    const styleWithOffset = this.getStyleWithOffset();
-
     return hidden ? null : (
       <ScrollNumber
         prefixCls={scrollNumberPrefixCls}
@@ -139,7 +146,7 @@ export default class Badge extends React.Component<BadgeProps, any> {
         count={displayCount}
         displayComponent={this.renderDispayComponent()} // <Badge status="success" count={<Icon type="xxx" />}></Badge>
         title={this.getScollNumberTitle()}
-        style={styleWithOffset}
+        style={this.getStyleWithOffset()}
         key="scrollNumber"
       />
     );
@@ -174,12 +181,14 @@ export default class Badge extends React.Component<BadgeProps, any> {
       [`${prefixCls}-status-${status}`]: !!status,
     });
 
-    const styleWithOffset = this.getStyleWithOffset();
-
     // <Badge status="success" />
     if (!children && status) {
       return (
-        <span {...restProps} className={this.getBadgeClassName(prefixCls)} style={styleWithOffset}>
+        <span
+          {...restProps}
+          className={this.getBadgeClassName(prefixCls)}
+          style={this.getStyleWithOffset()}
+        >
           <span className={statusCls} />
           <span className={`${prefixCls}-status-text`}>{text}</span>
         </span>

components/card/style/index.less

@@ -69,7 +69,7 @@
 
   &-extra {
     float: right;
-    padding: @card-head-padding + 1.5px 0;
+    padding: @card-head-padding 0;
     font-size: @font-size-base;
     color: @text-color;
     font-weight: normal;

components/form/index.en-US.md

@@ -85,8 +85,7 @@ If the form has been decorated by `Form.create` then it has `this.props.form` pr
 | isFieldTouched | Check whether a field is touched by `getFieldDecorator`'s `options.trigger` event | (name: string) => boolean |
 | isFieldValidating | Check if the specified field is being validated. | Function(name) |
 | resetFields | Reset the specified fields' value(to `initialValue`) and status. If you don't specify a parameter, all the fields will be reset. | Function(\[names: string\[]]) |
-| setFields | Set the value and error of a field. [Code Sample](https://github.com/react-component/form/blob/3b9959b57ab30b41d8890ff30c79a7e7c383cad3/examples/server-validate.js#L74-L79) | Function({ [fieldName]: { value: any, errors: [Error] } }) |
-| setFields | Set value and error state of fields | ({<br />&nbsp;&nbsp;\[fieldName\]: {value: any, errors: \[Error\] }<br />}) => void |
+| setFields | Set value and error state of fields. [Code Sample](https://github.com/react-component/form/blob/3b9959b57ab30b41d8890ff30c79a7e7c383cad3/examples/server-validate.js#L74-L79) | ({<br />&nbsp;&nbsp;\[fieldName\]: {value: any, errors: \[Error\] }<br />}) => void |
 | setFieldsValue | Set the value of a field. (Note: please don't use it in `componentWillReceiveProps`, otherwise, it will cause an endless loop, [reason](https://github.com/ant-design/ant-design/issues/2985)) | ({ \[fieldName\]&#x3A; value }) => void |
 | validateFields | Validate the specified fields and get theirs values and errors. If you don't specify the parameter of fieldNames, you will validate all fields. | (<br />&nbsp;&nbsp;\[fieldNames: string\[]],<br />&nbsp;&nbsp;\[options: object\],<br />&nbsp;&nbsp;callback(errors, values)<br />) => void |
 | validateFieldsAndScroll | This function is similar to `validateFields`, but after validation, if the target field is not in visible area of form, form will be automatically scrolled to the target field area. | same as `validateFields` |

components/layout/index.en-US.md

@@ -90,7 +90,7 @@ The sidebar.
 | breakpoint | [breakpoints](/components/grid#api) of the responsive layout | Enum { 'xs', 'sm', 'md', 'lg', 'xl', 'xxl' } | - |
 | className | container className | string | - |
 | collapsed | to set the current status | boolean | - |
-| collapsedWidth | width of the collapsed sidebar, by setting to `0` a special trigger will appear | number | 64 |
+| collapsedWidth | width of the collapsed sidebar, by setting to `0` a special trigger will appear | number | 80 |
 | collapsible | whether can be collapsed | boolean | false |
 | defaultCollapsed | to set the initial status | boolean | false |
 | reverseArrow | reverse direction of arrow, for a sider that expands from the right | boolean | false |

components/layout/index.zh-CN.md

@@ -91,7 +91,7 @@ title: Layout
 | breakpoint | 触发响应式布局的[断点](/components/grid#api) | Enum { 'xs', 'sm', 'md', 'lg', 'xl', 'xxl' } | - |
 | className | 容器 className | string | - |
 | collapsed | 当前收起状态 | boolean | - |
-| collapsedWidth | 收缩宽度，设置为 0 会出现特殊 trigger | number | 64 |
+| collapsedWidth | 收缩宽度，设置为 0 会出现特殊 trigger | number | 80 |
 | collapsible | 是否可收起 | boolean | false |
 | defaultCollapsed | 是否默认收起 | boolean | false |
 | reverseArrow | 翻转折叠提示箭头的方向，当 Sider 在右边时可以使用 | boolean | false |

components/table/demo/head.md

@@ -1,5 +1,5 @@
 ---
-order: 7
+order: 6
 title:
   en-US: Filter and sorter
   zh-CN: 筛选和排序

components/table/index.en-US.md

@@ -61,6 +61,7 @@ const columns = [{
 | defaultExpandedRowKeys | Initial expanded row keys | string\[] | - |
 | expandedRowKeys | Current expanded row keys | string\[] | - |
 | expandedRowRender | Expanded container render for each row | Function(record, index, indent, expanded):ReactNode | - |
+| expandIcon | Customize row expand Icon. Ref [example](http://react-component.github.io/table/examples/expandIcon.html) | Function(props):ReactNode | - |
 | expandRowByClick | Whether to expand row by clicking anywhere in the whole row | boolean | `false` |
 | footer | Table footer renderer | Function(currentPageData) |  |
 | indentSize | Indent size in pixels of tree data | number | 15 |

components/table/index.zh-CN.md

@@ -66,6 +66,7 @@ const columns = [{
 | defaultExpandedRowKeys | 默认展开的行 | string\[] | - |
 | expandedRowKeys | 展开的行，控制属性 | string\[] | - |
 | expandedRowRender | 额外的展开行 | Function(record, index, indent, expanded):ReactNode | - |
+| expandIcon | 自定义展开图标，参考[示例](http://react-component.github.io/table/examples/expandIcon.html) | Function(props):ReactNode | - |
 | expandRowByClick | 通过点击行来展开子行 | boolean | `false` |
 | footer | 表格尾部 | Function(currentPageData) |  |
 | indentSize | 展示树形数据时，每层缩进的宽度，以 px 为单位 | number | 15 |