Squash changes (#13510)

Author: muibot

docs/src/pages/customization/css-in-js/css-in-js-zh.md

@@ -1,10 +1,10 @@
-# Default Theme
+# 默认主题
 
-<p class="description">Here's what the theme object looks like with the default values.</p>
+<p class="description">以下是theme（主题）对象在默认值情况下的样子。</p>
 
 {{"demo": "pages/customization/default-theme/DefaultTheme.js", "hideEditButton": true}}
 
-The theme normalizes implementation by providing default values for palette, dark and light types, typography, breakpoints, shadows, transitions, etc.
+主题通过为调色板、深色和浅色类型、排版、断点、阴影、过渡等提供默认值来实现其用途。
 
 Tip: you can play with the theme object in your console too. **We expose a global `theme` variable on all the pages**.
 

docs/src/pages/customization/default-theme/default-theme-zh.md

@@ -310,7 +310,7 @@ const theme = createMuiTheme({
 
 ## Accessing the theme in a component
 
-You might need to access the theme variables inside your React components. Let's say you want to display the value of the primary color, you can use the `withTheme()` higher-order component to do so. Here is an example:
+You might need to access the theme variables inside your React components. Let's say you want to display the value of the primary color, you can use the `withTheme()` higher-order component to do so. 下面是一个示例：
 
 {{"demo": "pages/customization/themes/WithTheme.js"}}
 
@@ -335,7 +335,7 @@ This component takes a `theme` property, and makes the `theme` available down th
 
 You can see the full properties API in [this dedicated page](/api/mui-theme-provider/).
 
-#### Examples
+#### 例子
 
 ```jsx
 import React from 'react';
@@ -360,15 +360,15 @@ render(<App />, document.querySelector('#app'));
 
 Generate a theme base on the options received.
 
-#### Arguments
+#### 参数
 
 1. `options` (*Object*): Takes an incomplete theme object and adds the missing parts.
 
-#### Returns
+#### 返回结果
 
 `theme` (*Object*): A complete, ready to use theme object.
 
-#### Examples
+#### 例子
 
 ```js
 import { createMuiTheme } from '@material-ui/core/styles';
@@ -390,15 +390,15 @@ const theme = createMuiTheme({
 
 Provide the `theme` object as a property of the input component so it can be used in the render method.
 
-#### Arguments
+#### 参数
 
 1. `Component`: The component that will be wrapped.
 
-#### Returns
+#### 返回结果
 
 `Component`: The new component created.
 
-#### Examples
+#### 例子
 
 ```js
 import { withTheme } from '@material-ui/core/styles';

docs/src/pages/customization/themes/themes-zh.md

@@ -4,16 +4,22 @@ components: Button, IconButton, ButtonBase, Zoom
 ---
 # 按钮
 
-<p class="description">按钮允许用户只需轻按一下即可采取行动并做出选择。</p>
+<p class="description">按钮允许用户以轻触行为采取行动并做出选择。</p>
 
-[按钮](https://material.io/design/components/buttons.html) 传达用户可以执行的操作。 它们通常放置在整个UI中，例如： - 对话 - 模态窗口 - 表单 - 卡片 - 工具栏
+[Buttons](https://material.io/design/components/buttons.html) communicate actions that users can take. They are typically placed throughout your UI, in places like:
+
+- 对话框
+- Modal windows
+- Forms
+- 卡片
+- Toolbars
 
 ## 文本按钮
 
 [文本按钮](https://material.io/design/components/buttons.html#text-button) 通常用于不太明显的操作, 包括那些位于:
 
-- 在对话框中
-- 在卡片
+- In dialogs
+- In cards
 
 在卡片中，文本按钮有助于在卡片内容之上强调按钮的存在。
 

docs/src/pages/demos/buttons/buttons-zh.md

@@ -14,22 +14,28 @@ components: Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions
 
 基本对话框可以提供有关列表项的详细信息或操作。 例如, 它们可以显示头像、图标、解释或交互操作 (如添加帐户)。
 
-触摸操作机制： -选择一个选项，可立即提交选项并关闭菜单 -在对话框外触摸或按下“返回”，将取消操作并关闭对话框。
+Touch mechanics:
+
+- Choosing an option immediately commits the option and closes the menu
+- Touching outside of the dialog, or pressing Back, cancels the action and closes the dialog
 
 {{"demo": "pages/demos/dialogs/SimpleDialog.js"}}
 
 ## 警报
 
 警报是一种紧急中断的行为，用以通知用户某一情况并需要确认,。
 
-大多数警报不需要标题。 他们通过以下其中一种方式的一两句话来得出一个决定: -问一个问题 (例如 "确认删除此对话？") -发表一个和动作按钮相关的声明
+Most alerts don't need titles. They summarize a decision in a sentence or two by either:
+
+- Asking a question (e.g. "Delete this conversation?")
+- Making a statement related to the action buttons
 
 仅对高风险情况使用带标题栏警报,，例如连接可能丢失。 用户应该仅根据标题和按钮文本，就能理解要做出的选择。
 
 如果需要标题请:
 
-- 使用明确的问题或声明，并在内容区域对其做出解释, 例如 "擦除 USB 存储？"。
-- 避免道歉、模棱两可或问题, 例如 "警告！" 或 "你确定吗？“
+- Use a clear question or statement with an explanation in the content area, such as "Erase USB storage?".
+- Avoid apologies, ambiguity, or questions, such as “Warning!” or “Are you sure?”
 
 {{"demo": "pages/demos/dialogs/AlertDialog.js"}}
 
@@ -67,7 +73,10 @@ components: Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions
 
 ## 长内容滚动
 
-当对话框根据用户不同的设备和视图大小变得很长时，可以让他们进行滚动。 - `scroll=paper` 可以使对话框的内容在paper元素中滚动。 - `scroll=body`可以使对话框的内容在body元素内滚动。
+When dialogs become too long for the user’s viewport or device, they scroll.
+
+- `scroll=paper` the content of the dialog scrolls within the paper element.
+- `scroll=body` the content of the dialog scrolls within the body element.
 
 请尝试下面的例子来加深理解：
 

docs/src/pages/demos/dialogs/dialogs-zh.md

@@ -1,5 +1,5 @@
 ---
-title: Drawer React component
+title: 抽屉React组件
 components: Drawer, SwipeableDrawer
 ---
 # 抽屉
@@ -40,42 +40,42 @@ const iOS = process.browser && /iPad|iPhone|iPod/.test(navigator.userAgent);
 
 {{"demo": "pages/demos/drawers/ResponsiveDrawer.js", "iframe": true}}
 
-## Permanent drawer
+## 永久抽屉
 
-Permanent navigation drawers are always visible and pinned to the left edge, at the same elevation as the content or background. They cannot be closed.
+永久抽屉始终可见并固定在左侧，与内容或背景位于同一高度。他们无法被关闭。
 
-Permanent navigation drawers are the **recommended default for desktop**.
+推荐在**桌面环境上默认**使用永久抽屉。
 
 ### 全高度导航栏
 
-Apps focused on information consumption that use a left-to-right hierarchy.
+这种情况下应用程序侧重与从左到右层次结构的信息消费。
 
 {{"demo": "pages/demos/drawers/PermanentDrawerLeft.js", "iframe": true}}
 
 {{"demo": "pages/demos/drawers/PermanentDrawerRight.js", "iframe": true}}
 
-### 剪切在应用栏下
+### 从应用栏下开始分割
 
-Apps focused on productivity that require balance across the screen.
+应用专注于生产力，需要在整个屏幕上保持平衡。
 
 {{"demo": "pages/demos/drawers/ClippedDrawer.js", "iframe": true}}
 
-## Persistent drawer
+## 持久抽屉
 
-Persistent navigation drawers can toggle open or closed. The drawer sits on the same surface elevation as the content. It is closed by default and opens by selecting the menu icon, and stays open until closed by the user. The state of the drawer is remembered from action to action and session to session.
+持久抽屉在打开和关闭的状态中相互切换 抽屉与内容位于同一平面的高度上。 它默认情况下是关闭的，可通过选择菜单图标打开，它会保持打开状态，直到用户关闭。 操作和切换都会记住抽屉的状态。
 
-When the drawer is outside of the page grid and opens, the drawer forces other content to change size and adapt to the smaller viewport.
+当抽屉位于页面网格之外并打开时，抽屉会强制其他内容更改大小并适应较小的视口。
 
-Persistent navigation drawers are acceptable for all sizes larger than mobile. They are not recommended for apps with multiple levels of hierarchy that require using an up arrow for navigation.
+对于比移动设备更大的尺寸，可以使用持久性导航抽屉。 对于具有多级层次结构且需要使用向上箭头进行导航的应用，建议不要使用它们。
 
 {{"demo": "pages/demos/drawers/PersistentDrawerLeft.js", "iframe": true}}
 
 {{"demo": "pages/demos/drawers/PersistentDrawerRight.js", "iframe": true}}
 
-## Mini variant drawer
+## 迷你变型抽屉
 
-In this variation, the persistent navigation drawer changes its width. Its resting state is as a mini-drawer at the same elevation as the content, clipped by the app bar. When expanded, it appears as the standard persistent navigation drawer.
+在这种情况下，持久抽屉会更改其宽度。 它的静止状态是一个迷你抽屉，与内容相同面，由应用栏遮盖住。 展开后，它将显示为标准的持久抽屉。
 
-The mini variant is recommended for apps sections that need quick selection access alongside content.
+对于需要快速切换访问内容的应用部分，建议使用迷你变形抽屉。
 
 {{"demo": "pages/demos/drawers/MiniDrawer.js", "iframe": true}}

docs/src/pages/demos/drawers/drawers-zh.md

@@ -6,7 +6,7 @@ components: ExpansionPanel, ExpansionPanelActions, ExpansionPanelDetails, Expans
 
 <p class="description">扩展面板包含创建流程，允许轻量编辑元素。</p>
 
-[扩展面板](https://material.io/archive/guidelines/components/expansion-panels.html)是一个轻量级容器，既可以单独使用，也可以连接到更大的表面， 比如卡片。
+[扩展面板](https://material.io/archive/guidelines/components/expansion-panels.html)是一个轻量级容器，既可以单独使用，也可以和卡片这样更大的平面相结合。
 
 ## 简单的扩展面板
 
@@ -20,6 +20,6 @@ components: ExpansionPanel, ExpansionPanelActions, ExpansionPanelDetails, Expans
 
 ## 受控手风琴
 
-扩展默认面板行为以使用 ExpansionPanel </ code>组件创建手风琴。</p>
+扩展默认面板行为以使用` ExpansionPanel `组件创建手风琴。
 
-<p>{{"demo": "pages/demos/expansion-panels/ControlledExpansionPanels.js"}}</p>
+{{"demo": "pages/demos/expansion-panels/ControlledExpansionPanels.js"}}

docs/src/pages/demos/expansion-panels/expansion-panels-zh.md

@@ -12,7 +12,7 @@ components: Collapse, Divider, List, ListItem, ListItemAvatar, ListItemIcon, Lis
 
 {{"demo": "pages/demos/lists/SimpleList.js"}}
 
-The last item of the previous demo shows how you can render a link:
+上一个样例的最后一项展示了如何渲染一个链接：
 
 ```jsx
 function ListItemLink(props) {
@@ -26,7 +26,7 @@ function ListItemLink(props) {
 </ListItemLink>
 ```
 
-You can find a [demo with React Router following this section](/guides/composition/#react-router) of the documentation.
+你可以从这里查看[React Router与文档此部分结合使用的相关样例](/guides/composition/#react-router)
 
 ## 文件夹列表
 
@@ -46,29 +46,29 @@ You can find a [demo with React Router following this section](/guides/compositi
 
 ## 固定 Subheader 列表
 
-Upon scrolling, subheaders remain pinned to the top of the screen until pushed off screen by the next subheader.
+滚动列表时，子标题保持固定在屏幕的顶端，直到被下一个子标题推离屏幕。
 
-This feature is relying on the CSS sticky positioning. Unfortunately it's [not implemented](https://caniuse.com/#search=sticky) by all the browsers we are supporting. We default to `disableSticky` when not supported.
+此功能依赖于 CSS sticky 定位。 不幸的是, 这一功能并未在我们支持的所有浏览器中 [实现](https://caniuse.com/#search=sticky) 。 如果不支持, 则默认为 `disableSticky`。
 
 {{"demo": "pages/demos/lists/PinnedSubheaderList.js"}}
 
 ## 列表控件
 
 ### 复选框
 
-A checkbox can either be a primary action or a secondary action.
+复选框可以是主操作或辅助操作。
 
-The checkbox is the primary action and the state indicator for the list item. The comment button is a secondary action and a separate target.
+复选框是列表项的主要操作和状态指示器。 评论按钮是辅助操作和单独的目标。
 
 {{"demo": "pages/demos/lists/CheckboxList.js"}}
 
-The checkbox is the secondary action for the list item and a separate target.
+复选框是列表项的辅助操作和单独的目标。
 
 {{"demo": "pages/demos/lists/CheckboxListSecondary.js"}}
 
 ### 开关
 
-The switch is the secondary action and a separate target.
+开关是辅助操作和单独的目标。
 
 {{"demo": "pages/demos/lists/SwitchListSecondary.js"}}
 

docs/src/pages/demos/lists/lists-zh.md

@@ -56,4 +56,20 @@ components: Menu, MenuItem, MenuList, ClickAwayListener, Popover, Popper
 
 这是[render props](https://reactjs.org/docs/render-props.html) 的例子。保持跟踪单个菜单的本地状态。
 
-{{"demo": "pages/demos/menus/RenderPropsMenu.js"}}
+{{"demo": "pages/demos/menus/RenderPropsMenu.js"}}
+
+## 局限性
+
+There is [a flexbox bug](https://bugs.chromium.org/p/chromium/issues/detail?id=327437) that prevents `text-overflow: ellipse` from working in a flexbox layout. You can use the `Typography` component to workaround this issue:
+
+{{"demo": "pages/demos/menus/TypographyMenu.js"}}
+
+## Complementary projects
+
+For more advanced use cases you might be able to take advantage of:
+
+### PopupState helper
+
+There is a 3rd party package [`material-ui-popup-state`](https://github.com/jcoreio/material-ui-popup-state) that takes care of menu state for you in most cases.
+
+{{"demo": "pages/demos/menus/MenuPopupState.js"}}

docs/src/pages/demos/menus/menus-zh.md

@@ -2,7 +2,7 @@
 title: 日期、时间选择器 React 组件
 components: TextField
 ---
-# 选择器
+# Pickers
 
 <p class="description">选择器提供了一种从预先设定的集合中选取单个值的简单方法。</p>
 
@@ -15,19 +15,19 @@ components: TextField
 
 ⚠️ 浏览器原生输入控件[并不完美](https://caniuse.com/#feat=input-datetime)。
 
-## 日期选择器
+## Date pickers
 
 一个原生的 `type="date"` 日期选择器示例 ，它也可以用作日历：
 
 {{"demo": "pages/demos/pickers/DatePickers.js"}}
 
-## 时间选择器
+## Time pickers
 
 一个原生的 `type="time"` 时间选择器示例 ：
 
 {{"demo": "pages/demos/pickers/TimePickers.js"}}
 
-## 日期和时间选择器
+## Date & Time pickers
 
 一个原生的 `type="datetime-local"` 日期和时间选择器示例 ：
 

docs/src/pages/demos/pickers/pickers-zh.md

@@ -64,13 +64,12 @@ components: CircularProgress, LinearProgress
 进度组件接受一个 0 - 100 范围的值。 作为默认的最小/最大值，这简化了屏幕阅读用户的使用。 但是有时，你可能会使用值超出这个范围的数据源。 这里告诉您如何轻松的将一个任意范围的值转换为0 - 100区间的值。
 
 ```jsx
-// MIN = 最小值
-// MAX = 最大值
-
-// 正常化值的函数（MIN / MAX 可相互协调）
+// MIN = Minimum expected value
+// MAX = Maximium expected value
+// Function to normalise the values (MIN / MAX could be integrated)
 const normalise = value => (value - MIN) * 100 / (MAX - MIN);
 
-// 在 render 函数中，利用`正常化`函数的示例组件
+// Example component that utilizes the `normalise` function at the point of render.
 function Progress(props) {
   return (
     <React.Fragment>
@@ -87,10 +86,18 @@ function Progress(props) {
 
 {{"demo": "pages/demos/progress/DelayingAppearance.js"}}
 
+## Customized Progress
+
+The last demo demonstrates how you can build a Facebook like spinner.
+
+{{"demo": "pages/demos/progress/CustomizedProgress.js"}}
+
 ## 局限性
 
-在特别慢的加载时，可能丢失stroke dash动画或看到环形进度的半径随机的情况。 为了不阻塞主渲染进程，应该在web worker中或批处理中执行密集操作的处理器。
+Under heavy load, you might lose the stroke dash animation or see random CircularProgress ring widths. You should run processor intensive operations in a web worker or by batch in order not to block the main rendering thread.
+
+![heavy load](/static/images/progress/heavy-load.gif)
 
-![慢加载](/static/images/progress/heavy-load.gif)
+When it's not possible, you can leverage the `disableShrink` property to mitigate the issue. See https://github.com/mui-org/material-ui/issues/10327
 
-见 https://github.com/mui-org/material-ui/issues/10327
+{{"demo": "pages/demos/progress/CircularUnderLoad.js"}}