Updating docs for 1.16 release

Author: VesaJuvonen

docs/spfx/office/overview.md

@@ -6,8 +6,6 @@ ms.localizationpriority: high
 ---
 # Extend Outlook and Office with the SharePoint Framework
 
-[!INCLUDE [spfx-release-beta](../../../includes/snippets/spfx-release-beta.md)]
-
 The SharePoint Framework (SPFx) v1.16 release added support for the [Microsoft Teams JavaScript client SDK v2](/javascript/api/overview/msteams-client). The Microsoft Teams JavaScript client SDK v2 introduced the ability to enable [Teams apps to run in Outlook at Office, in addition to Microsoft Teams](/microsoftteams/platform/m365-apps/overview).
 
 With this improvement in SPFx v1.16, developers can now use the SPFx to create apps for Outlook and Office using the [existing support for creating apps for Microsoft Teams](/sharepoint/dev/spfx/build-for-teams-overview).

docs/spfx/release-1.16.md

@@ -161,7 +161,9 @@ Node.js v12 & v14 are no longer supported. SPFx v1.16 requires Node.js v16.
 > [!NOTE]
 > Node.js v18 support is scheduled for the first half of the 2023 calendar year.
 
-## Preview features
+## Preview Features and Capabilities
+
+Following features are still in preview status as part of the 1.16 release and should not be used in production. We are looking into releasing them officially as part of the upcoming 1.17 release.
 
 ### Web part Top Actions
 
@@ -195,7 +197,7 @@ export interface ITopActions {
 
 See more details on the code level guidance from the following article
 
-* [link](https://www.fi)
+* [Adding support for Top Actions](web-parts/guidance/getting-started-with-top-actions.md))
 
 
 ## Deprecations

docs/spfx/web-parts/guidance/getting-started-with-top-actions.md

@@ -1,18 +1,18 @@
 ---
 title: Adding support for Top Actions
 description: Top Actions is a SharePoint Framework feature that allows web part developers to add commands to a web part's toolbar
-ms.date: 11/14/2022
+ms.date: 11/15/2022
+ms.localizationpriority: high
 ---
 
 # Adding support for Top Actions
 
+[!INCLUDE [spfx-release-beta](../../../../includes/snippets/spfx-release-beta.md)]
+
 Today, users need to be aware of the web part property panels to find out the additional options each web part provides. This is a common piece of feedback where users want actions surfacing in context of where they are without having to rely on opening something to get to those options. Therefore, we are now allowing to surface most common configurations from a web part's property panel directly on to the web part's toolbar. These common configurations are referred to as the web part's Top Actions.
 
 > [!IMPORTANT]
-> This feature is still preview status as part of the 1.16 release and should not be used in production. We are looking into releasing them officially as part of the upcoming 1.17 release.
-
-> At the time of writing this article, Top Actions only supports rendering a drop down and button command.
-
+> This feature is still preview status as part of the 1.16 release and should not be used in production. We are looking into releasing them officially as part of the upcoming 1.17 release.At the time of writing this article, Top Actions only supports rendering a drop-down and button command.
 
 ![Top Actions Example](../../../images/webpart-top-actions.png)
 
@@ -21,11 +21,12 @@ Today, users need to be aware of the web part property panels to find out the ad
 > [!TIP]
 > These instructions assume you know [how to create a hello world web part](../get-started/build-a-hello-world-web-part.md).
 
-### 1. Define your Top Action configurations
+### Define your Top Action configurations
 
 In the example below we are defining the callback function that will be used to pull the configurations for our Top Action commands.
 
-> Note: `getTopActionsConfiguration` must be defined as public on your web part's class.
+> [!NOTE]
+> `getTopActionsConfiguration` must be defined as public on your web part's class.
 
 ```typescript
 import { ITopActions } from '@microsoft/sp-top-actions';
@@ -38,7 +39,7 @@ public getTopActionsConfiguration(): ITopActions | undefined {
 }
 ```
 
-### 3. Define your toolbar's user interface
+### Define your toolbar's user interface
 
 The `topActions` array is an ordered list of controls to render in the web part toolbar. In the example below we are defining one top action as a button interface.
 
@@ -59,8 +60,9 @@ return {
 }
 ```
 
-### 4. Execute the command when the user interacts
-The previous step demonstrated how to get a button to display in the web part's toolbar. Now we will perform an action when the user clicks the button. Note that `actionName` was defined as `targetProperty` in the last step and since this is a button we can ignore the `newValue` that comes in.
+### Execute the command when the user interacts
+
+The previous step demonstrated how to get a button to display in the web part's toolbar. Now we will perform an action when the user selects the button. Note that `actionName` was defined as `targetProperty` in the last step and since this is a button we can ignore the `newValue` that comes in.
 
 ```typescript
 return {
@@ -73,10 +75,14 @@ return {
   }
 }
 ```
-> Common pitfalls when implementing the `onExecute` command, is not syncing the new state with the web part properties and/or not refreshing or re-rendering the web part.
+
+> [!TIP]
+> Common pitfall when implementing the `onExecute` command, is not syncing the new state with the web part properties and/or not refreshing or re-rendering the web part.
 
 ## Code Snippets
+
 ### Button command
+
 The type interace for a button is similar to the property panel's button (`IPropertyPaneButtonProps`).
 
 ```typescript
@@ -104,8 +110,9 @@ public getTopActionsConfiguration(): ITopActions | undefined {
 }
 ```
 
-### Drop down command
-The type interace for a drop down is similar to the property panel's choice group (`IPropertyPaneChoiceGroupOption`).
+### Drop-down command
+
+The type interface for a drop-down is similar to the property panel's choice group (`IPropertyPaneChoiceGroupOption`).
 
 ```typescript
 import { ITopActions } from '@microsoft/sp-top-actions';
@@ -137,7 +144,7 @@ public getTopActionsConfiguration(): ITopActions | undefined {
         ]
       }
     }],
