Minor Grammatical Updates (SharePoint#680)

Author: thechriskent

docs/spfx/extensions/guidance/using-custom-dialogs-with-spfx.md

@@ -1,21 +1,24 @@
 # Using Custom Dialogs with SharePoint Framework Extensions
 
-Custom dialogs are available from `@microsoft/sp-dialog`package and can be used within the context of SharePoint Framework Extensions or client-side web parts. 
+Custom dialogs are available from the **@microsoft/sp-dialog** package and can be used within the context of SharePoint Framework Extensions or client-side web parts. 
 
-This tutorial demonstrates creation of a custom dialog and using that in the context of ListView Command Set extension.
+This tutorial demonstrates the creation of a custom dialog and using it within the context of a ListView Command Set extension.
 
-> Notice that the SharePoint Framework dialog is currently in preview status and we are looking to collect feedback before it's officially released. Please provide us feedback by using the [sp-dev-docs repository Issue list](https://github.com/SharePoint/sp-dev-docs/issues).
+> The SharePoint Framework dialog is currently in preview status and we are looking to collect feedback before it's officially released. Please provide feedback by using the [sp-dev-docs repository Issue list](https://github.com/SharePoint/sp-dev-docs/issues).
 
-> Notice that debugging Custom ListView Sets in the SharePoint Online is currently only available from modern list experience in classic team sites hosted on dev tenant. 
+> Please note that debugging Custom ListView Command Sets in SharePoint Online is currently only available from the modern list experience within classic team sites hosted in a **developer tenant**.
 
-> End result of this tutorial is also available as source code at https://github.com/SharePoint/sp-dev-fx-extensions/tree/master/samples/react-command-dialog.  
+> The end result of this tutorial is available as source code at https://github.com/SharePoint/sp-dev-fx-extensions/tree/master/samples/react-command-dialog.  
 
 ## Setup your Environment
 
-Before you can complete this guide you will need to ensure you have [setup your environment](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment) for development 
-using SharePoint Framework and that you are using latest SharePoint Framework Yeoman templates. 
+Before you can complete this guide, you will need to ensure you have [setup your environment](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment) for development 
+using the SharePoint Framework (SPFx) and that you are using the latest SharePoint Framework Yeoman templates. 
 
-> You can update your SharePoint Framework Yeoman templates by running following command `npm install -g @microsoft/generator-sharepoint`. 
+> You can update your SharePoint Framework Yeoman templates by running the following command:
+> ```sh
+> npm install -g @microsoft/generator-sharepoint`
+> ```
 
 ## Create a New Project
 
@@ -25,13 +28,13 @@ Start by creating a new folder for the project using your console of choice:
 md dialog-cmd
 ```
 
-And enter that folder
+Then enter that folder:
 
 ```sh
 cd dialog-cmd
 ```
 
-The run the Yeoman generator for SharePoint Framework
+Then run the Yeoman generator for the SharePoint Framework:
 
 ```sh
 yo @microsoft/sharepoint
@@ -45,30 +48,30 @@ When prompted:
 
 The next set of prompts will ask for specific information about your extension:
 
-* Accept the default value of **DialogDemo** as your extension name and press **Enter**.
+* Use the value of **DialogDemo** as your extension name and press **Enter**.
 * Accept the default value of **DialogDemo description** as your extension description and press **Enter**.
 
 ![Yeoman SharePoint generator prompts to create an extension solution](../../../../images/ext-com-dialog-yeoman-prompts.png)
 
-At this point, Yeoman will install the required dependencies and scaffold the solution files along with the *HelloWorld* extension. This might take a few minutes. 
+At this point, Yeoman will install the required dependencies and scaffold the solution files along with the *DialogDemo* extension. This might take a few minutes. 
 
 When the scaffold is complete, you should see the following message indicating a successful scaffold:
 
 ![SharePoint client-side solution scaffolded successfully](../../../../images/ext-com-dialog-yeoman-complete.png)
 
-For information about troubleshooting any errors, see [Known issues](../basics/known-issues).
+> For information about troubleshooting any errors, see [Known issues](../basics/known-issues).
 
-Once the scaffolding completes, open your project folder in your code editor. This article uses Visual Studio Code in the steps and screenshots but you can use any editor you prefer.
+Once the scaffolding completes, open your project folder in your code editor. This article uses Visual Studio Code in the steps and screenshots, but you can use any editor you prefer. To open the folder in Visual Studio Code use the following command in the console:
 
-```
+```sh
 code .
 ```
 
 ![Initial Visual Studio Code structure after scaffolding](../../../../images/ext-com-dialog-vs-code-initial.png)
 
-## Modify extension manifest based on requirements 
+## Modify the Extension Manifest
 
-In the extension manifest, configure extension to have only one button. In the code editor, open the **./src/extensions/dialogDemo/DialogDemoCommandSet.manifest.json** file. Replace the commands section with the following JSON:
+In the extension manifest, configure the extension to have only one button. In the code editor, open the **./src/extensions/dialogDemo/DialogDemoCommandSet.manifest.json** file. Replace the commands section with the following JSON:
 
 ```json
 {
@@ -80,26 +83,26 @@ In the extension manifest, configure extension to have only one button. In the c
     }
   }
 }
-
 ```
 
-## Adding sp-dialog package to solution
-Return to the console and execute the following command to include the dialog API in our solution. 
+## Adding the sp-dialog Package to the Solution
 
-```
+Return to the console and execute the following command to include the dialog API in your solution:
+
+```sh
 npm install @microsoft/sp-dialog --save
 ```
 
-Since we are using the `--save` option, this dependency will be added to *package.json* file and would be automatically installed when `npm install` command is executed.
+Since we are using the `--save` option, this dependency will be added to the **package.json** file. This will ensure that it will be automatically installed when the `npm install` command is executed (this is important when restoring or cloning your project elsewhere).
 
 Return to Visual Studio Code (or your preferred editor).
 
-## Creating your custom dialog
-Create a new file called **ColorPickerDialog.tsx** to **./src/extensions/dialogDemo/** folder.
+## Creating a Custom Dialog
+Create a new file called **ColorPickerDialog.tsx** in the **./src/extensions/dialogDemo/** folder.
 
-Add following import statements on the start of the newly created file. We are creating our custom dialog using Office UI Fabric React components, so the implementation will be in React. 
+Add the following import statements at the top of the newly created file. We are creating our custom dialog using the [Office UI Fabric React components](https://dev.office.com/fabric#/components), so the implementation will be in React. 
 
-> Notice that currently DialogContent component is coming from `@microsoft/sp-dialog`, but will be included in Office UI Fabric React components soon, like mentioned in the code comments. 
+> Currently the `DialogContent` component is coming from `@microsoft/sp-dialog`, but will be included as part of the Office UI Fabric React components soon, as mentioned in the code comments below. 
 
 ```ts
 import * as React from 'react';
@@ -118,7 +121,7 @@ import {
 import { DialogContent } from '@microsoft/sp-dialog';
 ```
 
-Add following interface definition just below the import statements. This wil be used to bypass needed information and functions between the ListView Command Set extension and custom dialog.
+Add the following interface definition just below the import statements. This wil be used to pass information and functions between your ListView Command Set extension and your custom dialog.
 
 ```ts
 interface IColorPickerDialogContentProps {
@@ -129,7 +132,7 @@ interface IColorPickerDialogContentProps {
 }
 ```
 
-Add following class just below the interface definition. This React class is responsible for rendering the UI experiences inside of the custom dialog. Notice that we use the Office UI Fabric React components for actual rendering and just bypass the needed properties.  
+Add the following class just below the interface definition. This React class is responsible for rendering the UI experiences inside of the custom dialog. Notice that we use the Office UI Fabric React components for actual rendering and just pass the needed properties.  
 
 ```ts
 class ColorPickerDialogContent extends React.Component<IColorPickerDialogContentProps, {}> {
@@ -162,7 +165,7 @@ class ColorPickerDialogContent extends React.Component<IColorPickerDialogContent
   }
 }
 ```
-Add following class definition for our custom dialog under the just added class code. This one is the actual custom dialog, which will be called from the button click and which is inherited from the **BaseDialog**.
+Add the following class definition for our custom dialog under the just added `ColorPickerDialogContent` class. This is the actual custom dialog which will be called from the ListView Command Set button click and is inherited from the `BaseDialog`.
 
 ```ts
 export default class ColorPickerDialog extends BaseDialog {
@@ -192,32 +195,32 @@ export default class ColorPickerDialog extends BaseDialog {
 }
 ```
 
-## Associating custom dialog to button click
-To associate the custom dialog button to custom ListView Command Set, the code to initiate the dialog has to be added for the button click operation.
+## Associating the Custom Dialog with the ListView Command Set Button Click
+To associate the custom dialog with your custom ListView Command Set, the code to initiate the dialog has to be added within the button click operation.
 
-In the code editor, open the  **DialogDemoCommandSet.ts** file from **./src/extensions/dialogDemo/** folder.
+In the code editor, open the **DialogDemoCommandSet.ts** file from the **./src/extensions/dialogDemo/** folder.
 
-Add following import statements under the existing **strings** import. These are for using the just created custom dialog in the context of ListView Command Set. 
+Add the following import statements under the existing **strings** import. These are for using the just created custom dialog in the context of your ListView Command Set. 
 
 ```ts
 import { Dialog } from '@microsoft/sp-dialog';
 import ColorPickerDialog from './ColorPickerDialog';
 ```
 
-Add following **_colorCode** variable definition above **onInit** function in the **DialogDemoCommandSet** class. This is used to store teh color picker dialog result.
+Add the following `_colorCode` variable definition above the `onInit` function in the `DialogDemoCommandSet` class. This is used to store the color picker dialog result.
 
 ```ts
   private _colorCode: string;
 ```
 
-Update the **onExecute** function as follows. In this code we are doing following steps
+Update the `onExecute` function as follows. In this code we are doing the following:
 
-* Initiate custom dialog
-* Bypass message for the dialog, which will be used as title
-* Bypass color code for the dialog with default value, if not yet set
-* Show the custom dialog
-* Receive and store return value from the dialog
-* Show received value in out-of-the-box dialog using `Dialog.alert()` function
+* Initiate our custom dialog
+* Pass a message for the dialog, which will be used as the title
+* Pass a color code for the dialog with a default value, if not yet set
+* Show our custom dialog
+* Receive and store the return value from the dialog
+* Show the received value in an out-of-the-box dialog using the `Dialog.alert()` function
 
 ```ts
   @override
@@ -239,24 +242,27 @@ Update the **onExecute** function as follows. In this code we are doing followin
   }
 ```
 
-## Testing custom dialog in your tenant
-Move to **DialogDemoCommandSet.manifest.json** file in **./src/extensions/dialogDemo/** folder and copy **id** value, which will be used in the debug query parameter.
+## Testing the Custom Dialog in your Tenant
 
-Move to console side and execute following command. We use `--nobrowser` option, since local workbench cannot be currently used for debugging, so there's no reason to start that. 
+Open the **DialogDemoCommandSet.manifest.json** file in **./src/extensions/dialogDemo/** folder and copy the **id** value, which will be used in the debug query parameter.
+
+Return to the console and execute the following command:
 
 ```sh
 gulp serve --nobrowser
 ```
 
-This will start bundling and will serve the resulting manifest from `localhost` address.
+Notice that we used the `--nobrowser` option, since there's no value in launching the local workbench since you currently cannot debug extensions locally.
+
+This will start the bundling of your solution and will serve the resulting manifest from the `localhost` address.
 
 ![Initial Visual Studio Code structure after scaffolding](../../../../images/ext-com-dialog-gulp-serve.png)
 
-To test your extension, navigate to a site in your SharePoint Online tenant.
+To test your extension, navigate to a site in your SharePoint Online developer tenant.
 
-Move to an existing custom list in the site with some items or create a new list and add few items to it for testing purposes. 
+Navigate to an existing custom list within the site with some items or create a new list and add a few items to it for testing purposes. 
 
-Append the following query string parameters to the URL. Notice that you will need to update the **id** to match your own extension identifier available from the **DialogDemoCommandSet.manifest.json** file:
+Append the following query string parameters to the URL. Notice that you will need to update the **id** to match your own extension identifier as listed in the **DialogDemoCommandSet.manifest.json** file:
 
 ```
 ?loadSpfx=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&customActions={"8701f44c-8c81-4e54-999d-62763e8f34d2":{"___location":"ClientSideExtension.ListViewCommandSet.CommandBar"}}
@@ -266,14 +272,14 @@ Accept the loading of Debug Manifests by clicking **Load debug scripts** when pr
 
 ![Allow debug scripts warning](../../../../images/ext-com-dialog-debug-scripts.png)
 
-Notice new button being visible in the toolbar of the list with test *Open Custom Dialog*.
+Notice the new button is visible in the toolbar of the list with the text *Open Custom Dialog*.
 
 ![Allow debug scripts warning](../../../../images/ext-com-dialog-button-in-toolbar.png)
 
-Click *Open Custom Dialog* button to see custom dialog rendered in the list view. 
+Click the *Open Custom Dialog* button to see your custom dialog rendered within the list view. 
 
 ![Allow debug scripts warning](../../../../images/ext-com-dialog-visible-dialog.png)
 
-Choose a color in the *Color Picker* and click **OK** to test how the code is returning selected value back to caller, which is then shown using out-of-the-box alert dialog.
+Choose a color in the *Color Picker* and click **OK** to test how the code is returning the selected value back to the caller. The selection is then shown using the out-of-the-box alert dialog.
 
 ![Out-of-the-box alert dialog](../../../../images/ext-com-dialog-oob-alert-dialog.png)