chore: auto merge branchs (#32704)

chore: sync master into feature

CHANGELOG.en-US.md

@@ -15,6 +15,15 @@ timeline: true
 
 ---
 
+## 4.17.0-alpha.9
+
+`2021-10-31`
+
+- 🐞 Fix Collapse style issue when `expandIconPosition="right"`. [#32648](https://github.com/ant-design/ant-design/pull/32648)
+- 🐞 Fix Upload broken loading style when `listStyle="picture"`. [#32664](https://github.com/ant-design/ant-design/pull/32664)
+- 🐞 Fix Card `tabs` style when set `tabPosition: 'left'`. [#32695](https://github.com/ant-design/ant-design/pull/32695)
+- 🐞 Avoid Input `placeholder` can be selected on Chrome. [#32639](https://github.com/ant-design/ant-design/pull/32639) [@cw1997](https://github.com/cw1997)
+
 ## 4.17.0-alpha.8
 
 `2021-10-25`

CHANGELOG.zh-CN.md

@@ -15,6 +15,15 @@ timeline: true
 
 ---
 
+## 4.17.0-alpha.9
+
+`2021-10-31`
+
+- 🐞 修复 Collapse 设置 `expandIconPosition` 为 `right` 后的样式问题。[#32648](https://github.com/ant-design/ant-design/pull/32648)
+- 🐞 修复 Upload `listStyle="picture"` 下加载中样式错位的问题。[#32664](https://github.com/ant-design/ant-design/pull/32664)
+- 🐞 修复 Card 设置 `tabs` 后当 `tabPosition: 'left'` 时的样式问题。[#32695](https://github.com/ant-design/ant-design/pull/32695)
+- 🐞 修复 Input `placeholder` 在 Chrome 上能被选择的问题。[#32639](https://github.com/ant-design/ant-design/pull/32639) [@cw1997](https://github.com/cw1997)
+
 ## 4.17.0-alpha.8
 
 `2021-10-25`

components/card/demo/tabs.md

@@ -14,6 +14,7 @@ title:
 More content can be hosted.
 
 ```jsx
+import React, { useState } from 'react';
 import { Card } from 'antd';
 
 const tabList = [
@@ -53,49 +54,47 @@ const contentListNoTitle = {
   project: <p>project content</p>,
 };
 
-class TabsCard extends React.Component {
-  state = {
-    key: 'tab1',
-    noTitleKey: 'app',
-  };
+const TabsCard = () => {
+  const [activeTabKey1, setActiveTabKey1] = useState('tab1');
+  const [activeTabKey2, setActiveTabKey2] = useState('app');
 
-  onTabChange = (key, type) => {
-    console.log(key, type);
-    this.setState({ [type]: key });
+  const onTab1Change = key => {
+    setActiveTabKey1(key);
+  };
+  const onTab2Change = key => {
+    setActiveTabKey2(key);
   };
 
-  render() {
-    return (
-      <>
-        <Card
-          style={{ width: '100%' }}
-          title="Card title"
-          extra={<a href="#">More</a>}
-          tabList={tabList}
-          activeTabKey={this.state.key}
-          onTabChange={key => {
-            this.onTabChange(key, 'key');
-          }}
-        >
-          {contentList[this.state.key]}
-        </Card>
-        <br />
-        <br />
-        <Card
-          style={{ width: '100%' }}
-          tabList={tabListNoTitle}
-          activeTabKey={this.state.noTitleKey}
-          tabBarExtraContent={<a href="#">More</a>}
-          onTabChange={key => {
-            this.onTabChange(key, 'noTitleKey');
-          }}
-        >
-          {contentListNoTitle[this.state.noTitleKey]}
-        </Card>
-      </>
-    );
-  }
-}
+  return (
+    <>
+      <Card
+        style={{ width: '100%' }}
+        title="Card title"
+        extra={<a href="#">More</a>}
+        tabList={tabList}
+        activeTabKey={activeTabKey1}
+        onTabChange={key => {
+          onTab1Change(key);
+        }}
+      >
+        {contentList[activeTabKey1]}
+      </Card>
+      <br />
+      <br />
+      <Card
+        style={{ width: '100%' }}
+        tabList={tabListNoTitle}
+        activeTabKey={activeTabKey2}
+        tabBarExtraContent={<a href="#">More</a>}
+        onTabChange={key => {
+          onTab2Change(key);
+        }}
+      >
+        {contentListNoTitle[activeTabKey2]}
+      </Card>
+    </>
+  );
+};
 
 ReactDOM.render(<TabsCard />, mountNode);
 ```

components/card/style/index.less

@@ -66,7 +66,7 @@
       }
     }
 
-    .@{ant-prefix}-tabs {
+    .@{ant-prefix}-tabs-top {
       clear: both;
       margin-bottom: @card-head-tabs-margin-bottom;
       color: @text-color;

components/list/demo/loadmore.md

@@ -53,7 +53,9 @@ class LoadMoreList extends React.Component {
   onLoadMore = () => {
     this.setState({
       loading: true,
-      list: this.state.data.concat([...new Array(count)].map(() => ({ loading: true, name: {} }))),
+      list: this.state.data.concat(
+        [...new Array(count)].map(() => ({ loading: true, name: {}, picture: {} })),
+      ),
     });
     this.getData(res => {
       const data = this.state.data.concat(res.results);
@@ -96,20 +98,22 @@ class LoadMoreList extends React.Component {
         itemLayout="horizontal"
         loadMore={loadMore}
         dataSource={list}
-        renderItem={item => (
-          <List.Item
-            actions={[<a key="list-loadmore-edit">edit</a>, <a key="list-loadmore-more">more</a>]}
-          >
-            <Skeleton avatar title={false} loading={item.loading} active>
-              <List.Item.Meta
-                avatar={<Avatar src={item.picture.large} />}
-                title={<a href="https://ant.design">{item.name.last}</a>}
-                description="Ant Design, a design language for background applications, is refined by Ant UED Team"
-              />
-              <div>content</div>
-            </Skeleton>
-          </List.Item>
-        )}
+        renderItem={item =>
+          console.log(item) || (
+            <List.Item
+              actions={[<a key="list-loadmore-edit">edit</a>, <a key="list-loadmore-more">more</a>]}
+            >
+              <Skeleton avatar title={false} loading={item.loading} active>
+                <List.Item.Meta
+                  avatar={<Avatar src={item.picture.large} />}
+                  title={<a href="https://ant.design">{item.name.last}</a>}
+                  description="Ant Design, a design language for background applications, is refined by Ant UED Team"
+                />
+                <div>content</div>
+              </Skeleton>
+            </List.Item>
+          )
+        }
       />
     );
   }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "antd",
-  "version": "4.17.0-alpha.8",
+  "version": "4.17.0-alpha.9",
   "description": "An enterprise-class UI design language and React components implementation",
   "title": "Ant Design",
   "keywords": [