-    // for ChoiceGroup drop down, the newValue tells us which option's key was selected
+    // for ChoiceGroup drop-down, the newValue tells us which option's key was selected
     onExecute: (actionName: string, newValue: any) => {
       if (actionName === 'layout') {
         this.setLayout(newValue);
@@ -149,22 +156,19 @@ public getTopActionsConfiguration(): ITopActions | undefined {
 ```
 
 ## Advanced configurations
-For advanced configurations of your top action commands, checkout the type definitions from `@microsoft/sp-property-pane` and `@microsoft/sp-top-actions`. Currently, the two supported top action commands, button and drop down, can be defined using a subset of the types `IPropertyPaneChoiceGroupOption` and `IPropertyPaneButtonProps`.
 
-For `IPropertyPaneButtonProps`, the currently supported properties are `icon`, `text`, `ariaLabel`, `disabled`
+For advanced configurations of your top action commands, checkout the type definitions from `@microsoft/sp-property-pane` and `@microsoft/sp-top-actions`. Currently, the two supported top action commands, button and drop-down, can be defined using a subset of the types `IPropertyPaneChoiceGroupOption` and `IPropertyPaneButtonProps`.
 
-For `IPropertyPaneChoiceGroupOption`, the currently supported porperty is `options` and from that array we support `key`, `text`, `iconProps.officeFabricIconFontName`, `imageSize`, `checked`, `title`
-
-> [!WARNING]
-> The APIs used for Top Actions are subject to change as the feature graduates to stable status.
+* For `IPropertyPaneButtonProps`, the currently supported properties are `icon`, `text`, `ariaLabel`, `disabled`
+* For `IPropertyPaneChoiceGroupOption`, the currently supported porperty is `options` and from that array we support `key`, `text`, `iconProps.officeFabricIconFontName`, `imageSize`, `checked`, `title`
 
 ```typescript
 import { IPropertyPaneButtonProps, IPropertyPaneChoiceGroupOption } from '@microsoft/sp-property-pane'
 import { ITopActions } from '@microsoft/sp-top-actions';
 ```
+
 ### See more
-[Top Actions API](/javascript/api/sp-top-actions)
 
+[Top Actions API](/javascript/api/sp-top-actions)
 [IPropertyPaneButtonProps](/javascript/api/sp-webpart-base/ipropertypanebuttonprops)
-
 [IPropertyPaneChoiceGroupOption](/javascript/api/sp-webpart-base/ipropertypanechoicegroupoption)

docs/toc.yml

@@ -446,14 +446,16 @@
       href: spfx/supported-extensibility-platforms-overview.md
     - name: SharePoint Online
       href: spfx/spfx-sharepoint-online.md
-    - name: SharePoint 2019 & SE support
-      href: spfx/sharepoint-2019-support.md
-    - name: SharePoint 2016 support
-      href: spfx/sharepoint-2016-support.md
     - name: Microsoft Teams
       href: /sharepoint/dev/spfx/build-for-teams-overview
+    - name: Extend Outlook and Office
+      href: /sharepoint/dev/spfx/office/overview
     - name: Microsoft Viva Connections
       href: /sharepoint/dev/spfx/viva/overview-viva-connections
+    - name: SharePoint 2019 & SE support
+      href: spfx/sharepoint-2019-support.md
+    - name: SharePoint 2016 support
+      href: spfx/sharepoint-2016-support.md      
   - name: Release notes & roadmap
     items:
     - name: Overview