Add option for disabling arrow icon in collapse panel (#8536)

components/collapse/Collapse.tsx

@@ -2,37 +2,27 @@ import * as React from 'react';
 import RcCollapse from 'rc-collapse';
 import classNames from 'classnames';
 import animation from '../_util/openAnimation';
+import CollapsePanel from './CollapsePanel';
 
 export interface CollapseProps {
   activeKey?: Array<string> | string;
   defaultActiveKey?: Array<string>;
   /** 手风琴效果 */
   accordion?: boolean;
-  onChange?: (key: string | string[]) => void;
+  onChange?: (key: string | string[]) => void;
   style?: React.CSSProperties;
   className?: string;
   bordered?: boolean;
   prefixCls?: string;
 }
 
-export interface CollapsePanelProps {
-  key: string;
-  header: React.ReactNode;
-  disabled?: boolean;
-  className?: string;
-  style?: React.CSSProperties;
-}
-
-export class CollapsePanel extends React.Component<CollapsePanelProps, {}> {
-}
-
 export default class Collapse extends React.Component<CollapseProps, any> {
-  static Panel: typeof CollapsePanel = RcCollapse.Panel;
+  static Panel = CollapsePanel;
 
   static defaultProps = {
     prefixCls: 'ant-collapse',
     bordered: true,
-    openAnimation: { ...animation, appear() {} },
+    openAnimation: { ...animation, appear() { } },
   };
 
   render() {

components/collapse/CollapsePanel.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import RcCollapse from 'rc-collapse';
+import classNames from 'classnames';
+
+export interface CollapsePanelProps {
+  key: string;
+  header: React.ReactNode;
+  disabled?: boolean;
+  className?: string;
+  style?: React.CSSProperties;
+  showArrow?: boolean;
+  prefixCls?: string;
+}
+
+export default class CollapsePanel extends React.Component<CollapsePanelProps, {}> {
+  render() {
+    const { prefixCls, className = '', showArrow = true } = this.props;
+    const collapsePanelClassName = classNames({
+      [`${prefixCls}-no-arrow`]: !showArrow,
+    }, className);
+    return <RcCollapse.Panel {...this.props} className={collapsePanelClassName} />;
+  }
+}

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

@@ -293,3 +293,51 @@ exports[`renders ./components/collapse/demo/mix.md correctly 1`] = `
   </div>
 </div>
 `;
+
+exports[`renders ./components/collapse/demo/noarrow.md correctly 1`] = `
+<div
+  class="ant-collapse"
+>
+  <div
+    class="ant-collapse-item ant-collapse-item-active"
+  >
+    <div
+      aria-expanded="true"
+      class="ant-collapse-header"
+      role="tab"
+    >
+      <i
+        class="arrow"
+      />
+      This is panel header with arrow icon
+    </div>
+    <div
+      class="ant-collapse-content ant-collapse-content-active"
+      role="tabpanel"
+    >
+      <div
+        class="ant-collapse-content-box"
+      >
+        <p>
+          
+  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.
+
+        </p>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-collapse-item ant-collapse-no-arrow"
+  >
+    <div
+      aria-expanded="false"
+      class="ant-collapse-header"
+      role="tab"
+    >
+      This is panel header with no arrow icon
+    </div>
+  </div>
+</div>
+`;

components/collapse/demo/noarrow.md

@@ -0,0 +1,40 @@
+---
+order: 4
+title:
+  zh-CN: TODO
+  en-US: No arrow
+---
+
+## zh-CN
+
+TODO
+
+## en-US
+
+You can disable showing arrow icon by passing `showArrow={false}` to `CollapsePanel` component.
+
+````jsx
+import { Collapse } from 'antd';
+const Panel = Collapse.Panel;
+
+function callback(key) {
+  console.log(key);
+}
+
+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 defaultActiveKey={['1']} onChange={callback}>
+    <Panel header="This is panel header with arrow icon" key="1">
+      <p>{text}</p>
+    </Panel>
+    <Panel showArrow={false} header="This is panel header with no arrow icon" key="2">
+      <p>{text}</p>
+    </Panel>
+  </Collapse>
+, mountNode);
+````

components/collapse/index.en-US.md

@@ -29,3 +29,4 @@ A content area which can be collapsed and expanded.
 | disabled | If `true`, panel cannot be opened or closed | boolean | `false` |
 | header | Title of the panel | string\|ReactNode | - |
 | key | Unique key identifying the panel from among its siblings | string | - |
+| showArrow | If `false`, panel will not show arrow icon | boolean | `true` |

components/collapse/index.tsx

@@ -1,5 +1,6 @@
 import Collapse from './Collapse';
 
-export { CollapsePanelProps, CollapseProps } from './Collapse';
+export { CollapseProps } from './Collapse';
+export { CollapsePanelProps } from './CollapsePanel';
 
 export default Collapse;

components/collapse/style/index.less

@@ -54,6 +54,12 @@
         }
       }
     }
+
+    &.@{collapse-prefix-cls}-no-arrow {
+      > .@{collapse-prefix-cls}-header {
+        padding-left: 12px;
+      }
+    }
   }
 
   &-anim-active {