Merge pull request #19202 from ant-design/master

chore: master merge feature

components/collapse/Collapse.tsx

@@ -45,14 +45,15 @@ export default class Collapse extends React.Component<CollapseProps, any> {
 
   renderExpandIcon = (panelProps: PanelProps = {}, prefixCls: string) => {
     const { expandIcon } = this.props;
-    const icon = expandIcon ? (
+    const icon = (expandIcon ? (
       expandIcon(panelProps)
     ) : (
       <Icon type="right" rotate={panelProps.isActive ? 90 : undefined} />
-    );
+    )) as React.ReactNode;
+
     return React.isValidElement(icon)
       ? React.cloneElement(icon as any, {
-          className: `${prefixCls}-arrow`,
+          className: classNames(icon.props.className, `${prefixCls}-arrow`),
         })
       : icon;
   };

components/collapse/__tests__/index.test.js

@@ -27,6 +27,22 @@ describe('Collapse', () => {
     expect(wrapper.render()).toMatchSnapshot();
   });
 
+  it('should keep the className of the expandIcon', () => {
+    const wrapper = mount(
+      <Collapse
+        expandIcon={() => (
+          <button type="button" className="custom-expandicon-classname">
+            action
+          </button>
+        )}
+      >
+        <Collapse.Panel header="header" />
+      </Collapse>,
+    );
+
+    expect(wrapper.find('.custom-expandicon-classname').exists()).toBe(true);
+  });
+
   it('should render extra node of panel', () => {
     const wrapper = mount(
       <Collapse>

components/collapse/style/index.less

@@ -70,7 +70,7 @@
 
         .@{collapse-prefix-cls}-arrow {
           right: @padding-md;
-          left: initial;
+          left: auto;
         }
       }
     }

components/config-provider/context.ts

@@ -0,0 +1,30 @@
+import createReactContext from '@ant-design/create-react-context';
+import defaultRenderEmpty, { RenderEmptyHandler } from './renderEmpty';
+import { Locale } from '../locale-provider';
+
+export interface CSPConfig {
+  nonce?: string;
+}
+
+export interface ConfigConsumerProps {
+  getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
+  rootPrefixCls?: string;
+  getPrefixCls: (suffixCls: string, customizePrefixCls?: string) => string;
+  renderEmpty: RenderEmptyHandler;
+  csp?: CSPConfig;
+  autoInsertSpaceInButton?: boolean;
+  locale?: Locale;
+}
+
+export const ConfigContext = createReactContext<ConfigConsumerProps>({
+  // We provide a default function for Context without provider
+  getPrefixCls: (suffixCls: string, customizePrefixCls?: string) => {
+    if (customizePrefixCls) return customizePrefixCls;
+
+    return `ant-${suffixCls}`;
+  },
+
+  renderEmpty: defaultRenderEmpty,
+});
+
+export const ConfigConsumer = ConfigContext.Consumer;

components/config-provider/index.tsx

@@ -2,27 +2,13 @@
 // SFC has specified a displayName, but not worked.
 /* eslint-disable react/display-name */
 import * as React from 'react';
-import createReactContext from '@ant-design/create-react-context';
 
-import defaultRenderEmpty, { RenderEmptyHandler } from './renderEmpty';
+import { RenderEmptyHandler } from './renderEmpty';
 import LocaleProvider, { Locale, ANT_MARK } from '../locale-provider';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
+import { ConfigConsumer, ConfigContext, CSPConfig, ConfigConsumerProps } from './context';
 
-export { RenderEmptyHandler };
-
-export interface CSPConfig {
-  nonce?: string;
-}
-
-export interface ConfigConsumerProps {
-  getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
-  rootPrefixCls?: string;
-  getPrefixCls: (suffixCls: string, customizePrefixCls?: string) => string;
-  renderEmpty: RenderEmptyHandler;
-  csp?: CSPConfig;
-  autoInsertSpaceInButton?: boolean;
-  locale?: Locale;
-}
+export { RenderEmptyHandler, ConfigConsumer, CSPConfig, ConfigConsumerProps };
 
 export const configConsumerProps = [
   'getPopupContainer',
@@ -44,19 +30,6 @@ export interface ConfigProviderProps {
   locale?: Locale;
 }
 
-const ConfigContext = createReactContext<ConfigConsumerProps>({
-  // We provide a default function for Context without provider
-  getPrefixCls: (suffixCls: string, customizePrefixCls?: string) => {
-    if (customizePrefixCls) return customizePrefixCls;
-
-    return `ant-${suffixCls}`;
-  },
-
-  renderEmpty: defaultRenderEmpty,
-});
-
-export const ConfigConsumer = ConfigContext.Consumer;
-
 class ConfigProvider extends React.Component<ConfigProviderProps> {
   getPrefixCls = (suffixCls: string, customizePrefixCls?: string) => {
     const { prefixCls = 'ant' } = this.props;

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

@@ -904,7 +904,7 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`]
           </th>
           <th
             class="ant-descriptions-item-label ant-descriptions-item-colon"
-            colspan="5"
+            colspan="3"
           >
             Usage Time
           </th>
@@ -920,7 +920,7 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`]
           </td>
           <td
             class="ant-descriptions-item-content"
-            colspan="5"
+            colspan="3"
           >
             2019-04-24 18:00:00
           </td>

components/descriptions/demo/vertical-border.md

@@ -22,7 +22,7 @@ ReactDOM.render(
     <Descriptions.Item label="Billing Mode">Prepaid</Descriptions.Item>
     <Descriptions.Item label="Automatic Renewal">YES</Descriptions.Item>
     <Descriptions.Item label="Order time">2018-04-24 18:00:00</Descriptions.Item>
-    <Descriptions.Item label="Usage Time" span={3}>
+    <Descriptions.Item label="Usage Time" span={2}>
       2019-04-24 18:00:00
     </Descriptions.Item>
     <Descriptions.Item label="Status" span={3}>

components/drawer/index.en-US.md

@@ -32,7 +32,7 @@ A Drawer is a panel that is typically overlaid on top of a page and slides in fr
 | title | The title for Drawer. | string\|ReactNode | - | 3.7.0 |
 | visible | Whether the Drawer dialog is visible or not. | boolean | false | 3.7.0 |
 | width | Width of the Drawer dialog. | string\|number | 256 | 3.7.0 |
-| height | placement is `top` or `bottom`, height of the Drawer dialog. | string\|number | - | 3.9.0 |
+| height | placement is `top` or `bottom`, height of the Drawer dialog. | string\|number | 256 | 3.9.0 |
 | className | The class name of the container of the Drawer dialog. | string | - | 3.8.0 |
 | zIndex | The `z-index` of the Drawer. | Number | 1000 | 3.7.0 |
 | placement | The placement of the Drawer. | 'top' \| 'right' \| 'bottom' \| 'left' | 'right' | 3.7.0 |

components/form/index.en-US.md

@@ -177,7 +177,7 @@ If you use `react@<15.3.0`, then, you can't use `getFieldDecorator` in stateless
 | id | The unique identifier is required. support [nested fields format](https://github.com/react-component/form/pull/48). | string |  |  |
 | options.getValueFromEvent | Specify how to get value from event or other onChange arguments | function(..args) | [reference](https://github.com/react-component/form#option-object) |  |
 | options.getValueProps | Get the component props according to field value. | function(value): any | [reference](https://github.com/react-component/form#option-object) | 3.9.0 |
-| options.initialValue | You can specify initial value, type, optional value of children node. (Note: Because `Form` will test equality with `===` internally, we recommend to use variable as `initialValue`, instead of literal) |  | n/a |  |
+| options.initialValue | You can specify initial value, type, optional value of children node. ([Note: Because `Form` will test equality with `===` internally, we recommend to use variable as `initialValue`, instead of literal](https://github.com/ant-design/ant-design/issues/4093)) |  | n/a |  |
 | options.normalize | Normalize value to form component, [a select-all example](https://codepen.io/afc163/pen/JJVXzG?editors=001) | function(value, prevValue, allValues): any | - |  |
 | options.preserve | Keep the field even if field removed | boolean | - | 3.12.0 |
 | options.rules | Includes validation rules. Please refer to "Validation Rules" part for details. | object\[] | n/a |  |

components/form/index.zh-CN.md

@@ -179,7 +179,7 @@ validateFields(['field1', 'field2'], options, (errors, values) => {
 | --- | --- | --- | --- | --- |
 | id | 必填输入控件唯一标志。支持嵌套式的[写法](https://github.com/react-component/form/pull/48)。 | string |  |  |
 | options.getValueFromEvent | 可以把 onChange 的参数（如 event）转化为控件的值 | function(..args) | [reference](https://github.com/react-component/form#option-object) |  |
-| options.initialValue | 子节点的初始值，类型、可选值均由子节点决定(注意：由于内部校验时使用 `===` 判断是否变化，建议使用变量缓存所需设置的值而非直接使用字面量)) |  |  |  |
+| options.initialValue | 子节点的初始值，类型、可选值均由子节点决定([注意：由于内部校验时使用 `===` 判断是否变化，建议使用变量缓存所需设置的值而非直接使用字面量](https://github.com/ant-design/ant-design/issues/4093)) |  |  |  |
 | options.normalize | 转换默认的 value 给控件，[一个选择全部的例子](https://codepen.io/afc163/pen/JJVXzG?editors=001) | function(value, prevValue, allValues): any | - |  |
 | options.preserve | 即便字段不再使用，也保留该字段的值 | boolean | - | 3.12.0 |
 | options.rules | 校验规则，参考下方文档 | object\[] |  |  |

components/input/TextArea.tsx

@@ -6,6 +6,7 @@ import ResizeObserver from 'rc-resize-observer';
 import calculateNodeHeight from './calculateNodeHeight';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
 import raf from '../_util/raf';
+import warning from '../_util/warning';
 
 export interface AutoSizeType {
   minRows?: number;
@@ -16,7 +17,9 @@ export type HTMLTextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement
 
 export interface TextAreaProps extends HTMLTextareaProps {
   prefixCls?: string;
+  /* deprecated, use autoSize instead */
   autosize?: boolean | AutoSizeType;
+  autoSize?: boolean | AutoSizeType;
   onPressEnter?: React.KeyboardEventHandler<HTMLTextAreaElement>;
 }
 
@@ -84,11 +87,11 @@ class TextArea extends React.Component<TextAreaProps, TextAreaState> {
   };
 
   resizeTextarea = () => {
-    const { autosize } = this.props;
-    if (!autosize || !this.textAreaRef) {
+    const autoSize = this.props.autoSize || this.props.autosize;
+    if (!autoSize || !this.textAreaRef) {
       return;
     }
-    const { minRows, maxRows } = autosize as AutoSizeType;
+    const { minRows, maxRows } = autoSize as AutoSizeType;
     const textareaStyles = calculateNodeHeight(this.textAreaRef, false, minRows, maxRows);
     this.setState({ textareaStyles, resizing: true }, () => {
       raf.cancel(this.resizeFrameId);
@@ -108,14 +111,20 @@ class TextArea extends React.Component<TextAreaProps, TextAreaState> {
 
   renderTextArea = ({ getPrefixCls }: ConfigConsumerProps) => {
     const { textareaStyles, resizing } = this.state;
-    const { prefixCls: customizePrefixCls, className, disabled, autosize } = this.props;
+    const { prefixCls: customizePrefixCls, className, disabled, autoSize, autosize } = this.props;
     const { ...props } = this.props;
-    const otherProps = omit(props, ['prefixCls', 'onPressEnter', 'autosize']);
+    const otherProps = omit(props, ['prefixCls', 'onPressEnter', 'autoSize', 'autosize']);
     const prefixCls = getPrefixCls('input', customizePrefixCls);
     const cls = classNames(prefixCls, className, {
       [`${prefixCls}-disabled`]: disabled,
     });
 
+    warning(
+      autosize === undefined,
+      'Input.TextArea',
+      'autosize is deprecated, please use autoSize instead.',
+    );
+
     const style = {
       ...props.style,
       ...textareaStyles,
@@ -127,7 +136,7 @@ class TextArea extends React.Component<TextAreaProps, TextAreaState> {
       otherProps.value = otherProps.value || '';
     }
     return (
-      <ResizeObserver onResize={this.resizeOnNextFrame} disabled={!autosize}>
+      <ResizeObserver onResize={this.resizeOnNextFrame} disabled={!(autoSize || autosize)}>
         <textarea
           {...otherProps}
           className={cls}

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

@@ -2021,7 +2021,7 @@ exports[`renders ./components/input/demo/textarea-resize.md correctly 1`] = `
     class="ant-input"
     rows="4"
   >
-    autosize 属性适用于 textarea 节点，并且只有高度会自动变化。另外 autosize 可以设定为一个对象，指定最小行数和最大行数。autosize 属性适用于 textarea 节点，并且只有高度会自动变化。另外 autosize 可以设定为一个对象，指定最小行数和最大行数。autosize 属性适用于 textarea 节点，并且只有高度会自动变化。另外 autosize 可以设定为一个对象，指定最小行数和最大行数。autosize 属性适用于 textarea 节点，并且只有高度会自动变化。另外 autosize 可以设定为一个对象，指定最小行数和最大行数。autosize 属性适用于 textarea 节点，并且只有高度会自动变化。另外 autosize 可以设定为一个对象，指定最小行数和最大行数。autosize 属性适用于 textarea 节点，并且只有高度会自动变化。另外 autosize 可以设定为一个对象，指定最小行数和最大行数。autosize 属性适用于 textarea 节点，并且只有高度会自动变化。另外 autosize 可以设定为一个对象，指定最小行数和最大行数。ending
+    autoSize 属性适用于 textarea 节点，并且只有高度会自动变化。另外 autoSize 可以设定为一个对象，指定最小行数和最大行数。autoSize 属性适用于 textarea 节点，并且只有高度会自动变化。另外 autoSize 可以设定为一个对象，指定最小行数和最大行数。autoSize 属性适用于 textarea 节点，并且只有高度会自动变化。另外 autoSize 可以设定为一个对象，指定最小行数和最大行数。autoSize 属性适用于 textarea 节点，并且只有高度会自动变化。另外 autoSize 可以设定为一个对象，指定最小行数和最大行数。autoSize 属性适用于 textarea 节点，并且只有高度会自动变化。另外 autoSize 可以设定为一个对象，指定最小行数和最大行数。autoSize 属性适用于 textarea 节点，并且只有高度会自动变化。另外 autoSize 可以设定为一个对象，指定最小行数和最大行数。autoSize 属性适用于 textarea 节点，并且只有高度会自动变化。另外 autoSize 可以设定为一个对象，指定最小行数和最大行数。ending
   </textarea>
 </div>
 `;

components/input/__tests__/index.test.js

@@ -74,7 +74,7 @@ describe('TextArea', () => {
   });
 
   it('should auto calculate height according to content length', () => {
-    const wrapper = mount(<TextArea value="" readOnly autosize />);
+    const wrapper = mount(<TextArea value="" readOnly autoSize />);
     const mockFunc = jest.spyOn(wrapper.instance(), 'resizeTextarea');
     wrapper.setProps({ value: '1111\n2222\n3333' });
     jest.runAllTimers();

components/input/demo/autosize-textarea.md

@@ -7,11 +7,11 @@ title:
 
 ## zh-CN
 
-`autosize` 属性适用于 `textarea` 节点，并且只有高度会自动变化。另外 `autosize` 可以设定为一个对象，指定最小行数和最大行数。
+`autoSize` 属性适用于 `textarea` 节点，并且只有高度会自动变化。另外 `autoSize` 可以设定为一个对象，指定最小行数和最大行数。
 
 ## en-US
 
-`autosize` prop for a `textarea` type of `Input` makes the height to automatically adjust based on the content. An options object can be provided to `autosize` to specify the minimum and maximum number of lines the textarea will automatically adjust.
+`autoSize` prop for a `textarea` type of `Input` makes the height to automatically adjust based on the content. An options object can be provided to `autoSize` to specify the minimum and maximum number of lines the textarea will automatically adjust.
 
 ```jsx
 import { Input } from 'antd';
@@ -32,18 +32,18 @@ class Demo extends React.Component {
 
     return (
       <div>
-        <TextArea placeholder="Autosize height based on content lines" autosize />
+        <TextArea placeholder="Autosize height based on content lines" autoSize />
         <div style={{ margin: '24px 0' }} />
         <TextArea
           placeholder="Autosize height with minimum and maximum number of lines"
-          autosize={{ minRows: 2, maxRows: 6 }}
+          autoSize={{ minRows: 2, maxRows: 6 }}
         />
         <div style={{ margin: '24px 0' }} />
         <TextArea
           value={value}
           onChange={this.onChange}
           placeholder="Controlled autosize"
-          autosize={{ minRows: 3, maxRows: 5 }}
+          autoSize={{ minRows: 3, maxRows: 5 }}
         />
       </div>
     );

components/input/demo/textarea-resize.md

@@ -20,7 +20,7 @@ import { Input, Button } from 'antd';
 const { TextArea } = Input;
 
 const defaultValue =
-  'autosize 属性适用于 textarea 节点，并且只有高度会自动变化。另外 autosize 可以设定为一个对象，指定最小行数和最大行数。autosize 属性适用于 textarea 节点，并且只有高度会自动变化。另外 autosize 可以设定为一个对象，指定最小行数和最大行数。autosize 属性适用于 textarea 节点，并且只有高度会自动变化。另外 autosize 可以设定为一个对象，指定最小行数和最大行数。autosize 属性适用于 textarea 节点，并且只有高度会自动变化。另外 autosize 可以设定为一个对象，指定最小行数和最大行数。autosize 属性适用于 textarea 节点，并且只有高度会自动变化。另外 autosize 可以设定为一个对象，指定最小行数和最大行数。autosize 属性适用于 textarea 节点，并且只有高度会自动变化。另外 autosize 可以设定为一个对象，指定最小行数和最大行数。autosize 属性适用于 textarea 节点，并且只有高度会自动变化。另外 autosize 可以设定为一个对象，指定最小行数和最大行数。ending';
+  'autoSize 属性适用于 textarea 节点，并且只有高度会自动变化。另外 autoSize 可以设定为一个对象，指定最小行数和最大行数。autoSize 属性适用于 textarea 节点，并且只有高度会自动变化。另外 autoSize 可以设定为一个对象，指定最小行数和最大行数。autoSize 属性适用于 textarea 节点，并且只有高度会自动变化。另外 autoSize 可以设定为一个对象，指定最小行数和最大行数。autoSize 属性适用于 textarea 节点，并且只有高度会自动变化。另外 autoSize 可以设定为一个对象，指定最小行数和最大行数。autoSize 属性适用于 textarea 节点，并且只有高度会自动变化。另外 autoSize 可以设定为一个对象，指定最小行数和最大行数。autoSize 属性适用于 textarea 节点，并且只有高度会自动变化。另外 autoSize 可以设定为一个对象，指定最小行数和最大行数。autoSize 属性适用于 textarea 节点，并且只有高度会自动变化。另外 autoSize 可以设定为一个对象，指定最小行数和最大行数。ending';
 
 class Demo extends React.Component {
   state = {
@@ -38,7 +38,7 @@ class Demo extends React.Component {
         >
           Auto Resize: {String(autoResize)}
         </Button>
-        <TextArea rows={4} autosize={autoResize} defaultValue={defaultValue} />
+        <TextArea rows={4} autoSize={autoResize} defaultValue={defaultValue} />
       </div>
     );
   }