Updates Pattern docs (English) (#7902)

* Makes grammatical and typo fixes to the React Docs.

* Fixes some spelling and grammar in Pattern docs.

* Fixes merge conflict. Updates Pattern docs.

docs/pattern/advanced-search.en-US.md

@@ -19,9 +19,9 @@ Advanced search is generally used by intermediate / expert users, typically by c
 
 <br>
 
-<img class="preview-img" align="right" alt='Interactive examples" description="Place an Alert to show the value that has already been entered; the user can click "Clear" to empty all the input values. Click advanced search to expand Advanced Search again.' src="https://os.alipayobjects.com/rmsportal/gKiZtjopvLufqSP.png">
+<img class="preview-img" align="right" alt="Interactive examples" description="Place an Alert to show the value that has already been entered; the user can click "Clear" to empty all the input values. Click advanced search to expand Advanced Search again.' src="https://os.alipayobjects.com/rmsportal/gKiZtjopvLufqSP.png">
 
-When an advanced search - with an entered a value - is hidden, you should display the search criteria and values.
+When advanced search is hidden, you should display the search criteria and values when a value is entered.
 
 ### Arrangement
 

docs/pattern/form.en-US.md

@@ -3,9 +3,9 @@ order: 2
 title: Form
 ---
 
-As an important interface to obtain user input, form plays a role of matching answers to questions.
+As an important interface to obtain user input, forms play the important role of matching answers to questions.
 
-In the design of a form, it's recommended to:
+When designing a form, it's recommended to:
 
 1. Make sure users know what is required to enter and why.
 
@@ -17,7 +17,7 @@ In the design of a form, it's recommended to:
 
 3. Be error-sensitive and fault-tolerant.
 
-  Be error-sensitive means giving feedbacks to users quickly through a variety of validation rules of user input. If the validation starts only after a form is submitted, it would be too late. Be fault-tolerant means it should be allowed to use different kinds of formats as well as syntax. For example, if a user types in some spaces into a phone number input box, the system should delete those spaces automatically instead of telling the user to correct them.
+  Be error-sensitive means giving feedback to users quickly through a variety of validation rules of user input. If the validation starts only after a form is submitted, it would be too late. Being fault-tolerant means it should be allowed to use different kinds of formats as well as syntax. For example, if a user types in some spaces into a phone number input box, the system should delete those spaces automatically instead of telling the user to correct them.
 
 4. Don't ask unnecessary questions.
 
@@ -55,7 +55,7 @@ When two input boxes have strong correlation, they can be combined together so a
 
 <img class="preview-img" align="right" alt="Example of alignment" src="https://os.alipayobjects.com/rmsportal/cjHTEtXFxUSdHnE.png">
 
-In the design of a form, button groups should be aligned to the left of the input boxes.
+When designing a form, button groups should be aligned to the left of the input boxes.
 
 ### Disabled main button
 
@@ -68,13 +68,13 @@ When there are just a few (less than 3) input boxes in a form, "submit" button o
 
 <img class="preview-img" align="right" alt="main button is enabled when there are enough characters" src="https://os.alipayobjects.com/rmsportal/usdFxJmWDawqUuq.png">
 
-When there are just a few input boxes, users can see feedbacks once they type in something and thus the rule is easy to understand.
+When there are just a few input boxes, users can see feedback once they type in something and thus the rule is easy to understand.
 
 <br>
 
 <img class="preview-img" align="right" alt="Don't use disabled main button" src="https://os.alipayobjects.com/rmsportal/GwZhvOuXmwqUIUW.png">
 
-When there are many input boxes (especially when required input boxes are altogether with optional ones), the logic of feedbacks can be very complicated. Thus, disabling main buttons may cause confusion.
+When there are many input boxes (especially when required input boxes are altogether with optional ones), the logic of feedback can be very complicated. Thus, disabling main buttons may cause confusion.
 
 ### Structured format
 
@@ -87,24 +87,24 @@ The structured format can be used if users are familiar with the input content a
 <img class="preview-img inline" align="right" alt="Example of tooltip" description="when an input box is focused, the tooltip will appear until the input box loses focus again" src="https://os.alipayobjects.com/rmsportal/cTlmdEprGSzMZfs.png">
 <img class="preview-img inline" align="right" alt="Example of reminder" description="when an input box is focused, the reminder will appear until a user types in at least one character" src="https://os.alipayobjects.com/rmsportal/QPhvLWfMbLTvjRw.png">
 
-Use tooltip if a brief input label may cause confusion while you still want to keep the label text to be short.
+Use a tooltip if a brief input label may cause confusion while you still want to keep the label text to be short.
 
-Use reminder if you want users to pay attention to the format or purpose of an input box. A reminder will disappear once there is something typed in the input box, so it should be used only when users are familiar with the content.
+Use a reminder if you want users to pay attention to the format or purpose of an input box. A reminder will disappear once there is something typed in the input box, so it should be used only when users are familiar with the content.
 
 ### Password input box
 
 <img class="preview-img" align="right" alt="Example of password input box" src="https://os.alipayobjects.com/rmsportal/wKpOgeyyoOUeCrk.png">
 
-Password input box provides real time feedbacks on password strength and validity. It's quite applicable to a registration page.
+Password input box provides real time feedback on password strength and validity. It's quite applicable to a registration page.
 
 ### Validation
 
 <img class="preview-img inline" align="right" description="Validation in real time" src="https://os.alipayobjects.com/rmsportal/urCdIJFuNYCenqH.png">
 <img class="preview-img inline" align="right" description="Validation after losing focus" src="https://os.alipayobjects.com/rmsportal/KkcSBkbTJirIxCw.png">
 
-<img class="preview-img" align="right" description='When a "submit" button is clicked, the system will deal with user inputs and display feedbacks (the number of errors and the types of errors) on the page.' src="https://zos.alipayobjects.com/rmsportal/xTtVSREbASRMstTggVGD.png">
+<img class="preview-img" align="right" description="When a "submit" button is clicked, the system will deal with user inputs and display feedback (the number of errors and the types of errors) on the page." src="https://zos.alipayobjects.com/rmsportal/xTtVSREbASRMstTggVGD.png">
 
-Use different validation rules and a variety of feedbacks to help users correct errors before they click on a "submit" button.
+Use different validation rules and a variety of feedback to help users correct errors before they click on a "submit" button.
 
 ### Character counting box
 
@@ -131,7 +131,7 @@ If the maximum length of an input content is known, it's recommended to define t
 
 ### Alignment
 
-There are both advantages and disadvantages for any kinds of alignment. Thus, you need to have a clear mind about your purposes (if you want to speed up or slow down a user) and the limits (screen width restrictions, problems of localization, etc.) before choosing one of those alignments.
+There are both advantages and disadvantages for any particular alignment. Thus, you need to be clear about your purposes (if you want to speed up or slow down a user) and the limitations (screen width restrictions, problems of localization, etc.) before choosing one of those alignments.
 
 <br>
 
@@ -145,14 +145,14 @@ Right alignment (recommended)
 
 <br>
 
-https://www.expedia.co.uk/FlightCheckout?tripid=89e54540-dcf4-4c27-be3f-c9efaae6dac2&c=69c4491d-2d30-406a-9b2c-6ec50a932b48
+<!-- https://www.expedia.co.uk/FlightCheckout?tripid=89e54540-dcf4-4c27-be3f-c9efaae6dac2&c=69c4491d-2d30-406a-9b2c-6ec50a932b48 -->
 
 <img class="preview-img" align="right" alt="Top alignment" src="https://os.alipayobjects.com/rmsportal/AsyyNKormNdEMLi.png">
 
 Top alignment
 
 - Advantages: high readability; high flexibility of the label length.
-- Disadvantage: takes a lot of vertical space.
+- Disadvantages: takes a lot of vertical space.
 - When to use: you want users to finish filling the form quickly.
 
 <br>

docs/pattern/list.en-US.md

@@ -3,13 +3,13 @@ order: 3
 title: List
 ---
 
-List is a very common UI element which can be applied to various scenarios:
+Lists are very common UI elements which can be applied to various scenarios:
 
 - Get an overview
 - Browse item by item
 - Find specific list item
 - Sort and filter
-- Rearrange, add, delete or recategorize list items
+- Rearrange, add, delete or re-categorize list items
 
 ---
 
@@ -19,7 +19,7 @@ List is a very common UI element which can be applied to various scenarios:
 
 <img class="preview-img" align="right" alt="Popover Example" description="When triggered by click, symmetry between activated and disabled states should be maintained, in other words, popover should be closed where it was opened. When triggered by hover, activate the popover 0.5 second after a mouse-enter event, and close the popover immediately after a mouse-leave event." src="https://os.alipayobjects.com/rmsportal/GmpRYixxnePBPPW.png">
 
-Popover: When a user click or hover a link or a piece of content, display a small amount of detailed information for corresponding list item in a floating layer.
+Popover: When a user clicks or hovers a link or piece of content, display a small amount of detailed information for the corresponding list item in a floating layer.
 
 <br />
 
@@ -29,7 +29,7 @@ Popover: When a user click or hover a link or a piece of content, display a smal
 
 <img class="preview-img" align="right" alt="Embedding Example 3" src="https://os.alipayobjects.com/rmsportal/MXXjEoLdnBxqcne.png">
 
-Embedding: A user can directly view detailed information in the context via a click, without openning a new page or modal.
+Embedding: A user can directly view detailed information in the context via a click, without opening a new page or modal.
 
 <br />
 
@@ -56,7 +56,7 @@ Full-Window: A user can view a large amount of detailed information in current p
 
 <img class="preview-img" align="right" alt="Text Wrap Example" src="https://os.alipayobjects.com/rmsportal/wWcixIvqaFXfTHd.png">
 
-Text Wrap: Expand certain list item into multiline text.
+Text Wrap: Expand certain list item into multi-line text.
 
 <br />
 
@@ -86,7 +86,7 @@ Pagination: Load list in a sectioned way, user determines whether to load other
 
 <img class="preview-img" align="right" description="Pagination can make things clunky when there is intensive operation on listed data, especially when there is selection across pages. So infinite scrolling would be a better choice. Infinite scrolling is also suitable for presenting all data for a user (i.e. user's orders) or non-temporary data." src="https://os.alipayobjects.com/rmsportal/afDpGUyoyQZFgks.png">
 
-Infinite Scrolling: When user reach the bottom of the first section, load next section via listening to scroll event or a button click.
+Infinite Scrolling: When user reaches the bottom of the first section, load next section via listening to scroll event or a button click.
 
 ### Display Categorized/Layered List
 

docs/pattern/navigation.en-US.md

@@ -3,11 +3,11 @@ order: 1
 title: Navigation
 ---
 
-Broadly speaking, anything telling users where they are, where to go and how to get there can be called navigation. We abstract common navigation patterns and provide handy components to help designers and developers to build a clear and smooth navigational system. When using navigation or customizing navigational structures, please pay attention to following common pitfalls:
+Broadly speaking, anything telling users where they are, where to go and how to get there can be called navigation. We abstract common navigation patterns and provide handy components to help designers and developers build a clear and smooth navigational system. When using navigation or customizing navigational structures, please pay attention to following common pitfalls:
 
-- Provide visual and contextual cues as many as possible, to prevent users from getting lost
+- Provide visual and contextual cues as much as possible, to prevent users from getting lost
 - Maintain consistency between form and behavior, or reduce the number of items in navigation, to decrease user's learning cost
-- Minimize page transitions (i.e. reduce the number of page tranistions required by a task from several to just once or twice), to ensure that user travels only a short distance from any page to another
+- Minimize page transitions (i.e. reduce the number of page transitions required by a task from several to just once or twice), to ensure that the user travels only a short distance from one page to another
 
 ---
 
@@ -21,8 +21,8 @@ Broadly speaking, anything telling users where they are, where to go and how to
   </tr>
   <tr>
     <th>Pros</th>
-    <td>Hierarchy is easily extensible; Make room for page content horizontally; Allow fixed position, so that user can navigate to intended page quickly.</td>
-    <td>Conform to common human habit of browsing top-down, easy to browse and click; Content area usually stay in a fixed width (i.e. 1208px), so page layout is stabler and less sensitive to screen sizes.</td>
+    <td>Hierarchy is easily extensible; Makes room for page content horizontally; Allows fixed position, so that user can navigate to intended page quickly.</td>
+    <td>Conforms to common human habit of browsing top-down, easy to browse and click; Content area usually stays in a fixed width (i.e. 1208px), so page layout is more stable and less sensitive to screen sizes.</td>
   </tr>
   <tr>
     <th>Cons</th>
@@ -55,7 +55,7 @@ Navigational structure consists of following parts:
 
 #### About Breadcrumb
 
-> 1. Avoid using breadcrumb as much as you can, especially when page contains other navigation components sufficiently telling where users are.
+> 1. Avoid using breadcrumbs as much as you can, especially when a page contains other navigation components sufficiently telling where users are.
 > 2. Breadcrumb can be categorized as:
 >    - Path-Centric: dynamically showing a path of how user reaches current page
 >    - Position-Centric: usually fixed, showing position of current page among entire site structure

docs/react/getting-started.en-US.md

@@ -196,4 +196,4 @@ And this plugin can load styles too, read [usage](https://github.com/ant-design/
 ## Tips
 
 - You can use any `npm` modules.
-- We recommend to write code in [ES2015](http://babeljs.io/blog/2015/06/07/react-on-es6-plus) as `babel` has been integrated into our work flow.
+- We recommend writing code in [ES2015](http://babeljs.io/blog/2015/06/07/react-on-es6-plus) as `babel` has been integrated into our work flow.

docs/react/introduce.en-US.md

@@ -132,7 +132,7 @@ import 'antd/dist/antd.css';  // or 'antd/dist/antd.less'
 - [Home Page](http://ant.design/)
 - [UI library](/docs/react/introduce)
 - [Change Log](/changelog)
-- [Offcial Scaffold Tool](https://github.com/dvajs/dva-cli/)
+- [Official Scaffold Tool](https://github.com/dvajs/dva-cli/)
 - [Development Tool](http://ant-tool.github.io/)
 - [Scaffold Market](http://scaffold.ant.design)
 - [rc-components](http://react-component.github.io/)

docs/react/use-with-create-react-app.en-US.md

@@ -119,7 +119,7 @@ $ yarn add react-app-rewired --dev
 }
 ```
 
-Then create a `config-overrides.js` at root directory of your project for futher overriding.
+Then create a `config-overrides.js` at root directory of your project for further overriding.
 
 ```js
 module.exports = function override(config, env) {