Merge branch 'master' of github.com:ant-design/ant-design

CHANGELOG.en-US.md

@@ -18,6 +18,7 @@ If you want to read change logs before `2.0.0`, please visit [GitHub](https://gi
 * A brand new `Spin` design.
 * Add `addon` for `TimePicker` to allow render some addon to its bottom.
 * Add `onDragEnd` for `Tree`.
+* Add `bordered` for `Collapse`.
 * Improve `Tabs` switch animation.
 * Improve `Radio` and `Checkbox` style when it's disabled and mouse hovered. [#3590](https://github.com/ant-design/ant-design/issues/3590)
 * Opitimize `Transfer` performance.[#2860](https://github.com/ant-design/ant-design/issues/2860)

CHANGELOG.zh-CN.md

@@ -18,6 +18,7 @@ timeline: true
 * 全新的 `Spin` 设计。
 * `TimePicker` 新增了 `addon` 以支持自定义的附加内容。
 * `Tree` 新增了 `onDragEnd`。
+* `Collapse` 新增了 `bordered`。
 * 优化 `Tabs` 切换时的动画效果。
 * 优化 `Radio` 和 `Checkbox` 在禁用和鼠标停留时的样式。[#3590](https://github.com/ant-design/ant-design/issues/3590)
 * 优化 `Transfer` 的性能。[#2860](https://github.com/ant-design/ant-design/issues/2860)

components/collapse/demo/borderless.md

@@ -0,0 +1,39 @@
+---
+order: 3
+title:
+  zh-CN: 简洁风格
+  en-US: Borderless
+---
+
+## zh-CN
+
+一套没有边框的简洁样式。
+
+## en-US
+
+A borderless style of Collapse.
+
+````jsx
+import { Collapse } from 'antd';
+const Panel = Collapse.Panel;
+
+const text = `
+  A dog is a type of domesticated animal.
+  Known for its loyalty and faithfulness,
+  it can be found as a welcome guest in many households across the world.
+`;
+
+ReactDOM.render(
+  <Collapse bordered={false} defaultActiveKey={['1']}>
+    <Panel header="This is panel header 1" key="1">
+      <p>{text}</p>
+    </Panel>
+    <Panel header="This is panel header 2" key="2">
+      <p>{text}</p>
+    </Panel>
+    <Panel header="This is panel header 3" key="3">
+      <p>{text}</p>
+    </Panel>
+  </Collapse>
+, mountNode);
+````

components/collapse/demo/mix.md

@@ -1,17 +1,17 @@
 ---
 order: 2
-title: 
+title:
   zh-CN: 面板嵌套
   en-US: Nested panel
 ---
 
 ## zh-CN
 
-手风琴嵌套折叠面板。
+嵌套折叠面板。
 
 ## en-US
 
-`Collapse` is nested inside the `Accordion`.
+`Collapse` is nested inside the `Collapse`.
 
 ````jsx
 import { Collapse } from 'antd';
@@ -28,7 +28,7 @@ const text = `
 `;
 
 ReactDOM.render(
-  <Collapse onChange={callback} accordion>
+  <Collapse onChange={callback}>
     <Panel header={'This is panel header 1'} key="1">
       <Collapse defaultActiveKey="1">
         <Panel header={'This is panel nest panel'} key="1">

components/collapse/index.en-US.md

@@ -2,6 +2,7 @@
 category: Components
 type: Views
 title: Collapse
+cols: 1
 ---
 
 A content area which can be collapsed and expanded.
@@ -27,4 +28,3 @@ A content area which can be collapsed and expanded.
 |----------|----------------|----------|--------------|
 | key    | corresponds to the `activeKey` | String   |  -  |
 | header    | title of the panel | React.Element or String   | - |
-

components/collapse/index.tsx

@@ -1,27 +1,27 @@
-import RcCollapse from 'rc-collapse';
 import React from 'react';
+import RcCollapse from 'rc-collapse';
+import classNames from 'classnames';
 
 export interface CollapseProps {
   activeKey?: Array<string> | string;
-  /** 初始化选中面板的key */
   defaultActiveKey?: Array<string>;
-  /** accordion 为 true 的时候，一次只可以打开一个面板 */
+  /** 手风琴效果 */
   accordion?: boolean;
-  /** 切换面板的回调 */
   onChange?: (key: string) => void;
   style?: React.CSSProperties;
+  className?: string;
+  bordered?: boolean;
+  prefixCls?: string;
 }
 
 export interface CollapsePanelProps {
-  /** 对应 activeKey */
   key: string;
-  /** 面板头内容 */
   header: React.ReactNode;
   style?: React.CSSProperties;
+  className?: string;
 }
 
 export class CollapsePanel extends React.Component<CollapsePanelProps, {}> {
-
 }
 
 export default class Collapse extends React.Component<CollapseProps, any> {
@@ -29,9 +29,15 @@ export default class Collapse extends React.Component<CollapseProps, any> {
 
   static defaultProps = {
     prefixCls: 'ant-collapse',
+    bordered: true,
   };
 
   render() {
-    return <RcCollapse {...this.props} />;
+    const { prefixCls, className = '', bordered } = this.props;
+    const collapseClassName = classNames({
+      [`${prefixCls}-borderless`]: !bordered,
+      [className]: !!className,
+    });
+    return <RcCollapse {...this.props} className={collapseClassName} />;
   }
 }

components/collapse/index.zh-CN.md

@@ -3,6 +3,7 @@ category: Components
 type: Views
 title: Collapse
 subtitle: 折叠面板
+cols: 1
 ---
 
 可以折叠/展开的内容区域。

components/collapse/style/index.less

@@ -82,4 +82,22 @@
       .collapse-open();
     }
   }
+
+  &-borderless {
+    background-color: #fff;
+    border: 0;
+  }
+
+  &-borderless > &-item {
+    border: 0;
+  }
+
+  &-borderless > &-item > &-header {
+    border-bottom: 1px solid @border-color-base;
+    transition: all .3s;
+    border-radius: @border-color-base @border-color-base 0 0;
+    &:hover {
+      background-color: #fcfcfc;
+    }
+  }
 }