Merge pull request #15245 from ant-design/update-demo

update Collapse demo adding stopPropagation sample

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

@@ -477,6 +477,7 @@ exports[`renders ./components/collapse/demo/extra.md correctly 1`] = `
         <i
           aria-label="icon: setting"
           class="anticon anticon-setting"
+          tabindex="-1"
         >
           <svg
             aria-hidden="true"
@@ -544,6 +545,7 @@ exports[`renders ./components/collapse/demo/extra.md correctly 1`] = `
         <i
           aria-label="icon: setting"
           class="anticon anticon-setting"
+          tabindex="-1"
         >
           <svg
             aria-hidden="true"
@@ -596,6 +598,7 @@ exports[`renders ./components/collapse/demo/extra.md correctly 1`] = `
         <i
           aria-label="icon: setting"
           class="anticon anticon-setting"
+          tabindex="-1"
         >
           <svg
             aria-hidden="true"

components/collapse/demo/extra.md

@@ -28,15 +28,25 @@ const text = `
   it can be found as a welcome guest in many households across the world.
 `;
 
+const genExtra = () => (
+  <Icon
+    type="setting"
+    onClick={(event) => {
+      // If you don't want click extra trigger collapse, you can prevent this:
+      event.stopPropagation();
+    }}
+  />
+);
+
 ReactDOM.render(
   <Collapse defaultActiveKey={['1']} onChange={callback}>
-    <Panel header="This is panel header 1" key="1" extra={<Icon type="setting" />}>
+    <Panel header="This is panel header 1" key="1" extra={genExtra()}>
       <div>{text}</div>
     </Panel>
-    <Panel header="This is panel header 2" key="2" extra={<Icon type="setting" />}>
+    <Panel header="This is panel header 2" key="2" extra={genExtra()}>
       <div>{text}</div>
     </Panel>
-    <Panel header="This is panel header 3" key="3" extra={<Icon type="setting" />}>
+    <Panel header="This is panel header 3" key="3" extra={genExtra()}>
       <div>{text}</div>
     </Panel>
   </Collapse>,