docs: Add motion & dropdown faq (#43403)

* docs: motion usage case

* docs: faq

* docs: update

components/dropdown/index.en-US.md

@@ -77,3 +77,9 @@ Please ensure that the child node of `Dropdown` accepts `onMouseEnter`, `onMouse
 ## Design Token
 
 <ComponentTokenTable component="Dropdown"></ComponentTokenTable>
+
+## FAQ
+
+### How to prevent Dropdown from being squeezed when it exceeds the screen horizontally?
+
+You can use `width: max-content` style to handle this. ref [#43025](https://github.com/ant-design/ant-design/issues/43025#issuecomment-1594394135).

components/dropdown/index.zh-CN.md

@@ -81,3 +81,9 @@ demo:
 ## Design Token
 
 <ComponentTokenTable component="Dropdown"></ComponentTokenTable>
+
+## FAQ
+
+### Dropdown 在水平方向超出屏幕时会被挤压改怎么办？
+
+你可以通过 `width: max-content` 来解决这个问题，参考 [#43025](https://github.com/ant-design/ant-design/issues/43025#issuecomment-1594394135)。

docs/react/customize-theme.en-US.md

@@ -96,6 +96,13 @@ In this way, we changed the primary color of Radio to <ColorChunk color="#00b96b
 
 > Notice: `ConfigProvider` will not take effect on static methods such as `message.xxx`, `Modal.xxx`, `notification.xxx`, because in these methods, antd will dynamically create new ones through `ReactDOM.render` React entities. Its context is not the same as the context of the current code, so context information cannot be obtained. When you need context information (such as the content configured by ConfigProvider), you can use the `Modal.useModal` method to return the modal entity and the contextHolder node. Just insert it where you need to get the context, or you can use [App Component](/components/app) to simplify the problem of usingModal and other methods that need to manually implant the contextHolder.
 
+### Disable Motion
+
+antd has built-in interaction animations to make enterprise-level pages more detailed. In some extreme scenarios, it may affect the performance of page interaction. If you need to turn off the animation, you can use the following method:
+
+<!-- prettier-ignore -->
+<code src="./demo/motion.tsx">Motion</code>
+
 ## Other Ways to Use Dynamic Themes
 
 ### Switch Themes Dynamically
@@ -560,12 +567,11 @@ export default class MyDocument extends Document {
     const originalRenderPage = ctx.renderPage;
     ctx.renderPage = () =>
       originalRenderPage({
-        enhanceApp: (App) => (props) =>
+        enhanceApp: (App) => (props) => (
-          (
+          <StyleProvider cache={cache}>
-            <StyleProvider cache={cache}>
+            <App {...props} />
-              <App {...props} />
+          </StyleProvider>
-            </StyleProvider>
+        ),
-          ),
       });
 
     const initialProps = await Document.getInitialProps(ctx);

docs/react/customize-theme.zh-CN.md

@@ -96,6 +96,13 @@ export default App;
 
 > 注意：`ConfigProvider` 对 `message.xxx`、`Modal.xxx`、`notification.xxx` 等静态方法不会生效，原因是在这些方法中，antd 会通过 `ReactDOM.render` 动态创建新的 React 实体。其 context 与当前代码所在 context 并不相同，因而无法获取 context 信息。当你需要 context 信息（例如 ConfigProvider 配置的内容）时，可以通过 `Modal.useModal` 方法会返回 modal 实体以及 contextHolder 节点。将其插入到你需要获取 context 位置即可，也可通过 [App 包裹组件](/components/app-cn) 简化 useModal 等方法需要手动植入 contextHolder 的问题。
 
+### 禁用动画
+
+antd 默认内置了一些组件交互动效让企业级页面更加富有细节，在一些极端场景可能会影响页面交互性能，如需关闭动画可以使用下面的方式：
+
+<!-- prettier-ignore -->
+<code src="./demo/motion.tsx">动画控制</code>
+
 ## 动态主题的其他使用方式
 
 ### 动态切换
@@ -556,12 +563,11 @@ export default class MyDocument extends Document {
     const originalRenderPage = ctx.renderPage;
     ctx.renderPage = () =>
       originalRenderPage({
-        enhanceApp: (App) => (props) =>
+        enhanceApp: (App) => (props) => (
-          (
+          <StyleProvider cache={cache}>
-            <StyleProvider cache={cache}>
+            <App {...props} />
-              <App {...props} />
+          </StyleProvider>
-            </StyleProvider>
+        ),
-          ),
       });
 
     const initialProps = await Document.getInitialProps(ctx);

docs/react/demo/motion.md

@@ -0,0 +1,7 @@
+## zh-CN
+
+通过 `token` 进行动画效果配置。
+
+## en-US
+
+Config animation effect by `token`.

docs/react/demo/motion.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Switch, ConfigProvider, Space, Checkbox, Radio, Row, Col } from 'antd';
+
+export default () => {
+  const [checked, setChecked] = React.useState(false);
+
+  React.useEffect(() => {
+    const id = setInterval(() => {
+      setChecked((prev) => !prev);
+    }, 500);
+
+    return () => {
+      clearInterval(id);
+    };
+  }, []);
+
+  const nodes = (
+    <Space>
+      <Checkbox checked={checked}>Checkbox</Checkbox>
+      <Radio checked={checked}>Radio</Radio>
+      <Switch checked={checked} />
+    </Space>
+  );
+
+  return (
+    <Row gutter={[24, 24]}>
+      <Col span={24}>{nodes}</Col>
+
+      <Col span={24}>
+        <ConfigProvider
+          theme={{
+            token: {
+              motion: false,
+            },
+          }}
+        >
+          {nodes}
+        </ConfigProvider>
+      </Col>
+    </Row>
+  );
+};