From 2338c30df092ac05df393631bb8e59bcd9fec7b0 Mon Sep 17 00:00:00 2001
From: Makoto Morimoto <humbertomakotomorimoto@gmail.com>
Date: Wed, 24 Mar 2021 11:27:06 -0700
Subject: [PATCH 1/8] Autofill: Inherit font-family to prevent defaulting to
 Arial (#17507)

* Autofill: Inherit font-family to prevent defaulting to Arial.

* Change files

* Updating snapshots.
---
 ...-examples-2151236c-fd6b-4527-8944-7a11fce9088e.json |  7 +++++++
 ...periments-99ea7ebe-27e3-46a8-8413-3cb05e0b94ce.json |  7 +++++++
 ...tui-react-f7171097-ecc1-47fe-868e-08023aba68f3.json |  7 +++++++
 .../Announced.SearchResults.Example.tsx.shot           |  5 +++++
 .../__snapshots__/ComboBox.Basic.Example.tsx.shot      | 10 ++++++++++
 .../__snapshots__/ComboBox.Controlled.Example.tsx.shot |  5 +++++
 .../ComboBox.ControlledMulti.Example.tsx.shot          |  5 +++++
 .../ComboBox.CustomStyled.Example.tsx.shot             | 10 ++++++++++
 .../ComboBox.ErrorHandling.Example.tsx.shot            | 10 ++++++++++
 .../__snapshots__/ComboBox.Toggles.Example.tsx.shot    |  5 +++++
 .../ComboBox.Virtualized.Example.tsx.shot              |  5 +++++
 .../ExtendedPeoplePicker.Basic.Example.tsx.shot        | 10 ++++++++++
 .../ExtendedPeoplePicker.Controlled.Example.tsx.shot   | 10 ++++++++++
 .../PeoplePicker.Compact.Example.tsx.shot              |  5 +++++
 .../PeoplePicker.Controlled.Example.tsx.shot           |  5 +++++
 .../PeoplePicker.LimitedSearch.Example.tsx.shot        |  5 +++++
 .../__snapshots__/PeoplePicker.List.Example.tsx.shot   |  5 +++++
 .../__snapshots__/PeoplePicker.Normal.Example.tsx.shot |  5 +++++
 .../PeoplePicker.PreselectedItems.Example.tsx.shot     |  5 +++++
 .../PeoplePicker.ProcessSelection.Example.tsx.shot     |  5 +++++
 .../__snapshots__/TagPicker.Basic.Example.tsx.shot     | 10 ++++++++++
 .../Pagination/__snapshots__/Pagination.test.tsx.snap  |  5 +++++
 .../__snapshots__/UnifiedPeoplePicker.test.tsx.snap    | 10 ++++++++++
 .../__snapshots__/UnifiedPicker.test.tsx.snap          | 10 ++++++++++
 packages/react/src/components/Autofill/Autofill.tsx    |  2 ++
 .../ComboBox/__snapshots__/ComboBox.test.tsx.snap      |  8 ++++++++
 .../__snapshots__/BaseExtendedPicker.test.tsx.snap     | 10 ++++++++++
 .../__snapshots__/PeoplePicker.test.tsx.snap           | 10 ++++++++++
 .../TagPicker/__snapshots__/TagPicker.test.tsx.snap    | 10 ++++++++++
 .../pickers/__snapshots__/BasePicker.test.tsx.snap     | 10 ++++++++++
 30 files changed, 216 insertions(+)
 create mode 100644 change/@fluentui-react-examples-2151236c-fd6b-4527-8944-7a11fce9088e.json
 create mode 100644 change/@fluentui-react-experiments-99ea7ebe-27e3-46a8-8413-3cb05e0b94ce.json
 create mode 100644 change/@fluentui-react-f7171097-ecc1-47fe-868e-08023aba68f3.json

diff --git a/change/@fluentui-react-examples-2151236c-fd6b-4527-8944-7a11fce9088e.json b/change/@fluentui-react-examples-2151236c-fd6b-4527-8944-7a11fce9088e.json
new file mode 100644
index 00000000000000..a528af0851f420
--- /dev/null
+++ b/change/@fluentui-react-examples-2151236c-fd6b-4527-8944-7a11fce9088e.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Autofill: Inherit font-family to prevent defaulting to Arial.",
+  "packageName": "@fluentui/react-examples",
+  "email": "Humberto.Morimoto@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-experiments-99ea7ebe-27e3-46a8-8413-3cb05e0b94ce.json b/change/@fluentui-react-experiments-99ea7ebe-27e3-46a8-8413-3cb05e0b94ce.json
new file mode 100644
index 00000000000000..68a3882169aa3d
--- /dev/null
+++ b/change/@fluentui-react-experiments-99ea7ebe-27e3-46a8-8413-3cb05e0b94ce.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Updating snapshots.",
+  "packageName": "@fluentui/react-experiments",
+  "email": "Humberto.Morimoto@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-f7171097-ecc1-47fe-868e-08023aba68f3.json b/change/@fluentui-react-f7171097-ecc1-47fe-868e-08023aba68f3.json
new file mode 100644
index 00000000000000..42ca8cd743f552
--- /dev/null
+++ b/change/@fluentui-react-f7171097-ecc1-47fe-868e-08023aba68f3.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Autofill: Inherit font-family to prevent defaulting to Arial.",
+  "packageName": "@fluentui/react",
+  "email": "Humberto.Morimoto@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-examples/src/react/__snapshots__/Announced.SearchResults.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/Announced.SearchResults.Example.tsx.shot
index 5d39a9d0c0c0bb..aa851cd479b6ed 100644
--- a/packages/react-examples/src/react/__snapshots__/Announced.SearchResults.Example.tsx.shot
+++ b/packages/react-examples/src/react/__snapshots__/Announced.SearchResults.Example.tsx.shot
@@ -132,6 +132,11 @@ exports[`Component Examples renders Announced.SearchResults.Example.tsx correctl
             onKeyDown={[Function]}
             role="textbox"
             spellCheck={false}
+            style={
+              Object {
+                "fontFamily": "inherit",
+              }
+            }
             value=""
           />
         </div>
diff --git a/packages/react-examples/src/react/__snapshots__/ComboBox.Basic.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/ComboBox.Basic.Example.tsx.shot
index 42ba67fa73ea71..83d50f817a95fb 100644
--- a/packages/react-examples/src/react/__snapshots__/ComboBox.Basic.Example.tsx.shot
+++ b/packages/react-examples/src/react/__snapshots__/ComboBox.Basic.Example.tsx.shot
@@ -238,6 +238,11 @@ exports[`Component Examples renders ComboBox.Basic.Example.tsx correctly 1`] = `
         onTouchStart={[Function]}
         role="combobox"
         spellCheck={false}
+        style={
+          Object {
+            "fontFamily": "inherit",
+          }
+        }
         type="text"
         value="Option C"
       />
@@ -797,6 +802,11 @@ exports[`Component Examples renders ComboBox.Basic.Example.tsx correctly 1`] = `
         onTouchStart={[Function]}
         role="combobox"
         spellCheck={false}
+        style={
+          Object {
+            "fontFamily": "inherit",
+          }
+        }
         type="text"
         value="Option C"
       />
diff --git a/packages/react-examples/src/react/__snapshots__/ComboBox.Controlled.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/ComboBox.Controlled.Example.tsx.shot
index 031ea15c2a1cad..972e3214fcfe6a 100644
--- a/packages/react-examples/src/react/__snapshots__/ComboBox.Controlled.Example.tsx.shot
+++ b/packages/react-examples/src/react/__snapshots__/ComboBox.Controlled.Example.tsx.shot
@@ -258,6 +258,11 @@ exports[`Component Examples renders ComboBox.Controlled.Example.tsx correctly 1`
         onTouchStart={[Function]}
         role="combobox"
         spellCheck={false}
+        style={
+          Object {
+            "fontFamily": "inherit",
+          }
+        }
         type="text"
         value="Option C"
       />
diff --git a/packages/react-examples/src/react/__snapshots__/ComboBox.ControlledMulti.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/ComboBox.ControlledMulti.Example.tsx.shot
index 9d41d1e7cbb7a1..9e556bc270c96c 100644
--- a/packages/react-examples/src/react/__snapshots__/ComboBox.ControlledMulti.Example.tsx.shot
+++ b/packages/react-examples/src/react/__snapshots__/ComboBox.ControlledMulti.Example.tsx.shot
@@ -279,6 +279,11 @@ exports[`Component Examples renders ComboBox.ControlledMulti.Example.tsx correct
         onTouchStart={[Function]}
         role="combobox"
         spellCheck={false}
+        style={
+          Object {
+            "fontFamily": "inherit",
+          }
+        }
         type="text"
         value="Option C, Option D"
       />
diff --git a/packages/react-examples/src/react/__snapshots__/ComboBox.CustomStyled.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/ComboBox.CustomStyled.Example.tsx.shot
index 73b182bc2ed112..9e5ed9fda40079 100644
--- a/packages/react-examples/src/react/__snapshots__/ComboBox.CustomStyled.Example.tsx.shot
+++ b/packages/react-examples/src/react/__snapshots__/ComboBox.CustomStyled.Example.tsx.shot
@@ -258,6 +258,11 @@ exports[`Component Examples renders ComboBox.CustomStyled.Example.tsx correctly
         onTouchStart={[Function]}
         role="combobox"
         spellCheck={false}
+        style={
+          Object {
+            "fontFamily": "inherit",
+          }
+        }
         type="text"
         value="Calibri"
       />
@@ -659,6 +664,11 @@ exports[`Component Examples renders ComboBox.CustomStyled.Example.tsx correctly
         onTouchStart={[Function]}
         role="combobox"
         spellCheck={false}
+        style={
+          Object {
+            "fontFamily": "inherit",
+          }
+        }
         type="text"
         value="Calibri"
       />
diff --git a/packages/react-examples/src/react/__snapshots__/ComboBox.ErrorHandling.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/ComboBox.ErrorHandling.Example.tsx.shot
index 1a21287dc51b2e..e0f06b7725d90d 100644
--- a/packages/react-examples/src/react/__snapshots__/ComboBox.ErrorHandling.Example.tsx.shot
+++ b/packages/react-examples/src/react/__snapshots__/ComboBox.ErrorHandling.Example.tsx.shot
@@ -194,6 +194,11 @@ exports[`Component Examples renders ComboBox.ErrorHandling.Example.tsx correctly
         onTouchStart={[Function]}
         role="combobox"
         spellCheck={false}
+        style={
+          Object {
+            "fontFamily": "inherit",
+          }
+        }
         type="text"
         value="Option B"
       />
@@ -605,6 +610,11 @@ exports[`Component Examples renders ComboBox.ErrorHandling.Example.tsx correctly
         onTouchStart={[Function]}
         role="combobox"
         spellCheck={false}
+        style={
+          Object {
+            "fontFamily": "inherit",
+          }
+        }
         type="text"
         value=""
       />
diff --git a/packages/react-examples/src/react/__snapshots__/ComboBox.Toggles.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/ComboBox.Toggles.Example.tsx.shot
index d87d7fa0f1f644..7b5f68be92a2d6 100644
--- a/packages/react-examples/src/react/__snapshots__/ComboBox.Toggles.Example.tsx.shot
+++ b/packages/react-examples/src/react/__snapshots__/ComboBox.Toggles.Example.tsx.shot
@@ -258,6 +258,11 @@ exports[`Component Examples renders ComboBox.Toggles.Example.tsx correctly 1`] =
         onTouchStart={[Function]}
         role="combobox"
         spellCheck={false}
+        style={
+          Object {
+            "fontFamily": "inherit",
+          }
+        }
         type="text"
         value=""
       />
diff --git a/packages/react-examples/src/react/__snapshots__/ComboBox.Virtualized.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/ComboBox.Virtualized.Example.tsx.shot
index 4a587bf1cd7b7f..f98657461b0148 100644
--- a/packages/react-examples/src/react/__snapshots__/ComboBox.Virtualized.Example.tsx.shot
+++ b/packages/react-examples/src/react/__snapshots__/ComboBox.Virtualized.Example.tsx.shot
@@ -237,6 +237,11 @@ exports[`Component Examples renders ComboBox.Virtualized.Example.tsx correctly 1
       onTouchStart={[Function]}
       role="combobox"
       spellCheck={false}
+      style={
+        Object {
+          "fontFamily": "inherit",
+        }
+      }
       type="text"
       value="Option 547"
     />
diff --git a/packages/react-examples/src/react/__snapshots__/ExtendedPeoplePicker.Basic.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/ExtendedPeoplePicker.Basic.Example.tsx.shot
index 04c079ee636608..c10f44f02c3b8c 100644
--- a/packages/react-examples/src/react/__snapshots__/ExtendedPeoplePicker.Basic.Example.tsx.shot
+++ b/packages/react-examples/src/react/__snapshots__/ExtendedPeoplePicker.Basic.Example.tsx.shot
@@ -73,6 +73,11 @@ exports[`Component Examples renders ExtendedPeoplePicker.Basic.Example.tsx corre
             onKeyDown={[Function]}
             onPaste={[Function]}
             role="combobox"
+            style={
+              Object {
+                "fontFamily": "inherit",
+              }
+            }
             value=""
           />
         </div>
@@ -291,6 +296,11 @@ exports[`Component Examples renders ExtendedPeoplePicker.Basic.Example.tsx corre
             onKeyDown={[Function]}
             onPaste={[Function]}
             role="combobox"
+            style={
+              Object {
+                "fontFamily": "inherit",
+              }
+            }
             value=""
           />
         </div>
diff --git a/packages/react-examples/src/react/__snapshots__/ExtendedPeoplePicker.Controlled.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/ExtendedPeoplePicker.Controlled.Example.tsx.shot
index f7ff7ab64b59ad..f061de3e5f8388 100644
--- a/packages/react-examples/src/react/__snapshots__/ExtendedPeoplePicker.Controlled.Example.tsx.shot
+++ b/packages/react-examples/src/react/__snapshots__/ExtendedPeoplePicker.Controlled.Example.tsx.shot
@@ -73,6 +73,11 @@ exports[`Component Examples renders ExtendedPeoplePicker.Controlled.Example.tsx
             onKeyDown={[Function]}
             onPaste={[Function]}
             role="combobox"
+            style={
+              Object {
+                "fontFamily": "inherit",
+              }
+            }
             value=""
           />
         </div>
@@ -291,6 +296,11 @@ exports[`Component Examples renders ExtendedPeoplePicker.Controlled.Example.tsx
             onKeyDown={[Function]}
             onPaste={[Function]}
             role="combobox"
+            style={
+              Object {
+                "fontFamily": "inherit",
+              }
+            }
             value=""
           />
         </div>
diff --git a/packages/react-examples/src/react/__snapshots__/PeoplePicker.Compact.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/PeoplePicker.Compact.Example.tsx.shot
index c2093e3d396258..e14cde9dbdc856 100644
--- a/packages/react-examples/src/react/__snapshots__/PeoplePicker.Compact.Example.tsx.shot
+++ b/packages/react-examples/src/react/__snapshots__/PeoplePicker.Compact.Example.tsx.shot
@@ -96,6 +96,11 @@ exports[`Component Examples renders PeoplePicker.Compact.Example.tsx correctly 1
             onKeyDown={[Function]}
             role="textbox"
             spellCheck={false}
+            style={
+              Object {
+                "fontFamily": "inherit",
+              }
+            }
             value=""
           />
         </div>
diff --git a/packages/react-examples/src/react/__snapshots__/PeoplePicker.Controlled.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/PeoplePicker.Controlled.Example.tsx.shot
index 1793e02e504e11..9308adb0987943 100644
--- a/packages/react-examples/src/react/__snapshots__/PeoplePicker.Controlled.Example.tsx.shot
+++ b/packages/react-examples/src/react/__snapshots__/PeoplePicker.Controlled.Example.tsx.shot
@@ -96,6 +96,11 @@ exports[`Component Examples renders PeoplePicker.Controlled.Example.tsx correctl
               onKeyDown={[Function]}
               role="textbox"
               spellCheck={false}
+              style={
+                Object {
+                  "fontFamily": "inherit",
+                }
+              }
               value=""
             />
           </div>
diff --git a/packages/react-examples/src/react/__snapshots__/PeoplePicker.LimitedSearch.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/PeoplePicker.LimitedSearch.Example.tsx.shot
index 888868a2f6337a..92e2af22d3dca5 100644
--- a/packages/react-examples/src/react/__snapshots__/PeoplePicker.LimitedSearch.Example.tsx.shot
+++ b/packages/react-examples/src/react/__snapshots__/PeoplePicker.LimitedSearch.Example.tsx.shot
@@ -96,6 +96,11 @@ exports[`Component Examples renders PeoplePicker.LimitedSearch.Example.tsx corre
             onKeyDown={[Function]}
             role="textbox"
             spellCheck={false}
+            style={
+              Object {
+                "fontFamily": "inherit",
+              }
+            }
             value=""
           />
         </div>
diff --git a/packages/react-examples/src/react/__snapshots__/PeoplePicker.List.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/PeoplePicker.List.Example.tsx.shot
index 30a91e5c8f7374..7a50c2e27666fe 100644
--- a/packages/react-examples/src/react/__snapshots__/PeoplePicker.List.Example.tsx.shot
+++ b/packages/react-examples/src/react/__snapshots__/PeoplePicker.List.Example.tsx.shot
@@ -72,6 +72,11 @@ exports[`Component Examples renders PeoplePicker.List.Example.tsx correctly 1`]
           onInput={[Function]}
           onKeyDown={[Function]}
           role="textbox"
+          style={
+            Object {
+              "fontFamily": "inherit",
+            }
+          }
           value=""
         />
       </div>
diff --git a/packages/react-examples/src/react/__snapshots__/PeoplePicker.Normal.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/PeoplePicker.Normal.Example.tsx.shot
index 3fe06b4884ad1d..0c632ef0ff37b1 100644
--- a/packages/react-examples/src/react/__snapshots__/PeoplePicker.Normal.Example.tsx.shot
+++ b/packages/react-examples/src/react/__snapshots__/PeoplePicker.Normal.Example.tsx.shot
@@ -96,6 +96,11 @@ exports[`Component Examples renders PeoplePicker.Normal.Example.tsx correctly 1`
             onKeyDown={[Function]}
             role="textbox"
             spellCheck={false}
+            style={
+              Object {
+                "fontFamily": "inherit",
+              }
+            }
             value=""
           />
         </div>
diff --git a/packages/react-examples/src/react/__snapshots__/PeoplePicker.PreselectedItems.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/PeoplePicker.PreselectedItems.Example.tsx.shot
index e2899246da13e1..41409c8f4f38f4 100644
--- a/packages/react-examples/src/react/__snapshots__/PeoplePicker.PreselectedItems.Example.tsx.shot
+++ b/packages/react-examples/src/react/__snapshots__/PeoplePicker.PreselectedItems.Example.tsx.shot
@@ -1447,6 +1447,11 @@ exports[`Component Examples renders PeoplePicker.PreselectedItems.Example.tsx co
             onKeyDown={[Function]}
             role="textbox"
             spellCheck={false}
+            style={
+              Object {
+                "fontFamily": "inherit",
+              }
+            }
             value=""
           />
         </div>
diff --git a/packages/react-examples/src/react/__snapshots__/PeoplePicker.ProcessSelection.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/PeoplePicker.ProcessSelection.Example.tsx.shot
index a4baa49d5a196e..4cd9c22f1727eb 100644
--- a/packages/react-examples/src/react/__snapshots__/PeoplePicker.ProcessSelection.Example.tsx.shot
+++ b/packages/react-examples/src/react/__snapshots__/PeoplePicker.ProcessSelection.Example.tsx.shot
@@ -96,6 +96,11 @@ exports[`Component Examples renders PeoplePicker.ProcessSelection.Example.tsx co
             onKeyDown={[Function]}
             role="textbox"
             spellCheck={false}
+            style={
+              Object {
+                "fontFamily": "inherit",
+              }
+            }
             value=""
           />
         </div>
diff --git a/packages/react-examples/src/react/__snapshots__/TagPicker.Basic.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/TagPicker.Basic.Example.tsx.shot
index d0002235c96f29..c5d474abd9bfef 100644
--- a/packages/react-examples/src/react/__snapshots__/TagPicker.Basic.Example.tsx.shot
+++ b/packages/react-examples/src/react/__snapshots__/TagPicker.Basic.Example.tsx.shot
@@ -235,6 +235,11 @@ exports[`Component Examples renders TagPicker.Basic.Example.tsx correctly 1`] =
             onKeyDown={[Function]}
             role="textbox"
             spellCheck={false}
+            style={
+              Object {
+                "fontFamily": "inherit",
+              }
+            }
             value=""
           />
         </div>
@@ -337,6 +342,11 @@ exports[`Component Examples renders TagPicker.Basic.Example.tsx correctly 1`] =
             onKeyDown={[Function]}
             role="textbox"
             spellCheck={false}
+            style={
+              Object {
+                "fontFamily": "inherit",
+              }
+            }
             value=""
           />
         </div>
diff --git a/packages/react-experiments/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap b/packages/react-experiments/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap
index cffa7d645c6d64..651d7e99eaeb1a 100644
--- a/packages/react-experiments/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap
+++ b/packages/react-experiments/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap
@@ -1561,6 +1561,11 @@ exports[`Pagination render comboBox Pagination correctly 1`] = `
         onTouchStart={[Function]}
         role="combobox"
         spellCheck={false}
+        style={
+          Object {
+            "fontFamily": "inherit",
+          }
+        }
         type="text"
         value="1"
       />
diff --git a/packages/react-experiments/src/components/UnifiedPicker/UnifiedPeoplePicker/__snapshots__/UnifiedPeoplePicker.test.tsx.snap b/packages/react-experiments/src/components/UnifiedPicker/UnifiedPeoplePicker/__snapshots__/UnifiedPeoplePicker.test.tsx.snap
index e385b9fbba534b..0182a3d7cbcc41 100644
--- a/packages/react-experiments/src/components/UnifiedPicker/UnifiedPeoplePicker/__snapshots__/UnifiedPeoplePicker.test.tsx.snap
+++ b/packages/react-experiments/src/components/UnifiedPicker/UnifiedPeoplePicker/__snapshots__/UnifiedPeoplePicker.test.tsx.snap
@@ -112,6 +112,11 @@ exports[`UnifiedPeoplePicker renders correctly with no items 1`] = `
             onInput={[Function]}
             onKeyDown={[Function]}
             onPaste={[Function]}
+            style={
+              Object {
+                "fontFamily": "inherit",
+              }
+            }
             value=""
           />
         </div>
@@ -879,6 +884,11 @@ exports[`UnifiedPeoplePicker renders correctly with selected and suggested items
               onInput={[Function]}
               onKeyDown={[Function]}
               onPaste={[Function]}
+              style={
+                Object {
+                  "fontFamily": "inherit",
+                }
+              }
               value=""
             />
           </div>
diff --git a/packages/react-experiments/src/components/UnifiedPicker/__snapshots__/UnifiedPicker.test.tsx.snap b/packages/react-experiments/src/components/UnifiedPicker/__snapshots__/UnifiedPicker.test.tsx.snap
index af25ab1563ea47..9e13a3d42d1b04 100644
--- a/packages/react-experiments/src/components/UnifiedPicker/__snapshots__/UnifiedPicker.test.tsx.snap
+++ b/packages/react-experiments/src/components/UnifiedPicker/__snapshots__/UnifiedPicker.test.tsx.snap
@@ -112,6 +112,11 @@ exports[`UnifiedPicker renders correctly with no items 1`] = `
             onInput={[Function]}
             onKeyDown={[Function]}
             onPaste={[Function]}
+            style={
+              Object {
+                "fontFamily": "inherit",
+              }
+            }
             value=""
           />
         </div>
@@ -263,6 +268,11 @@ exports[`UnifiedPicker renders correctly with selected and suggested items 1`] =
               onInput={[Function]}
               onKeyDown={[Function]}
               onPaste={[Function]}
+              style={
+                Object {
+                  "fontFamily": "inherit",
+                }
+              }
               value=""
             />
           </div>
diff --git a/packages/react/src/components/Autofill/Autofill.tsx b/packages/react/src/components/Autofill/Autofill.tsx
index afc5a77f0f5892..4746f7c9e260a7 100644
--- a/packages/react/src/components/Autofill/Autofill.tsx
+++ b/packages/react/src/components/Autofill/Autofill.tsx
@@ -126,12 +126,14 @@ export class Autofill extends React.Component<IAutofillProps, IAutofillState> im
 
   public render(): JSX.Element {
     const nativeProps = getNativeProps<React.InputHTMLAttributes<HTMLInputElement>>(this.props, inputProperties);
+    const style = { ...this.props.style, fontFamily: 'inherit' };
     return (
       <input
         autoCapitalize="off"
         autoComplete="off"
         aria-autocomplete={'both'}
         {...nativeProps}
+        style={style}
         ref={this._inputElement}
         value={this._getDisplayValue()}
         onCompositionStart={this._onCompositionStart}
diff --git a/packages/react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap b/packages/react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap
index dfb0b530f446fd..85d11721cf28b1 100644
--- a/packages/react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap
+++ b/packages/react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap
@@ -207,6 +207,11 @@ exports[`ComboBox Renders correctly 1`] = `
       onTouchStart={[Function]}
       role="combobox"
       spellCheck={false}
+      style={
+        Object {
+          "fontFamily": "inherit",
+        }
+      }
       type="text"
       value="testValue"
     />
@@ -554,6 +559,7 @@ exports[`ComboBox Renders correctly when open 1`] = `
       id="ComboBox0-input"
       role="combobox"
       spellcheck="false"
+      style="font-family: inherit;"
       type="text"
       value="Option 2"
     />
@@ -1323,6 +1329,7 @@ exports[`ComboBox Renders correctly when opened in multi-select mode 1`] = `
       placeholder="Option 2"
       role="combobox"
       spellcheck="false"
+      style="font-family: inherit;"
       type="text"
       value=""
     />
@@ -2218,6 +2225,7 @@ exports[`ComboBox renders with a Keytip correctly 1`] = `
       id="ComboBox0-input"
       role="combobox"
       spellcheck="false"
+      style="font-family: inherit;"
       type="text"
       value=""
     />
diff --git a/packages/react/src/components/ExtendedPicker/__snapshots__/BaseExtendedPicker.test.tsx.snap b/packages/react/src/components/ExtendedPicker/__snapshots__/BaseExtendedPicker.test.tsx.snap
index 8330aeb2f57ec3..08cc9c8155a0be 100644
--- a/packages/react/src/components/ExtendedPicker/__snapshots__/BaseExtendedPicker.test.tsx.snap
+++ b/packages/react/src/components/ExtendedPicker/__snapshots__/BaseExtendedPicker.test.tsx.snap
@@ -51,6 +51,11 @@ exports[`Pickers BasePicker renders BaseExtendedPicker correctly with no items 1
           onKeyDown={[Function]}
           onPaste={[Function]}
           role="combobox"
+          style={
+            Object {
+              "fontFamily": "inherit",
+            }
+          }
           value=""
         />
       </div>
@@ -121,6 +126,11 @@ exports[`Pickers BasePicker renders BaseExtendedPicker correctly with selected a
           onKeyDown={[Function]}
           onPaste={[Function]}
           role="combobox"
+          style={
+            Object {
+              "fontFamily": "inherit",
+            }
+          }
           value=""
         />
       </div>
diff --git a/packages/react/src/components/pickers/PeoplePicker/__snapshots__/PeoplePicker.test.tsx.snap b/packages/react/src/components/pickers/PeoplePicker/__snapshots__/PeoplePicker.test.tsx.snap
index e0eef2cb606f94..c027f8541cbe40 100644
--- a/packages/react/src/components/pickers/PeoplePicker/__snapshots__/PeoplePicker.test.tsx.snap
+++ b/packages/react/src/components/pickers/PeoplePicker/__snapshots__/PeoplePicker.test.tsx.snap
@@ -93,6 +93,11 @@ exports[`PeoplePicker renders correctly 1`] = `
           onKeyDown={[Function]}
           role="textbox"
           spellCheck={false}
+          style={
+            Object {
+              "fontFamily": "inherit",
+            }
+          }
           value=""
         />
       </div>
@@ -653,6 +658,11 @@ exports[`PeoplePicker renders correctly with preselected items 1`] = `
           onKeyDown={[Function]}
           role="textbox"
           spellCheck={false}
+          style={
+            Object {
+              "fontFamily": "inherit",
+            }
+          }
           value=""
         />
       </div>
diff --git a/packages/react/src/components/pickers/TagPicker/__snapshots__/TagPicker.test.tsx.snap b/packages/react/src/components/pickers/TagPicker/__snapshots__/TagPicker.test.tsx.snap
index a327f868926f73..40f941affd1fb7 100644
--- a/packages/react/src/components/pickers/TagPicker/__snapshots__/TagPicker.test.tsx.snap
+++ b/packages/react/src/components/pickers/TagPicker/__snapshots__/TagPicker.test.tsx.snap
@@ -301,6 +301,11 @@ exports[`TagPicker renders correctly 1`] = `
           onKeyDown={[Function]}
           role="textbox"
           spellCheck={false}
+          style={
+            Object {
+              "fontFamily": "inherit",
+            }
+          }
           value=""
         />
       </div>
@@ -610,6 +615,11 @@ exports[`TagPicker renders picker with selected item correctly 1`] = `
           onKeyDown={[Function]}
           role="textbox"
           spellCheck={false}
+          style={
+            Object {
+              "fontFamily": "inherit",
+            }
+          }
           value=""
         />
       </div>
diff --git a/packages/react/src/components/pickers/__snapshots__/BasePicker.test.tsx.snap b/packages/react/src/components/pickers/__snapshots__/BasePicker.test.tsx.snap
index a8c1698c2def31..f0a292256d3df6 100644
--- a/packages/react/src/components/pickers/__snapshots__/BasePicker.test.tsx.snap
+++ b/packages/react/src/components/pickers/__snapshots__/BasePicker.test.tsx.snap
@@ -55,6 +55,11 @@ exports[`BasePicker renders correctly 1`] = `
           onKeyDown={[Function]}
           role="textbox"
           spellCheck={false}
+          style={
+            Object {
+              "fontFamily": "inherit",
+            }
+          }
           value=""
         />
       </div>
@@ -120,6 +125,11 @@ exports[`BasePicker renders with inputProps supply classnames correctly 1`] = `
           placeholder="Bitte einen Benutzer angeben..."
           role="textbox"
           spellCheck={false}
+          style={
+            Object {
+              "fontFamily": "inherit",
+            }
+          }
           value=""
         />
       </div>

From b8e8697d9f3ff285687b7cba27b9ac037a0cb727 Mon Sep 17 00:00:00 2001
From: Kham Udom <37851220+khamudom@users.noreply.github.com>
Date: Wed, 24 Mar 2021 11:36:36 -0700
Subject: [PATCH 2/8] fix: removed SVGs and update fill style in accordion
 (#17527)

* removed SVGs to use the default

* Change files

* set the fill color of the icon in style

* using accentFillRestBehavior.var on fill
---
 ...-199e3bcd-b1b1-4ab4-aba7-c3c11a6d5d60.json |   7 +
 .../accordion-item/accordion-item.styles.ts   |   6 +
 .../src/accordion/fixtures/base.html          | 301 ------------------
 3 files changed, 13 insertions(+), 301 deletions(-)
 create mode 100644 change/@fluentui-web-components-199e3bcd-b1b1-4ab4-aba7-c3c11a6d5d60.json

diff --git a/change/@fluentui-web-components-199e3bcd-b1b1-4ab4-aba7-c3c11a6d5d60.json b/change/@fluentui-web-components-199e3bcd-b1b1-4ab4-aba7-c3c11a6d5d60.json
new file mode 100644
index 00000000000000..3e0fae1045833a
--- /dev/null
+++ b/change/@fluentui-web-components-199e3bcd-b1b1-4ab4-aba7-c3c11a6d5d60.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "removed SVGs to use the default",
+  "packageName": "@fluentui/web-components",
+  "email": "khamu@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/src/accordion/accordion-item/accordion-item.styles.ts b/packages/web-components/src/accordion/accordion-item/accordion-item.styles.ts
index ac6614490d17f4..30a82d8e2a4012 100644
--- a/packages/web-components/src/accordion/accordion-item/accordion-item.styles.ts
+++ b/packages/web-components/src/accordion/accordion-item/accordion-item.styles.ts
@@ -2,6 +2,7 @@ import { css } from '@microsoft/fast-element';
 import { display, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
 import { SystemColors } from '@microsoft/fast-web-utilities';
 import {
+  accentFillRestBehavior,
   neutralDividerRestBehavior,
   neutralFocusBehavior,
   neutralForegroundActiveBehavior,
@@ -85,6 +86,7 @@ export const AccordionItemStyles = css`
         grid-column: 4;
         z-index: 2;
         pointer-events: none;
+        fill: ${accentFillRestBehavior.var};
     }
 
     slot[name="collapsed-icon"] {
@@ -120,6 +122,7 @@ export const AccordionItemStyles = css`
         z-index: 2;
     }
 `.withBehaviors(
+  accentFillRestBehavior,
   neutralDividerRestBehavior,
   neutralForegroundActiveBehavior,
   neutralForegroundFocusBehavior,
@@ -132,6 +135,9 @@ export const AccordionItemStyles = css`
                 border-color: ${SystemColors.Highlight};
                 box-shadow: 0 0 0 calc((var(--focus-outline-width) - var(--outline-width)) * 1px) ${SystemColors.Highlight};
             }
+            .icon {
+              fill: ${SystemColors.ButtonText};
+            }
         `,
   ),
 );
diff --git a/packages/web-components/src/accordion/fixtures/base.html b/packages/web-components/src/accordion/fixtures/base.html
index 3941b944a44f70..cdb17147feba8f 100644
--- a/packages/web-components/src/accordion/fixtures/base.html
+++ b/packages/web-components/src/accordion/fixtures/base.html
@@ -1,9 +1,5 @@
 <fluent-design-system-provider use-defaults>
   <style>
-    .icon {
-      stroke: var(--accent-fill-rest);
-    }
-
     fluent-accordion-item.disabled::part(button) {
       pointer-events: none;
     }
@@ -19,113 +15,14 @@ <h4>Default</h4>
         <button>1</button>
       </div>
       <span slot="heading">Panel one</span>
-      <svg
-        slot="collapsed-icon"
-        class="icon"
-        width="18"
-        height="18"
-        viewBox="0 0 18 18"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <path d="M9 5.44446V12.5556" stroke-linecap="round" stroke-linejoin="round" />
-        <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round" />
-      </svg>
-      <svg
-        slot="expanded-icon"
-        class="icon"
-        width="18"
-        height="18"
-        viewBox="0 0 18 18"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round" />
-      </svg>
       Panel one content
     </fluent-accordion-item>
     <fluent-accordion-item>
       <span slot="heading">Panel two</span>
-      <svg
-        slot="collapsed-icon"
-        class="icon"
-        width="18"
-        height="18"
-        viewBox="0 0 18 18"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <path d="M9 5.44446V12.5556" stroke-linecap="round" stroke-linejoin="round" />
-        <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round" />
-      </svg>
-      <svg
-        slot="expanded-icon"
-        class="icon"
-        width="18"
-        height="18"
-        viewBox="0 0 18 18"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round" />
-      </svg>
       Panel two content
     </fluent-accordion-item>
     <fluent-accordion-item expanded>
       <span slot="heading">Panel three</span>
-      <svg
-        slot="collapsed-icon"
-        class="icon"
-        width="18"
-        height="18"
-        viewBox="0 0 18 18"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <path d="M9 5.44446V12.5556" stroke-linecap="round" stroke-linejoin="round" />
-        <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round" />
-      </svg>
-      <svg
-        slot="expanded-icon"
-        class="icon"
-        width="18"
-        height="18"
-        viewBox="0 0 18 18"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round" />
-      </svg>
       Panel three content
     </fluent-accordion-item>
   </fluent-accordion>
@@ -139,113 +36,14 @@ <h4>Single expand</h4>
         <button>1</button>
       </div>
       <span slot="heading">Panel one</span>
-      <svg
-        slot="collapsed-icon"
-        class="icon"
-        width="18"
-        height="18"
-        viewBox="0 0 18 18"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <path d="M9 5.44446V12.5556" stroke-linecap="round" stroke-linejoin="round" />
-        <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round" />
-      </svg>
-      <svg
-        slot="expanded-icon"
-        class="icon"
-        width="18"
-        height="18"
-        viewBox="0 0 18 18"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round" />
-      </svg>
       Panel one content
     </fluent-accordion-item>
     <fluent-accordion-item class="disabled">
       <span slot="heading">Panel Two</span>
-      <svg
-        slot="collapsed-icon"
-        class="icon"
-        width="18"
-        height="18"
-        viewBox="0 0 18 18"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <path d="M9 5.44446V12.5556" stroke-linecap="round" stroke-linejoin="round" />
-        <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round" />
-      </svg>
-      <svg
-        slot="expanded-icon"
-        class="icon"
-        width="18"
-        height="18"
-        viewBox="0 0 18 18"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round" />
-      </svg>
       Panel two content
     </fluent-accordion-item>
     <fluent-accordion-item>
       <span slot="heading">Panel three</span>
-      <svg
-        slot="collapsed-icon"
-        class="icon"
-        width="18"
-        height="18"
-        viewBox="0 0 18 18"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <path d="M9 5.44446V12.5556" stroke-linecap="round" stroke-linejoin="round" />
-        <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round" />
-      </svg>
-      <svg
-        slot="expanded-icon"
-        class="icon"
-        width="18"
-        height="18"
-        viewBox="0 0 18 18"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round" />
-      </svg>
       Panel three content
     </fluent-accordion-item>
   </fluent-accordion>
@@ -259,39 +57,6 @@ <h4>With disabled item</h4>
         <button>1</button>
       </div>
       <span slot="heading">Panel two</span>
-      <svg
-        slot="collapsed-icon"
-        class="icon"
-        width="18"
-        height="18"
-        viewBox="0 0 18 18"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <path d="M9 5.44446V12.5556" stroke-linecap="round" stroke-linejoin="round" />
-        <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round" />
-      </svg>
-      <svg
-        slot="expanded-icon"
-        class="icon"
-        width="18"
-        height="18"
-        viewBox="0 0 18 18"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round" />
-      </svg>
       Panel one content
     </fluent-accordion-item>
     <fluent-accordion-item class="disabled">
@@ -302,39 +67,6 @@ <h4>With disabled item</h4>
         <button>1</button>
       </div>
       <span slot="heading">Disabled</span>
-      <svg
-        slot="collapsed-icon"
-        class="icon"
-        width="18"
-        height="18"
-        viewBox="0 0 18 18"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <path d="M9 5.44446V12.5556" stroke-linecap="round" stroke-linejoin="round" />
-        <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round" />
-      </svg>
-      <svg
-        slot="expanded-icon"
-        class="icon"
-        width="18"
-        height="18"
-        viewBox="0 0 18 18"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round" />
-      </svg>
       Disabled content
     </fluent-accordion-item>
     <fluent-accordion-item expanded>
@@ -345,39 +77,6 @@ <h4>With disabled item</h4>
         <button>1</button>
       </div>
       <span slot="heading">Panel three</span>
-      <svg
-        slot="collapsed-icon"
-        class="icon"
-        width="18"
-        height="18"
-        viewBox="0 0 18 18"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <path d="M9 5.44446V12.5556" stroke-linecap="round" stroke-linejoin="round" />
-        <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round" />
-      </svg>
-      <svg
-        slot="expanded-icon"
-        class="icon"
-        width="18"
-        height="18"
-        viewBox="0 0 18 18"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round" />
-      </svg>
       Panel three content
     </fluent-accordion-item>
   </fluent-accordion>

From ceb537f6583b8b9853b63a8782f43f1fb4c9594f Mon Sep 17 00:00:00 2001
From: Bernardo Sunderhus <bernardo.sunderhus@gmail.com>
Date: Thu, 25 Mar 2021 00:07:35 +0100
Subject: [PATCH 3/8] Adds react-divider to components (#17540)

---
 ...ct-components-54d685cf-ca44-4a7e-8df0-a140e123bb42.json | 7 +++++++
 packages/react-components/etc/react-components.api.md      | 1 +
 packages/react-components/package.json                     | 1 +
 packages/react-components/src/index.ts                     | 1 +
 4 files changed, 10 insertions(+)
 create mode 100644 change/@fluentui-react-components-54d685cf-ca44-4a7e-8df0-a140e123bb42.json

diff --git a/change/@fluentui-react-components-54d685cf-ca44-4a7e-8df0-a140e123bb42.json b/change/@fluentui-react-components-54d685cf-ca44-4a7e-8df0-a140e123bb42.json
new file mode 100644
index 00000000000000..bdf834757bb9fa
--- /dev/null
+++ b/change/@fluentui-react-components-54d685cf-ca44-4a7e-8df0-a140e123bb42.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Adds react-divider as dependency and re-export it",
+  "packageName": "@fluentui/react-components",
+  "email": "bsunderhus@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/etc/react-components.api.md b/packages/react-components/etc/react-components.api.md
index 911cb873efb91b..69a5c3c7761343 100644
--- a/packages/react-components/etc/react-components.api.md
+++ b/packages/react-components/etc/react-components.api.md
@@ -7,6 +7,7 @@
 
 export * from "@fluentui/react-avatar";
 export * from "@fluentui/react-button";
+export * from "@fluentui/react-divider";
 export * from "@fluentui/react-image";
 export * from "@fluentui/react-link";
 export * from "@fluentui/react-make-styles";
diff --git a/packages/react-components/package.json b/packages/react-components/package.json
index 9f1e5dc5683df6..d1b40e7f6322b9 100644
--- a/packages/react-components/package.json
+++ b/packages/react-components/package.json
@@ -30,6 +30,7 @@
   "dependencies": {
     "@fluentui/react-avatar": "^9.0.0-alpha.14",
     "@fluentui/react-button": "^9.0.0-alpha.14",
+    "@fluentui/react-divider": "^9.0.0-alpha.3",
     "@fluentui/react-image": "^9.0.0-alpha.14",
     "@fluentui/react-link": "^9.0.0-alpha.14",
     "@fluentui/react-make-styles": "^9.0.0-alpha.13",
diff --git a/packages/react-components/src/index.ts b/packages/react-components/src/index.ts
index 68e26cf7174cc6..473f22085a19ec 100644
--- a/packages/react-components/src/index.ts
+++ b/packages/react-components/src/index.ts
@@ -8,3 +8,4 @@ export * from '@fluentui/react-avatar';
 export * from '@fluentui/react-button';
 export * from '@fluentui/react-image';
 export * from '@fluentui/react-link';
+export * from '@fluentui/react-divider';

From f9819c97079f87f98e064821e43abed8f2ef31e5 Mon Sep 17 00:00:00 2001
From: Makoto Morimoto <humbertomakotomorimoto@gmail.com>
Date: Wed, 24 Mar 2021 16:26:37 -0700
Subject: [PATCH 4/8] Button: Adding SPEC.md and MIGRATION.md and updating
 README.md (#17192)

#### Pull request checklist

- [X] Addresses an existing issue: Part of #16746, fixes #16607
- [X] Include a change request file using `$ yarn change`

#### Description of changes

This PR adds the initial SPEC and MIGRATION guide for the button component and updates the README to correctly refer this.

This PR also removes any reference to component tokens in `@fluentui/react-link` until we decide what to do with them and adds the `secondary` prop that was missing into the API.
---
 ...-51931787-5d23-4b96-80f8-13c246bbffc0.json |   7 +
 ...-142f68f1-5738-49a8-a416-b9287b6ba082.json |   7 +
 packages/react-button/README.md               | 127 ++------
 packages/react-button/etc/react-button.api.md |   4 +-
 .../src/components/Button/Button.types.ts     |  90 ++++--
 .../src/components/Button/MIGRATION.md        | 190 ++++++++++++
 .../src/components/Button/SPEC.md             | 287 ++++++++++++++++++
 packages/react-link/README.md                 |   2 +-
 packages/react-link/SPEC.md                   |  77 ++---
 packages/react-link/etc/react-link.api.md     |  16 +-
 .../src/components/Link/Link.types.ts         |  89 ++----
 11 files changed, 638 insertions(+), 258 deletions(-)
 create mode 100644 change/@fluentui-react-button-51931787-5d23-4b96-80f8-13c246bbffc0.json
 create mode 100644 change/@fluentui-react-link-142f68f1-5738-49a8-a416-b9287b6ba082.json
 create mode 100644 packages/react-button/src/components/Button/MIGRATION.md
 create mode 100644 packages/react-button/src/components/Button/SPEC.md

diff --git a/change/@fluentui-react-button-51931787-5d23-4b96-80f8-13c246bbffc0.json b/change/@fluentui-react-button-51931787-5d23-4b96-80f8-13c246bbffc0.json
new file mode 100644
index 00000000000000..d4f9e3047d0b92
--- /dev/null
+++ b/change/@fluentui-react-button-51931787-5d23-4b96-80f8-13c246bbffc0.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Button: Adding SPEC.md and MIGRATION.md and updating README.md",
+  "packageName": "@fluentui/react-button",
+  "email": "Humberto.Morimoto@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-link-142f68f1-5738-49a8-a416-b9287b6ba082.json b/change/@fluentui-react-link-142f68f1-5738-49a8-a416-b9287b6ba082.json
new file mode 100644
index 00000000000000..ff6e16a60dbb97
--- /dev/null
+++ b/change/@fluentui-react-link-142f68f1-5738-49a8-a416-b9287b6ba082.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Link: Removing allusion to component tokens in README.md and Link.types.ts",
+  "packageName": "@fluentui/react-link",
+  "email": "Humberto.Morimoto@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-button/README.md b/packages/react-button/README.md
index 2d296f3703fdfa..f98760e7556311 100644
--- a/packages/react-button/README.md
+++ b/packages/react-button/README.md
@@ -2,124 +2,35 @@
 
 **Button components for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**
 
-**WARNING!** These components are still in active development, and the APIs may change before final release.
+The Button component enables users to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.
 
-To use the Button components:
+## STATUS: WIP 🚧
 
-```js
-import { Button } from '@fluentui/react-button';
-
-const App = () => {
-  return <Button content="hello, world!" />;
-};
-```
-
-## Migration guide
-
-The Button has been completely rewritten to be faster, smaller, and easier to customize compared to the version from `office-ui-fabric-react@7`. By default, Buttons now have no opinion about icons, menuing, or split button behavior, which has led to large bundle and performance hits for the most common cases in the past.
-
-### Component renames
-
-Common buttons now all map to `Button`:
-
-| Old                                              | New                                                           |
-| ------------------------------------------------ | ------------------------------------------------------------- |
-| `<DefaultButton text="Hello, world" />`          | `<Button>Hello, world</Button>`                               |
-| `<PrimaryButton text="Hello, world" />`          | `<Button primary>Hello, world</Button>`                       |
-| `<IconButton iconProps={{ iconName: 'Add' }} />` | `<Button iconOnly subtle icon={ <Icon iconName="Add" /> } />` |
-
-### Toggle buttons
-
-The `ToggleButton` component is an extension of the `Button` and has been separated out to reduce bundle size and performance overhead. The `ToggleButton` respects a `checked` or `defaultChecked` flag.
-
-```jsx
-const App = () => {
-  const [isChecked, setChecked] = React.useState(false);
-
-  return (
-    <ToggleButton checked={checked} onClick={() => setChecked(!isChecked)}>
-      {checked ? 'Pause' : 'Play'}
-    </ToggleButton>
-  );
-};
-```
-
-### Menu buttons
-
-The `MenuButton` component is an extension of the `Button` and has been separated out to reduce bundle size and performance overhead. The `MenuButton` takes in a `menu` prop to provide the menu:
-
-```jsx
-const App = () => {
-  const [ isChecked, setChecked ] = React.useState(false);
-
-  return (
-    <MenuButton
-      iconOnly
-      circular
-      subtle
-      icon={ <EllipsisIcon /> }
-      menu={
-        items: [
-          { key: 'a', ... }
-        ]
-      }
-   />
-  );
-}
-```
-
-### Split menu buttons
-
-The `SplitButton` is now its own component, instead of being baked into the `Button` component itself. This helps to overall reduce the default `Button` complexity, runtime overhead, and bundle size:
+These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.
 
-Before:
-
-```jsx
-<PrimaryButton split onClick={ () => alert('action')} menuProps={{ items: [ ... ] }} text="Hello, world" />
-```
+## Usage
 
-After:
+To import Button:
 
-```jsx
-<SplitButton primary onClick={ () => alert('action')} menu={{ items: [ ... ] }} />
+```js
+import { Button } from '@fluentui/react-button';
 ```
 
-Additional changes:
-
-- Now 2 tab targets rather than 1: The action part of the button and the menu part are now separate focus targets. This helps with predictability for users who want to either execute the action or expand the menu. It also helps with accessibility, as we can keep the action with a normal `button` role, and the menu with an `aria-haspopup` attribute, making it more clear for screen readers to differentiate from a typical menu button.
+Once the Button component graduates to a production release, the component will be available at:
 
-### Slots support
-
-Buttons now support slots. Slot support replaces `onRender*` and `*Props` props. The `iconProps` is an example of this. Before, you would provide the props directly. Now you can provide JSX, which lets the implementation own prop typing:
-
-Before:
-
-```jsx
-<DefaultButton iconProps={{ iconName: 'Add' }}> />
+```js
+import { Button } from '@fluentui/react';
 ```
 
-After:
+### Examples
 
 ```jsx
-<Button icon={<Icon iconName="Add" />} />
+<Button>Text</Button>
+<Button icon={<SVGIcon />} />
+<Button icon={<SVGIcon />}>Text</Button>
+<Button icon={<SVGIcon />} iconPosition="after">Text</Button>
+<Button primary>Text</Button>
+<Button disabled>Text</Button>
+<Button size="small">Text</Button>
+<Button size="large">Text</Button>
 ```
-
-This ensures that `Button` components work not just with Fluent UI icons, but with any other icon set.
-
-### Additional button modifiers and enums
-
-These all apply to `Button`, `ToggleButton`, `MenuButton`, and `SplitButton`:
-| Modifier | Description |
-| ---------- | --------------------------------------------------------------------------------------- |
-| `block` | Stretches the button to the container width. |
-| `circular` | Make the button rounded on the edges (pill button.) |
-| `iconOnly` | Makes the width match the height. Can be combined with circular to make circle buttons. |
-| `subtle` | Makes the button inherit the background color. |
-| `primary` | Uses the brand color to indicate the button is a primary action. |
-| `size` | Controls the size of the button, based on an enum value: `smallest`, `smaller`, `small`, `regular`, `large`, `larger`, `largest`. Defaults to `regular`. |
-
-### Styling changes
-
-- `vertical-align` is now set to `middle` to ensure they align correctly. See https://codesandbox.io/s/align-buttons-middle-6u5nu for an example of why this is important.
-- Focus rectangles have been adjusted to be more visible and consistent with our new focus styling approach (note that not everything has been updated to the 2px black border 1px inverted inner.)
-- Gaps between elements within the button were changed to margins rather than combo of padding/margin.
diff --git a/packages/react-button/etc/react-button.api.md b/packages/react-button/etc/react-button.api.md
index 7c9aeb31e49493..a15353eb600238 100644
--- a/packages/react-button/etc/react-button.api.md
+++ b/packages/react-button/etc/react-button.api.md
@@ -16,7 +16,7 @@ export const Button: React.ForwardRefExoticComponent<import("@fluentui/react-uti
     iconOnly?: boolean | undefined;
     iconPosition?: "after" | "before" | undefined;
     primary?: boolean | undefined;
-    size?: "small" | "large" | undefined;
+    size?: "small" | "medium" | "large" | undefined;
 } & React.RefAttributes<HTMLElement>>;
 
 // @public (undocumented)
@@ -26,7 +26,7 @@ export type ButtonProps = ComponentProps & React.ButtonHTMLAttributes<HTMLElemen
     iconOnly?: boolean;
     iconPosition?: 'before' | 'after';
     primary?: boolean;
-    size?: 'small' | 'large';
+    size?: 'small' | 'medium' | 'large';
 };
 
 // @public
diff --git a/packages/react-button/src/components/Button/Button.types.ts b/packages/react-button/src/components/Button/Button.types.ts
index edeffdd9b9c895..e991d174f0569c 100644
--- a/packages/react-button/src/components/Button/Button.types.ts
+++ b/packages/react-button/src/components/Button/Button.types.ts
@@ -8,52 +8,96 @@ import { ObjectShorthandProps } from '@fluentui/react-utilities';
 export type ButtonProps = ComponentProps &
   React.ButtonHTMLAttributes<HTMLElement> & {
     /**
-     * Shorthand icon. A shorthand prop can be a literal, object, or
-     * JSX. The `children` prop of the object can be a render function,
-     * taking in the original slot component and props.
+     * Icon slot that, if specified, renders an icon either before or after the `children` as specified by the
+     * `iconPosition` prop.
      */
     icon?: ShorthandProps<React.HTMLAttributes<HTMLSpanElement>>;
 
-    // TODO: children needs a new typing to handle render functions along with hook updates for children functionality
-    // children?: ???;
+    // /**
+    //  * Loader slot that, if specified, renders a `loader` before the `icon` and `children` while the `loading` flag
+    //  * is set to `true`.
+    //  */
+    // loader?: ShorthandProps<React.HTMLAttributes<HTMLSpanElement>>;
+
+    // /**
+    //  * A button can fill the width of its container.
+    //  * @default false
+    //  */
+    // block?: boolean;
 
-    // /** A button can appear circular. */
+    // /**
+    //  * A button can have completely rounded corners.
+    //  * @default false
+    //  */
     // circular?: boolean;
 
-    /** A button can show that it cannot be interacted with. */
+    /**
+     * A button can show that it cannot be interacted with.
+     * @default false
+     */
     disabled?: boolean;
 
     // /**
-    // eslint-disable-next-line @fluentui/max-len
-    //  * When set, allows the button to be focusable even when it has been disabled. This is used in scenarios where it is
-    //  * important to keep a consistent tab order for screen reader and keyboard users.
-    //  * @defaultvalue false
+    //  * When set, allows the button to be focusable even when it has been disabled. This is used in scenarios where it
+    //  * is important to keep a consistent tab order for screen reader and keyboard users.
+    //  * @default false
     //  */
     // disabledFocusable?: boolean;
 
-    // /** A button can fill the width of its container. */
-    // block?: boolean;
-
-    /** A button can contain only an icon. */
+    /**
+     * A button can contain only an icon.
+     * @default false
+     */
     iconOnly?: boolean;
 
-    /** An icon button can format its icon to appear before or after its content. */
+    /**
+     * A button can format its icon to appear before or after its content.
+     * @default 'before'
+     */
     iconPosition?: 'before' | 'after';
 
-    // /** A button can show a loading indicator. */
+    // /**
+    //  * A button can show a loading indicator if it is waiting for another action to happen before allowing itself to
+    //  * be interacted with.
+    //  * @default false
+    //  */
     // loading?: boolean;
 
-    /** A button can emphasize that it represents the primary action. */
+    // /**
+    //  * A button can be styled such that it has no background styling and is just emphasized through the styling of
+    //  * its content and borders.
+    //  * Mutually exclusive with `primary`, `subtle` and `transparent`.
+    //  * @default false
+    //  */
+    // outline?: boolean;
+
+    /**
+     * A button can be styled to emphasize that it represents the primary action.
+     * Mutually exclusive with `outline`, `subtle` and `transparent`.
+     * @default false
+     */
     primary?: boolean;
 
-    // /** A button can blend into its background to become less emphasized. */
+    /**
+     * A button supports different sizes.
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium' | 'large';
+
+    // /**
+    //  * A button can be styled to blend into its background and become less emphasized.
+    //  * @default false
+    //  * Mutually exclusive with `outline`, `primary` and `transparent`.
+    //  */
     // subtle?: boolean;
 
-    // /** A button can have no background styling and just be emphasized through its content styling. */
+    // /**
+    //  * A button can be styled such that it has no background or border styling and is just emphasized through its
+    //  * content styling.
+    //  * Mutually exclusive with `outline`, `primary` and `subtle`.
+    //  * @default false
+    //  */
     // transparent?: boolean;
-
-    /** A button can be sized. */
-    size?: 'small' | 'large';
   };
 
 /**
diff --git a/packages/react-button/src/components/Button/MIGRATION.md b/packages/react-button/src/components/Button/MIGRATION.md
new file mode 100644
index 00000000000000..eb42a85ebe984d
--- /dev/null
+++ b/packages/react-button/src/components/Button/MIGRATION.md
@@ -0,0 +1,190 @@
+# Button Migration
+
+## STATUS: WIP 🚧
+
+This Migration guide is a work in progress and is not yet ready for use.
+
+## Migration from v8
+
+### Component renames
+
+Common buttons now all map to `Button`:
+
+| v8 `Button`                                      | Converged `Button`                                   |
+| ------------------------------------------------ | ---------------------------------------------------- |
+| `<DefaultButton text="Hello, world" />`          | `<Button>Hello, world</Button>`                      |
+| `<PrimaryButton text="Hello, world" />`          | `<Button primary>Hello, world</Button>`              |
+| `<IconButton iconProps={{ iconName: 'Add' }} />` | `<Button subtle icon={ <Icon iconName="Add" /> } />` |
+
+### Props that remain as is
+
+- `children`
+- `disabled`
+- `href`
+- `primary`
+
+### Renamed props
+
+- `allowDisabledFocus` => `disabledFocusable`
+- `elementRef` => `ref`
+
+### Props removed because we can get them from HTML props
+
+- `ariaDescription` => Getting it as `aria-description` instead
+- `ariaHidden` => Getting it as `aria-hidden` instead
+- `ariaLabel` => Getting it as `aria-label` instead
+- `className`
+
+### Props removed because they were already deprecated
+
+- `buttonType` => Use correct component instead
+- `description` => Use `secondaryText` in `CompoundButton` instead
+- `renderPersistedMenuHiddenOnMount` => Removed since legacy Edge has been deprecated
+- `rootProps` => Just pass the props instead
+- `toggled` => Use `checked` instead in `ToggleButton`
+
+### Props considered for specific component variant
+
+- `checked` => Considered for `ToggleButton`
+- `menuAs` => Considered for `MenuButton`
+- `menuIconProps` => Considered for `MenuButton`
+- `menuProps` => Considered for `MenuButton`
+- `menuTriggerKeyCode` => Considered for `MenuButton`
+- `onAfterMenuDismiss` => Considered for `MenuButton`
+- `onMenuClick` => Considered for `MenuButton`
+- `onRenderAriaDescription` => Considered for `CompoundButton`
+- `onRenderDescription` => Considered for `CompoundButton`
+- `onRenderMenu` => Considered for `MenuButton`
+- `onRenderMenuIcon` => Considered for `MenuButton`
+- `persistMenu` => Considered for `MenuButton`
+- `primaryActionButtonProps` => Considered for `SplitButton`
+- `primaryDisabled` => Considered for `SplitButton`
+- `secondaryText` => Considered for `CompoundButton`
+- `splitButtonAriaLabel` => Considered for `SplitButton`
+- `splitButtonMenuProps` => Considered for `SplitButton`
+
+### Props no longer supported with an equivalent functionality in converged Button
+
+- `componentRef` => Use regular `ref` instead
+- `iconProps` => Add the icon customized as you want via the `icon` token
+- `keytipProps` => Wrap the component with the `Keytip` component instead
+- `onRenderChildren` => Pass the customized `children` as you want instead
+- `onRenderIcon` => Add the icon customized as you want via the `icon` token
+- `onRenderText` => Add the text customized as you want by passing it as `children` instead
+- `split` => Use `SplitButton` component instead
+- `styles` => Use new styling system via `tokens` instead
+- `text` => Pass the text as `children` instead
+- `toggle` => Use `ToggleButton` component instead
+
+### Props no longer supported without an equivalent functionality in converged Button
+
+- `data`
+- `defaultRender`
+- `getClassNames`
+- `getSplitButtonClassNames`
+- `theme`
+- `uniqueId`
+
+## Migration from v0
+
+### Props that remain as is
+
+- `children`
+- `circular`
+- `disabled`
+- `disabledFocusable`
+- `icon`
+- `iconPosition`
+- `loader`
+- `loading`
+- `primary`
+- `size`
+
+### Renamed props
+
+- `fluid` => `block`
+- `text` => `transparent`
+
+### Props removed because we can get them from HTML props
+
+- `className`
+- `onClick`
+- `onFocus`
+
+### Props no longer supported with an equivalent functionality in converged Button
+
+- `accessibility` => Override accessibility behavior by composing the `Button` how you want
+- `content` => Pass the content as `children` instead
+- `secondary` => Use the `Button` as it comes by default instead
+
+### Props TBD
+
+- `iconOnly`
+- `inverted`
+
+## Property mapping
+
+| v8 `Button`                        | v0 `Button`         | Converged `Button`  |
+| ---------------------------------- | ------------------- | ------------------- |
+|                                    | `accessibility`     |                     |
+| `allowDisabledFocus`               | `disabledFocusable` | `disabledFocusable` |
+| `ariaDescription`                  | `aria-description`  | `aria-description`  |
+| `ariaHidden`                       | `aria-hidden`       | `aria-hidden`       |
+| `ariaLabel`                        | `aria-label`        | `aria-label`        |
+| `buttonType`                       |                     |                     |
+| `checked`                          |                     |                     |
+| `children`                         | `children`          | `children`          |
+|                                    | `circular`          | `circular`          |
+| `className`                        | `className`         | `className`         |
+| `componentRef`                     |                     |                     |
+| `data`                             |                     |                     |
+| `defaultRender`                    |                     |                     |
+| `description`                      |                     |                     |
+| `disabled`                         | `disabled`          | `disabled`          |
+| `elementRef`                       |                     | `ref`               |
+|                                    | `fluid`             | `block`             |
+| `getClassNames`                    |                     |                     |
+| `getSplitButtonClassNames`         |                     |                     |
+| `href`                             |                     | `href`              |
+|                                    | `icon`              | `icon`              |
+|                                    | `iconOnly`          | `?`                 |
+|                                    | `iconPosition`      | `iconPosition`      |
+| `iconProps`                        |                     |                     |
+|                                    | `inverted`          | `?`                 |
+| `keytipProps`                      |                     |                     |
+|                                    | `loader`            | `loader`            |
+|                                    | `loading`           | `loading`           |
+| `menuAs`                           |                     |                     |
+| `menuIconProps`                    |                     |                     |
+| `menuProps`                        |                     |                     |
+| `menuTriggerKeyCode`               |                     |                     |
+| `onAfterMenuDismiss`               |                     |                     |
+| `onClick`                          | `onClick`           | `onClick`           |
+| `onFocus`                          | `onFocus`           | `onFocus`           |
+| `onMenuClick`                      |                     |                     |
+| `onRenderAriaDescription`          |                     |                     |
+| `onRenderChildren`                 |                     |                     |
+| `onRenderDescription`              |                     |                     |
+| `onRenderIcon`                     |                     |                     |
+| `onRenderMenu`                     |                     |                     |
+| `onRenderMenuIcon`                 |                     |                     |
+| `onRenderText`                     |                     |                     |
+| `persistMenu`                      |                     |                     |
+| `primary`                          | `primary`           | `primary`           |
+| `primaryActionButtonProps`         |                     |                     |
+| `primaryDisabled`                  |                     |                     |
+| `renderPersistedMenuHiddenOnMount` |                     |                     |
+| `rootProps`                        |                     |                     |
+|                                    | `secondary`         |                     |
+| `secondaryText`                    |                     |                     |
+|                                    | `size`              | `size`              |
+| `split`                            |                     |                     |
+| `splitButtonAriaLabel`             |                     |                     |
+| `splitButtonMenuProps`             |                     |                     |
+| `styles`                           |                     |                     |
+| `text`                             | `content`           |                     |
+|                                    | `text`              | `transparent`       |
+| `theme`                            |                     |                     |
+| `toggle`                           |                     |                     |
+| `toggled`                          |                     |                     |
+| `uniqueId`                         |                     |                     |
diff --git a/packages/react-button/src/components/Button/SPEC.md b/packages/react-button/src/components/Button/SPEC.md
new file mode 100644
index 00000000000000..06b588f00d1d2e
--- /dev/null
+++ b/packages/react-button/src/components/Button/SPEC.md
@@ -0,0 +1,287 @@
+# Button
+
+**GitHub Epic issue** - [Button Convergence #16746](https://github.com/microsoft/fluentui/issues/16746)
+
+## Background
+
+The `Button` component enables users to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.
+
+## Prior Art
+
+### Open UI
+
+The Open UI [Button Research](https://open-ui.org/components/button) page, shows how the `Button` component is used in UI platforms across the web. While there is consensus about some of the basic features that the `Button` needs to support the more advanced features and the variants presented differ significantly among the different UI platforms.
+
+### Comparison of v8 and v0
+
+The existing components are:
+
+- v8 - [Button](https://developer.microsoft.com/en-us/fluentui#/controls/web/button)
+- v0 - [Button](https://fluentsite.z22.web.core.windows.net/0.52.1/components/button/definition)
+
+## Sample Code
+
+Basic examples:
+
+```jsx
+<Button>Text</Button>
+<Button icon={<SVGIcon />} />
+<Button icon={<SVGIcon />}>Text</Button>
+<Button icon={<SVGIcon />} iconPosition="after">Text</Button>
+<Button primary>Text</Button>
+<Button disabled>Text</Button>
+<Button size="small">Text</Button>
+<Button size="large">Text</Button>
+```
+
+## Variants
+
+### Visual appearance
+
+The `Button` component has five decoration variants depending on where it's being used:
+
+- `Default`: The `Button` is rendered with its default styling indicating a trigger for an action.
+- `Outline`: The `Button` is styled such that it has no background styling and is just emphasized through the styling of its content and borders.
+- `Primary`: The `Button` is styled to emphasize that it represents the primary action.
+- `Subtle`: The `Button` is styled to blend into its background to become less emphasized.
+- `Transparent`: The `Button` is styled such that it has no background or border styling and is just emphasized through its content styling.
+
+### Icon
+
+The `Button` component can include an `icon` that appears before or after its `children`. If an `icon` is provided without any `children`, then the `Button` becomes an icon-only `Button`.
+
+### Circular
+
+The `Button` component can have completely rounded corners as opposed to the default slightly rounded ones.
+
+### Sizes
+
+The `Button` component supports different sizing with at least three different sizes: `small`, `medium` (default) and `large`.
+
+### Block
+
+The `Button` component can completely fill the width of its container.
+
+### Loading
+
+The `Button` component can be loading if it's waiting for another action to occur before allowing itself to be interacted with.
+
+## API
+
+### Slots
+
+- `root` - The outer container representing the `Button` itself that wraps everything passed via the `children` prop.
+- `icon` - If specified, renders an `icon` either before or after the `children` as specified by the `iconPosition` prop.
+- `loader` - If specified, renders a `loader` before the `icon` and `children` while the `loading` flag is set to `true`.
+
+### Props
+
+```ts
+export type ButtonProps = ComponentProps &
+  React.ButtonHTMLAttributes<HTMLElement> & {
+    /**
+     * Icon slot that, if specified, renders an icon either before or after the `children` as specified by the
+     * `iconPosition` prop.
+     */
+    icon?: ShorthandProps<React.HTMLAttributes<HTMLSpanElement>>;
+
+    /**
+     * Loader slot that, if specified, renders a `loader` before the `icon` and `children` while the `loading` flag is
+     * set to `true`.
+     */
+    loader?: ShorthandProps<React.HTMLAttributes<HTMLSpanElement>>;
+
+    /**
+     * A button can fill the width of its container.
+     * @default false
+     */
+    block?: boolean;
+
+    /**
+     * A button can have completely rounded corners.
+     * @default false
+     */
+    circular?: boolean;
+
+    /**
+     * A button can show that it cannot be interacted with.
+     * @default false
+     */
+    disabled?: boolean;
+
+    /**
+     * When set, allows the button to be focusable even when it has been disabled. This is used in scenarios where it is
+     * important to keep a consistent tab order for screen reader and keyboard users.
+     * @default false
+     */
+    disabledFocusable?: boolean;
+
+    /**
+     * A button can format its icon to appear before or after its content.
+     * @default 'before'
+     */
+    iconPosition?: 'before' | 'after';
+
+    /**
+     * A button can show a loading indicator if it is waiting for another action to happen before allowing itself to be
+     * interacted with.
+     * @default false
+     */
+    loading?: boolean;
+
+    /**
+     * A button can be styled such that it has no background styling and is just emphasized through the styling of its
+     * content and borders.
+     * Mutually exclusive with `primary`, `subtle` and `transparent`.
+     * @default false
+     */
+    outline?: boolean;
+
+    /**
+     * A button can be styled to emphasize that it represents the primary action.
+     * Mutually exclusive with `outline`, `subtle` and `transparent`.
+     * @default false
+     */
+    primary?: boolean;
+
+    /**
+     * A button supports different sizes.
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium' | 'large';
+
+    /**
+     * A button can be styled to blend into its background and become less emphasized.
+     * Mutually exclusive with `outline`, `primary` and `transparent`.
+     * @default false
+     */
+    subtle?: boolean;
+
+    /**
+     * A button can be styled such that it has no background or border styling and is just emphasized through its
+     * content styling.
+     * Mutually exclusive with `outline`, `primary` and `subtle`.
+     * @default false
+     */
+    transparent?: boolean;
+  };
+```
+
+### Styling Tokens
+
+TBD once we decide on component tokens work.
+
+## Structure
+
+For `Buttons` rendering as `<button>`:
+
+_Icon before children:_
+
+```tsx
+<button class="root" href={href}>
+  <span class="loader" />
+  <span class="icon" />
+  {children}
+</button>
+```
+
+_Icon after children:_
+
+```tsx
+<button class="root" href={href}>
+  <span class="loader" />
+  {children}
+  <span class="icon" />
+</button>
+```
+
+For `Buttons` rendering as anything other than `<button>` (the example below uses `<div>`):
+
+```tsx
+<div class="root" href={href}>
+  <span class="loader" />
+  <span class="icon" />
+  {children}
+</div>
+```
+
+_Icon after children:_
+
+```tsx
+<div class="root" href={href}>
+  <span class="loader" />
+  {children}
+  <span class="icon" />
+</div>
+```
+
+## Migration
+
+See [MIGRATION.md](https://github.com/microsoft/fluentui/blob/master/packages/react-button/MIGRATION.md).
+
+## Behaviors
+
+### States
+
+The following section describes the different states in which a `Button` can be throughout the course of interaction with it.
+
+#### Enabled state
+
+An enabled `Button` communicates interaction by having styling that invites the user to click/tap on it to trigger an action.
+
+#### Disabled state
+
+A disabled `Button` is non-interactive, disallowing the user to click/tap on it to trigger an action.
+
+#### Hovered state
+
+A hovered `Button` changes styling to communicate that the user has placed a cursor above it.
+
+#### Focused state
+
+A focused `Button` changes styling to communicate that the user has placed keyboard focus on it. This styling is usually the same to the one in the hovered state plus extra styling on the outline to indicate keyboard focus has been placed on the component.
+
+#### Pressed state
+
+A pressed `Button` changes styling to communicate that the user is currently pressing it.
+
+#### Loading state
+
+A loading `Button` renders a `loader` before all the other content to indicate that it is waiting for another action before allowing itself to be interacted with.
+
+### Interaction
+
+#### Keyboard interaction
+
+The following is a set of keys that interact with the `Button` component:
+
+| Key                      | Description                            |
+| ------------------------ | -------------------------------------- |
+| `Enter`                  | Executes the `Button` action.          |
+| `Space`                  | Executes the `Button` action.          |
+| `Shift + F10` (Optional) | Opens a context menu for the `Button`. |
+
+#### Cursor interaction
+
+- `mouseenter`: Should immediately change the styling of the `Button` so that it appears to be hovered.
+- `mouseleave`: Should immediately remove the hovered styling of the `Button`.
+- `mouseup`: If triggered while cursor is still inside of the `Button's` boundaries, then it should execute the `Button` and move focus to its target.
+
+#### Touch interaction
+
+The same behavior as above translated for touch events. This means that there is no equivalent for `mouseenter` and `mouseleave`, which makes it so that the hovered state cannot be accessed.
+
+## Accessibility
+
+### Relevant documents
+
+- [WAI-ARIA 1.1 Spec](https://www.w3.org/TR/wai-aria-1.1/#button)
+- [WAI-ARIA 1.1 Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.1/#button)
+- [WAI-ARIA 1.2 Spec](https://www.w3.org/TR/wai-aria-1.2/#button)
+- [WAI-ARIA 1.2 Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.2/#button)
+
+### Expected behavior
+
+- Should default to render a native `button` element unless something else has been specified for the `root` slot, in which case `role="button"` should be added to it.
+- Should mix in the native props expected for the `button` native element.
+- Should be keyboard tabbable and focusable.
diff --git a/packages/react-link/README.md b/packages/react-link/README.md
index 065ab659c4ba58..1b32f36fdaa971 100644
--- a/packages/react-link/README.md
+++ b/packages/react-link/README.md
@@ -1,6 +1,6 @@
 # @fluentui/react-link
 
-**React Link components for [Fluent UI](https://dev.microsoft.com/fluentui)**
+**Link components for [Fluent UI](https://dev.microsoft.com/fluentui)**
 
 The Link component references data that a user can follow by clicking or tapping it.
 
diff --git a/packages/react-link/SPEC.md b/packages/react-link/SPEC.md
index 214b42646c8a5a..d359304f8183f1 100644
--- a/packages/react-link/SPEC.md
+++ b/packages/react-link/SPEC.md
@@ -65,11 +65,9 @@ export type LinkProps = ComponentProps &
     href?: string;
 
     /**
-     * Where to open the linked URL. Common values are `_blank` (a new tab or window),
-     * `_self` (the current window/context), `_parent`, and `_top`.
-     * This prop is only applied if `href` is set.
+     * Click handler for the link.
      */
-    target?: string;
+    onClick?: (event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement | HTMLElement>) => void;
 
     /**
      * Relationship to the linked URL (can be a space-separated list).
@@ -79,72 +77,49 @@ export type LinkProps = ComponentProps &
     rel?: string;
 
     /**
-     * Click handler for the link.
+     * Where to open the linked URL. Common values are `_blank` (a new tab or window),
+     * `_self` (the current window/context), `_parent`, and `_top`.
+     * This prop is only applied if `href` is set.
      */
-    onClick?: (event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement | HTMLElement>) => void;
+    target?: string;
+
+    /**
+     * Built-in HTML attribute with different behavior depending on how the link is rendered.
+     * If rendered as `<a>`, hints at the MIME type.
+     * If rendered as `<button>`, override the type of button (`button` is the default).
+     */
+    type?: string;
 
     /**
      * Whether the link is disabled.
-     * @defaultvalue false
+     * @default false
      */
     disabled?: boolean;
 
     /**
      * When set, allows the link to be focusable even when it has been disabled. This is used in scenarios where it is
      * important to keep a consistent tab order for screen reader and keyboard users.
-     * @defaultvalue false
+     * @default false
      */
     disabledFocusable?: boolean;
 
-    /**
-     * Built-in HTML attribute with different behavior depending on how the link is rendered.
-     * If rendered as `<a>`, hints at the MIME type.
-     * If rendered as `<button>`, override the type of button (`button` is the default).
-     */
-    type?: string;
-
     /**
      * If true, changes styling when the link is being used alongside other text content.
+     * @default false
      */
     inline?: boolean;
 
-    /** Style tokens */
-    tokens?: RecursivePartial<LinkTokens>;
+    /**
+     * If true, changes the link styling to emphasize that it represents an alternative action.
+     * @default false
+     */
+    secondary?: boolean;
   };
 ```
 
 ### Styling Tokens
 
-```tsx
-export type LinkTokenSet = ColorTokens &
-  FontTokens & {
-    // The text decoration used for the link in its default state.
-    textDecoration?: string;
-
-    // The set of color tokens that are applied when the link has been visited.
-    visited?: ColorTokenSet;
-
-    // The text decoration used for the link when it is being focused.
-    focused?: {
-      textDecoration: string;
-    };
-
-    // The text decoration used for the link when it is being hovered.
-    hovered?: {
-      textDecoration: string;
-    };
-
-    // The text decoration used for the link when it is being pressed.
-    pressed?: {
-      textDecoration: string;
-    };
-
-    // The text decoration used for the link when it is in a disabled state.
-    disabled?: {
-      textDecoration: string;
-    };
-  };
-```
+TBD once we decide on component tokens work.
 
 ## Structure
 
@@ -204,10 +179,10 @@ A visited `Link` changes styling to communicate that the user has already intera
 
 The following is a set of keys that interact with the `Link` component:
 
-| Key                      | Description                                            |
-| ------------------------ | ------------------------------------------------------ |
-| `Enter`                  | Executes the `Link` and moves focus to the its target. |
-| `Shift + F10` (Optional) | Opens a context menu for the `Link`.                   |
+| Key                      | Description                                        |
+| ------------------------ | -------------------------------------------------- |
+| `Enter`                  | Executes the `Link` and moves focus to its target. |
+| `Shift + F10` (Optional) | Opens a context menu for the `Link`.               |
 
 #### Cursor interaction
 
diff --git a/packages/react-link/etc/react-link.api.md b/packages/react-link/etc/react-link.api.md
index 5c5db0533191bd..6fa2ab30224d5d 100644
--- a/packages/react-link/etc/react-link.api.md
+++ b/packages/react-link/etc/react-link.api.md
@@ -9,28 +9,28 @@ import * as React from 'react';
 
 // @public
 export const Link: React.ForwardRefExoticComponent<import("@fluentui/react-utilities").ComponentProps & React.AnchorHTMLAttributes<HTMLElement | HTMLAnchorElement | HTMLButtonElement> & Pick<React.ButtonHTMLAttributes<HTMLElement | HTMLAnchorElement | HTMLButtonElement>, "disabled" | "hidden" | "dir" | "form" | "slot" | "style" | "title" | "color" | "children" | "className" | "id" | "lang" | "name" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "value" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget"> & {
-    disabled?: boolean | undefined;
-    disabledFocusable?: boolean | undefined;
     href?: string | undefined;
-    inline?: boolean | undefined;
     onClick?: ((event: React.MouseEvent<HTMLElement | HTMLAnchorElement | HTMLButtonElement, MouseEvent>) => void) | undefined;
-    secondary?: boolean | undefined;
     rel?: string | undefined;
     target?: string | undefined;
     type?: string | undefined;
+    disabled?: boolean | undefined;
+    disabledFocusable?: boolean | undefined;
+    inline?: boolean | undefined;
+    secondary?: boolean | undefined;
 } & React.RefAttributes<HTMLElement>>;
 
 // @public (undocumented)
 export type LinkProps = ComponentProps & React.AnchorHTMLAttributes<HTMLAnchorElement | HTMLButtonElement | HTMLElement> & Omit<React.ButtonHTMLAttributes<HTMLAnchorElement | HTMLButtonElement | HTMLElement>, 'type'> & {
-    disabled?: boolean;
-    disabledFocusable?: boolean;
     href?: string;
-    inline?: boolean;
     onClick?: (event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement | HTMLElement>) => void;
-    secondary?: boolean;
     rel?: string;
     target?: string;
     type?: string;
+    disabled?: boolean;
+    disabledFocusable?: boolean;
+    inline?: boolean;
+    secondary?: boolean;
 };
 
 // @public
diff --git a/packages/react-link/src/components/Link/Link.types.ts b/packages/react-link/src/components/Link/Link.types.ts
index 3d2f84c69caf8f..594c4002abacb3 100644
--- a/packages/react-link/src/components/Link/Link.types.ts
+++ b/packages/react-link/src/components/Link/Link.types.ts
@@ -7,41 +7,17 @@ import { ComponentProps } from '@fluentui/react-utilities';
 export type LinkProps = ComponentProps &
   React.AnchorHTMLAttributes<HTMLAnchorElement | HTMLButtonElement | HTMLElement> &
   Omit<React.ButtonHTMLAttributes<HTMLAnchorElement | HTMLButtonElement | HTMLElement>, 'type'> & {
-    /**
-     * Whether the link is disabled.
-     * @defaultvalue false
-     */
-    disabled?: boolean;
-
-    /**
-     * When set, allows the link to be focusable even when it has been disabled. This is used in scenarios where it is
-     * important to keep a consistent tab order for screen reader and keyboard users.
-     * @defaultvalue false
-     */
-    disabledFocusable?: boolean;
-
     /**
      * URL the link points to. If not provided, the link renders as a button (unless that behavior is
      * overridden using `as`).
      */
     href?: string;
 
-    /**
-     * If true, changes styling when the link is being used alongside other text content.
-     */
-    inline?: boolean;
-
     /**
      * Click handler for the link.
      */
     onClick?: (event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement | HTMLElement>) => void;
 
-    /**
-     * If true, changes the link styling to emphasize that it represents an alternative action.
-     * @defaultvalue false
-     */
-    secondary?: boolean;
-
     /**
      * Relationship to the linked URL (can be a space-separated list).
      * Most common values are `noreferrer` and/or `noopener`.
@@ -63,50 +39,33 @@ export type LinkProps = ComponentProps &
      */
     type?: string;
 
-    /** Style tokens */
-    // tokens?: RecursivePartial<LinkTokens>;
+    /**
+     * Whether the link is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+
+    /**
+     * When set, allows the link to be focusable even when it has been disabled. This is used in scenarios where it is
+     * important to keep a consistent tab order for screen reader and keyboard users.
+     * @default false
+     */
+    disabledFocusable?: boolean;
+
+    /**
+     * If true, changes styling when the link is being used alongside other text content.
+     * @default false
+     */
+    inline?: boolean;
+
+    /**
+     * If true, changes the link styling to emphasize that it represents an alternative action.
+     * @default false
+     */
+    secondary?: boolean;
   };
 
 /**
  * {@docCategory Link}
  */
 export interface LinkState extends LinkProps {}
-
-// /**
-//  * {@docCategory Link}
-//  */
-// export type LinkTokens = ColorTokens &
-//   FontTokens & {
-//     // The text decoration used for the link in its default state.
-//     textDecoration?: string;
-
-//     // The set of color tokens that are applied when the link has been visited.
-//     visited?: ColorTokenSet;
-
-//     // The text decoration used for the link when it is being focused.
-//     focused?: {
-//       textDecoration: string;
-//     };
-
-//     // The text decoration used for the link when it is being hovered.
-//     hovered?: {
-//       textDecoration: string;
-//     };
-
-//     // The text decoration used for the link when it is being pressed.
-//     pressed?: {
-//       textDecoration: string;
-//     };
-
-//     // The text decoration used for the link when it is in a disabled state.
-//     disabled?: {
-//       textDecoration: string;
-//     };
-//   };
-
-// /**
-//  * {@docCategory Link}
-//  */
-// export type LinkVariants<TTokens = LinkTokens> = {
-//   root?: TTokens;
-// };

From 31ff08b1d7ca1aded8f2f42d5d90fbb3146b5549 Mon Sep 17 00:00:00 2001
From: Fluent UI Build <fluentui-internal@service.microsoft.com>
Date: Thu, 25 Mar 2021 07:33:25 +0000
Subject: [PATCH 5/8] applying package updates

---
 apps/a11y-tests/CHANGELOG.json                |  15 ++
 apps/a11y-tests/CHANGELOG.md                  |  11 +-
 apps/a11y-tests/package.json                  |   2 +-
 .../codesandbox-react-template/CHANGELOG.json |  15 ++
 apps/codesandbox-react-template/CHANGELOG.md  |  11 +-
 apps/codesandbox-react-template/package.json  |   2 +-
 apps/perf-test/CHANGELOG.json                 |  53 +++++++
 apps/perf-test/CHANGELOG.md                   |  20 ++-
 apps/perf-test/package.json                   |  14 +-
 apps/public-docsite-resources/CHANGELOG.json  |  23 +++
 apps/public-docsite-resources/CHANGELOG.md    |  11 +-
 apps/public-docsite-resources/package.json    |  16 +-
 apps/public-docsite/CHANGELOG.json            |  23 +++
 apps/public-docsite/CHANGELOG.md              |  11 +-
 apps/public-docsite/package.json              |  16 +-
 apps/server-rendered-app/CHANGELOG.json       |  15 ++
 apps/server-rendered-app/CHANGELOG.md         |  11 +-
 apps/server-rendered-app/package.json         |   2 +-
 apps/ssr-tests/CHANGELOG.json                 |  15 ++
 apps/ssr-tests/CHANGELOG.md                   |  11 +-
 apps/ssr-tests/package.json                   |   4 +-
 apps/theming-designer/CHANGELOG.json          |  15 ++
 apps/theming-designer/CHANGELOG.md            |  11 +-
 apps/theming-designer/package.json            |   4 +-
 apps/todo-app/CHANGELOG.json                  |  15 ++
 apps/todo-app/CHANGELOG.md                    |  11 +-
 apps/todo-app/package.json                    |   2 +-
 apps/vr-tests/CHANGELOG.json                  |  79 ++++++++++
 apps/vr-tests/CHANGELOG.md                    |  23 ++-
 apps/vr-tests/package.json                    |  22 +--
 ...-1813ed49-7109-49e7-a38c-f4a7dccd2102.json |   7 -
 ...-33c916c4-a19e-49d4-bda7-7114467d3250.json |   7 -
 ...-6c1f5066-9db1-435f-b0b0-26db7eb367c8.json |   7 -
 ...-51931787-5d23-4b96-80f8-13c246bbffc0.json |   7 -
 ...-7ead62e3-2881-40ba-8b5f-6dc38469b69d.json |   7 -
 ...-54d685cf-ca44-4a7e-8df0-a140e123bb42.json |   7 -
 ...-2151236c-fd6b-4527-8944-7a11fce9088e.json |   7 -
 ...-69121500-1d87-4c68-995b-458d2e8b4ded.json |   7 -
 ...-99ea7ebe-27e3-46a8-8413-3cb05e0b94ce.json |   7 -
 ...-f7171097-ecc1-47fe-868e-08023aba68f3.json |   7 -
 ...-142f68f1-5738-49a8-a416-b9287b6ba082.json |   7 -
 ...-f446292a-d431-4bc3-b0d5-33e2387c3693.json |   7 -
 ...-576ef601-1824-46f1-ab27-e0dcefea8b34.json |   7 -
 ...-199e3bcd-b1b1-4ab4-aba7-c3c11a6d5d60.json |   7 -
 packages/api-docs/CHANGELOG.json              |  15 ++
 packages/api-docs/CHANGELOG.md                |  11 +-
 packages/api-docs/package.json                |   4 +-
 packages/azure-themes/CHANGELOG.json          |  15 ++
 packages/azure-themes/CHANGELOG.md            |  11 +-
 packages/azure-themes/package.json            |   4 +-
 packages/make-styles/CHANGELOG.json           |  15 ++
 packages/make-styles/CHANGELOG.md             |  11 +-
 packages/make-styles/package.json             |   2 +-
 packages/react-accordion/CHANGELOG.json       |  21 +++
 packages/react-accordion/CHANGELOG.md         |  12 +-
 packages/react-accordion/package.json         |  10 +-
 packages/react-avatar/CHANGELOG.json          |  15 ++
 packages/react-avatar/CHANGELOG.md            |  11 +-
 packages/react-avatar/package.json            |   6 +-
 packages/react-badge/CHANGELOG.json           |  15 ++
 packages/react-badge/CHANGELOG.md             |  11 +-
 packages/react-badge/package.json             |   6 +-
 packages/react-button/CHANGELOG.json          |  21 +++
 packages/react-button/CHANGELOG.md            |  12 +-
 packages/react-button/package.json            |   6 +-
 packages/react-cards/CHANGELOG.json           |  15 ++
 packages/react-cards/CHANGELOG.md             |  11 +-
 packages/react-cards/package.json             |   6 +-
 packages/react-charting/CHANGELOG.json        |  15 ++
 packages/react-charting/CHANGELOG.md          |  11 +-
 packages/react-charting/package.json          |   6 +-
 packages/react-components/CHANGELOG.json      |  15 ++
 packages/react-components/CHANGELOG.md        |  11 +-
 packages/react-components/package.json        |  18 +--
 packages/react-date-time/CHANGELOG.json       |  15 ++
 packages/react-date-time/CHANGELOG.md         |  11 +-
 packages/react-date-time/package.json         |   4 +-
 packages/react-divider/CHANGELOG.json         |  15 ++
 packages/react-divider/CHANGELOG.md           |  11 +-
 packages/react-divider/package.json           |   6 +-
 .../react-docsite-components/CHANGELOG.json   |  15 ++
 .../react-docsite-components/CHANGELOG.md     |  11 +-
 .../react-docsite-components/package.json     |   6 +-
 packages/react-examples/CHANGELOG.json        | 139 ++++++++++++++++++
 packages/react-examples/CHANGELOG.md          |  31 +++-
 packages/react-examples/package.json          |  46 +++---
 packages/react-experiments/CHANGELOG.json     |  15 ++
 packages/react-experiments/CHANGELOG.md       |  11 +-
 packages/react-experiments/package.json       |   4 +-
 packages/react-flex/CHANGELOG.json            |  15 ++
 packages/react-flex/CHANGELOG.md              |  11 +-
 packages/react-flex/package.json              |   6 +-
 .../react-focus-management/CHANGELOG.json     |  15 ++
 packages/react-focus-management/CHANGELOG.md  |  11 +-
 packages/react-focus-management/package.json  |   4 +-
 packages/react-image/CHANGELOG.json           |  15 ++
 packages/react-image/CHANGELOG.md             |  11 +-
 packages/react-image/package.json             |   6 +-
 packages/react-link/CHANGELOG.json            |  15 ++
 packages/react-link/CHANGELOG.md              |  11 +-
 packages/react-link/package.json              |   6 +-
 packages/react-make-styles/CHANGELOG.json     |  15 ++
 packages/react-make-styles/CHANGELOG.md       |  11 +-
 packages/react-make-styles/package.json       |   8 +-
 packages/react-menu/CHANGELOG.json            |  39 +++++
 packages/react-menu/CHANGELOG.md              |  15 +-
 packages/react-menu/package.json              |  10 +-
 packages/react-monaco-editor/CHANGELOG.json   |  15 ++
 packages/react-monaco-editor/CHANGELOG.md     |  11 +-
 packages/react-monaco-editor/package.json     |   4 +-
 packages/react-positioning/CHANGELOG.json     |  15 ++
 packages/react-positioning/CHANGELOG.md       |  11 +-
 packages/react-positioning/package.json       |   6 +-
 packages/react-provider/CHANGELOG.json        |  15 ++
 packages/react-provider/CHANGELOG.md          |  11 +-
 packages/react-provider/package.json          |   8 +-
 packages/react-slider/CHANGELOG.json          |  15 ++
 packages/react-slider/CHANGELOG.md            |  11 +-
 packages/react-slider/package.json            |   4 +-
 packages/react-tabs/CHANGELOG.json            |  15 ++
 packages/react-tabs/CHANGELOG.md              |  11 +-
 packages/react-tabs/package.json              |   4 +-
 packages/react-text/CHANGELOG.json            |  21 +++
 packages/react-text/CHANGELOG.md              |  12 +-
 packages/react-text/package.json              |   4 +-
 packages/react-theme-provider/CHANGELOG.json  |  15 ++
 packages/react-theme-provider/CHANGELOG.md    |  11 +-
 packages/react-theme-provider/package.json    |   4 +-
 packages/react-toggle/CHANGELOG.json          |  15 ++
 packages/react-toggle/CHANGELOG.md            |  11 +-
 packages/react-toggle/package.json            |   4 +-
 packages/react-tooltip/CHANGELOG.json         |  15 ++
 packages/react-tooltip/CHANGELOG.md           |  11 +-
 packages/react-tooltip/package.json           |   8 +-
 packages/react-utilities/CHANGELOG.json       |  15 ++
 packages/react-utilities/CHANGELOG.md         |  11 +-
 packages/react-utilities/package.json         |   2 +-
 packages/react/CHANGELOG.json                 |  15 ++
 packages/react/CHANGELOG.md                   |  11 +-
 packages/react/package.json                   |   2 +-
 packages/storybook/CHANGELOG.json             |  29 ++++
 packages/storybook/CHANGELOG.md               |  16 +-
 packages/storybook/package.json               |  10 +-
 packages/theme-samples/CHANGELOG.json         |  15 ++
 packages/theme-samples/CHANGELOG.md           |  11 +-
 packages/theme-samples/package.json           |   4 +-
 packages/web-components/CHANGELOG.json        |  15 ++
 packages/web-components/CHANGELOG.md          |  11 +-
 packages/web-components/package.json          |   2 +-
 149 files changed, 1638 insertions(+), 305 deletions(-)
 delete mode 100644 change/@fluentui-make-styles-1813ed49-7109-49e7-a38c-f4a7dccd2102.json
 delete mode 100644 change/@fluentui-react-accordion-33c916c4-a19e-49d4-bda7-7114467d3250.json
 delete mode 100644 change/@fluentui-react-accordion-6c1f5066-9db1-435f-b0b0-26db7eb367c8.json
 delete mode 100644 change/@fluentui-react-button-51931787-5d23-4b96-80f8-13c246bbffc0.json
 delete mode 100644 change/@fluentui-react-button-7ead62e3-2881-40ba-8b5f-6dc38469b69d.json
 delete mode 100644 change/@fluentui-react-components-54d685cf-ca44-4a7e-8df0-a140e123bb42.json
 delete mode 100644 change/@fluentui-react-examples-2151236c-fd6b-4527-8944-7a11fce9088e.json
 delete mode 100644 change/@fluentui-react-examples-69121500-1d87-4c68-995b-458d2e8b4ded.json
 delete mode 100644 change/@fluentui-react-experiments-99ea7ebe-27e3-46a8-8413-3cb05e0b94ce.json
 delete mode 100644 change/@fluentui-react-f7171097-ecc1-47fe-868e-08023aba68f3.json
 delete mode 100644 change/@fluentui-react-link-142f68f1-5738-49a8-a416-b9287b6ba082.json
 delete mode 100644 change/@fluentui-react-make-styles-f446292a-d431-4bc3-b0d5-33e2387c3693.json
 delete mode 100644 change/@fluentui-react-utilities-576ef601-1824-46f1-ab27-e0dcefea8b34.json
 delete mode 100644 change/@fluentui-web-components-199e3bcd-b1b1-4ab4-aba7-c3c11a6d5d60.json

diff --git a/apps/a11y-tests/CHANGELOG.json b/apps/a11y-tests/CHANGELOG.json
index 470af54f100c16..c14edd364348f4 100644
--- a/apps/a11y-tests/CHANGELOG.json
+++ b/apps/a11y-tests/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "a11y-tests",
   "entries": [
+    {
+      "date": "Thu, 25 Mar 2021 07:33:24 GMT",
+      "tag": "a11y-tests_v1.0.0",
+      "version": "1.0.0",
+      "comments": {
+        "patch": [
+          {
+            "comment": "Bump @fluentui/react to v8.6.1",
+            "author": "Humberto.Morimoto@microsoft.com",
+            "commit": "2338c30df092ac05df393631bb8e59bcd9fec7b0",
+            "package": "a11y-tests"
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 24 Mar 2021 07:32:21 GMT",
       "tag": "a11y-tests_v1.0.0",
diff --git a/apps/a11y-tests/CHANGELOG.md b/apps/a11y-tests/CHANGELOG.md
index c6de2792c2509d..89bdd5f9731b7b 100644
--- a/apps/a11y-tests/CHANGELOG.md
+++ b/apps/a11y-tests/CHANGELOG.md
@@ -1,11 +1,20 @@
 # Change Log - a11y-tests
 
-This log was last generated on Wed, 24 Mar 2021 07:32:21 GMT and should not be manually modified.
+This log was last generated on Thu, 25 Mar 2021 07:33:24 GMT and should not be manually modified.
 
 <!-- Start content -->
 
 ## [1.0.0](https://github.com/microsoft/fluentui/tree/a11y-tests_v1.0.0)
 
+Thu, 25 Mar 2021 07:33:24 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/a11y-tests_v1.0.0..a11y-tests_v1.0.0)
+
+### Patches
+
+- Bump @fluentui/react to v8.6.1 ([PR #17507](https://github.com/microsoft/fluentui/pull/17507) by Humberto.Morimoto@microsoft.com)
+
+## [1.0.0](https://github.com/microsoft/fluentui/tree/a11y-tests_v1.0.0)
+
 Wed, 24 Mar 2021 07:32:21 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/a11y-tests_v1.0.0..a11y-tests_v1.0.0)
 
diff --git a/apps/a11y-tests/package.json b/apps/a11y-tests/package.json
index f97b42dcba94a5..889fa1de1dba86 100644
--- a/apps/a11y-tests/package.json
+++ b/apps/a11y-tests/package.json
@@ -12,7 +12,7 @@
     "update-snapshots": "just-scripts jest -u"
   },
   "dependencies": {
-    "@fluentui/react": "^8.6.0",
+    "@fluentui/react": "^8.6.1",
     "axe-core": "3.5.0",
     "axe-puppeteer": "^1.0.0",
     "axe-sarif-converter": "^2.0.1",
diff --git a/apps/codesandbox-react-template/CHANGELOG.json b/apps/codesandbox-react-template/CHANGELOG.json
index ff957960469f5f..d993d488568a66 100644
--- a/apps/codesandbox-react-template/CHANGELOG.json
+++ b/apps/codesandbox-react-template/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "codesandbox-react-template",
   "entries": [
+    {
+      "date": "Thu, 25 Mar 2021 07:33:24 GMT",
+      "tag": "codesandbox-react-template_v1.0.0",
+      "version": "1.0.0",
+      "comments": {
+        "patch": [
+          {
+            "comment": "Bump @fluentui/react to v8.6.1",
+            "author": "Humberto.Morimoto@microsoft.com",
+            "commit": "2338c30df092ac05df393631bb8e59bcd9fec7b0",
+            "package": "codesandbox-react-template"
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 24 Mar 2021 07:32:21 GMT",
       "tag": "codesandbox-react-template_v1.0.0",
diff --git a/apps/codesandbox-react-template/CHANGELOG.md b/apps/codesandbox-react-template/CHANGELOG.md
index 0aa44b33849057..eac5858dff1747 100644
--- a/apps/codesandbox-react-template/CHANGELOG.md
+++ b/apps/codesandbox-react-template/CHANGELOG.md
@@ -1,11 +1,20 @@
 # Change Log - codesandbox-react-template
 
-This log was last generated on Wed, 24 Mar 2021 07:32:21 GMT and should not be manually modified.
+This log was last generated on Thu, 25 Mar 2021 07:33:24 GMT and should not be manually modified.
 
 <!-- Start content -->
 
 ## [1.0.0](https://github.com/microsoft/fluentui/tree/codesandbox-react-template_v1.0.0)
 
+Thu, 25 Mar 2021 07:33:24 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/codesandbox-react-template_v1.0.0..codesandbox-react-template_v1.0.0)
+
+### Patches
+
+- Bump @fluentui/react to v8.6.1 ([PR #17507](https://github.com/microsoft/fluentui/pull/17507) by Humberto.Morimoto@microsoft.com)
+
+## [1.0.0](https://github.com/microsoft/fluentui/tree/codesandbox-react-template_v1.0.0)
+
 Wed, 24 Mar 2021 07:32:21 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/codesandbox-react-template_v1.0.0..codesandbox-react-template_v1.0.0)
 
diff --git a/apps/codesandbox-react-template/package.json b/apps/codesandbox-react-template/package.json
index aeabcb4bf9bb82..e2a55633d61c27 100644
--- a/apps/codesandbox-react-template/package.json
+++ b/apps/codesandbox-react-template/package.json
@@ -18,7 +18,7 @@
   },
   "dependencies": {
     "@microsoft/load-themed-styles": "^1.10.26",
-    "@fluentui/react": "^8.6.0",
+    "@fluentui/react": "^8.6.1",
     "react": "16.8.6",
     "react-dom": "16.8.6",
     "tslib": "^1.10.0"
diff --git a/apps/perf-test/CHANGELOG.json b/apps/perf-test/CHANGELOG.json
index 006b80f7bea484..d334e92d50b950 100644
--- a/apps/perf-test/CHANGELOG.json
+++ b/apps/perf-test/CHANGELOG.json
@@ -1,6 +1,59 @@
 {
   "name": "perf-test",
   "entries": [
+    {
+      "date": "Thu, 25 Mar 2021 07:33:24 GMT",
+      "tag": "perf-test_v1.0.0",
+      "version": "1.0.0",
+      "comments": {
+        "prerelease": [
+          {
+            "comment": "Bump @fluentui/make-styles to v9.0.0-alpha.6",
+            "author": "olfedias@microsoft.com",
+            "commit": "66638eed425fff31d69182529b03268836c5e1ec",
+            "package": "perf-test"
+          },
+          {
+            "comment": "Bump @fluentui/react-button to v9.0.0-alpha.15",
+            "author": "Humberto.Morimoto@microsoft.com",
+            "commit": "f9819c97079f87f98e064821e43abed8f2ef31e5",
+            "package": "perf-test"
+          },
+          {
+            "comment": "Bump @fluentui/react-tabs to v1.0.0-beta.72",
+            "author": "Humberto.Morimoto@microsoft.com",
+            "commit": "2338c30df092ac05df393631bb8e59bcd9fec7b0",
+            "package": "perf-test"
+          },
+          {
+            "comment": "Bump @fluentui/react-avatar to v9.0.0-alpha.15",
+            "author": "olfedias@microsoft.com",
+            "commit": "66638eed425fff31d69182529b03268836c5e1ec",
+            "package": "perf-test"
+          },
+          {
+            "comment": "Bump @fluentui/react-provider to v9.0.0-alpha.14",
+            "author": "lingfan.gao@microsoft.com",
+            "commit": "31b7b0d625e40f818d33c5df0890b584caaf0e6c",
+            "package": "perf-test"
+          },
+          {
+            "comment": "Bump @fluentui/react-theme-provider to v9.0.0-alpha.14",
+            "author": "lingfan.gao@microsoft.com",
+            "commit": "31b7b0d625e40f818d33c5df0890b584caaf0e6c",
+            "package": "perf-test"
+          }
+        ],
+        "patch": [
+          {
+            "comment": "Bump @fluentui/react to v8.6.1",
+            "author": "Humberto.Morimoto@microsoft.com",
+            "commit": "2338c30df092ac05df393631bb8e59bcd9fec7b0",
+            "package": "perf-test"
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 24 Mar 2021 07:32:21 GMT",
       "tag": "perf-test_v1.0.0",
diff --git a/apps/perf-test/CHANGELOG.md b/apps/perf-test/CHANGELOG.md
index d532de22fccbdc..39414f9d51da05 100644
--- a/apps/perf-test/CHANGELOG.md
+++ b/apps/perf-test/CHANGELOG.md
@@ -1,11 +1,29 @@
 # Change Log - perf-test
 
-This log was last generated on Wed, 24 Mar 2021 07:32:21 GMT and should not be manually modified.
+This log was last generated on Thu, 25 Mar 2021 07:33:24 GMT and should not be manually modified.
 
 <!-- Start content -->
 
 ## [1.0.0](https://github.com/microsoft/fluentui/tree/perf-test_v1.0.0)
 
+Thu, 25 Mar 2021 07:33:24 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/perf-test_v1.0.0..perf-test_v1.0.0)
+
+### Patches
+
+- Bump @fluentui/react to v8.6.1 ([PR #17507](https://github.com/microsoft/fluentui/pull/17507) by Humberto.Morimoto@microsoft.com)
+
+### Changes
+
+- Bump @fluentui/make-styles to v9.0.0-alpha.6 ([PR #17539](https://github.com/microsoft/fluentui/pull/17539) by olfedias@microsoft.com)
+- Bump @fluentui/react-button to v9.0.0-alpha.15 ([PR #17192](https://github.com/microsoft/fluentui/pull/17192) by Humberto.Morimoto@microsoft.com)
+- Bump @fluentui/react-tabs to v1.0.0-beta.72 ([PR #17507](https://github.com/microsoft/fluentui/pull/17507) by Humberto.Morimoto@microsoft.com)
+- Bump @fluentui/react-avatar to v9.0.0-alpha.15 ([PR #17539](https://github.com/microsoft/fluentui/pull/17539) by olfedias@microsoft.com)
+- Bump @fluentui/react-provider to v9.0.0-alpha.14 ([PR #17528](https://github.com/microsoft/fluentui/pull/17528) by lingfan.gao@microsoft.com)
+- Bump @fluentui/react-theme-provider to v9.0.0-alpha.14 ([PR #17528](https://github.com/microsoft/fluentui/pull/17528) by lingfan.gao@microsoft.com)
+
+## [1.0.0](https://github.com/microsoft/fluentui/tree/perf-test_v1.0.0)
+
 Wed, 24 Mar 2021 07:32:21 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/perf-test_v1.0.0..perf-test_v1.0.0)
 
diff --git a/apps/perf-test/package.json b/apps/perf-test/package.json
index 413ab30a9576c2..3003029b0ceed6 100644
--- a/apps/perf-test/package.json
+++ b/apps/perf-test/package.json
@@ -13,13 +13,13 @@
   },
   "dependencies": {
     "@fluentui/eslint-plugin": "^1.0.1",
-    "@fluentui/make-styles": "^9.0.0-alpha.5",
-    "@fluentui/react": "^8.6.0",
-    "@fluentui/react-avatar": "^9.0.0-alpha.14",
-    "@fluentui/react-button": "^9.0.0-alpha.14",
-    "@fluentui/react-provider": "^9.0.0-alpha.13",
-    "@fluentui/react-tabs": "^1.0.0-beta.71",
-    "@fluentui/react-theme-provider": "^9.0.0-alpha.13",
+    "@fluentui/make-styles": "^9.0.0-alpha.6",
+    "@fluentui/react": "^8.6.1",
+    "@fluentui/react-avatar": "^9.0.0-alpha.15",
+    "@fluentui/react-button": "^9.0.0-alpha.15",
+    "@fluentui/react-provider": "^9.0.0-alpha.14",
+    "@fluentui/react-tabs": "^1.0.0-beta.72",
+    "@fluentui/react-theme-provider": "^9.0.0-alpha.14",
     "@fluentui/react-theme": "^9.0.0-alpha.6",
     "@fluentui/scripts": "^1.0.0",
     "@microsoft/load-themed-styles": "^1.10.26",
diff --git a/apps/public-docsite-resources/CHANGELOG.json b/apps/public-docsite-resources/CHANGELOG.json
index 6f68d728204118..afedd55067f88a 100644
--- a/apps/public-docsite-resources/CHANGELOG.json
+++ b/apps/public-docsite-resources/CHANGELOG.json
@@ -1,6 +1,29 @@
 {
   "name": "@fluentui/public-docsite-resources",
   "entries": [
+    {
+      "date": "Thu, 25 Mar 2021 07:33:24 GMT",
+      "tag": "@fluentui/public-docsite-resources_v8.0.20",
+      "version": "8.0.20",
+      "comments": {
+        "none": [
+          {
+            "comment": "Bump @fluentui/react-examples to v8.9.1",
+            "author": "lingfan.gao@microsoft.com",
+            "commit": "31b7b0d625e40f818d33c5df0890b584caaf0e6c",
+            "package": "@fluentui/public-docsite-resources"
+          }
+        ],
+        "patch": [
+          {
+            "comment": "Bump @fluentui/react to v8.6.1",
+            "author": "Humberto.Morimoto@microsoft.com",
+            "commit": "2338c30df092ac05df393631bb8e59bcd9fec7b0",
+            "package": "@fluentui/public-docsite-resources"
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 24 Mar 2021 07:32:21 GMT",
       "tag": "@fluentui/public-docsite-resources_v8.0.19",
diff --git a/apps/public-docsite-resources/CHANGELOG.md b/apps/public-docsite-resources/CHANGELOG.md
index 7a0ac1dce71265..89044da20b61bb 100644
--- a/apps/public-docsite-resources/CHANGELOG.md
+++ b/apps/public-docsite-resources/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/public-docsite-resources
 
-This log was last generated on Wed, 24 Mar 2021 07:32:21 GMT and should not be manually modified.
+This log was last generated on Thu, 25 Mar 2021 07:33:24 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [8.0.20](https://github.com/microsoft/fluentui/tree/@fluentui/public-docsite-resources_v8.0.20)
+
+Thu, 25 Mar 2021 07:33:24 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/public-docsite-resources_v8.0.19..@fluentui/public-docsite-resources_v8.0.20)
+
+### Patches
+
+- Bump @fluentui/react to v8.6.1 ([PR #17507](https://github.com/microsoft/fluentui/pull/17507) by Humberto.Morimoto@microsoft.com)
+
 ## [8.0.19](https://github.com/microsoft/fluentui/tree/@fluentui/public-docsite-resources_v8.0.19)
 
 Wed, 24 Mar 2021 07:32:21 GMT 
diff --git a/apps/public-docsite-resources/package.json b/apps/public-docsite-resources/package.json
index 2a4b9580a91dec..65fb19f93c3393 100644
--- a/apps/public-docsite-resources/package.json
+++ b/apps/public-docsite-resources/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/public-docsite-resources",
-  "version": "8.0.19",
+  "version": "8.0.20",
   "description": "Fluent UI React local demo app",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -32,16 +32,16 @@
     "react-dom": "16.8.6"
   },
   "dependencies": {
-    "@fluentui/react": "^8.6.0",
-    "@fluentui/react-examples": "^8.9.0",
+    "@fluentui/react": "^8.6.1",
+    "@fluentui/react-examples": "^8.9.1",
     "@microsoft/load-themed-styles": "^1.10.26",
-    "@fluentui/api-docs": "^8.0.16",
-    "@fluentui/azure-themes": "^8.0.17",
-    "@fluentui/react-docsite-components": "^8.0.16",
+    "@fluentui/api-docs": "^8.0.17",
+    "@fluentui/azure-themes": "^8.0.18",
+    "@fluentui/react-docsite-components": "^8.0.17",
     "@fluentui/font-icons-mdl2": "^8.0.2",
     "@fluentui/set-version": "^8.0.1",
-    "@fluentui/theme-samples": "^8.0.16",
-    "@fluentui/react-monaco-editor": "^1.0.16",
+    "@fluentui/theme-samples": "^8.0.17",
+    "@fluentui/react-monaco-editor": "^1.0.17",
     "@types/react": "16.9.42",
     "office-ui-fabric-core": "^11.0.0",
     "react": "16.8.6",
diff --git a/apps/public-docsite/CHANGELOG.json b/apps/public-docsite/CHANGELOG.json
index 04e0b526d0782c..0710f8bc81296f 100644
--- a/apps/public-docsite/CHANGELOG.json
+++ b/apps/public-docsite/CHANGELOG.json
@@ -1,6 +1,29 @@
 {
   "name": "@fluentui/public-docsite",
   "entries": [
+    {
+      "date": "Thu, 25 Mar 2021 07:33:24 GMT",
+      "tag": "@fluentui/public-docsite_v8.0.19",
+      "version": "8.0.19",
+      "comments": {
+        "none": [
+          {
+            "comment": "Bump @fluentui/react-examples to v8.9.1",
+            "author": "lingfan.gao@microsoft.com",
+            "commit": "31b7b0d625e40f818d33c5df0890b584caaf0e6c",
+            "package": "@fluentui/public-docsite"
+          }
+        ],
+        "patch": [
+          {
+            "comment": "Bump @fluentui/react-experiments to v8.0.18",
+            "author": "Humberto.Morimoto@microsoft.com",
+            "commit": "2338c30df092ac05df393631bb8e59bcd9fec7b0",
+            "package": "@fluentui/public-docsite"
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 24 Mar 2021 07:32:21 GMT",
       "tag": "@fluentui/public-docsite_v8.0.18",
diff --git a/apps/public-docsite/CHANGELOG.md b/apps/public-docsite/CHANGELOG.md
index 55bc043a17a461..36609479c585ff 100644
--- a/apps/public-docsite/CHANGELOG.md
+++ b/apps/public-docsite/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/public-docsite
 
-This log was last generated on Wed, 24 Mar 2021 07:32:21 GMT and should not be manually modified.
+This log was last generated on Thu, 25 Mar 2021 07:33:24 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [8.0.19](https://github.com/microsoft/fluentui/tree/@fluentui/public-docsite_v8.0.19)
+
+Thu, 25 Mar 2021 07:33:24 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/public-docsite_v8.0.18..@fluentui/public-docsite_v8.0.19)
+
+### Patches
+
+- Bump @fluentui/react-experiments to v8.0.18 ([PR #17507](https://github.com/microsoft/fluentui/pull/17507) by Humberto.Morimoto@microsoft.com)
+
 ## [8.0.18](https://github.com/microsoft/fluentui/tree/@fluentui/public-docsite_v8.0.18)
 
 Wed, 24 Mar 2021 07:32:21 GMT 
diff --git a/apps/public-docsite/package.json b/apps/public-docsite/package.json
index 83b6b2f80c19e6..453994f7ebfd28 100644
--- a/apps/public-docsite/package.json
+++ b/apps/public-docsite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/public-docsite",
-  "version": "8.0.18",
+  "version": "8.0.19",
   "description": "The official website for the Fluent UI project.",
   "sideEffects": true,
   "main": "lib-commonjs/root.js",
@@ -29,23 +29,23 @@
   "devDependencies": {
     "@fluentui/common-styles": "^1.0.2",
     "@fluentui/eslint-plugin": "^1.0.1",
-    "@fluentui/react-monaco-editor": "^1.0.16",
+    "@fluentui/react-monaco-editor": "^1.0.17",
     "@fluentui/scripts": "^1.0.0",
     "react-app-polyfill": "~1.0.1",
     "write-file-webpack-plugin": "^4.1.0"
   },
   "dependencies": {
-    "@fluentui/react": "^8.6.0",
-    "@fluentui/react-examples": "^8.9.0",
+    "@fluentui/react": "^8.6.1",
+    "@fluentui/react-examples": "^8.9.1",
     "@fluentui/theme": "^2.0.2",
     "@microsoft/load-themed-styles": "^1.10.26",
-    "@fluentui/api-docs": "^8.0.16",
-    "@fluentui/react-docsite-components": "^8.0.16",
-    "@fluentui/react-experiments": "^8.0.17",
+    "@fluentui/api-docs": "^8.0.17",
+    "@fluentui/react-docsite-components": "^8.0.17",
+    "@fluentui/react-experiments": "^8.0.18",
     "@fluentui/react-file-type-icons": "^8.0.2",
     "@fluentui/font-icons-mdl2": "^8.0.2",
     "@fluentui/set-version": "^8.0.1",
-    "@fluentui/theme-samples": "^8.0.16",
+    "@fluentui/theme-samples": "^8.0.17",
     "@fluentui/utilities": "^8.0.2",
     "@types/react": "16.9.42",
     "@types/react-dom": "16.9.10",
diff --git a/apps/server-rendered-app/CHANGELOG.json b/apps/server-rendered-app/CHANGELOG.json
index 4b133aa47daa0e..2fce3afd1ce757 100644
--- a/apps/server-rendered-app/CHANGELOG.json
+++ b/apps/server-rendered-app/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "server-rendered-app",
   "entries": [
+    {
+      "date": "Thu, 25 Mar 2021 07:33:24 GMT",
+      "tag": "server-rendered-app_v1.0.0",
+      "version": "1.0.0",
+      "comments": {
+        "patch": [
+          {
+            "comment": "Bump @fluentui/react to v8.6.1",
+            "author": "Humberto.Morimoto@microsoft.com",
+            "commit": "2338c30df092ac05df393631bb8e59bcd9fec7b0",
+            "package": "server-rendered-app"
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 24 Mar 2021 07:32:21 GMT",
       "tag": "server-rendered-app_v1.0.0",
diff --git a/apps/server-rendered-app/CHANGELOG.md b/apps/server-rendered-app/CHANGELOG.md
index 3248dcee1dba26..7e8946a43077a0 100644
--- a/apps/server-rendered-app/CHANGELOG.md
+++ b/apps/server-rendered-app/CHANGELOG.md
@@ -1,11 +1,20 @@
 # Change Log - server-rendered-app
 
-This log was last generated on Wed, 24 Mar 2021 07:32:21 GMT and should not be manually modified.
+This log was last generated on Thu, 25 Mar 2021 07:33:24 GMT and should not be manually modified.
 
 <!-- Start content -->
 
 ## [1.0.0](https://github.com/microsoft/fluentui/tree/server-rendered-app_v1.0.0)
 
+Thu, 25 Mar 2021 07:33:24 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/server-rendered-app_v1.0.0..server-rendered-app_v1.0.0)
+
+### Patches
+
+- Bump @fluentui/react to v8.6.1 ([PR #17507](https://github.com/microsoft/fluentui/pull/17507) by Humberto.Morimoto@microsoft.com)
+
+## [1.0.0](https://github.com/microsoft/fluentui/tree/server-rendered-app_v1.0.0)
+
 Wed, 24 Mar 2021 07:32:21 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/server-rendered-app_v1.0.0..server-rendered-app_v1.0.0)
 
diff --git a/apps/server-rendered-app/package.json b/apps/server-rendered-app/package.json
index ccd9d917578674..ac06000bed08f6 100644
--- a/apps/server-rendered-app/package.json
+++ b/apps/server-rendered-app/package.json
@@ -24,7 +24,7 @@
   "dependencies": {
     "@fluentui/font-icons-mdl2": "^8.0.2",
     "@fluentui/merge-styles": "^8.0.2",
-    "@fluentui/react": "^8.6.0",
+    "@fluentui/react": "^8.6.1",
     "@microsoft/load-themed-styles": "^1.10.26",
     "react": "16.8.6",
     "react-app-polyfill": "~1.0.1",
diff --git a/apps/ssr-tests/CHANGELOG.json b/apps/ssr-tests/CHANGELOG.json
index de63355b17427f..22cdbc64cdeea0 100644
--- a/apps/ssr-tests/CHANGELOG.json
+++ b/apps/ssr-tests/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "ssr-tests",
   "entries": [
+    {
+      "date": "Thu, 25 Mar 2021 07:33:24 GMT",
+      "tag": "ssr-tests_v1.0.0",
+      "version": "1.0.0",
+      "comments": {
+        "patch": [
+          {
+            "comment": "Bump @fluentui/public-docsite-resources to v8.0.20",
+            "author": "lingfan.gao@microsoft.com",
+            "commit": "31b7b0d625e40f818d33c5df0890b584caaf0e6c",
+            "package": "ssr-tests"
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 24 Mar 2021 07:32:21 GMT",
       "tag": "ssr-tests_v1.0.0",
diff --git a/apps/ssr-tests/CHANGELOG.md b/apps/ssr-tests/CHANGELOG.md
index 80951c2fea6f0e..6e30d0f060dc02 100644
--- a/apps/ssr-tests/CHANGELOG.md
+++ b/apps/ssr-tests/CHANGELOG.md
@@ -1,11 +1,20 @@
 # Change Log - ssr-tests
 
-This log was last generated on Wed, 24 Mar 2021 07:32:21 GMT and should not be manually modified.
+This log was last generated on Thu, 25 Mar 2021 07:33:24 GMT and should not be manually modified.
 
 <!-- Start content -->
 
 ## [1.0.0](https://github.com/microsoft/fluentui/tree/ssr-tests_v1.0.0)
 
+Thu, 25 Mar 2021 07:33:24 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/ssr-tests_v1.0.0..ssr-tests_v1.0.0)
+
+### Patches
+
+- Bump @fluentui/public-docsite-resources to v8.0.20 ([PR #17528](https://github.com/microsoft/fluentui/pull/17528) by lingfan.gao@microsoft.com)
+
+## [1.0.0](https://github.com/microsoft/fluentui/tree/ssr-tests_v1.0.0)
+
 Wed, 24 Mar 2021 07:32:21 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/ssr-tests_v1.0.0..ssr-tests_v1.0.0)
 
diff --git a/apps/ssr-tests/package.json b/apps/ssr-tests/package.json
index f4fdce45c3e7c2..84d4cf1cf72c44 100644
--- a/apps/ssr-tests/package.json
+++ b/apps/ssr-tests/package.json
@@ -13,11 +13,11 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@fluentui/react": "^8.6.0",
+    "@fluentui/react": "^8.6.1",
     "@microsoft/load-themed-styles": "^1.10.26",
     "@types/mocha": "^7.0.2",
     "@fluentui/scripts": "^1.0.0",
-    "@fluentui/public-docsite-resources": "^8.0.19",
+    "@fluentui/public-docsite-resources": "^8.0.20",
     "just-scripts-utils": "^1.1.1",
     "mocha": "^7.1.2",
     "react": "16.8.6",
diff --git a/apps/theming-designer/CHANGELOG.json b/apps/theming-designer/CHANGELOG.json
index 25bba4d1bd5fef..2ebb2232fab41c 100644
--- a/apps/theming-designer/CHANGELOG.json
+++ b/apps/theming-designer/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "theming-designer",
   "entries": [
+    {
+      "date": "Thu, 25 Mar 2021 07:33:24 GMT",
+      "tag": "theming-designer_v1.0.0",
+      "version": "1.0.0",
+      "comments": {
+        "patch": [
+          {
+            "comment": "Bump @fluentui/react to v8.6.1",
+            "author": "Humberto.Morimoto@microsoft.com",
+            "commit": "2338c30df092ac05df393631bb8e59bcd9fec7b0",
+            "package": "theming-designer"
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 24 Mar 2021 07:32:21 GMT",
       "tag": "theming-designer_v1.0.0",
diff --git a/apps/theming-designer/CHANGELOG.md b/apps/theming-designer/CHANGELOG.md
index f9d36185702b36..ff570b04276506 100644
--- a/apps/theming-designer/CHANGELOG.md
+++ b/apps/theming-designer/CHANGELOG.md
@@ -1,11 +1,20 @@
 # Change Log - theming-designer
 
-This log was last generated on Wed, 24 Mar 2021 07:32:21 GMT and should not be manually modified.
+This log was last generated on Thu, 25 Mar 2021 07:33:24 GMT and should not be manually modified.
 
 <!-- Start content -->
 
 ## [1.0.0](https://github.com/microsoft/fluentui/tree/theming-designer_v1.0.0)
 
+Thu, 25 Mar 2021 07:33:24 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/theming-designer_v1.0.0..theming-designer_v1.0.0)
+
+### Patches
+
+- Bump @fluentui/react to v8.6.1 ([PR #17507](https://github.com/microsoft/fluentui/pull/17507) by Humberto.Morimoto@microsoft.com)
+
+## [1.0.0](https://github.com/microsoft/fluentui/tree/theming-designer_v1.0.0)
+
 Wed, 24 Mar 2021 07:32:21 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/theming-designer_v1.0.0..theming-designer_v1.0.0)
 
diff --git a/apps/theming-designer/package.json b/apps/theming-designer/package.json
index 8041c424b73ed9..89ac3bf34be77b 100644
--- a/apps/theming-designer/package.json
+++ b/apps/theming-designer/package.json
@@ -20,9 +20,9 @@
     "@fluentui/scripts": "^1.0.0"
   },
   "dependencies": {
-    "@fluentui/react": "^8.6.0",
+    "@fluentui/react": "^8.6.1",
     "@fluentui/merge-styles": "^8.0.2",
-    "@fluentui/react-docsite-components": "^8.0.16",
+    "@fluentui/react-docsite-components": "^8.0.17",
     "@fluentui/foundation-legacy": "^8.0.2",
     "@fluentui/scheme-utilities": "^8.0.2",
     "@fluentui/set-version": "^8.0.1",
diff --git a/apps/todo-app/CHANGELOG.json b/apps/todo-app/CHANGELOG.json
index 9b50ed981ea5d1..bdecced424fc4b 100644
--- a/apps/todo-app/CHANGELOG.json
+++ b/apps/todo-app/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "todo-app",
   "entries": [
+    {
+      "date": "Thu, 25 Mar 2021 07:33:24 GMT",
+      "tag": "todo-app_v1.0.0",
+      "version": "1.0.0",
+      "comments": {
+        "patch": [
+          {
+            "comment": "Bump @fluentui/react to v8.6.1",
+            "author": "Humberto.Morimoto@microsoft.com",
+            "commit": "2338c30df092ac05df393631bb8e59bcd9fec7b0",
+            "package": "todo-app"
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 24 Mar 2021 07:32:21 GMT",
       "tag": "todo-app_v1.0.0",
diff --git a/apps/todo-app/CHANGELOG.md b/apps/todo-app/CHANGELOG.md
index 3a45410e8ed84f..68547122fbfae4 100644
--- a/apps/todo-app/CHANGELOG.md
+++ b/apps/todo-app/CHANGELOG.md
@@ -1,11 +1,20 @@
 # Change Log - todo-app
 
-This log was last generated on Wed, 24 Mar 2021 07:32:21 GMT and should not be manually modified.
+This log was last generated on Thu, 25 Mar 2021 07:33:24 GMT and should not be manually modified.
 
 <!-- Start content -->
 
 ## [1.0.0](https://github.com/microsoft/fluentui/tree/todo-app_v1.0.0)
 
+Thu, 25 Mar 2021 07:33:24 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/todo-app_v1.0.0..todo-app_v1.0.0)
+
+### Patches
+
+- Bump @fluentui/react to v8.6.1 ([PR #17507](https://github.com/microsoft/fluentui/pull/17507) by Humberto.Morimoto@microsoft.com)
+
+## [1.0.0](https://github.com/microsoft/fluentui/tree/todo-app_v1.0.0)
+
 Wed, 24 Mar 2021 07:32:21 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/todo-app_v1.0.0..todo-app_v1.0.0)
 
diff --git a/apps/todo-app/package.json b/apps/todo-app/package.json
index b2d921ac7ce926..23ee1594000234 100644
--- a/apps/todo-app/package.json
+++ b/apps/todo-app/package.json
@@ -19,7 +19,7 @@
     "@fluentui/scripts": "^1.0.0"
   },
   "dependencies": {
-    "@fluentui/react": "^8.6.0",
+    "@fluentui/react": "^8.6.1",
     "@microsoft/load-themed-styles": "^1.10.26",
     "es6-promise": "^4.1.0",
     "immutability-helper": "~2.8.1",
diff --git a/apps/vr-tests/CHANGELOG.json b/apps/vr-tests/CHANGELOG.json
index 9f307ceecdda00..56bab9db0e03c4 100644
--- a/apps/vr-tests/CHANGELOG.json
+++ b/apps/vr-tests/CHANGELOG.json
@@ -1,6 +1,85 @@
 {
   "name": "vr-tests",
   "entries": [
+    {
+      "date": "Thu, 25 Mar 2021 07:33:24 GMT",
+      "tag": "vr-tests_v1.0.0",
+      "version": "1.0.0",
+      "comments": {
+        "prerelease": [
+          {
+            "comment": "Bump @fluentui/react-button to v9.0.0-alpha.15",
+            "author": "Humberto.Morimoto@microsoft.com",
+            "commit": "f9819c97079f87f98e064821e43abed8f2ef31e5",
+            "package": "vr-tests"
+          },
+          {
+            "comment": "Bump @fluentui/react-tabs to v1.0.0-beta.72",
+            "author": "Humberto.Morimoto@microsoft.com",
+            "commit": "2338c30df092ac05df393631bb8e59bcd9fec7b0",
+            "package": "vr-tests"
+          },
+          {
+            "comment": "Bump @fluentui/react-link to v9.0.0-alpha.15",
+            "author": "Humberto.Morimoto@microsoft.com",
+            "commit": "f9819c97079f87f98e064821e43abed8f2ef31e5",
+            "package": "vr-tests"
+          },
+          {
+            "comment": "Bump @fluentui/react-make-styles to v9.0.0-alpha.14",
+            "author": "olfedias@microsoft.com",
+            "commit": "66638eed425fff31d69182529b03268836c5e1ec",
+            "package": "vr-tests"
+          },
+          {
+            "comment": "Bump @fluentui/react-avatar to v9.0.0-alpha.15",
+            "author": "olfedias@microsoft.com",
+            "commit": "66638eed425fff31d69182529b03268836c5e1ec",
+            "package": "vr-tests"
+          },
+          {
+            "comment": "Bump @fluentui/react-cards to v1.0.0-beta.74",
+            "author": "olfedias@microsoft.com",
+            "commit": "66638eed425fff31d69182529b03268836c5e1ec",
+            "package": "vr-tests"
+          },
+          {
+            "comment": "Bump @fluentui/react-divider to v9.0.0-alpha.4",
+            "author": "olfedias@microsoft.com",
+            "commit": "66638eed425fff31d69182529b03268836c5e1ec",
+            "package": "vr-tests"
+          },
+          {
+            "comment": "Bump @fluentui/react-provider to v9.0.0-alpha.14",
+            "author": "lingfan.gao@microsoft.com",
+            "commit": "31b7b0d625e40f818d33c5df0890b584caaf0e6c",
+            "package": "vr-tests"
+          },
+          {
+            "comment": "Bump @fluentui/react-theme-provider to v9.0.0-alpha.14",
+            "author": "lingfan.gao@microsoft.com",
+            "commit": "31b7b0d625e40f818d33c5df0890b584caaf0e6c",
+            "package": "vr-tests"
+          }
+        ],
+        "patch": [
+          {
+            "comment": "Bump @fluentui/react-experiments to v8.0.18",
+            "author": "Humberto.Morimoto@microsoft.com",
+            "commit": "2338c30df092ac05df393631bb8e59bcd9fec7b0",
+            "package": "vr-tests"
+          }
+        ],
+        "none": [
+          {
+            "comment": "Bump @fluentui/storybook to v1.0.0",
+            "author": "lingfan.gao@microsoft.com",
+            "commit": "31b7b0d625e40f818d33c5df0890b584caaf0e6c",
+            "package": "vr-tests"
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 24 Mar 2021 07:32:21 GMT",
       "tag": "vr-tests_v1.0.0",
diff --git a/apps/vr-tests/CHANGELOG.md b/apps/vr-tests/CHANGELOG.md
index 577c1dc04b9e32..3164692b4f57c2 100644
--- a/apps/vr-tests/CHANGELOG.md
+++ b/apps/vr-tests/CHANGELOG.md
@@ -1,11 +1,32 @@
 # Change Log - vr-tests
 
-This log was last generated on Wed, 24 Mar 2021 07:32:21 GMT and should not be manually modified.
+This log was last generated on Thu, 25 Mar 2021 07:33:24 GMT and should not be manually modified.
 
 <!-- Start content -->
 
 ## [1.0.0](https://github.com/microsoft/fluentui/tree/vr-tests_v1.0.0)
 
+Thu, 25 Mar 2021 07:33:24 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/vr-tests_v1.0.0..vr-tests_v1.0.0)
+
+### Patches
+
+- Bump @fluentui/react-experiments to v8.0.18 ([PR #17507](https://github.com/microsoft/fluentui/pull/17507) by Humberto.Morimoto@microsoft.com)
+
+### Changes
+
+- Bump @fluentui/react-button to v9.0.0-alpha.15 ([PR #17192](https://github.com/microsoft/fluentui/pull/17192) by Humberto.Morimoto@microsoft.com)
+- Bump @fluentui/react-tabs to v1.0.0-beta.72 ([PR #17507](https://github.com/microsoft/fluentui/pull/17507) by Humberto.Morimoto@microsoft.com)
+- Bump @fluentui/react-link to v9.0.0-alpha.15 ([PR #17192](https://github.com/microsoft/fluentui/pull/17192) by Humberto.Morimoto@microsoft.com)
+- Bump @fluentui/react-make-styles to v9.0.0-alpha.14 ([PR #17539](https://github.com/microsoft/fluentui/pull/17539) by olfedias@microsoft.com)
+- Bump @fluentui/react-avatar to v9.0.0-alpha.15 ([PR #17539](https://github.com/microsoft/fluentui/pull/17539) by olfedias@microsoft.com)
+- Bump @fluentui/react-cards to v1.0.0-beta.74 ([PR #17539](https://github.com/microsoft/fluentui/pull/17539) by olfedias@microsoft.com)
+- Bump @fluentui/react-divider to v9.0.0-alpha.4 ([PR #17539](https://github.com/microsoft/fluentui/pull/17539) by olfedias@microsoft.com)
+- Bump @fluentui/react-provider to v9.0.0-alpha.14 ([PR #17528](https://github.com/microsoft/fluentui/pull/17528) by lingfan.gao@microsoft.com)
+- Bump @fluentui/react-theme-provider to v9.0.0-alpha.14 ([PR #17528](https://github.com/microsoft/fluentui/pull/17528) by lingfan.gao@microsoft.com)
+
+## [1.0.0](https://github.com/microsoft/fluentui/tree/vr-tests_v1.0.0)
+
 Wed, 24 Mar 2021 07:32:21 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/vr-tests_v1.0.0..vr-tests_v1.0.0)
 
diff --git a/apps/vr-tests/package.json b/apps/vr-tests/package.json
index 97406425c610d8..8fad087fd1bea0 100644
--- a/apps/vr-tests/package.json
+++ b/apps/vr-tests/package.json
@@ -19,20 +19,20 @@
     "@fluentui/eslint-plugin": "^1.0.1",
     "@fluentui/example-data": "^8.1.1",
     "@fluentui/font-icons-mdl2": "^8.0.2",
-    "@fluentui/react": "^8.6.0",
-    "@fluentui/react-avatar": "^9.0.0-alpha.14",
-    "@fluentui/react-button": "^9.0.0-alpha.14",
-    "@fluentui/react-cards": "^1.0.0-beta.73",
-    "@fluentui/react-experiments": "^8.0.17",
-    "@fluentui/react-divider": "^9.0.0-alpha.3",
+    "@fluentui/react": "^8.6.1",
+    "@fluentui/react-avatar": "^9.0.0-alpha.15",
+    "@fluentui/react-button": "^9.0.0-alpha.15",
+    "@fluentui/react-cards": "^1.0.0-beta.74",
+    "@fluentui/react-experiments": "^8.0.18",
+    "@fluentui/react-divider": "^9.0.0-alpha.4",
     "@fluentui/react-hooks": "^8.1.0",
     "@fluentui/react-icons-mdl2": "^1.0.2",
-    "@fluentui/react-link": "^9.0.0-alpha.14",
-    "@fluentui/react-make-styles": "^9.0.0-alpha.13",
-    "@fluentui/react-provider": "^9.0.0-alpha.13",
+    "@fluentui/react-link": "^9.0.0-alpha.15",
+    "@fluentui/react-make-styles": "^9.0.0-alpha.14",
+    "@fluentui/react-provider": "^9.0.0-alpha.14",
     "@fluentui/react-theme": "^9.0.0-alpha.6",
-    "@fluentui/react-tabs": "^1.0.0-beta.71",
-    "@fluentui/react-theme-provider": "^9.0.0-alpha.13",
+    "@fluentui/react-tabs": "^1.0.0-beta.72",
+    "@fluentui/react-theme-provider": "^9.0.0-alpha.14",
     "@fluentui/scripts": "^1.0.0",
     "@fluentui/storybook": "^1.0.0",
     "@storybook/addons": "6.0.28",
diff --git a/change/@fluentui-make-styles-1813ed49-7109-49e7-a38c-f4a7dccd2102.json b/change/@fluentui-make-styles-1813ed49-7109-49e7-a38c-f4a7dccd2102.json
deleted file mode 100644
index 436c487b405ccf..00000000000000
--- a/change/@fluentui-make-styles-1813ed49-7109-49e7-a38c-f4a7dccd2102.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "prerelease",
-  "comment": "chore: remove makeStylesCompat()",
-  "packageName": "@fluentui/make-styles",
-  "email": "olfedias@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@fluentui-react-accordion-33c916c4-a19e-49d4-bda7-7114467d3250.json b/change/@fluentui-react-accordion-33c916c4-a19e-49d4-bda7-7114467d3250.json
deleted file mode 100644
index 1b1a3162a72446..00000000000000
--- a/change/@fluentui-react-accordion-33c916c4-a19e-49d4-bda7-7114467d3250.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "prerelease",
-  "comment": "Adds id control for AccordionHeader and AccordionPanel",
-  "packageName": "@fluentui/react-accordion",
-  "email": "bsunderhus@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@fluentui-react-accordion-6c1f5066-9db1-435f-b0b0-26db7eb367c8.json b/change/@fluentui-react-accordion-6c1f5066-9db1-435f-b0b0-26db7eb367c8.json
deleted file mode 100644
index 3b1af2ac5a8380..00000000000000
--- a/change/@fluentui-react-accordion-6c1f5066-9db1-435f-b0b0-26db7eb367c8.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "prerelease",
-  "comment": "Move descendants to react-utilities",
-  "packageName": "@fluentui/react-accordion",
-  "email": "lingfan.gao@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@fluentui-react-button-51931787-5d23-4b96-80f8-13c246bbffc0.json b/change/@fluentui-react-button-51931787-5d23-4b96-80f8-13c246bbffc0.json
deleted file mode 100644
index d4f9e3047d0b92..00000000000000
--- a/change/@fluentui-react-button-51931787-5d23-4b96-80f8-13c246bbffc0.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "prerelease",
-  "comment": "Button: Adding SPEC.md and MIGRATION.md and updating README.md",
-  "packageName": "@fluentui/react-button",
-  "email": "Humberto.Morimoto@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@fluentui-react-button-7ead62e3-2881-40ba-8b5f-6dc38469b69d.json b/change/@fluentui-react-button-7ead62e3-2881-40ba-8b5f-6dc38469b69d.json
deleted file mode 100644
index cfdac94a0ccfc8..00000000000000
--- a/change/@fluentui-react-button-7ead62e3-2881-40ba-8b5f-6dc38469b69d.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "prerelease",
-  "comment": "CompoundButton: Re-introducing CompoundButton using latest version of makeStyles.",
-  "packageName": "@fluentui/react-button",
-  "email": "Humberto.Morimoto@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@fluentui-react-components-54d685cf-ca44-4a7e-8df0-a140e123bb42.json b/change/@fluentui-react-components-54d685cf-ca44-4a7e-8df0-a140e123bb42.json
deleted file mode 100644
index bdf834757bb9fa..00000000000000
--- a/change/@fluentui-react-components-54d685cf-ca44-4a7e-8df0-a140e123bb42.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "prerelease",
-  "comment": "Adds react-divider as dependency and re-export it",
-  "packageName": "@fluentui/react-components",
-  "email": "bsunderhus@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@fluentui-react-examples-2151236c-fd6b-4527-8944-7a11fce9088e.json b/change/@fluentui-react-examples-2151236c-fd6b-4527-8944-7a11fce9088e.json
deleted file mode 100644
index a528af0851f420..00000000000000
--- a/change/@fluentui-react-examples-2151236c-fd6b-4527-8944-7a11fce9088e.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "patch",
-  "comment": "Autofill: Inherit font-family to prevent defaulting to Arial.",
-  "packageName": "@fluentui/react-examples",
-  "email": "Humberto.Morimoto@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@fluentui-react-examples-69121500-1d87-4c68-995b-458d2e8b4ded.json b/change/@fluentui-react-examples-69121500-1d87-4c68-995b-458d2e8b4ded.json
deleted file mode 100644
index af81e02ac999e6..00000000000000
--- a/change/@fluentui-react-examples-69121500-1d87-4c68-995b-458d2e8b4ded.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "patch",
-  "comment": "CompoundButton: Re-introducing CompoundButton using latest version of makeStyles.",
-  "packageName": "@fluentui/react-examples",
-  "email": "Humberto.Morimoto@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@fluentui-react-experiments-99ea7ebe-27e3-46a8-8413-3cb05e0b94ce.json b/change/@fluentui-react-experiments-99ea7ebe-27e3-46a8-8413-3cb05e0b94ce.json
deleted file mode 100644
index 68a3882169aa3d..00000000000000
--- a/change/@fluentui-react-experiments-99ea7ebe-27e3-46a8-8413-3cb05e0b94ce.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "patch",
-  "comment": "Updating snapshots.",
-  "packageName": "@fluentui/react-experiments",
-  "email": "Humberto.Morimoto@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@fluentui-react-f7171097-ecc1-47fe-868e-08023aba68f3.json b/change/@fluentui-react-f7171097-ecc1-47fe-868e-08023aba68f3.json
deleted file mode 100644
index 42ca8cd743f552..00000000000000
--- a/change/@fluentui-react-f7171097-ecc1-47fe-868e-08023aba68f3.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "patch",
-  "comment": "Autofill: Inherit font-family to prevent defaulting to Arial.",
-  "packageName": "@fluentui/react",
-  "email": "Humberto.Morimoto@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@fluentui-react-link-142f68f1-5738-49a8-a416-b9287b6ba082.json b/change/@fluentui-react-link-142f68f1-5738-49a8-a416-b9287b6ba082.json
deleted file mode 100644
index ff6e16a60dbb97..00000000000000
--- a/change/@fluentui-react-link-142f68f1-5738-49a8-a416-b9287b6ba082.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "prerelease",
-  "comment": "Link: Removing allusion to component tokens in README.md and Link.types.ts",
-  "packageName": "@fluentui/react-link",
-  "email": "Humberto.Morimoto@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@fluentui-react-make-styles-f446292a-d431-4bc3-b0d5-33e2387c3693.json b/change/@fluentui-react-make-styles-f446292a-d431-4bc3-b0d5-33e2387c3693.json
deleted file mode 100644
index 3cb77fd330652b..00000000000000
--- a/change/@fluentui-react-make-styles-f446292a-d431-4bc3-b0d5-33e2387c3693.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "prerelease",
-  "comment": "chore: remove makeStylesCompat()",
-  "packageName": "@fluentui/react-make-styles",
-  "email": "olfedias@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@fluentui-react-utilities-576ef601-1824-46f1-ab27-e0dcefea8b34.json b/change/@fluentui-react-utilities-576ef601-1824-46f1-ab27-e0dcefea8b34.json
deleted file mode 100644
index 9671afcd5abdd6..00000000000000
--- a/change/@fluentui-react-utilities-576ef601-1824-46f1-ab27-e0dcefea8b34.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "prerelease",
-  "comment": "Move descendants to react-utilities",
-  "packageName": "@fluentui/react-utilities",
-  "email": "lingfan.gao@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@fluentui-web-components-199e3bcd-b1b1-4ab4-aba7-c3c11a6d5d60.json b/change/@fluentui-web-components-199e3bcd-b1b1-4ab4-aba7-c3c11a6d5d60.json
deleted file mode 100644
index 3e0fae1045833a..00000000000000
--- a/change/@fluentui-web-components-199e3bcd-b1b1-4ab4-aba7-c3c11a6d5d60.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "patch",
-  "comment": "removed SVGs to use the default",
-  "packageName": "@fluentui/web-components",
-  "email": "khamu@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/packages/api-docs/CHANGELOG.json b/packages/api-docs/CHANGELOG.json
index ae2f2437b1d086..a85cfed94879fa 100644
--- a/packages/api-docs/CHANGELOG.json
+++ b/packages/api-docs/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/api-docs",
   "entries": [
+    {
+      "date": "Thu, 25 Mar 2021 07:33:24 GMT",
+      "tag": "@fluentui/api-docs_v8.0.17",
+      "version": "8.0.17",
+      "comments": {
+        "patch": [
+          {
+            "comment": "Bump @fluentui/react to v8.6.1",
+            "author": "Humberto.Morimoto@microsoft.com",
+            "commit": "2338c30df092ac05df393631bb8e59bcd9fec7b0",
+            "package": "@fluentui/api-docs"
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 24 Mar 2021 07:32:21 GMT",
       "tag": "@fluentui/api-docs_v8.0.16",
diff --git a/packages/api-docs/CHANGELOG.md b/packages/api-docs/CHANGELOG.md
index 046f346100c775..a2eae019fc63b6 100644
--- a/packages/api-docs/CHANGELOG.md
+++ b/packages/api-docs/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/api-docs
 
-This log was last generated on Wed, 24 Mar 2021 07:32:21 GMT and should not be manually modified.
+This log was last generated on Thu, 25 Mar 2021 07:33:24 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [8.0.17](https://github.com/microsoft/fluentui/tree/@fluentui/api-docs_v8.0.17)
+
+Thu, 25 Mar 2021 07:33:24 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/api-docs_v8.0.16..@fluentui/api-docs_v8.0.17)
+
+### Patches
+
+- Bump @fluentui/react to v8.6.1 ([PR #17507](https://github.com/microsoft/fluentui/pull/17507) by Humberto.Morimoto@microsoft.com)
+
 ## [8.0.16](https://github.com/microsoft/fluentui/tree/@fluentui/api-docs_v8.0.16)
 
 Wed, 24 Mar 2021 07:32:21 GMT 
diff --git a/packages/api-docs/package.json b/packages/api-docs/package.json
index 05d49a597ead01..2a58eb706b1a21 100644
--- a/packages/api-docs/package.json
+++ b/packages/api-docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/api-docs",
-  "version": "8.0.16",
+  "version": "8.0.17",
   "description": "A package that transforms api-extractor .api.json files into page.json files",
   "repository": {
     "type": "git",
@@ -24,7 +24,7 @@
   "dependencies": {
     "@fluentui/date-time-utilities": "^8.0.1",
     "@fluentui/merge-styles": "^8.0.2",
-    "@fluentui/react": "^8.6.0",
+    "@fluentui/react": "^8.6.1",
     "@fluentui/react-focus": "^8.0.4",
     "@fluentui/style-utilities": "^8.0.2",
     "@fluentui/theme": "^2.0.2",
diff --git a/packages/azure-themes/CHANGELOG.json b/packages/azure-themes/CHANGELOG.json
index c7688434e4f01f..717d79a3cd5d59 100644
--- a/packages/azure-themes/CHANGELOG.json
+++ b/packages/azure-themes/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/azure-themes",
   "entries": [
+    {
+      "date": "Thu, 25 Mar 2021 07:33:24 GMT",
+      "tag": "@fluentui/azure-themes_v8.0.18",
+      "version": "8.0.18",
+      "comments": {
+        "patch": [
+          {
+            "comment": "Bump @fluentui/react to v8.6.1",
+            "author": "Humberto.Morimoto@microsoft.com",
+            "commit": "2338c30df092ac05df393631bb8e59bcd9fec7b0",
+            "package": "@fluentui/azure-themes"
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 24 Mar 2021 07:32:21 GMT",
       "tag": "@fluentui/azure-themes_v8.0.17",
diff --git a/packages/azure-themes/CHANGELOG.md b/packages/azure-themes/CHANGELOG.md
index ee183ac5aa69ef..be31b79fd40550 100644
--- a/packages/azure-themes/CHANGELOG.md
+++ b/packages/azure-themes/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/azure-themes
 
-This log was last generated on Wed, 24 Mar 2021 07:32:21 GMT and should not be manually modified.
+This log was last generated on Thu, 25 Mar 2021 07:33:24 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [8.0.18](https://github.com/microsoft/fluentui/tree/@fluentui/azure-themes_v8.0.18)
+
+Thu, 25 Mar 2021 07:33:24 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/azure-themes_v8.0.17..@fluentui/azure-themes_v8.0.18)
+
+### Patches
+
+- Bump @fluentui/react to v8.6.1 ([PR #17507](https://github.com/microsoft/fluentui/pull/17507) by Humberto.Morimoto@microsoft.com)
+
 ## [8.0.17](https://github.com/microsoft/fluentui/tree/@fluentui/azure-themes_v8.0.17)
 
 Wed, 24 Mar 2021 07:32:21 GMT 
diff --git a/packages/azure-themes/package.json b/packages/azure-themes/package.json
index 8de4ebfb165375..8077df091a094d 100644
--- a/packages/azure-themes/package.json
+++ b/packages/azure-themes/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/azure-themes",
-  "version": "8.0.17",
+  "version": "8.0.18",
   "description": "Azure themes for Fluent UI React",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -28,7 +28,7 @@
     "react": "16.8.6"
   },
   "dependencies": {
-    "@fluentui/react": "^8.6.0",
+    "@fluentui/react": "^8.6.1",
     "@fluentui/set-version": "^8.0.1",
     "tslib": "^1.10.0"
   }
diff --git a/packages/make-styles/CHANGELOG.json b/packages/make-styles/CHANGELOG.json
index 14cccf3fc32f81..77bab3d09a04b9 100644
--- a/packages/make-styles/CHANGELOG.json
+++ b/packages/make-styles/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/make-styles",
   "entries": [
+    {
+      "date": "Thu, 25 Mar 2021 07:33:24 GMT",
+      "tag": "@fluentui/make-styles_v9.0.0-alpha.6",
+      "version": "9.0.0-alpha.6",
+      "comments": {
+        "prerelease": [
+          {
+            "comment": "chore: remove makeStylesCompat()",
+            "author": "olfedias@microsoft.com",
+            "commit": "66638eed425fff31d69182529b03268836c5e1ec",
+            "package": "@fluentui/make-styles"
+          }
+        ]
+      }
+    },
     {
       "date": "Mon, 15 Mar 2021 07:36:20 GMT",
       "tag": "@fluentui/make-styles_v9.0.0-alpha.5",
diff --git a/packages/make-styles/CHANGELOG.md b/packages/make-styles/CHANGELOG.md
index 6d012ad9ebc269..721312aa686f38 100644
--- a/packages/make-styles/CHANGELOG.md
+++ b/packages/make-styles/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/make-styles
 
-This log was last generated on Mon, 15 Mar 2021 07:36:20 GMT and should not be manually modified.
+This log was last generated on Thu, 25 Mar 2021 07:33:24 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-alpha.6](https://github.com/microsoft/fluentui/tree/@fluentui/make-styles_v9.0.0-alpha.6)
+
+Thu, 25 Mar 2021 07:33:24 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/make-styles_v9.0.0-alpha.5..@fluentui/make-styles_v9.0.0-alpha.6)
+
+### Changes
+
+- chore: remove makeStylesCompat() ([PR #17539](https://github.com/microsoft/fluentui/pull/17539) by olfedias@microsoft.com)
+
 ## [9.0.0-alpha.5](https://github.com/microsoft/fluentui/tree/@fluentui/make-styles_v9.0.0-alpha.5)
 
 Mon, 15 Mar 2021 07:36:20 GMT 
diff --git a/packages/make-styles/package.json b/packages/make-styles/package.json
index d1192a004803f2..228bc30b307050 100644
--- a/packages/make-styles/package.json
+++ b/packages/make-styles/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/make-styles",
-  "version": "9.0.0-alpha.5",
+  "version": "9.0.0-alpha.6",
   "description": "Experimental utility for creating css styles/classes.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
diff --git a/packages/react-accordion/CHANGELOG.json b/packages/react-accordion/CHANGELOG.json
index a66a424298f426..0a880ac26037dd 100644
--- a/packages/react-accordion/CHANGELOG.json
+++ b/packages/react-accordion/CHANGELOG.json
@@ -1,6 +1,27 @@
 {
   "name": "@fluentui/react-accordion",
   "entries": [
+    {
+      "date": "Thu, 25 Mar 2021 07:33:24 GMT",
+      "tag": "@fluentui/react-accordion_v9.0.0-alpha.5",
+      "version": "9.0.0-alpha.5",
+      "comments": {
+        "prerelease": [
+          {
+            "comment": "Adds id control for AccordionHeader and AccordionPanel",
+            "author": "bsunderhus@microsoft.com",
+            "commit": "ad6de8f2d366057ea0c39fa64e648fb5776c9c35",
+            "package": "@fluentui/react-accordion"
+          },
+          {
+            "comment": "Move descendants to react-utilities",
+            "author": "lingfan.gao@microsoft.com",
+            "commit": "31b7b0d625e40f818d33c5df0890b584caaf0e6c",
+            "package": "@fluentui/react-accordion"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 23 Mar 2021 07:31:43 GMT",
       "tag": "@fluentui/react-accordion_v9.0.0-alpha.4",
diff --git a/packages/react-accordion/CHANGELOG.md b/packages/react-accordion/CHANGELOG.md
index 6f8d50c0d2e830..6795b352cb4385 100644
--- a/packages/react-accordion/CHANGELOG.md
+++ b/packages/react-accordion/CHANGELOG.md
@@ -1,9 +1,19 @@
 # Change Log - @fluentui/react-accordion
 
-This log was last generated on Tue, 23 Mar 2021 07:31:43 GMT and should not be manually modified.
+This log was last generated on Thu, 25 Mar 2021 07:33:24 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-alpha.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-accordion_v9.0.0-alpha.5)
+
+Thu, 25 Mar 2021 07:33:24 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-accordion_v9.0.0-alpha.4..@fluentui/react-accordion_v9.0.0-alpha.5)
+
+### Changes
+
+- Adds id control for AccordionHeader and AccordionPanel ([PR #17547](https://github.com/microsoft/fluentui/pull/17547) by bsunderhus@microsoft.com)
+- Move descendants to react-utilities ([PR #17528](https://github.com/microsoft/fluentui/pull/17528) by lingfan.gao@microsoft.com)
+
 ## [9.0.0-alpha.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-accordion_v9.0.0-alpha.4)
 
 Tue, 23 Mar 2021 07:31:43 GMT 
diff --git a/packages/react-accordion/package.json b/packages/react-accordion/package.json
index 05d093c3b8e199..57cd878cd65374 100644
--- a/packages/react-accordion/package.json
+++ b/packages/react-accordion/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-accordion",
-  "version": "9.0.0-alpha.4",
+  "version": "9.0.0-alpha.5",
   "description": "Fluent UI accordion component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -40,11 +40,11 @@
   },
   "dependencies": {
     "@fluentui/react-context-selector": "^0.53.4",
-    "@fluentui/react-focus-management": "^9.0.0-alpha.9",
-    "@fluentui/react-make-styles": "^9.0.0-alpha.13",
+    "@fluentui/react-focus-management": "^9.0.0-alpha.10",
+    "@fluentui/react-make-styles": "^9.0.0-alpha.14",
     "@fluentui/react-theme": "^9.0.0-alpha.6",
-    "@fluentui/react-theme-provider": "^9.0.0-alpha.13",
-    "@fluentui/react-utilities": "^9.0.0-alpha.10",
+    "@fluentui/react-theme-provider": "^9.0.0-alpha.14",
+    "@fluentui/react-utilities": "^9.0.0-alpha.11",
     "tslib": "^1.10.0"
   },
   "peerDependencies": {
diff --git a/packages/react-avatar/CHANGELOG.json b/packages/react-avatar/CHANGELOG.json
index a05d5d210d298f..392e34f80b7dd1 100644
--- a/packages/react-avatar/CHANGELOG.json
+++ b/packages/react-avatar/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react-avatar",
   "entries": [
+    {
+      "date": "Thu, 25 Mar 2021 07:33:24 GMT",
+      "tag": "@fluentui/react-avatar_v9.0.0-alpha.15",
+      "version": "9.0.0-alpha.15",
+      "comments": {
+        "prerelease": [
+          {
+            "comment": "Bump @fluentui/react-make-styles to v9.0.0-alpha.14",
+            "author": "olfedias@microsoft.com",
+            "commit": "66638eed425fff31d69182529b03268836c5e1ec",
+            "package": "@fluentui/react-avatar"
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 24 Mar 2021 07:32:21 GMT",
       "tag": "@fluentui/react-avatar_v9.0.0-alpha.14",
diff --git a/packages/react-avatar/CHANGELOG.md b/packages/react-avatar/CHANGELOG.md
index b5c7f47b2ebf76..768c3cc35635a4 100644
--- a/packages/react-avatar/CHANGELOG.md
+++ b/packages/react-avatar/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-avatar
 
-This log was last generated on Wed, 24 Mar 2021 07:32:21 GMT and should not be manually modified.
+This log was last generated on Thu, 25 Mar 2021 07:33:24 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-alpha.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.0.0-alpha.15)
+
+Thu, 25 Mar 2021 07:33:24 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-avatar_v9.0.0-alpha.14..@fluentui/react-avatar_v9.0.0-alpha.15)
+
+### Changes
+
+- Bump @fluentui/react-make-styles to v9.0.0-alpha.14 ([PR #17539](https://github.com/microsoft/fluentui/pull/17539) by olfedias@microsoft.com)
+
 ## [9.0.0-alpha.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.0.0-alpha.14)
 
 Wed, 24 Mar 2021 07:32:21 GMT 
diff --git a/packages/react-avatar/package.json b/packages/react-avatar/package.json
index 95c2f84018e7b7..155ec7f329c4d3 100644
--- a/packages/react-avatar/package.json
+++ b/packages/react-avatar/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-avatar",
-  "version": "9.0.0-alpha.14",
+  "version": "9.0.0-alpha.15",
   "description": "React components for building Microsoft web experiences.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -39,9 +39,9 @@
     "react-test-renderer": "^16.3.0"
   },
   "dependencies": {
-    "@fluentui/react-make-styles": "^9.0.0-alpha.13",
+    "@fluentui/react-make-styles": "^9.0.0-alpha.14",
     "@fluentui/react-theme": "^9.0.0-alpha.6",
-    "@fluentui/react-utilities": "^9.0.0-alpha.10",
+    "@fluentui/react-utilities": "^9.0.0-alpha.11",
     "tslib": "^1.10.0"
   },
   "peerDependencies": {
diff --git a/packages/react-badge/CHANGELOG.json b/packages/react-badge/CHANGELOG.json
index 020267c15c2086..32e1ecbaf79b5c 100644
--- a/packages/react-badge/CHANGELOG.json
+++ b/packages/react-badge/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react-badge",
   "entries": [
+    {
+      "date": "Thu, 25 Mar 2021 07:33:24 GMT",
+      "tag": "@fluentui/react-badge_v9.0.0-alpha.17",
+      "version": "9.0.0-alpha.17",
+      "comments": {
+        "prerelease": [
+          {
+            "comment": "Bump @fluentui/react-make-styles to v9.0.0-alpha.14",
+            "author": "olfedias@microsoft.com",
+            "commit": "66638eed425fff31d69182529b03268836c5e1ec",
+            "package": "@fluentui/react-badge"
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 24 Mar 2021 07:32:21 GMT",
       "tag": "@fluentui/react-badge_v9.0.0-alpha.16",
diff --git a/packages/react-badge/CHANGELOG.md b/packages/react-badge/CHANGELOG.md
index 20978e84cc3386..8ade23206e8fe1 100644
--- a/packages/react-badge/CHANGELOG.md
+++ b/packages/react-badge/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-badge
 
-This log was last generated on Wed, 24 Mar 2021 07:32:21 GMT and should not be manually modified.
+This log was last generated on Thu, 25 Mar 2021 07:33:24 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-alpha.17](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.0.0-alpha.17)
+
+Thu, 25 Mar 2021 07:33:24 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.0.0-alpha.16..@fluentui/react-badge_v9.0.0-alpha.17)
+
+### Changes
+
+- Bump @fluentui/react-make-styles to v9.0.0-alpha.14 ([PR #17539](https://github.com/microsoft/fluentui/pull/17539) by olfedias@microsoft.com)
+
 ## [9.0.0-alpha.16](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.0.0-alpha.16)
 
 Wed, 24 Mar 2021 07:32:21 GMT 
diff --git a/packages/react-badge/package.json b/packages/react-badge/package.json
index f6a90d5d418f22..10199e878a1761 100644
--- a/packages/react-badge/package.json
+++ b/packages/react-badge/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-badge",
-  "version": "9.0.0-alpha.16",
+  "version": "9.0.0-alpha.17",
   "description": "React components for building web experiences",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -38,9 +38,9 @@
     "react-test-renderer": "^16.3.0"
   },
   "dependencies": {
-    "@fluentui/react-make-styles": "^9.0.0-alpha.13",
+    "@fluentui/react-make-styles": "^9.0.0-alpha.14",
     "@fluentui/react-theme": "^9.0.0-alpha.6",
-    "@fluentui/react-utilities": "^9.0.0-alpha.10",
+    "@fluentui/react-utilities": "^9.0.0-alpha.11",
     "tslib": "^1.10.0"
   },
   "peerDependencies": {
diff --git a/packages/react-button/CHANGELOG.json b/packages/react-button/CHANGELOG.json
index 7496f0fed20f6f..4b9f2aa628163d 100644
--- a/packages/react-button/CHANGELOG.json
+++ b/packages/react-button/CHANGELOG.json
@@ -1,6 +1,27 @@
 {
   "name": "@fluentui/react-button",
   "entries": [
+    {
+      "date": "Thu, 25 Mar 2021 07:33:24 GMT",
+      "tag": "@fluentui/react-button_v9.0.0-alpha.15",
+      "version": "9.0.0-alpha.15",
+      "comments": {
+        "prerelease": [
+          {
+            "comment": "Button: Adding SPEC.md and MIGRATION.md and updating README.md",
+            "author": "Humberto.Morimoto@microsoft.com",
+            "commit": "f9819c97079f87f98e064821e43abed8f2ef31e5",
+            "package": "@fluentui/react-button"
+          },
+          {
+            "comment": "CompoundButton: Re-introducing CompoundButton using latest version of makeStyles.",
+            "author": "Humberto.Morimoto@microsoft.com",
+            "commit": "28d34d2a88ba8db9a38aa7c9816f3be2dd44f998",
+            "package": "@fluentui/react-button"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 23 Mar 2021 07:31:43 GMT",
       "tag": "@fluentui/react-button_v9.0.0-alpha.14",
diff --git a/packages/react-button/CHANGELOG.md b/packages/react-button/CHANGELOG.md
index 36e1a0409410e4..46a59cfd0b518d 100644
--- a/packages/react-button/CHANGELOG.md
+++ b/packages/react-button/CHANGELOG.md
@@ -1,9 +1,19 @@
 # Change Log - @fluentui/react-button
 
-This log was last generated on Tue, 23 Mar 2021 07:31:43 GMT and should not be manually modified.
+This log was last generated on Thu, 25 Mar 2021 07:33:24 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-alpha.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v9.0.0-alpha.15)
+
+Thu, 25 Mar 2021 07:33:24 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-button_v9.0.0-alpha.14..@fluentui/react-button_v9.0.0-alpha.15)
+
+### Changes
+
+- Button: Adding SPEC.md and MIGRATION.md and updating README.md ([PR #17192](https://github.com/microsoft/fluentui/pull/17192) by Humberto.Morimoto@microsoft.com)
+- CompoundButton: Re-introducing CompoundButton using latest version of makeStyles. ([PR #17534](https://github.com/microsoft/fluentui/pull/17534) by Humberto.Morimoto@microsoft.com)
+
 ## [9.0.0-alpha.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v9.0.0-alpha.14)
 
 Tue, 23 Mar 2021 07:31:43 GMT 
diff --git a/packages/react-button/package.json b/packages/react-button/package.json
index 35199bd80520ea..4e0380a601b8df 100644
--- a/packages/react-button/package.json
+++ b/packages/react-button/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-button",
-  "version": "9.0.0-alpha.14",
+  "version": "9.0.0-alpha.15",
   "description": "Fluent UI React Button component.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -40,9 +40,9 @@
   },
   "dependencies": {
     "@fluentui/keyboard-key": "^0.2.14",
-    "@fluentui/react-make-styles": "^9.0.0-alpha.13",
+    "@fluentui/react-make-styles": "^9.0.0-alpha.14",
     "@fluentui/react-theme": "^9.0.0-alpha.6",
-    "@fluentui/react-utilities": "^9.0.0-alpha.10",
+    "@fluentui/react-utilities": "^9.0.0-alpha.11",
     "tslib": "^1.10.0"
   },
   "peerDependencies": {
diff --git a/packages/react-cards/CHANGELOG.json b/packages/react-cards/CHANGELOG.json
index 41b7ed8f4da571..7f76c5845eb391 100644
--- a/packages/react-cards/CHANGELOG.json
+++ b/packages/react-cards/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react-cards",
   "entries": [
+    {
+      "date": "Thu, 25 Mar 2021 07:33:24 GMT",
+      "tag": "@fluentui/react-cards_v1.0.0-beta.74",
+      "version": "1.0.0-beta.74",
+      "comments": {
+        "prerelease": [
+          {
+            "comment": "Bump @fluentui/react-make-styles to v9.0.0-alpha.14",
+            "author": "olfedias@microsoft.com",
+            "commit": "66638eed425fff31d69182529b03268836c5e1ec",
+            "package": "@fluentui/react-cards"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 23 Mar 2021 07:31:43 GMT",
       "tag": "@fluentui/react-cards_v1.0.0-beta.73",
diff --git a/packages/react-cards/CHANGELOG.md b/packages/react-cards/CHANGELOG.md
index 5e5907069d1e6b..1b5dd24bbf5624 100644
--- a/packages/react-cards/CHANGELOG.md
+++ b/packages/react-cards/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-cards
 
-This log was last generated on Tue, 23 Mar 2021 07:31:43 GMT and should not be manually modified.
+This log was last generated on Thu, 25 Mar 2021 07:33:24 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [1.0.0-beta.74](https://github.com/microsoft/fluentui/tree/@fluentui/react-cards_v1.0.0-beta.74)
+
+Thu, 25 Mar 2021 07:33:24 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-cards_v1.0.0-beta.73..@fluentui/react-cards_v1.0.0-beta.74)
+
+### Changes
+
+- Bump @fluentui/react-make-styles to v9.0.0-alpha.14 ([PR #17539](https://github.com/microsoft/fluentui/pull/17539) by olfedias@microsoft.com)
+
 ## [1.0.0-beta.73](https://github.com/microsoft/fluentui/tree/@fluentui/react-cards_v1.0.0-beta.73)
 
 Tue, 23 Mar 2021 07:31:43 GMT 
diff --git a/packages/react-cards/package.json b/packages/react-cards/package.json
index 384abe2e389eb0..69eb6988683e13 100644
--- a/packages/react-cards/package.json
+++ b/packages/react-cards/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-cards",
-  "version": "1.0.0-beta.73",
+  "version": "1.0.0-beta.74",
   "description": "Card container components for Fluent UI React.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -38,8 +38,8 @@
   },
   "dependencies": {
     "@fluentui/keyboard-key": "^0.2.14",
-    "@fluentui/react-make-styles": "^9.0.0-alpha.13",
-    "@fluentui/react-utilities": "^9.0.0-alpha.10",
+    "@fluentui/react-make-styles": "^9.0.0-alpha.14",
+    "@fluentui/react-utilities": "^9.0.0-alpha.11",
     "@fluentui/utilities": "^8.0.2",
     "tslib": "^1.10.0"
   },
diff --git a/packages/react-charting/CHANGELOG.json b/packages/react-charting/CHANGELOG.json
index 616daa89732db3..9a1ae120f5da7f 100644
--- a/packages/react-charting/CHANGELOG.json
+++ b/packages/react-charting/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react-charting",
   "entries": [
+    {
+      "date": "Thu, 25 Mar 2021 07:33:24 GMT",
+      "tag": "@fluentui/react-charting_v5.0.18",
+      "version": "5.0.18",
+      "comments": {
+        "patch": [
+          {
+            "comment": "Bump @fluentui/react to v8.6.1",
+            "author": "Humberto.Morimoto@microsoft.com",
+            "commit": "2338c30df092ac05df393631bb8e59bcd9fec7b0",
+            "package": "@fluentui/react-charting"
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 24 Mar 2021 07:32:21 GMT",
       "tag": "@fluentui/react-charting_v5.0.17",
diff --git a/packages/react-charting/CHANGELOG.md b/packages/react-charting/CHANGELOG.md
index c456b22edc9080..f6836c9882dfa0 100644
--- a/packages/react-charting/CHANGELOG.md
+++ b/packages/react-charting/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-charting
 
-This log was last generated on Wed, 24 Mar 2021 07:32:21 GMT and should not be manually modified.
+This log was last generated on Thu, 25 Mar 2021 07:33:24 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [5.0.18](https://github.com/microsoft/fluentui/tree/@fluentui/react-charting_v5.0.18)
+
+Thu, 25 Mar 2021 07:33:24 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charting_v5.0.17..@fluentui/react-charting_v5.0.18)
+
+### Patches
+
+- Bump @fluentui/react to v8.6.1 ([PR #17507](https://github.com/microsoft/fluentui/pull/17507) by Humberto.Morimoto@microsoft.com)
+
 ## [5.0.17](https://github.com/microsoft/fluentui/tree/@fluentui/react-charting_v5.0.17)
 
 Wed, 24 Mar 2021 07:32:21 GMT 
diff --git a/packages/react-charting/package.json b/packages/react-charting/package.json
index 0e8c34d7cf5e5b..0bcb52d60bed66 100644
--- a/packages/react-charting/package.json
+++ b/packages/react-charting/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-charting",
-  "version": "5.0.17",
+  "version": "5.0.18",
   "description": "Experimental React charting components for building experiences for Microsoft 365.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -28,7 +28,7 @@
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "^1.0.1",
-    "@fluentui/react": "^8.6.0",
+    "@fluentui/react": "^8.6.1",
     "@types/enzyme": "3.10.3",
     "@types/enzyme-adapter-react-16": "1.0.3",
     "@types/react": "16.9.42",
@@ -65,7 +65,7 @@
     "tslib": "^1.10.0"
   },
   "peerDependencies": {
-    "@fluentui/react": "^8.6.0",
+    "@fluentui/react": "^8.6.1",
     "@types/react": ">=16.8.0 <18.0.0",
     "@types/react-dom": ">=16.8.0 <18.0.0",
     "react": ">=16.8.0 <18.0.0",
diff --git a/packages/react-components/CHANGELOG.json b/packages/react-components/CHANGELOG.json
index 51a48f5825ebcc..9c95f659639ebf 100644
--- a/packages/react-components/CHANGELOG.json
+++ b/packages/react-components/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react-components",
   "entries": [
+    {
+      "date": "Thu, 25 Mar 2021 07:33:24 GMT",
+      "tag": "@fluentui/react-components_v9.0.0-alpha.17",
+      "version": "9.0.0-alpha.17",
+      "comments": {
+        "prerelease": [
+          {
+            "comment": "Adds react-divider as dependency and re-export it",
+            "author": "bsunderhus@microsoft.com",
+            "commit": "ceb537f6583b8b9853b63a8782f43f1fb4c9594f",
+            "package": "@fluentui/react-components"
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 24 Mar 2021 07:32:21 GMT",
       "tag": "@fluentui/react-components_v9.0.0-alpha.16",
diff --git a/packages/react-components/CHANGELOG.md b/packages/react-components/CHANGELOG.md
index 1f00cf7522a8bd..d28c61fbe50d4a 100644
--- a/packages/react-components/CHANGELOG.md
+++ b/packages/react-components/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-components
 
-This log was last generated on Wed, 24 Mar 2021 07:32:21 GMT and should not be manually modified.
+This log was last generated on Thu, 25 Mar 2021 07:33:24 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-alpha.17](https://github.com/microsoft/fluentui/tree/@fluentui/react-components_v9.0.0-alpha.17)
+
+Thu, 25 Mar 2021 07:33:24 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-components_v9.0.0-alpha.16..@fluentui/react-components_v9.0.0-alpha.17)
+
+### Changes
+
+- Adds react-divider as dependency and re-export it ([PR #17540](https://github.com/microsoft/fluentui/pull/17540) by bsunderhus@microsoft.com)
+
 ## [9.0.0-alpha.16](https://github.com/microsoft/fluentui/tree/@fluentui/react-components_v9.0.0-alpha.16)
 
 Wed, 24 Mar 2021 07:32:21 GMT 
diff --git a/packages/react-components/package.json b/packages/react-components/package.json
index d1b40e7f6322b9..295de1cad799c8 100644
--- a/packages/react-components/package.json
+++ b/packages/react-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-components",
-  "version": "9.0.0-alpha.16",
+  "version": "9.0.0-alpha.17",
   "description": "Suite package for converged React components",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -28,15 +28,15 @@
     "react-dom": "16.8.6"
   },
   "dependencies": {
-    "@fluentui/react-avatar": "^9.0.0-alpha.14",
-    "@fluentui/react-button": "^9.0.0-alpha.14",
-    "@fluentui/react-divider": "^9.0.0-alpha.3",
-    "@fluentui/react-image": "^9.0.0-alpha.14",
-    "@fluentui/react-link": "^9.0.0-alpha.14",
-    "@fluentui/react-make-styles": "^9.0.0-alpha.13",
-    "@fluentui/react-provider": "^9.0.0-alpha.13",
+    "@fluentui/react-avatar": "^9.0.0-alpha.15",
+    "@fluentui/react-button": "^9.0.0-alpha.15",
+    "@fluentui/react-divider": "^9.0.0-alpha.4",
+    "@fluentui/react-image": "^9.0.0-alpha.15",
+    "@fluentui/react-link": "^9.0.0-alpha.15",
+    "@fluentui/react-make-styles": "^9.0.0-alpha.14",
+    "@fluentui/react-provider": "^9.0.0-alpha.14",
     "@fluentui/react-theme": "^9.0.0-alpha.6",
-    "@fluentui/react-theme-provider": "^9.0.0-alpha.13",
+    "@fluentui/react-theme-provider": "^9.0.0-alpha.14",
     "tslib": "^1.10.0"
   },
   "peerDependencies": {
diff --git a/packages/react-date-time/CHANGELOG.json b/packages/react-date-time/CHANGELOG.json
index de579a525acb1f..35155fd463c82a 100644
--- a/packages/react-date-time/CHANGELOG.json
+++ b/packages/react-date-time/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react-date-time",
   "entries": [
+    {
+      "date": "Thu, 25 Mar 2021 07:33:24 GMT",
+      "tag": "@fluentui/react-date-time_v8.0.17",
+      "version": "8.0.17",
+      "comments": {
+        "patch": [
+          {
+            "comment": "Bump @fluentui/react to v8.6.1",
+            "author": "Humberto.Morimoto@microsoft.com",
+            "commit": "2338c30df092ac05df393631bb8e59bcd9fec7b0",
+            "package": "@fluentui/react-date-time"
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 24 Mar 2021 07:32:21 GMT",
       "tag": "@fluentui/react-date-time_v8.0.16",
diff --git a/packages/react-date-time/CHANGELOG.md b/packages/react-date-time/CHANGELOG.md
index c6e049d7bfae98..788bfec25dd300 100644
--- a/packages/react-date-time/CHANGELOG.md
+++ b/packages/react-date-time/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-date-time
 
-This log was last generated on Wed, 24 Mar 2021 07:32:21 GMT and should not be manually modified.
+This log was last generated on Thu, 25 Mar 2021 07:33:24 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [8.0.17](https://github.com/microsoft/fluentui/tree/@fluentui/react-date-time_v8.0.17)
+
+Thu, 25 Mar 2021 07:33:24 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-date-time_v8.0.16..@fluentui/react-date-time_v8.0.17)
+
+### Patches
+
+- Bump @fluentui/react to v8.6.1 ([PR #17507](https://github.com/microsoft/fluentui/pull/17507) by Humberto.Morimoto@microsoft.com)
+
 ## [8.0.16](https://github.com/microsoft/fluentui/tree/@fluentui/react-date-time_v8.0.16)
 
 Wed, 24 Mar 2021 07:32:21 GMT 
diff --git a/packages/react-date-time/package.json b/packages/react-date-time/package.json
index 000498fb2628dd..e9913acd26f47d 100644
--- a/packages/react-date-time/package.json
+++ b/packages/react-date-time/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-date-time",
-  "version": "8.0.16",
+  "version": "8.0.17",
   "description": "Date and time related React components for building experiences for Microsoft 365.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -30,7 +30,7 @@
     "react-dom": "16.8.6"
   },
   "dependencies": {
-    "@fluentui/react": "^8.6.0",
+    "@fluentui/react": "^8.6.1",
     "@fluentui/set-version": "^8.0.1",
     "tslib": "^1.10.0"
   },
diff --git a/packages/react-divider/CHANGELOG.json b/packages/react-divider/CHANGELOG.json
index 6766203af34fa3..165409837ce4f8 100644
--- a/packages/react-divider/CHANGELOG.json
+++ b/packages/react-divider/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react-divider",
   "entries": [
+    {
+      "date": "Thu, 25 Mar 2021 07:33:24 GMT",
+      "tag": "@fluentui/react-divider_v9.0.0-alpha.4",
+      "version": "9.0.0-alpha.4",
+      "comments": {
+        "prerelease": [
+          {
+            "comment": "Bump @fluentui/react-make-styles to v9.0.0-alpha.14",
+            "author": "olfedias@microsoft.com",
+            "commit": "66638eed425fff31d69182529b03268836c5e1ec",
+            "package": "@fluentui/react-divider"
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 24 Mar 2021 07:32:21 GMT",
       "tag": "@fluentui/react-divider_v9.0.0-alpha.3",
diff --git a/packages/react-divider/CHANGELOG.md b/packages/react-divider/CHANGELOG.md
index 590e206855cb97..d5651f3d892cfa 100644
--- a/packages/react-divider/CHANGELOG.md
+++ b/packages/react-divider/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-divider
 
-This log was last generated on Wed, 24 Mar 2021 07:32:21 GMT and should not be manually modified.
+This log was last generated on Thu, 25 Mar 2021 07:33:24 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-alpha.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-divider_v9.0.0-alpha.4)
+
+Thu, 25 Mar 2021 07:33:24 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-divider_v9.0.0-alpha.3..@fluentui/react-divider_v9.0.0-alpha.4)
+
+### Changes
+
+- Bump @fluentui/react-make-styles to v9.0.0-alpha.14 ([PR #17539](https://github.com/microsoft/fluentui/pull/17539) by olfedias@microsoft.com)
+
 ## [9.0.0-alpha.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-divider_v9.0.0-alpha.3)
 
 Wed, 24 Mar 2021 07:32:21 GMT 
diff --git a/packages/react-divider/package.json b/packages/react-divider/package.json
index 7e8003b44290c7..1ef0570b3f44fd 100644
--- a/packages/react-divider/package.json
+++ b/packages/react-divider/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-divider",
-  "version": "9.0.0-alpha.3",
+  "version": "9.0.0-alpha.4",
   "description": "Fluent UI component to visually separate content.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -38,8 +38,8 @@
     "react-test-renderer": "^16.3.0"
   },
   "dependencies": {
-    "@fluentui/react-make-styles": "^9.0.0-alpha.13",
-    "@fluentui/react-utilities": "^9.0.0-alpha.10",
+    "@fluentui/react-make-styles": "^9.0.0-alpha.14",
+    "@fluentui/react-utilities": "^9.0.0-alpha.11",
     "tslib": "^1.10.0"
   },
   "peerDependencies": {
diff --git a/packages/react-docsite-components/CHANGELOG.json b/packages/react-docsite-components/CHANGELOG.json
index 76519ea047a168..bc4fd41c4085f9 100644
--- a/packages/react-docsite-components/CHANGELOG.json
+++ b/packages/react-docsite-components/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react-docsite-components",
   "entries": [
+    {
+      "date": "Thu, 25 Mar 2021 07:33:24 GMT",
+      "tag": "@fluentui/react-docsite-components_v8.0.17",
+      "version": "8.0.17",
+      "comments": {
+        "patch": [
+          {
+            "comment": "Bump @fluentui/react to v8.6.1",
+            "author": "Humberto.Morimoto@microsoft.com",
+            "commit": "2338c30df092ac05df393631bb8e59bcd9fec7b0",
+            "package": "@fluentui/react-docsite-components"
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 24 Mar 2021 07:32:21 GMT",
       "tag": "@fluentui/react-docsite-components_v8.0.16",
diff --git a/packages/react-docsite-components/CHANGELOG.md b/packages/react-docsite-components/CHANGELOG.md
index f265ed63114802..76e54cab4760d3 100644
--- a/packages/react-docsite-components/CHANGELOG.md
+++ b/packages/react-docsite-components/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-docsite-components
 
-This log was last generated on Wed, 24 Mar 2021 07:32:21 GMT and should not be manually modified.
+This log was last generated on Thu, 25 Mar 2021 07:33:24 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [8.0.17](https://github.com/microsoft/fluentui/tree/@fluentui/react-docsite-components_v8.0.17)
+
+Thu, 25 Mar 2021 07:33:24 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-docsite-components_v8.0.16..@fluentui/react-docsite-components_v8.0.17)
+
+### Patches
+
+- Bump @fluentui/react to v8.6.1 ([PR #17507](https://github.com/microsoft/fluentui/pull/17507) by Humberto.Morimoto@microsoft.com)
+
 ## [8.0.16](https://github.com/microsoft/fluentui/tree/@fluentui/react-docsite-components_v8.0.16)
 
 Wed, 24 Mar 2021 07:32:21 GMT 
diff --git a/packages/react-docsite-components/package.json b/packages/react-docsite-components/package.json
index 908b295a11eb6b..800863a5a39174 100644
--- a/packages/react-docsite-components/package.json
+++ b/packages/react-docsite-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-docsite-components",
-  "version": "8.0.16",
+  "version": "8.0.17",
   "description": "Fluent UI React components for building documentation sites.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -39,13 +39,13 @@
     "react-dom": ">=16.8.0 <18.0.0"
   },
   "dependencies": {
-    "@fluentui/react": "^8.6.0",
+    "@fluentui/react": "^8.6.1",
     "@fluentui/theme": "^2.0.2",
     "@microsoft/load-themed-styles": "^1.10.26",
     "@fluentui/example-data": "^8.1.1",
     "@fluentui/react-hooks": "^8.1.0",
     "@fluentui/set-version": "^8.0.1",
-    "@fluentui/react-monaco-editor": "^1.0.16",
+    "@fluentui/react-monaco-editor": "^1.0.17",
     "color-check": "0.0.2",
     "markdown-to-jsx": "6.11.4",
     "office-ui-fabric-core": "^11.0.0",
diff --git a/packages/react-examples/CHANGELOG.json b/packages/react-examples/CHANGELOG.json
index 84b7790faed6db..6f6ea45ea804d5 100644
--- a/packages/react-examples/CHANGELOG.json
+++ b/packages/react-examples/CHANGELOG.json
@@ -1,6 +1,145 @@
 {
   "name": "@fluentui/react-examples",
   "entries": [
+    {
+      "date": "Thu, 25 Mar 2021 07:33:24 GMT",
+      "tag": "@fluentui/react-examples_v8.9.1",
+      "version": "8.9.1",
+      "comments": {
+        "patch": [
+          {
+            "comment": "Autofill: Inherit font-family to prevent defaulting to Arial.",
+            "author": "Humberto.Morimoto@microsoft.com",
+            "commit": "2338c30df092ac05df393631bb8e59bcd9fec7b0",
+            "package": "@fluentui/react-examples"
+          },
+          {
+            "comment": "CompoundButton: Re-introducing CompoundButton using latest version of makeStyles.",
+            "author": "Humberto.Morimoto@microsoft.com",
+            "commit": "28d34d2a88ba8db9a38aa7c9816f3be2dd44f998",
+            "package": "@fluentui/react-examples"
+          }
+        ],
+        "prerelease": [
+          {
+            "comment": "Bump @fluentui/react-accordion to v9.0.0-alpha.5",
+            "author": "bsunderhus@microsoft.com",
+            "commit": "ad6de8f2d366057ea0c39fa64e648fb5776c9c35",
+            "package": "@fluentui/react-examples"
+          },
+          {
+            "comment": "Bump @fluentui/react-button to v9.0.0-alpha.15",
+            "author": "Humberto.Morimoto@microsoft.com",
+            "commit": "f9819c97079f87f98e064821e43abed8f2ef31e5",
+            "package": "@fluentui/react-examples"
+          },
+          {
+            "comment": "Bump @fluentui/react-components to v9.0.0-alpha.17",
+            "author": "bsunderhus@microsoft.com",
+            "commit": "ceb537f6583b8b9853b63a8782f43f1fb4c9594f",
+            "package": "@fluentui/react-examples"
+          },
+          {
+            "comment": "Bump @fluentui/react-slider to v1.0.0-beta.70",
+            "author": "Humberto.Morimoto@microsoft.com",
+            "commit": "2338c30df092ac05df393631bb8e59bcd9fec7b0",
+            "package": "@fluentui/react-examples"
+          },
+          {
+            "comment": "Bump @fluentui/react-tabs to v1.0.0-beta.72",
+            "author": "Humberto.Morimoto@microsoft.com",
+            "commit": "2338c30df092ac05df393631bb8e59bcd9fec7b0",
+            "package": "@fluentui/react-examples"
+          },
+          {
+            "comment": "Bump @fluentui/react-toggle to v1.0.0-beta.70",
+            "author": "Humberto.Morimoto@microsoft.com",
+            "commit": "2338c30df092ac05df393631bb8e59bcd9fec7b0",
+            "package": "@fluentui/react-examples"
+          },
+          {
+            "comment": "Bump @fluentui/react-link to v9.0.0-alpha.15",
+            "author": "Humberto.Morimoto@microsoft.com",
+            "commit": "f9819c97079f87f98e064821e43abed8f2ef31e5",
+            "package": "@fluentui/react-examples"
+          },
+          {
+            "comment": "Bump @fluentui/react-make-styles to v9.0.0-alpha.14",
+            "author": "olfedias@microsoft.com",
+            "commit": "66638eed425fff31d69182529b03268836c5e1ec",
+            "package": "@fluentui/react-examples"
+          },
+          {
+            "comment": "Bump @fluentui/react-avatar to v9.0.0-alpha.15",
+            "author": "olfedias@microsoft.com",
+            "commit": "66638eed425fff31d69182529b03268836c5e1ec",
+            "package": "@fluentui/react-examples"
+          },
+          {
+            "comment": "Bump @fluentui/react-badge to v9.0.0-alpha.17",
+            "author": "olfedias@microsoft.com",
+            "commit": "66638eed425fff31d69182529b03268836c5e1ec",
+            "package": "@fluentui/react-examples"
+          },
+          {
+            "comment": "Bump @fluentui/react-cards to v1.0.0-beta.74",
+            "author": "olfedias@microsoft.com",
+            "commit": "66638eed425fff31d69182529b03268836c5e1ec",
+            "package": "@fluentui/react-examples"
+          },
+          {
+            "comment": "Bump @fluentui/react-divider to v9.0.0-alpha.4",
+            "author": "olfedias@microsoft.com",
+            "commit": "66638eed425fff31d69182529b03268836c5e1ec",
+            "package": "@fluentui/react-examples"
+          },
+          {
+            "comment": "Bump @fluentui/react-image to v9.0.0-alpha.15",
+            "author": "olfedias@microsoft.com",
+            "commit": "66638eed425fff31d69182529b03268836c5e1ec",
+            "package": "@fluentui/react-examples"
+          },
+          {
+            "comment": "Bump @fluentui/react-tooltip to v9.0.0-alpha.11",
+            "author": "olfedias@microsoft.com",
+            "commit": "66638eed425fff31d69182529b03268836c5e1ec",
+            "package": "@fluentui/react-examples"
+          },
+          {
+            "comment": "Bump @fluentui/react-provider to v9.0.0-alpha.14",
+            "author": "lingfan.gao@microsoft.com",
+            "commit": "31b7b0d625e40f818d33c5df0890b584caaf0e6c",
+            "package": "@fluentui/react-examples"
+          },
+          {
+            "comment": "Bump @fluentui/react-theme-provider to v9.0.0-alpha.14",
+            "author": "lingfan.gao@microsoft.com",
+            "commit": "31b7b0d625e40f818d33c5df0890b584caaf0e6c",
+            "package": "@fluentui/react-examples"
+          }
+        ],
+        "none": [
+          {
+            "comment": "Bump @fluentui/react-menu to v0.11.0",
+            "author": "lingfan.gao@microsoft.com",
+            "commit": "31b7b0d625e40f818d33c5df0890b584caaf0e6c",
+            "package": "@fluentui/react-examples"
+          },
+          {
+            "comment": "Bump @fluentui/react-text to v0.2.5",
+            "author": "lingfan.gao@microsoft.com",
+            "commit": "31b7b0d625e40f818d33c5df0890b584caaf0e6c",
+            "package": "@fluentui/react-examples"
+          },
+          {
+            "comment": "Bump @fluentui/storybook to v1.0.0",
+            "author": "lingfan.gao@microsoft.com",
+            "commit": "31b7b0d625e40f818d33c5df0890b584caaf0e6c",
+            "package": "@fluentui/react-examples"
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 24 Mar 2021 07:32:21 GMT",
       "tag": "@fluentui/react-examples_v8.9.0",
diff --git a/packages/react-examples/CHANGELOG.md b/packages/react-examples/CHANGELOG.md
index 6081426eec5f5e..596cdf5c127956 100644
--- a/packages/react-examples/CHANGELOG.md
+++ b/packages/react-examples/CHANGELOG.md
@@ -1,9 +1,38 @@
 # Change Log - @fluentui/react-examples
 
-This log was last generated on Wed, 24 Mar 2021 07:32:21 GMT and should not be manually modified.
+This log was last generated on Thu, 25 Mar 2021 07:33:24 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [8.9.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-examples_v8.9.1)
+
+Thu, 25 Mar 2021 07:33:24 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-examples_v8.9.0..@fluentui/react-examples_v8.9.1)
+
+### Patches
+
+- Autofill: Inherit font-family to prevent defaulting to Arial. ([PR #17507](https://github.com/microsoft/fluentui/pull/17507) by Humberto.Morimoto@microsoft.com)
+- CompoundButton: Re-introducing CompoundButton using latest version of makeStyles. ([PR #17534](https://github.com/microsoft/fluentui/pull/17534) by Humberto.Morimoto@microsoft.com)
+
+### Changes
+
+- Bump @fluentui/react-accordion to v9.0.0-alpha.5 ([PR #17547](https://github.com/microsoft/fluentui/pull/17547) by bsunderhus@microsoft.com)
+- Bump @fluentui/react-button to v9.0.0-alpha.15 ([PR #17192](https://github.com/microsoft/fluentui/pull/17192) by Humberto.Morimoto@microsoft.com)
+- Bump @fluentui/react-components to v9.0.0-alpha.17 ([PR #17540](https://github.com/microsoft/fluentui/pull/17540) by bsunderhus@microsoft.com)
+- Bump @fluentui/react-slider to v1.0.0-beta.70 ([PR #17507](https://github.com/microsoft/fluentui/pull/17507) by Humberto.Morimoto@microsoft.com)
+- Bump @fluentui/react-tabs to v1.0.0-beta.72 ([PR #17507](https://github.com/microsoft/fluentui/pull/17507) by Humberto.Morimoto@microsoft.com)
+- Bump @fluentui/react-toggle to v1.0.0-beta.70 ([PR #17507](https://github.com/microsoft/fluentui/pull/17507) by Humberto.Morimoto@microsoft.com)
+- Bump @fluentui/react-link to v9.0.0-alpha.15 ([PR #17192](https://github.com/microsoft/fluentui/pull/17192) by Humberto.Morimoto@microsoft.com)
+- Bump @fluentui/react-make-styles to v9.0.0-alpha.14 ([PR #17539](https://github.com/microsoft/fluentui/pull/17539) by olfedias@microsoft.com)
+- Bump @fluentui/react-avatar to v9.0.0-alpha.15 ([PR #17539](https://github.com/microsoft/fluentui/pull/17539) by olfedias@microsoft.com)
+- Bump @fluentui/react-badge to v9.0.0-alpha.17 ([PR #17539](https://github.com/microsoft/fluentui/pull/17539) by olfedias@microsoft.com)
+- Bump @fluentui/react-cards to v1.0.0-beta.74 ([PR #17539](https://github.com/microsoft/fluentui/pull/17539) by olfedias@microsoft.com)
+- Bump @fluentui/react-divider to v9.0.0-alpha.4 ([PR #17539](https://github.com/microsoft/fluentui/pull/17539) by olfedias@microsoft.com)
+- Bump @fluentui/react-image to v9.0.0-alpha.15 ([PR #17539](https://github.com/microsoft/fluentui/pull/17539) by olfedias@microsoft.com)
+- Bump @fluentui/react-tooltip to v9.0.0-alpha.11 ([PR #17539](https://github.com/microsoft/fluentui/pull/17539) by olfedias@microsoft.com)
+- Bump @fluentui/react-provider to v9.0.0-alpha.14 ([PR #17528](https://github.com/microsoft/fluentui/pull/17528) by lingfan.gao@microsoft.com)
+- Bump @fluentui/react-theme-provider to v9.0.0-alpha.14 ([PR #17528](https://github.com/microsoft/fluentui/pull/17528) by lingfan.gao@microsoft.com)
+
 ## [8.9.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-examples_v8.9.0)
 
 Wed, 24 Mar 2021 07:32:21 GMT 
diff --git a/packages/react-examples/package.json b/packages/react-examples/package.json
index edbe1ca04c91a4..fe666828d6580e 100644
--- a/packages/react-examples/package.json
+++ b/packages/react-examples/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-examples",
-  "version": "8.9.0",
+  "version": "8.9.1",
   "description": "Example code and docs for Fluent UI packages.",
   "repository": {
     "type": "git",
@@ -38,45 +38,45 @@
   },
   "dependencies": {
     "@ctrl/tinycolor": "^3.3.4",
-    "@fluentui/azure-themes": "^8.0.17",
+    "@fluentui/azure-themes": "^8.0.18",
     "@fluentui/date-time-utilities": "^8.0.1",
     "@fluentui/example-data": "^8.1.1",
     "@fluentui/font-icons-mdl2": "^8.0.2",
     "@fluentui/foundation-legacy": "^8.0.2",
     "@fluentui/merge-styles": "^8.0.2",
-    "@fluentui/react": "^8.6.0",
-    "@fluentui/react-accordion": "^9.0.0-alpha.4",
-    "@fluentui/react-avatar": "^9.0.0-alpha.14",
-    "@fluentui/react-badge": "^9.0.0-alpha.16",
-    "@fluentui/react-button": "^9.0.0-alpha.14",
-    "@fluentui/react-cards": "^1.0.0-beta.73",
-    "@fluentui/react-charting": "^5.0.17",
+    "@fluentui/react": "^8.6.1",
+    "@fluentui/react-accordion": "^9.0.0-alpha.5",
+    "@fluentui/react-avatar": "^9.0.0-alpha.15",
+    "@fluentui/react-badge": "^9.0.0-alpha.17",
+    "@fluentui/react-button": "^9.0.0-alpha.15",
+    "@fluentui/react-cards": "^1.0.0-beta.74",
+    "@fluentui/react-charting": "^5.0.18",
     "@fluentui/react-checkbox": "^1.0.0-beta.53",
-    "@fluentui/react-components": "^9.0.0-alpha.16",
-    "@fluentui/react-divider": "^9.0.0-alpha.3",
-    "@fluentui/react-docsite-components": "^8.0.16",
-    "@fluentui/react-experiments": "^8.0.17",
+    "@fluentui/react-components": "^9.0.0-alpha.17",
+    "@fluentui/react-divider": "^9.0.0-alpha.4",
+    "@fluentui/react-docsite-components": "^8.0.17",
+    "@fluentui/react-experiments": "^8.0.18",
     "@fluentui/react-file-type-icons": "^8.0.2",
     "@fluentui/react-focus": "^8.0.4",
     "@fluentui/react-hooks": "^8.1.0",
     "@fluentui/react-icons-mdl2": "^1.0.2",
-    "@fluentui/react-image": "^9.0.0-alpha.14",
-    "@fluentui/react-link": "^9.0.0-alpha.14",
-    "@fluentui/react-make-styles": "^9.0.0-alpha.13",
+    "@fluentui/react-image": "^9.0.0-alpha.15",
+    "@fluentui/react-link": "^9.0.0-alpha.15",
+    "@fluentui/react-make-styles": "^9.0.0-alpha.14",
     "@fluentui/react-menu": "^0.11.0",
-    "@fluentui/react-provider": "^9.0.0-alpha.13",
+    "@fluentui/react-provider": "^9.0.0-alpha.14",
     "@fluentui/react-shared-contexts": "^1.0.0-beta.11",
-    "@fluentui/react-slider": "^1.0.0-beta.69",
-    "@fluentui/react-tabs": "^1.0.0-beta.71",
+    "@fluentui/react-slider": "^1.0.0-beta.70",
+    "@fluentui/react-tabs": "^1.0.0-beta.72",
     "@fluentui/react-text": "^0.2.5",
     "@fluentui/react-theme": "^9.0.0-alpha.6",
-    "@fluentui/react-theme-provider": "^9.0.0-alpha.13",
-    "@fluentui/react-toggle": "^1.0.0-beta.69",
-    "@fluentui/react-tooltip": "^9.0.0-alpha.10",
+    "@fluentui/react-theme-provider": "^9.0.0-alpha.14",
+    "@fluentui/react-toggle": "^1.0.0-beta.70",
+    "@fluentui/react-tooltip": "^9.0.0-alpha.11",
     "@fluentui/scheme-utilities": "^8.0.2",
     "@fluentui/style-utilities": "^8.0.2",
     "@fluentui/theme": "^2.0.2",
-    "@fluentui/theme-samples": "^8.0.16",
+    "@fluentui/theme-samples": "^8.0.17",
     "@fluentui/utilities": "^8.0.2",
     "@microsoft/load-themed-styles": "^1.10.26",
     "@types/react": "16.9.42",
diff --git a/packages/react-experiments/CHANGELOG.json b/packages/react-experiments/CHANGELOG.json
index 449c238de9b8a5..3414d30da24053 100644
--- a/packages/react-experiments/CHANGELOG.json
+++ b/packages/react-experiments/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react-experiments",
   "entries": [
+    {
+      "date": "Thu, 25 Mar 2021 07:33:24 GMT",
+      "tag": "@fluentui/react-experiments_v8.0.18",
+      "version": "8.0.18",
+      "comments": {
+        "patch": [
+          {
+            "comment": "Updating snapshots.",
+            "author": "Humberto.Morimoto@microsoft.com",
+            "commit": "2338c30df092ac05df393631bb8e59bcd9fec7b0",
+            "package": "@fluentui/react-experiments"
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 24 Mar 2021 07:32:21 GMT",
       "tag": "@fluentui/react-experiments_v8.0.17",
diff --git a/packages/react-experiments/CHANGELOG.md b/packages/react-experiments/CHANGELOG.md
index 4e1ca9b2a86ddd..a3e007d1c03f85 100644
--- a/packages/react-experiments/CHANGELOG.md
+++ b/packages/react-experiments/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-experiments
 
-This log was last generated on Wed, 24 Mar 2021 07:32:21 GMT and should not be manually modified.
+This log was last generated on Thu, 25 Mar 2021 07:33:24 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [8.0.18](https://github.com/microsoft/fluentui/tree/@fluentui/react-experiments_v8.0.18)
+
+Thu, 25 Mar 2021 07:33:24 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-experiments_v8.0.17..@fluentui/react-experiments_v8.0.18)
+
+### Patches
+
+- Updating snapshots. ([PR #17507](https://github.com/microsoft/fluentui/pull/17507) by Humberto.Morimoto@microsoft.com)
+
 ## [8.0.17](https://github.com/microsoft/fluentui/tree/@fluentui/react-experiments_v8.0.17)
 
 Wed, 24 Mar 2021 07:32:21 GMT 
diff --git a/packages/react-experiments/package.json b/packages/react-experiments/package.json
index c49469664d4ad4..f77be3d46bae66 100644
--- a/packages/react-experiments/package.json
+++ b/packages/react-experiments/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-experiments",
-  "version": "8.0.17",
+  "version": "8.0.18",
   "description": "Experimental React components for building experiences for Microsoft 365.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -48,7 +48,7 @@
     "react-test-renderer": "^16.3.0"
   },
   "dependencies": {
-    "@fluentui/react": "^8.6.0",
+    "@fluentui/react": "^8.6.1",
     "@fluentui/theme": "^2.0.2",
     "@microsoft/load-themed-styles": "^1.10.26",
     "@fluentui/example-data": "^8.1.1",
diff --git a/packages/react-flex/CHANGELOG.json b/packages/react-flex/CHANGELOG.json
index 95fa8d0c5ffa86..e6b9e4a2822d84 100644
--- a/packages/react-flex/CHANGELOG.json
+++ b/packages/react-flex/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react-flex",
   "entries": [
+    {
+      "date": "Thu, 25 Mar 2021 07:33:24 GMT",
+      "tag": "@fluentui/react-flex_v9.0.0-alpha.7",
+      "version": "9.0.0-alpha.7",
+      "comments": {
+        "prerelease": [
+          {
+            "comment": "Bump @fluentui/react-make-styles to v9.0.0-alpha.14",
+            "author": "olfedias@microsoft.com",
+            "commit": "66638eed425fff31d69182529b03268836c5e1ec",
+            "package": "@fluentui/react-flex"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 23 Mar 2021 07:31:43 GMT",
       "tag": "@fluentui/react-flex_v9.0.0-alpha.6",
diff --git a/packages/react-flex/CHANGELOG.md b/packages/react-flex/CHANGELOG.md
index 91643ecc8dda0e..4b9589d010f433 100644
--- a/packages/react-flex/CHANGELOG.md
+++ b/packages/react-flex/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-flex
 
-This log was last generated on Tue, 23 Mar 2021 07:31:43 GMT and should not be manually modified.
+This log was last generated on Thu, 25 Mar 2021 07:33:24 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-alpha.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-flex_v9.0.0-alpha.7)
+
+Thu, 25 Mar 2021 07:33:24 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-flex_v9.0.0-alpha.6..@fluentui/react-flex_v9.0.0-alpha.7)
+
+### Changes
+
+- Bump @fluentui/react-make-styles to v9.0.0-alpha.14 ([PR #17539](https://github.com/microsoft/fluentui/pull/17539) by olfedias@microsoft.com)
+
 ## [9.0.0-alpha.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-flex_v9.0.0-alpha.6)
 
 Tue, 23 Mar 2021 07:31:43 GMT 
diff --git a/packages/react-flex/package.json b/packages/react-flex/package.json
index 7376ad252683ce..807e5830755dfb 100644
--- a/packages/react-flex/package.json
+++ b/packages/react-flex/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-flex",
-  "version": "9.0.0-alpha.6",
+  "version": "9.0.0-alpha.7",
   "description": "Flex allows you to manage the layout, size, alignment, and gap of your components.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -38,8 +38,8 @@
     "react-test-renderer": "^16.3.0"
   },
   "dependencies": {
-    "@fluentui/react-make-styles": "^9.0.0-alpha.13",
-    "@fluentui/react-utilities": "^9.0.0-alpha.10",
+    "@fluentui/react-make-styles": "^9.0.0-alpha.14",
+    "@fluentui/react-utilities": "^9.0.0-alpha.11",
     "tslib": "^1.10.0"
   },
   "peerDependencies": {
diff --git a/packages/react-focus-management/CHANGELOG.json b/packages/react-focus-management/CHANGELOG.json
index c3b16843e6326d..18534d050bba1d 100644
--- a/packages/react-focus-management/CHANGELOG.json
+++ b/packages/react-focus-management/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react-focus-management",
   "entries": [
+    {
+      "date": "Thu, 25 Mar 2021 07:33:24 GMT",
+      "tag": "@fluentui/react-focus-management_v9.0.0-alpha.10",
+      "version": "9.0.0-alpha.10",
+      "comments": {
+        "prerelease": [
+          {
+            "comment": "Bump @fluentui/react-utilities to v9.0.0-alpha.11",
+            "author": "lingfan.gao@microsoft.com",
+            "commit": "31b7b0d625e40f818d33c5df0890b584caaf0e6c",
+            "package": "@fluentui/react-focus-management"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 23 Mar 2021 07:31:43 GMT",
       "tag": "@fluentui/react-focus-management_v9.0.0-alpha.9",
diff --git a/packages/react-focus-management/CHANGELOG.md b/packages/react-focus-management/CHANGELOG.md
index e26ba5fe8c889a..793632688af33d 100644
--- a/packages/react-focus-management/CHANGELOG.md
+++ b/packages/react-focus-management/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-focus-management
 
-This log was last generated on Tue, 23 Mar 2021 07:31:43 GMT and should not be manually modified.
+This log was last generated on Thu, 25 Mar 2021 07:33:24 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-alpha.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-focus-management_v9.0.0-alpha.10)
+
+Thu, 25 Mar 2021 07:33:24 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-focus-management_v9.0.0-alpha.9..@fluentui/react-focus-management_v9.0.0-alpha.10)
+
+### Changes
+
+- Bump @fluentui/react-utilities to v9.0.0-alpha.11 ([PR #17528](https://github.com/microsoft/fluentui/pull/17528) by lingfan.gao@microsoft.com)
+
 ## [9.0.0-alpha.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-focus-management_v9.0.0-alpha.9)
 
 Tue, 23 Mar 2021 07:31:43 GMT 
diff --git a/packages/react-focus-management/package.json b/packages/react-focus-management/package.json
index 3471b9de896278..f718101243cef7 100644
--- a/packages/react-focus-management/package.json
+++ b/packages/react-focus-management/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-focus-management",
-  "version": "9.0.0-alpha.9",
+  "version": "9.0.0-alpha.10",
   "description": "Utilities for focus management and facade for ability-helpers",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -32,7 +32,7 @@
     "react-test-renderer": "^16.3.0"
   },
   "dependencies": {
-    "@fluentui/react-utilities": "^9.0.0-alpha.10",
+    "@fluentui/react-utilities": "^9.0.0-alpha.11",
     "ability-helpers": "^0.4.3",
     "tslib": "^1.10.0"
   },
diff --git a/packages/react-image/CHANGELOG.json b/packages/react-image/CHANGELOG.json
index 5531d44b06c2bc..ad912cdf33258a 100644
--- a/packages/react-image/CHANGELOG.json
+++ b/packages/react-image/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react-image",
   "entries": [
+    {
+      "date": "Thu, 25 Mar 2021 07:33:24 GMT",
+      "tag": "@fluentui/react-image_v9.0.0-alpha.15",
+      "version": "9.0.0-alpha.15",
+      "comments": {
+        "prerelease": [
+          {
+            "comment": "Bump @fluentui/react-make-styles to v9.0.0-alpha.14",
+            "author": "olfedias@microsoft.com",
+            "commit": "66638eed425fff31d69182529b03268836c5e1ec",
+            "package": "@fluentui/react-image"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 23 Mar 2021 07:31:43 GMT",
       "tag": "@fluentui/react-image_v9.0.0-alpha.14",
diff --git a/packages/react-image/CHANGELOG.md b/packages/react-image/CHANGELOG.md
index f8210b9c44d573..796ddfe21532dd 100644
--- a/packages/react-image/CHANGELOG.md
+++ b/packages/react-image/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-image
 
-This log was last generated on Tue, 23 Mar 2021 07:31:43 GMT and should not be manually modified.
+This log was last generated on Thu, 25 Mar 2021 07:33:24 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-alpha.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-image_v9.0.0-alpha.15)
+
+Thu, 25 Mar 2021 07:33:24 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-image_v9.0.0-alpha.14..@fluentui/react-image_v9.0.0-alpha.15)
+
+### Changes
+
+- Bump @fluentui/react-make-styles to v9.0.0-alpha.14 ([PR #17539](https://github.com/microsoft/fluentui/pull/17539) by olfedias@microsoft.com)
+
 ## [9.0.0-alpha.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-image_v9.0.0-alpha.14)
 
 Tue, 23 Mar 2021 07:31:43 GMT 
diff --git a/packages/react-image/package.json b/packages/react-image/package.json
index a9b6579dc1df00..a98ab2313bb14b 100644
--- a/packages/react-image/package.json
+++ b/packages/react-image/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-image",
-  "version": "9.0.0-alpha.14",
+  "version": "9.0.0-alpha.15",
   "description": "Fluent UI React Image component.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -39,8 +39,8 @@
     "react-test-renderer": "^16.3.0"
   },
   "dependencies": {
-    "@fluentui/react-make-styles": "^9.0.0-alpha.13",
-    "@fluentui/react-utilities": "^9.0.0-alpha.10",
+    "@fluentui/react-make-styles": "^9.0.0-alpha.14",
+    "@fluentui/react-utilities": "^9.0.0-alpha.11",
     "@microsoft/load-themed-styles": "^1.10.26",
     "object-fit-images": "^3.2.4",
     "tslib": "^1.10.0"
diff --git a/packages/react-link/CHANGELOG.json b/packages/react-link/CHANGELOG.json
index ba76d9a3771849..5a5ddba3670f5e 100644
--- a/packages/react-link/CHANGELOG.json
+++ b/packages/react-link/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react-link",
   "entries": [
+    {
+      "date": "Thu, 25 Mar 2021 07:33:24 GMT",
+      "tag": "@fluentui/react-link_v9.0.0-alpha.15",
+      "version": "9.0.0-alpha.15",
+      "comments": {
+        "prerelease": [
+          {
+            "comment": "Link: Removing allusion to component tokens in README.md and Link.types.ts",
+            "author": "Humberto.Morimoto@microsoft.com",
+            "commit": "f9819c97079f87f98e064821e43abed8f2ef31e5",
+            "package": "@fluentui/react-link"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 23 Mar 2021 07:31:43 GMT",
       "tag": "@fluentui/react-link_v9.0.0-alpha.14",
diff --git a/packages/react-link/CHANGELOG.md b/packages/react-link/CHANGELOG.md
index 53d675d2e1bc39..5a199dede4ce0e 100644
--- a/packages/react-link/CHANGELOG.md
+++ b/packages/react-link/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-link
 
-This log was last generated on Tue, 23 Mar 2021 07:31:43 GMT and should not be manually modified.
+This log was last generated on Thu, 25 Mar 2021 07:33:24 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-alpha.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-link_v9.0.0-alpha.15)
+
+Thu, 25 Mar 2021 07:33:24 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-link_v9.0.0-alpha.14..@fluentui/react-link_v9.0.0-alpha.15)
+
+### Changes
+
+- Link: Removing allusion to component tokens in README.md and Link.types.ts ([PR #17192](https://github.com/microsoft/fluentui/pull/17192) by Humberto.Morimoto@microsoft.com)
+
 ## [9.0.0-alpha.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-link_v9.0.0-alpha.14)
 
 Tue, 23 Mar 2021 07:31:43 GMT 
diff --git a/packages/react-link/package.json b/packages/react-link/package.json
index 9f05122a8f3e41..a78bcecfcb9666 100644
--- a/packages/react-link/package.json
+++ b/packages/react-link/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-link",
-  "version": "9.0.0-alpha.14",
+  "version": "9.0.0-alpha.15",
   "description": "Fluent UI React Link component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -41,8 +41,8 @@
   },
   "dependencies": {
     "@fluentui/keyboard-key": "^0.2.14",
-    "@fluentui/react-make-styles": "^9.0.0-alpha.13",
-    "@fluentui/react-utilities": "^9.0.0-alpha.10",
+    "@fluentui/react-make-styles": "^9.0.0-alpha.14",
+    "@fluentui/react-utilities": "^9.0.0-alpha.11",
     "tslib": "^1.10.0"
   },
   "peerDependencies": {
diff --git a/packages/react-make-styles/CHANGELOG.json b/packages/react-make-styles/CHANGELOG.json
index 1466cd394484f4..644ce6ea2427e8 100644
--- a/packages/react-make-styles/CHANGELOG.json
+++ b/packages/react-make-styles/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react-make-styles",
   "entries": [
+    {
+      "date": "Thu, 25 Mar 2021 07:33:24 GMT",
+      "tag": "@fluentui/react-make-styles_v9.0.0-alpha.14",
+      "version": "9.0.0-alpha.14",
+      "comments": {
+        "prerelease": [
+          {
+            "comment": "chore: remove makeStylesCompat()",
+            "author": "olfedias@microsoft.com",
+            "commit": "66638eed425fff31d69182529b03268836c5e1ec",
+            "package": "@fluentui/react-make-styles"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 23 Mar 2021 07:31:43 GMT",
       "tag": "@fluentui/react-make-styles_v9.0.0-alpha.13",
diff --git a/packages/react-make-styles/CHANGELOG.md b/packages/react-make-styles/CHANGELOG.md
index d5c96db2a08c62..227bb6d09fa7b8 100644
--- a/packages/react-make-styles/CHANGELOG.md
+++ b/packages/react-make-styles/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-make-styles
 
-This log was last generated on Tue, 23 Mar 2021 07:31:43 GMT and should not be manually modified.
+This log was last generated on Thu, 25 Mar 2021 07:33:24 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-alpha.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-make-styles_v9.0.0-alpha.14)
+
+Thu, 25 Mar 2021 07:33:24 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-make-styles_v9.0.0-alpha.13..@fluentui/react-make-styles_v9.0.0-alpha.14)
+
+### Changes
+
+- chore: remove makeStylesCompat() ([PR #17539](https://github.com/microsoft/fluentui/pull/17539) by olfedias@microsoft.com)
+
 ## [9.0.0-alpha.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-make-styles_v9.0.0-alpha.13)
 
 Tue, 23 Mar 2021 07:31:43 GMT 
diff --git a/packages/react-make-styles/package.json b/packages/react-make-styles/package.json
index 977e7ae7cd8fa5..40de3d7e3c18af 100644
--- a/packages/react-make-styles/package.json
+++ b/packages/react-make-styles/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-make-styles",
-  "version": "9.0.0-alpha.13",
+  "version": "9.0.0-alpha.14",
   "description": "React bindings for @fluentui/make-styles",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -28,10 +28,10 @@
     "react-dom": "16.8.6"
   },
   "dependencies": {
-    "@fluentui/make-styles": "^9.0.0-alpha.5",
-    "@fluentui/react-provider": "^9.0.0-alpha.13",
+    "@fluentui/make-styles": "^9.0.0-alpha.6",
+    "@fluentui/react-provider": "^9.0.0-alpha.14",
     "@fluentui/react-theme": "^9.0.0-alpha.6",
-    "@fluentui/react-theme-provider": "^9.0.0-alpha.13",
+    "@fluentui/react-theme-provider": "^9.0.0-alpha.14",
     "tslib": "^1.10.0"
   },
   "peerDependencies": {
diff --git a/packages/react-menu/CHANGELOG.json b/packages/react-menu/CHANGELOG.json
index a5cfbf5e6e0a9f..4e48e63d4a6527 100644
--- a/packages/react-menu/CHANGELOG.json
+++ b/packages/react-menu/CHANGELOG.json
@@ -1,6 +1,45 @@
 {
   "name": "@fluentui/react-menu",
   "entries": [
+    {
+      "date": "Thu, 25 Mar 2021 07:33:24 GMT",
+      "tag": "@fluentui/react-menu_v0.11.0",
+      "version": "0.11.0",
+      "comments": {
+        "prerelease": [
+          {
+            "comment": "Bump @fluentui/react-make-styles to v9.0.0-alpha.14",
+            "author": "olfedias@microsoft.com",
+            "commit": "66638eed425fff31d69182529b03268836c5e1ec",
+            "package": "@fluentui/react-menu"
+          },
+          {
+            "comment": "Bump @fluentui/react-utilities to v9.0.0-alpha.11",
+            "author": "lingfan.gao@microsoft.com",
+            "commit": "31b7b0d625e40f818d33c5df0890b584caaf0e6c",
+            "package": "@fluentui/react-menu"
+          },
+          {
+            "comment": "Bump @fluentui/react-focus-management to v9.0.0-alpha.10",
+            "author": "lingfan.gao@microsoft.com",
+            "commit": "31b7b0d625e40f818d33c5df0890b584caaf0e6c",
+            "package": "@fluentui/react-menu"
+          },
+          {
+            "comment": "Bump @fluentui/react-provider to v9.0.0-alpha.14",
+            "author": "lingfan.gao@microsoft.com",
+            "commit": "31b7b0d625e40f818d33c5df0890b584caaf0e6c",
+            "package": "@fluentui/react-menu"
+          },
+          {
+            "comment": "Bump @fluentui/react-positioning to v9.0.0-alpha.2",
+            "author": "lingfan.gao@microsoft.com",
+            "commit": "31b7b0d625e40f818d33c5df0890b584caaf0e6c",
+            "package": "@fluentui/react-menu"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 23 Mar 2021 07:31:43 GMT",
       "tag": "@fluentui/react-menu_v0.11.0",
diff --git a/packages/react-menu/CHANGELOG.md b/packages/react-menu/CHANGELOG.md
index f1f61b25d9afe6..103ebf3b39c5b3 100644
--- a/packages/react-menu/CHANGELOG.md
+++ b/packages/react-menu/CHANGELOG.md
@@ -1,11 +1,24 @@
 # Change Log - @fluentui/react-menu
 
-This log was last generated on Tue, 23 Mar 2021 07:31:43 GMT and should not be manually modified.
+This log was last generated on Thu, 25 Mar 2021 07:33:24 GMT and should not be manually modified.
 
 <!-- Start content -->
 
 ## [0.11.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v0.11.0)
 
+Thu, 25 Mar 2021 07:33:24 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu_v0.11.0..@fluentui/react-menu_v0.11.0)
+
+### Changes
+
+- Bump @fluentui/react-make-styles to v9.0.0-alpha.14 ([PR #17539](https://github.com/microsoft/fluentui/pull/17539) by olfedias@microsoft.com)
+- Bump @fluentui/react-utilities to v9.0.0-alpha.11 ([PR #17528](https://github.com/microsoft/fluentui/pull/17528) by lingfan.gao@microsoft.com)
+- Bump @fluentui/react-focus-management to v9.0.0-alpha.10 ([PR #17528](https://github.com/microsoft/fluentui/pull/17528) by lingfan.gao@microsoft.com)
+- Bump @fluentui/react-provider to v9.0.0-alpha.14 ([PR #17528](https://github.com/microsoft/fluentui/pull/17528) by lingfan.gao@microsoft.com)
+- Bump @fluentui/react-positioning to v9.0.0-alpha.2 ([PR #17528](https://github.com/microsoft/fluentui/pull/17528) by lingfan.gao@microsoft.com)
+
+## [0.11.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v0.11.0)
+
 Tue, 23 Mar 2021 07:31:43 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu_v0.10.0..@fluentui/react-menu_v0.11.0)
 
diff --git a/packages/react-menu/package.json b/packages/react-menu/package.json
index 885b29e1614bb2..9eef148a8c4b96 100644
--- a/packages/react-menu/package.json
+++ b/packages/react-menu/package.json
@@ -39,12 +39,12 @@
   },
   "dependencies": {
     "@fluentui/keyboard-key": "^0.2.14",
-    "@fluentui/react-focus-management": "^9.0.0-alpha.9",
+    "@fluentui/react-focus-management": "^9.0.0-alpha.10",
     "@fluentui/react-context-selector": "^0.53.4",
-    "@fluentui/react-make-styles": "^9.0.0-alpha.13",
-    "@fluentui/react-positioning": "^9.0.0-alpha.1",
-    "@fluentui/react-provider": "^9.0.0-alpha.13",
-    "@fluentui/react-utilities": "^9.0.0-alpha.10",
+    "@fluentui/react-make-styles": "^9.0.0-alpha.14",
+    "@fluentui/react-positioning": "^9.0.0-alpha.2",
+    "@fluentui/react-provider": "^9.0.0-alpha.14",
+    "@fluentui/react-utilities": "^9.0.0-alpha.11",
     "tslib": "^1.10.0"
   },
   "peerDependencies": {
diff --git a/packages/react-monaco-editor/CHANGELOG.json b/packages/react-monaco-editor/CHANGELOG.json
index a094aabffa8637..44e72abffd66dd 100644
--- a/packages/react-monaco-editor/CHANGELOG.json
+++ b/packages/react-monaco-editor/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react-monaco-editor",
   "entries": [
+    {
+      "date": "Thu, 25 Mar 2021 07:33:24 GMT",
+      "tag": "@fluentui/react-monaco-editor_v1.0.17",
+      "version": "1.0.17",
+      "comments": {
+        "patch": [
+          {
+            "comment": "Bump @fluentui/react to v8.6.1",
+            "author": "Humberto.Morimoto@microsoft.com",
+            "commit": "2338c30df092ac05df393631bb8e59bcd9fec7b0",
+            "package": "@fluentui/react-monaco-editor"
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 24 Mar 2021 07:32:21 GMT",
       "tag": "@fluentui/react-monaco-editor_v1.0.16",
diff --git a/packages/react-monaco-editor/CHANGELOG.md b/packages/react-monaco-editor/CHANGELOG.md
index 04c430fd4bd8dc..03cb36e7b5c62e 100644
--- a/packages/react-monaco-editor/CHANGELOG.md
+++ b/packages/react-monaco-editor/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-monaco-editor
 
-This log was last generated on Wed, 24 Mar 2021 07:32:21 GMT and should not be manually modified.
+This log was last generated on Thu, 25 Mar 2021 07:33:24 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [1.0.17](https://github.com/microsoft/fluentui/tree/@fluentui/react-monaco-editor_v1.0.17)
+
+Thu, 25 Mar 2021 07:33:24 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-monaco-editor_v1.0.16..@fluentui/react-monaco-editor_v1.0.17)
+
+### Patches
+
+- Bump @fluentui/react to v8.6.1 ([PR #17507](https://github.com/microsoft/fluentui/pull/17507) by Humberto.Morimoto@microsoft.com)
+
 ## [1.0.16](https://github.com/microsoft/fluentui/tree/@fluentui/react-monaco-editor_v1.0.16)
 
 Wed, 24 Mar 2021 07:32:21 GMT 
diff --git a/packages/react-monaco-editor/package.json b/packages/react-monaco-editor/package.json
index 112513d64e67f5..e13eb6416512ab 100644
--- a/packages/react-monaco-editor/package.json
+++ b/packages/react-monaco-editor/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-monaco-editor",
-  "version": "1.0.16",
+  "version": "1.0.17",
   "description": "Live React example editing using monaco",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -34,7 +34,7 @@
     "webpack-bundle-analyzer": "^4.4.0"
   },
   "dependencies": {
-    "@fluentui/react": "^8.6.0",
+    "@fluentui/react": "^8.6.1",
     "@microsoft/load-themed-styles": "^1.10.26",
     "@fluentui/example-data": "^8.1.1",
     "@fluentui/monaco-editor": "^1.0.1",
diff --git a/packages/react-positioning/CHANGELOG.json b/packages/react-positioning/CHANGELOG.json
index daa2086abf08f6..60f1a5a91f7962 100644
--- a/packages/react-positioning/CHANGELOG.json
+++ b/packages/react-positioning/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react-positioning",
   "entries": [
+    {
+      "date": "Thu, 25 Mar 2021 07:33:24 GMT",
+      "tag": "@fluentui/react-positioning_v9.0.0-alpha.2",
+      "version": "9.0.0-alpha.2",
+      "comments": {
+        "prerelease": [
+          {
+            "comment": "Bump @fluentui/react-provider to v9.0.0-alpha.14",
+            "author": "lingfan.gao@microsoft.com",
+            "commit": "31b7b0d625e40f818d33c5df0890b584caaf0e6c",
+            "package": "@fluentui/react-positioning"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 23 Mar 2021 07:31:43 GMT",
       "tag": "@fluentui/react-positioning_v9.0.0-alpha.1",
diff --git a/packages/react-positioning/CHANGELOG.md b/packages/react-positioning/CHANGELOG.md
index 5908ae65cd7814..36951be38032da 100644
--- a/packages/react-positioning/CHANGELOG.md
+++ b/packages/react-positioning/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-positioning
 
-This log was last generated on Tue, 23 Mar 2021 07:31:43 GMT and should not be manually modified.
+This log was last generated on Thu, 25 Mar 2021 07:33:24 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-alpha.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.0.0-alpha.2)
+
+Thu, 25 Mar 2021 07:33:24 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.0.0-alpha.1..@fluentui/react-positioning_v9.0.0-alpha.2)
+
+### Changes
+
+- Bump @fluentui/react-provider to v9.0.0-alpha.14 ([PR #17528](https://github.com/microsoft/fluentui/pull/17528) by lingfan.gao@microsoft.com)
+
 ## [9.0.0-alpha.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.0.0-alpha.1)
 
 Tue, 23 Mar 2021 07:31:43 GMT
diff --git a/packages/react-positioning/package.json b/packages/react-positioning/package.json
index 12170faf87a237..fafd68701fe592 100644
--- a/packages/react-positioning/package.json
+++ b/packages/react-positioning/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-positioning",
-  "version": "9.0.0-alpha.1",
+  "version": "9.0.0-alpha.2",
   "description": "A react wrapper around Popper.js for Fluent UI",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -32,8 +32,8 @@
     "react-dom": "16.8.6"
   },
   "dependencies": {
-    "@fluentui/react-provider": "^9.0.0-alpha.13",
-    "@fluentui/react-utilities": "^9.0.0-alpha.10",
+    "@fluentui/react-provider": "^9.0.0-alpha.14",
+    "@fluentui/react-utilities": "^9.0.0-alpha.11",
     "@popperjs/core": "~2.4.3",
     "tslib": "^1.10.0"
   },
diff --git a/packages/react-provider/CHANGELOG.json b/packages/react-provider/CHANGELOG.json
index 4ba6171898a90e..7dff5c30810272 100644
--- a/packages/react-provider/CHANGELOG.json
+++ b/packages/react-provider/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react-provider",
   "entries": [
+    {
+      "date": "Thu, 25 Mar 2021 07:33:24 GMT",
+      "tag": "@fluentui/react-provider_v9.0.0-alpha.14",
+      "version": "9.0.0-alpha.14",
+      "comments": {
+        "prerelease": [
+          {
+            "comment": "Bump @fluentui/react-focus-management to v9.0.0-alpha.10",
+            "author": "lingfan.gao@microsoft.com",
+            "commit": "31b7b0d625e40f818d33c5df0890b584caaf0e6c",
+            "package": "@fluentui/react-provider"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 23 Mar 2021 07:31:43 GMT",
       "tag": "@fluentui/react-provider_v9.0.0-alpha.13",
diff --git a/packages/react-provider/CHANGELOG.md b/packages/react-provider/CHANGELOG.md
index 38f9bd730c08fa..d8217187c8e1a2 100644
--- a/packages/react-provider/CHANGELOG.md
+++ b/packages/react-provider/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-provider
 
-This log was last generated on Tue, 23 Mar 2021 07:31:43 GMT and should not be manually modified.
+This log was last generated on Thu, 25 Mar 2021 07:33:24 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-alpha.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-provider_v9.0.0-alpha.14)
+
+Thu, 25 Mar 2021 07:33:24 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-provider_v9.0.0-alpha.13..@fluentui/react-provider_v9.0.0-alpha.14)
+
+### Changes
+
+- Bump @fluentui/react-focus-management to v9.0.0-alpha.10 ([PR #17528](https://github.com/microsoft/fluentui/pull/17528) by lingfan.gao@microsoft.com)
+
 ## [9.0.0-alpha.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-provider_v9.0.0-alpha.13)
 
 Tue, 23 Mar 2021 07:31:43 GMT 
diff --git a/packages/react-provider/package.json b/packages/react-provider/package.json
index 13fb519d34fcc7..c5c200ba2dcabe 100644
--- a/packages/react-provider/package.json
+++ b/packages/react-provider/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-provider",
-  "version": "9.0.0-alpha.13",
+  "version": "9.0.0-alpha.14",
   "description": "Fluent UI React provider component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -27,10 +27,10 @@
     "react-dom": "16.8.6"
   },
   "dependencies": {
-    "@fluentui/react-focus-management": "^9.0.0-alpha.9",
+    "@fluentui/react-focus-management": "^9.0.0-alpha.10",
     "@fluentui/react-theme": "^9.0.0-alpha.6",
-    "@fluentui/react-theme-provider": "^9.0.0-alpha.13",
-    "@fluentui/react-utilities": "^9.0.0-alpha.10",
+    "@fluentui/react-theme-provider": "^9.0.0-alpha.14",
+    "@fluentui/react-utilities": "^9.0.0-alpha.11",
     "tslib": "^1.10.0"
   },
   "peerDependencies": {
diff --git a/packages/react-slider/CHANGELOG.json b/packages/react-slider/CHANGELOG.json
index eb18ca34f66c87..d7ba1ca881c4aa 100644
--- a/packages/react-slider/CHANGELOG.json
+++ b/packages/react-slider/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react-slider",
   "entries": [
+    {
+      "date": "Thu, 25 Mar 2021 07:33:24 GMT",
+      "tag": "@fluentui/react-slider_v1.0.0-beta.70",
+      "version": "1.0.0-beta.70",
+      "comments": {
+        "patch": [
+          {
+            "comment": "Bump @fluentui/react to v8.6.1",
+            "author": "Humberto.Morimoto@microsoft.com",
+            "commit": "2338c30df092ac05df393631bb8e59bcd9fec7b0",
+            "package": "@fluentui/react-slider"
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 24 Mar 2021 07:32:21 GMT",
       "tag": "@fluentui/react-slider_v1.0.0-beta.69",
diff --git a/packages/react-slider/CHANGELOG.md b/packages/react-slider/CHANGELOG.md
index 76dbc9fe636761..d5a6aa46857c18 100644
--- a/packages/react-slider/CHANGELOG.md
+++ b/packages/react-slider/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-slider
 
-This log was last generated on Wed, 24 Mar 2021 07:32:21 GMT and should not be manually modified.
+This log was last generated on Thu, 25 Mar 2021 07:33:24 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [1.0.0-beta.70](https://github.com/microsoft/fluentui/tree/@fluentui/react-slider_v1.0.0-beta.70)
+
+Thu, 25 Mar 2021 07:33:24 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-slider_v1.0.0-beta.69..@fluentui/react-slider_v1.0.0-beta.70)
+
+### Patches
+
+- Bump @fluentui/react to v8.6.1 ([PR #17507](https://github.com/microsoft/fluentui/pull/17507) by Humberto.Morimoto@microsoft.com)
+
 ## [1.0.0-beta.69](https://github.com/microsoft/fluentui/tree/@fluentui/react-slider_v1.0.0-beta.69)
 
 Wed, 24 Mar 2021 07:32:21 GMT 
diff --git a/packages/react-slider/package.json b/packages/react-slider/package.json
index 40a0197ebf0e51..cf2d94d1cbdd44 100644
--- a/packages/react-slider/package.json
+++ b/packages/react-slider/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-slider",
-  "version": "1.0.0-beta.69",
+  "version": "1.0.0-beta.70",
   "description": "Fluent UI React Slider component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -37,7 +37,7 @@
     "react-dom": "16.8.6"
   },
   "dependencies": {
-    "@fluentui/react": "^8.6.0",
+    "@fluentui/react": "^8.6.1",
     "@fluentui/react-hooks": "^8.1.0",
     "@fluentui/style-utilities": "^8.0.2",
     "@fluentui/utilities": "^8.0.2",
diff --git a/packages/react-tabs/CHANGELOG.json b/packages/react-tabs/CHANGELOG.json
index 0a8d2d5c61aaea..6cb6042dc90123 100644
--- a/packages/react-tabs/CHANGELOG.json
+++ b/packages/react-tabs/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react-tabs",
   "entries": [
+    {
+      "date": "Thu, 25 Mar 2021 07:33:24 GMT",
+      "tag": "@fluentui/react-tabs_v1.0.0-beta.72",
+      "version": "1.0.0-beta.72",
+      "comments": {
+        "patch": [
+          {
+            "comment": "Bump @fluentui/react to v8.6.1",
+            "author": "Humberto.Morimoto@microsoft.com",
+            "commit": "2338c30df092ac05df393631bb8e59bcd9fec7b0",
+            "package": "@fluentui/react-tabs"
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 24 Mar 2021 07:32:21 GMT",
       "tag": "@fluentui/react-tabs_v1.0.0-beta.71",
diff --git a/packages/react-tabs/CHANGELOG.md b/packages/react-tabs/CHANGELOG.md
index 07c14a570d038a..ffba543d622792 100644
--- a/packages/react-tabs/CHANGELOG.md
+++ b/packages/react-tabs/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-tabs
 
-This log was last generated on Wed, 24 Mar 2021 07:32:21 GMT and should not be manually modified.
+This log was last generated on Thu, 25 Mar 2021 07:33:24 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [1.0.0-beta.72](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v1.0.0-beta.72)
+
+Thu, 25 Mar 2021 07:33:24 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v1.0.0-beta.71..@fluentui/react-tabs_v1.0.0-beta.72)
+
+### Patches
+
+- Bump @fluentui/react to v8.6.1 ([PR #17507](https://github.com/microsoft/fluentui/pull/17507) by Humberto.Morimoto@microsoft.com)
+
 ## [1.0.0-beta.71](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v1.0.0-beta.71)
 
 Wed, 24 Mar 2021 07:32:21 GMT 
diff --git a/packages/react-tabs/package.json b/packages/react-tabs/package.json
index fde034833860ed..26c56caf792a62 100644
--- a/packages/react-tabs/package.json
+++ b/packages/react-tabs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-tabs",
-  "version": "1.0.0-beta.71",
+  "version": "1.0.0-beta.72",
   "description": "Fluent UI React Tabs component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -36,7 +36,7 @@
     "react-dom": "16.8.6"
   },
   "dependencies": {
-    "@fluentui/react": "^8.6.0",
+    "@fluentui/react": "^8.6.1",
     "@fluentui/react-hooks": "^8.1.0",
     "@fluentui/style-utilities": "^8.0.2",
     "@fluentui/utilities": "^8.0.2",
diff --git a/packages/react-text/CHANGELOG.json b/packages/react-text/CHANGELOG.json
index 74a93fc8a0d55d..645d29d2943da7 100644
--- a/packages/react-text/CHANGELOG.json
+++ b/packages/react-text/CHANGELOG.json
@@ -1,6 +1,27 @@
 {
   "name": "@fluentui/react-text",
   "entries": [
+    {
+      "date": "Thu, 25 Mar 2021 07:33:24 GMT",
+      "tag": "@fluentui/react-text_v0.2.5",
+      "version": "0.2.5",
+      "comments": {
+        "prerelease": [
+          {
+            "comment": "Bump @fluentui/react-make-styles to v9.0.0-alpha.14",
+            "author": "olfedias@microsoft.com",
+            "commit": "66638eed425fff31d69182529b03268836c5e1ec",
+            "package": "@fluentui/react-text"
+          },
+          {
+            "comment": "Bump @fluentui/react-utilities to v9.0.0-alpha.11",
+            "author": "lingfan.gao@microsoft.com",
+            "commit": "31b7b0d625e40f818d33c5df0890b584caaf0e6c",
+            "package": "@fluentui/react-text"
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 24 Mar 2021 07:32:21 GMT",
       "tag": "@fluentui/react-text_v0.2.5",
diff --git a/packages/react-text/CHANGELOG.md b/packages/react-text/CHANGELOG.md
index c1d4b0897b660f..04290c007b6041 100644
--- a/packages/react-text/CHANGELOG.md
+++ b/packages/react-text/CHANGELOG.md
@@ -1,11 +1,21 @@
 # Change Log - @fluentui/react-text
 
-This log was last generated on Wed, 24 Mar 2021 07:32:21 GMT and should not be manually modified.
+This log was last generated on Thu, 25 Mar 2021 07:33:24 GMT and should not be manually modified.
 
 <!-- Start content -->
 
 ## [0.2.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-text_v0.2.5)
 
+Thu, 25 Mar 2021 07:33:24 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-text_v0.2.5..@fluentui/react-text_v0.2.5)
+
+### Changes
+
+- Bump @fluentui/react-make-styles to v9.0.0-alpha.14 ([PR #17539](https://github.com/microsoft/fluentui/pull/17539) by olfedias@microsoft.com)
+- Bump @fluentui/react-utilities to v9.0.0-alpha.11 ([PR #17528](https://github.com/microsoft/fluentui/pull/17528) by lingfan.gao@microsoft.com)
+
+## [0.2.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-text_v0.2.5)
+
 Wed, 24 Mar 2021 07:32:21 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-text_v0.2.4..@fluentui/react-text_v0.2.5)
 
diff --git a/packages/react-text/package.json b/packages/react-text/package.json
index 7e39f5e4244503..66a70d1d1cbf1d 100644
--- a/packages/react-text/package.json
+++ b/packages/react-text/package.json
@@ -38,8 +38,8 @@
     "react-test-renderer": "^16.3.0"
   },
   "dependencies": {
-    "@fluentui/react-make-styles": "^9.0.0-alpha.13",
-    "@fluentui/react-utilities": "^9.0.0-alpha.10",
+    "@fluentui/react-make-styles": "^9.0.0-alpha.14",
+    "@fluentui/react-utilities": "^9.0.0-alpha.11",
     "tslib": "^1.10.0"
   },
   "peerDependencies": {
diff --git a/packages/react-theme-provider/CHANGELOG.json b/packages/react-theme-provider/CHANGELOG.json
index cc0780c8979479..3128bd1ccc6bc0 100644
--- a/packages/react-theme-provider/CHANGELOG.json
+++ b/packages/react-theme-provider/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react-theme-provider",
   "entries": [
+    {
+      "date": "Thu, 25 Mar 2021 07:33:24 GMT",
+      "tag": "@fluentui/react-theme-provider_v9.0.0-alpha.14",
+      "version": "9.0.0-alpha.14",
+      "comments": {
+        "prerelease": [
+          {
+            "comment": "Bump @fluentui/react-utilities to v9.0.0-alpha.11",
+            "author": "lingfan.gao@microsoft.com",
+            "commit": "31b7b0d625e40f818d33c5df0890b584caaf0e6c",
+            "package": "@fluentui/react-theme-provider"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 23 Mar 2021 07:31:43 GMT",
       "tag": "@fluentui/react-theme-provider_v9.0.0-alpha.13",
diff --git a/packages/react-theme-provider/CHANGELOG.md b/packages/react-theme-provider/CHANGELOG.md
index b71ad25fa8df9f..7939b6d755e01d 100644
--- a/packages/react-theme-provider/CHANGELOG.md
+++ b/packages/react-theme-provider/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-theme-provider
 
-This log was last generated on Tue, 23 Mar 2021 07:31:43 GMT and should not be manually modified.
+This log was last generated on Thu, 25 Mar 2021 07:33:24 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-alpha.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-theme-provider_v9.0.0-alpha.14)
+
+Thu, 25 Mar 2021 07:33:24 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-theme-provider_v9.0.0-alpha.13..@fluentui/react-theme-provider_v9.0.0-alpha.14)
+
+### Changes
+
+- Bump @fluentui/react-utilities to v9.0.0-alpha.11 ([PR #17528](https://github.com/microsoft/fluentui/pull/17528) by lingfan.gao@microsoft.com)
+
 ## [9.0.0-alpha.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-theme-provider_v9.0.0-alpha.13)
 
 Tue, 23 Mar 2021 07:31:43 GMT 
diff --git a/packages/react-theme-provider/package.json b/packages/react-theme-provider/package.json
index 1f6da40bba0404..89657844b542b3 100644
--- a/packages/react-theme-provider/package.json
+++ b/packages/react-theme-provider/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-theme-provider",
-  "version": "9.0.0-alpha.13",
+  "version": "9.0.0-alpha.14",
   "description": "Fluent UI React theme provider component, hook, and theme related utilities.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "@fluentui/react-theme": "^9.0.0-alpha.6",
-    "@fluentui/react-utilities": "^9.0.0-alpha.10",
+    "@fluentui/react-utilities": "^9.0.0-alpha.11",
     "tslib": "^1.10.0"
   },
   "peerDependencies": {
diff --git a/packages/react-toggle/CHANGELOG.json b/packages/react-toggle/CHANGELOG.json
index 13db96bbcac9b4..98cc86bb482048 100644
--- a/packages/react-toggle/CHANGELOG.json
+++ b/packages/react-toggle/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react-toggle",
   "entries": [
+    {
+      "date": "Thu, 25 Mar 2021 07:33:24 GMT",
+      "tag": "@fluentui/react-toggle_v1.0.0-beta.70",
+      "version": "1.0.0-beta.70",
+      "comments": {
+        "patch": [
+          {
+            "comment": "Bump @fluentui/react to v8.6.1",
+            "author": "Humberto.Morimoto@microsoft.com",
+            "commit": "2338c30df092ac05df393631bb8e59bcd9fec7b0",
+            "package": "@fluentui/react-toggle"
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 24 Mar 2021 07:32:21 GMT",
       "tag": "@fluentui/react-toggle_v1.0.0-beta.69",
diff --git a/packages/react-toggle/CHANGELOG.md b/packages/react-toggle/CHANGELOG.md
index b4bb04d2173a79..811e00971d98e0 100644
--- a/packages/react-toggle/CHANGELOG.md
+++ b/packages/react-toggle/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-toggle
 
-This log was last generated on Wed, 24 Mar 2021 07:32:21 GMT and should not be manually modified.
+This log was last generated on Thu, 25 Mar 2021 07:33:24 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [1.0.0-beta.70](https://github.com/microsoft/fluentui/tree/@fluentui/react-toggle_v1.0.0-beta.70)
+
+Thu, 25 Mar 2021 07:33:24 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toggle_v1.0.0-beta.69..@fluentui/react-toggle_v1.0.0-beta.70)
+
+### Patches
+
+- Bump @fluentui/react to v8.6.1 ([PR #17507](https://github.com/microsoft/fluentui/pull/17507) by Humberto.Morimoto@microsoft.com)
+
 ## [1.0.0-beta.69](https://github.com/microsoft/fluentui/tree/@fluentui/react-toggle_v1.0.0-beta.69)
 
 Wed, 24 Mar 2021 07:32:21 GMT 
diff --git a/packages/react-toggle/package.json b/packages/react-toggle/package.json
index 6c588bd2d50bca..52e60a9363dd2a 100644
--- a/packages/react-toggle/package.json
+++ b/packages/react-toggle/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-toggle",
-  "version": "1.0.0-beta.69",
+  "version": "1.0.0-beta.70",
   "description": "Fluent UI React Toggle component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "@fluentui/react-compose": "^1.0.0-beta.19",
-    "@fluentui/react": "^8.6.0",
+    "@fluentui/react": "^8.6.1",
     "@fluentui/react-hooks": "^8.1.0",
     "@fluentui/style-utilities": "^8.0.2",
     "@fluentui/utilities": "^8.0.2",
diff --git a/packages/react-tooltip/CHANGELOG.json b/packages/react-tooltip/CHANGELOG.json
index 1c7dcc5ef51a74..46b8f5851a2074 100644
--- a/packages/react-tooltip/CHANGELOG.json
+++ b/packages/react-tooltip/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react-tooltip",
   "entries": [
+    {
+      "date": "Thu, 25 Mar 2021 07:33:24 GMT",
+      "tag": "@fluentui/react-tooltip_v9.0.0-alpha.11",
+      "version": "9.0.0-alpha.11",
+      "comments": {
+        "prerelease": [
+          {
+            "comment": "Bump @fluentui/react-make-styles to v9.0.0-alpha.14",
+            "author": "olfedias@microsoft.com",
+            "commit": "66638eed425fff31d69182529b03268836c5e1ec",
+            "package": "@fluentui/react-tooltip"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 23 Mar 2021 07:31:43 GMT",
       "tag": "@fluentui/react-tooltip_v9.0.0-alpha.10",
diff --git a/packages/react-tooltip/CHANGELOG.md b/packages/react-tooltip/CHANGELOG.md
index 0916e119ed14ec..15283f439bd483 100644
--- a/packages/react-tooltip/CHANGELOG.md
+++ b/packages/react-tooltip/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-tooltip
 
-This log was last generated on Tue, 23 Mar 2021 07:31:43 GMT and should not be manually modified.
+This log was last generated on Thu, 25 Mar 2021 07:33:24 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-alpha.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-tooltip_v9.0.0-alpha.11)
+
+Thu, 25 Mar 2021 07:33:24 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tooltip_v9.0.0-alpha.10..@fluentui/react-tooltip_v9.0.0-alpha.11)
+
+### Changes
+
+- Bump @fluentui/react-make-styles to v9.0.0-alpha.14 ([PR #17539](https://github.com/microsoft/fluentui/pull/17539) by olfedias@microsoft.com)
+
 ## [9.0.0-alpha.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-tooltip_v9.0.0-alpha.10)
 
 Tue, 23 Mar 2021 07:31:43 GMT 
diff --git a/packages/react-tooltip/package.json b/packages/react-tooltip/package.json
index 91c28ca8da5f9c..2d0561d509217e 100644
--- a/packages/react-tooltip/package.json
+++ b/packages/react-tooltip/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-tooltip",
-  "version": "9.0.0-alpha.10",
+  "version": "9.0.0-alpha.11",
   "description": "React components for building web experiences",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -38,9 +38,9 @@
     "react-test-renderer": "^16.3.0"
   },
   "dependencies": {
-    "@fluentui/react-make-styles": "^9.0.0-alpha.13",
-    "@fluentui/react-theme-provider": "^9.0.0-alpha.13",
-    "@fluentui/react-utilities": "^9.0.0-alpha.10",
+    "@fluentui/react-make-styles": "^9.0.0-alpha.14",
+    "@fluentui/react-theme-provider": "^9.0.0-alpha.14",
+    "@fluentui/react-utilities": "^9.0.0-alpha.11",
     "tslib": "^1.10.0"
   },
   "peerDependencies": {
diff --git a/packages/react-utilities/CHANGELOG.json b/packages/react-utilities/CHANGELOG.json
index 7d3379a7f10111..aec932caf1f054 100644
--- a/packages/react-utilities/CHANGELOG.json
+++ b/packages/react-utilities/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react-utilities",
   "entries": [
+    {
+      "date": "Thu, 25 Mar 2021 07:33:24 GMT",
+      "tag": "@fluentui/react-utilities_v9.0.0-alpha.11",
+      "version": "9.0.0-alpha.11",
+      "comments": {
+        "prerelease": [
+          {
+            "comment": "Move descendants to react-utilities",
+            "author": "lingfan.gao@microsoft.com",
+            "commit": "31b7b0d625e40f818d33c5df0890b584caaf0e6c",
+            "package": "@fluentui/react-utilities"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 23 Mar 2021 07:31:43 GMT",
       "tag": "@fluentui/react-utilities_v9.0.0-alpha.10",
diff --git a/packages/react-utilities/CHANGELOG.md b/packages/react-utilities/CHANGELOG.md
index 9a68f9104e82a3..f3b3e2027ffbff 100644
--- a/packages/react-utilities/CHANGELOG.md
+++ b/packages/react-utilities/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-utilities
 
-This log was last generated on Tue, 23 Mar 2021 07:31:43 GMT and should not be manually modified.
+This log was last generated on Thu, 25 Mar 2021 07:33:24 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-alpha.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-utilities_v9.0.0-alpha.11)
+
+Thu, 25 Mar 2021 07:33:24 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-utilities_v9.0.0-alpha.10..@fluentui/react-utilities_v9.0.0-alpha.11)
+
+### Changes
+
+- Move descendants to react-utilities ([PR #17528](https://github.com/microsoft/fluentui/pull/17528) by lingfan.gao@microsoft.com)
+
 ## [9.0.0-alpha.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-utilities_v9.0.0-alpha.10)
 
 Tue, 23 Mar 2021 07:31:43 GMT 
diff --git a/packages/react-utilities/package.json b/packages/react-utilities/package.json
index 7f988d020d1ed8..dbbd1e68221159 100644
--- a/packages/react-utilities/package.json
+++ b/packages/react-utilities/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-utilities",
-  "version": "9.0.0-alpha.10",
+  "version": "9.0.0-alpha.11",
   "description": "A set of general React-specific utilities.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
diff --git a/packages/react/CHANGELOG.json b/packages/react/CHANGELOG.json
index 2aca4008283ca4..dfd2f51326663d 100644
--- a/packages/react/CHANGELOG.json
+++ b/packages/react/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react",
   "entries": [
+    {
+      "date": "Thu, 25 Mar 2021 07:33:24 GMT",
+      "tag": "@fluentui/react_v8.6.1",
+      "version": "8.6.1",
+      "comments": {
+        "patch": [
+          {
+            "comment": "Autofill: Inherit font-family to prevent defaulting to Arial.",
+            "author": "Humberto.Morimoto@microsoft.com",
+            "commit": "2338c30df092ac05df393631bb8e59bcd9fec7b0",
+            "package": "@fluentui/react"
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 24 Mar 2021 07:32:21 GMT",
       "tag": "@fluentui/react_v8.6.0",
diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
index 735a78b753cac7..9d5ed0b730fb3b 100644
--- a/packages/react/CHANGELOG.md
+++ b/packages/react/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react
 
-This log was last generated on Wed, 24 Mar 2021 07:32:21 GMT and should not be manually modified.
+This log was last generated on Thu, 25 Mar 2021 07:33:24 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [8.6.1](https://github.com/microsoft/fluentui/tree/@fluentui/react_v8.6.1)
+
+Thu, 25 Mar 2021 07:33:24 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react_v8.6.0..@fluentui/react_v8.6.1)
+
+### Patches
+
+- Autofill: Inherit font-family to prevent defaulting to Arial. ([PR #17507](https://github.com/microsoft/fluentui/pull/17507) by Humberto.Morimoto@microsoft.com)
+
 ## [8.6.0](https://github.com/microsoft/fluentui/tree/@fluentui/react_v8.6.0)
 
 Wed, 24 Mar 2021 07:32:21 GMT 
diff --git a/packages/react/package.json b/packages/react/package.json
index bbfa3ad30e6979..806050a87085af 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react",
-  "version": "8.6.0",
+  "version": "8.6.1",
   "description": "Reusable React components for building web experiences.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
diff --git a/packages/storybook/CHANGELOG.json b/packages/storybook/CHANGELOG.json
index 43ec7176ad9982..d2073d36c8a0f2 100644
--- a/packages/storybook/CHANGELOG.json
+++ b/packages/storybook/CHANGELOG.json
@@ -1,6 +1,35 @@
 {
   "name": "@fluentui/storybook",
   "entries": [
+    {
+      "date": "Thu, 25 Mar 2021 07:33:24 GMT",
+      "tag": "@fluentui/storybook_v1.0.0",
+      "version": "1.0.0",
+      "comments": {
+        "patch": [
+          {
+            "comment": "Bump @fluentui/azure-themes to v8.0.18",
+            "author": "Humberto.Morimoto@microsoft.com",
+            "commit": "2338c30df092ac05df393631bb8e59bcd9fec7b0",
+            "package": "@fluentui/storybook"
+          }
+        ],
+        "prerelease": [
+          {
+            "comment": "Bump @fluentui/react-provider to v9.0.0-alpha.14",
+            "author": "lingfan.gao@microsoft.com",
+            "commit": "31b7b0d625e40f818d33c5df0890b584caaf0e6c",
+            "package": "@fluentui/storybook"
+          },
+          {
+            "comment": "Bump @fluentui/react-theme-provider to v9.0.0-alpha.14",
+            "author": "lingfan.gao@microsoft.com",
+            "commit": "31b7b0d625e40f818d33c5df0890b584caaf0e6c",
+            "package": "@fluentui/storybook"
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 24 Mar 2021 07:32:21 GMT",
       "tag": "@fluentui/storybook_v1.0.0",
diff --git a/packages/storybook/CHANGELOG.md b/packages/storybook/CHANGELOG.md
index 11342fd1cd5ee7..f60aa163ba5138 100644
--- a/packages/storybook/CHANGELOG.md
+++ b/packages/storybook/CHANGELOG.md
@@ -1,11 +1,25 @@
 # Change Log - @fluentui/storybook
 
-This log was last generated on Wed, 24 Mar 2021 07:32:21 GMT and should not be manually modified.
+This log was last generated on Thu, 25 Mar 2021 07:33:24 GMT and should not be manually modified.
 
 <!-- Start content -->
 
 ## [1.0.0](https://github.com/microsoft/fluentui/tree/@fluentui/storybook_v1.0.0)
 
+Thu, 25 Mar 2021 07:33:24 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/storybook_v1.0.0..@fluentui/storybook_v1.0.0)
+
+### Patches
+
+- Bump @fluentui/azure-themes to v8.0.18 ([PR #17507](https://github.com/microsoft/fluentui/pull/17507) by Humberto.Morimoto@microsoft.com)
+
+### Changes
+
+- Bump @fluentui/react-provider to v9.0.0-alpha.14 ([PR #17528](https://github.com/microsoft/fluentui/pull/17528) by lingfan.gao@microsoft.com)
+- Bump @fluentui/react-theme-provider to v9.0.0-alpha.14 ([PR #17528](https://github.com/microsoft/fluentui/pull/17528) by lingfan.gao@microsoft.com)
+
+## [1.0.0](https://github.com/microsoft/fluentui/tree/@fluentui/storybook_v1.0.0)
+
 Wed, 24 Mar 2021 07:32:21 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/storybook_v1.0.0..@fluentui/storybook_v1.0.0)
 
diff --git a/packages/storybook/package.json b/packages/storybook/package.json
index 4ee5df92c29397..9bb849e3addc7b 100644
--- a/packages/storybook/package.json
+++ b/packages/storybook/package.json
@@ -24,16 +24,16 @@
     "react": "16.8.6"
   },
   "dependencies": {
-    "@fluentui/react": "^8.6.0",
-    "@fluentui/react-provider": "^9.0.0-alpha.13",
+    "@fluentui/react": "^8.6.1",
+    "@fluentui/react-provider": "^9.0.0-alpha.14",
     "@fluentui/react-theme": "^9.0.0-alpha.6",
-    "@fluentui/react-theme-provider": "^9.0.0-alpha.13",
+    "@fluentui/react-theme-provider": "^9.0.0-alpha.14",
     "@fluentui/theme": "^2.0.2",
     "@storybook/addon-knobs": "6.0.28",
     "@storybook/addon-essentials": "6.0.28",
     "@storybook/addons": "6.0.28",
-    "@fluentui/azure-themes": "^8.0.17",
-    "@fluentui/theme-samples": "^8.0.16",
+    "@fluentui/azure-themes": "^8.0.18",
+    "@fluentui/theme-samples": "^8.0.17",
     "tslib": "^1.10.0"
   },
   "peerDependencies": {
diff --git a/packages/theme-samples/CHANGELOG.json b/packages/theme-samples/CHANGELOG.json
index 32b490a14abbdd..dace17617303da 100644
--- a/packages/theme-samples/CHANGELOG.json
+++ b/packages/theme-samples/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/theme-samples",
   "entries": [
+    {
+      "date": "Thu, 25 Mar 2021 07:33:24 GMT",
+      "tag": "@fluentui/theme-samples_v8.0.17",
+      "version": "8.0.17",
+      "comments": {
+        "patch": [
+          {
+            "comment": "Bump @fluentui/react to v8.6.1",
+            "author": "Humberto.Morimoto@microsoft.com",
+            "commit": "2338c30df092ac05df393631bb8e59bcd9fec7b0",
+            "package": "@fluentui/theme-samples"
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 24 Mar 2021 07:32:21 GMT",
       "tag": "@fluentui/theme-samples_v8.0.16",
diff --git a/packages/theme-samples/CHANGELOG.md b/packages/theme-samples/CHANGELOG.md
index 4c0b7d1a29a56e..525bd4ce1b1ca5 100644
--- a/packages/theme-samples/CHANGELOG.md
+++ b/packages/theme-samples/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/theme-samples
 
-This log was last generated on Wed, 24 Mar 2021 07:32:21 GMT and should not be manually modified.
+This log was last generated on Thu, 25 Mar 2021 07:33:24 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [8.0.17](https://github.com/microsoft/fluentui/tree/@fluentui/theme-samples_v8.0.17)
+
+Thu, 25 Mar 2021 07:33:24 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/theme-samples_v8.0.16..@fluentui/theme-samples_v8.0.17)
+
+### Patches
+
+- Bump @fluentui/react to v8.6.1 ([PR #17507](https://github.com/microsoft/fluentui/pull/17507) by Humberto.Morimoto@microsoft.com)
+
 ## [8.0.16](https://github.com/microsoft/fluentui/tree/@fluentui/theme-samples_v8.0.16)
 
 Wed, 24 Mar 2021 07:32:21 GMT 
diff --git a/packages/theme-samples/package.json b/packages/theme-samples/package.json
index 792c4d3a17cf43..1d0bd0419e3d6f 100644
--- a/packages/theme-samples/package.json
+++ b/packages/theme-samples/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/theme-samples",
-  "version": "8.0.16",
+  "version": "8.0.17",
   "description": "Sample themes for use with Fabric components.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -26,7 +26,7 @@
     "@fluentui/scripts": "^1.0.0"
   },
   "dependencies": {
-    "@fluentui/react": "^8.6.0",
+    "@fluentui/react": "^8.6.1",
     "@fluentui/set-version": "^8.0.1",
     "@fluentui/scheme-utilities": "^8.0.2",
     "tslib": "^1.10.0"
diff --git a/packages/web-components/CHANGELOG.json b/packages/web-components/CHANGELOG.json
index eb20e170fa17ec..9652431eb1cb7c 100644
--- a/packages/web-components/CHANGELOG.json
+++ b/packages/web-components/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/web-components",
   "entries": [
+    {
+      "date": "Thu, 25 Mar 2021 07:33:24 GMT",
+      "tag": "@fluentui/web-components_v0.19.1",
+      "version": "0.19.1",
+      "comments": {
+        "patch": [
+          {
+            "comment": "removed SVGs to use the default",
+            "author": "khamu@microsoft.com",
+            "commit": "b8e8697d9f3ff285687b7cba27b9ac037a0cb727",
+            "package": "@fluentui/web-components"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 23 Mar 2021 07:31:43 GMT",
       "tag": "@fluentui/web-components_v0.19.0",
diff --git a/packages/web-components/CHANGELOG.md b/packages/web-components/CHANGELOG.md
index 1d7cc1a43eeebd..b115bfa79fc7b0 100644
--- a/packages/web-components/CHANGELOG.md
+++ b/packages/web-components/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/web-components
 
-This log was last generated on Tue, 23 Mar 2021 07:31:43 GMT and should not be manually modified.
+This log was last generated on Thu, 25 Mar 2021 07:33:24 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [0.19.1](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v0.19.1)
+
+Thu, 25 Mar 2021 07:33:24 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v0.19.0..@fluentui/web-components_v0.19.1)
+
+### Patches
+
+- removed SVGs to use the default ([PR #17527](https://github.com/microsoft/fluentui/pull/17527) by khamu@microsoft.com)
+
 ## [0.19.0](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v0.19.0)
 
 Tue, 23 Mar 2021 07:31:43 GMT 
diff --git a/packages/web-components/package.json b/packages/web-components/package.json
index 2500d9b094f99e..e4c86cb240a0c2 100644
--- a/packages/web-components/package.json
+++ b/packages/web-components/package.json
@@ -2,7 +2,7 @@
   "name": "@fluentui/web-components",
   "description": "A library of Fluent Web Components",
   "sideEffects": false,
-  "version": "0.19.0",
+  "version": "0.19.1",
   "author": {
     "name": "Microsoft",
     "url": "https://discord.gg/FcSNfg4"

From 8b5295e082e07dbe428bff7b9548c80c338f07c8 Mon Sep 17 00:00:00 2001
From: ling1726 <lingfan.gao@microsoft.com>
Date: Thu, 25 Mar 2021 11:07:09 +0000
Subject: [PATCH 6/8] Mouse interaction for nested menus (#17524)

* Support nested menu and mouse interactions

Supports nested menu with mouse interactions added to the spec

* Change files

* remove unnecessary import

* use focus instead of descendants

* fix unit tests

* handle mouse enter again

* fixes

* remove old descendants

* fix export

* fix types

* extract helper util

* reuse types

* add doc

* remove unnecessary export

* add unit test
---
 ...-709e3e5a-ab9b-447c-912a-57b3a09d6fba.json |   7 +
 ...-2ad41a71-bb44-48b9-9bb4-01cbf5d52d37.json |   7 +
 ...-3a681598-a294-46c1-a849-0daa2abf5641.json |   7 +
 .../src/react-menu/Menu/Menu.stories.tsx      |  69 +++++++--
 packages/react-menu/etc/react-menu.api.md     |  23 ++-
 .../src/components/Menu/Menu.test.tsx         | 136 +++++++++++++++++-
 .../src/components/Menu/Menu.types.ts         |   2 +-
 .../Menu/__snapshots__/Menu.test.tsx.snap     |  48 +++++--
 .../src/components/Menu/renderMenu.tsx        |   4 +-
 .../src/components/Menu/useMenu.tsx           |  87 ++++++-----
 .../components/MenuGroup/renderMenuGroup.tsx  |   2 +-
 .../MenuGroupHeader/MenuGroupHeader.test.tsx  |   2 +-
 .../MenuGroupHeader/useMenuGroupHeader.ts     |   2 +-
 .../src/components/MenuItem/MenuItem.test.tsx |  13 ++
 .../src/components/MenuItem/MenuItem.tsx      |   5 +-
 .../src/components/MenuItem/MenuItem.types.ts |   4 +-
 .../__snapshots__/MenuItem.test.tsx.snap      |   2 +
 .../MenuItem}/useCharacterSearch.ts           |   4 +-
 .../src/components/MenuItem/useMenuItem.ts    |  17 ++-
 .../MenuItem/useMenuItemOnClickDismiss.ts     |  21 +++
 .../MenuItemCheckbox.types.ts                 |  16 +--
 .../MenuItemCheckbox.test.tsx.snap            |   1 +
 .../MenuItemCheckbox/useMenuItemCheckbox.ts   |  25 ++--
 .../MenuItemRadio/MenuItemRadio.types.ts      |  19 ++-
 .../__snapshots__/MenuItemRadio.test.tsx.snap |   1 +
 .../MenuItemRadio/useMenuItemRadio.ts         |  26 ++--
 .../src/components/MenuList/useMenuList.ts    |   2 +-
 .../__snapshots__/MenuTrigger.test.tsx.snap   |   2 +-
 .../MenuTrigger/useTriggerElement.test.tsx    |  12 +-
 .../MenuTrigger/useTriggerElement.ts          |  21 +--
 .../src/{ => contexts}/menuContext.ts         |  12 +-
 .../src/{ => contexts}/menuGroupContext.ts    |   0
 .../src/selectable/useCheckmarkStyles.ts      |   3 +-
 packages/react-menu/src/utils/index.ts        |   1 +
 .../react-menu/src/utils/isOutsideMenu.ts     |  20 +++
 35 files changed, 452 insertions(+), 171 deletions(-)
 create mode 100644 change/@fluentui-react-examples-709e3e5a-ab9b-447c-912a-57b3a09d6fba.json
 create mode 100644 change/@fluentui-react-menu-2ad41a71-bb44-48b9-9bb4-01cbf5d52d37.json
 create mode 100644 change/@fluentui-react-utilities-3a681598-a294-46c1-a849-0daa2abf5641.json
 rename packages/react-menu/src/{utils => components/MenuItem}/useCharacterSearch.ts (80%)
 create mode 100644 packages/react-menu/src/components/MenuItem/useMenuItemOnClickDismiss.ts
 rename packages/react-menu/src/{ => contexts}/menuContext.ts (64%)
 rename packages/react-menu/src/{ => contexts}/menuGroupContext.ts (100%)
 create mode 100644 packages/react-menu/src/utils/index.ts
 create mode 100644 packages/react-menu/src/utils/isOutsideMenu.ts

diff --git a/change/@fluentui-react-examples-709e3e5a-ab9b-447c-912a-57b3a09d6fba.json b/change/@fluentui-react-examples-709e3e5a-ab9b-447c-912a-57b3a09d6fba.json
new file mode 100644
index 00000000000000..1eeee587efc952
--- /dev/null
+++ b/change/@fluentui-react-examples-709e3e5a-ab9b-447c-912a-57b3a09d6fba.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Add nested menu example",
+  "packageName": "@fluentui/react-examples",
+  "email": "lingfan.gao@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-menu-2ad41a71-bb44-48b9-9bb4-01cbf5d52d37.json b/change/@fluentui-react-menu-2ad41a71-bb44-48b9-9bb4-01cbf5d52d37.json
new file mode 100644
index 00000000000000..a8f40d015a5643
--- /dev/null
+++ b/change/@fluentui-react-menu-2ad41a71-bb44-48b9-9bb4-01cbf5d52d37.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Support mouse interactions for nested menus",
+  "packageName": "@fluentui/react-menu",
+  "email": "lingfan.gao@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-utilities-3a681598-a294-46c1-a849-0daa2abf5641.json b/change/@fluentui-react-utilities-3a681598-a294-46c1-a849-0daa2abf5641.json
new file mode 100644
index 00000000000000..dddad6bad47e37
--- /dev/null
+++ b/change/@fluentui-react-utilities-3a681598-a294-46c1-a849-0daa2abf5641.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add descendants utility",
+  "packageName": "@fluentui/react-utilities",
+  "email": "lingfan.gao@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-examples/src/react-menu/Menu/Menu.stories.tsx b/packages/react-examples/src/react-menu/Menu/Menu.stories.tsx
index d6600f81311c43..ede0bf2d6b8a49 100644
--- a/packages/react-examples/src/react-menu/Menu/Menu.stories.tsx
+++ b/packages/react-examples/src/react-menu/Menu/Menu.stories.tsx
@@ -31,19 +31,17 @@ export const MenuExample = (props: Pick<MenuProps, 'onHover' | 'onContext'>) =>
 export const MenuControlledExample = () => {
   const [open, setOpen] = React.useState(false);
   return (
-    <>
-      <Menu open={open}>
-        <MenuTrigger>
-          <button onClick={() => setOpen(s => !s)}>Toggle menu</button>
-        </MenuTrigger>
+    <Menu open={open}>
+      <MenuTrigger>
+        <button onClick={() => setOpen(s => !s)}>Toggle menu</button>
+      </MenuTrigger>
 
-        <MenuList>
-          <MenuItem>Item 1</MenuItem>
-          <MenuItem>Item 1</MenuItem>
-          <MenuItem>Item 1</MenuItem>
-        </MenuList>
-      </Menu>
-    </>
+      <MenuList>
+        <MenuItem>Item 1</MenuItem>
+        <MenuItem>Item 1</MenuItem>
+        <MenuItem>Item 1</MenuItem>
+      </MenuList>
+    </Menu>
   );
 };
 
@@ -54,6 +52,53 @@ export const MenuTriggerInteractions = () => {
   return <MenuExample onContext={context} onHover={hover} />;
 };
 
+export const NestedMenus = () => (
+  <Menu>
+    <MenuTrigger>
+      <button>Toggle menu</button>
+    </MenuTrigger>
+
+    <MenuList>
+      <MenuItem>Item 1</MenuItem>
+      <MenuItem>Item 1</MenuItem>
+      <MenuItem>Item 1</MenuItem>
+      <Menu>
+        <MenuTrigger>
+          <MenuItem>Open 1</MenuItem>
+        </MenuTrigger>
+
+        <MenuList>
+          <MenuItem>Item 1</MenuItem>
+          <MenuItem>Item 1</MenuItem>
+          <MenuItem>Item 1</MenuItem>
+          <Menu>
+            <MenuTrigger>
+              <MenuItem>Open 2</MenuItem>
+            </MenuTrigger>
+
+            <MenuList>
+              <MenuItem>Item 1</MenuItem>
+              <MenuItem>Item 1</MenuItem>
+              <MenuItem>Item 1</MenuItem>
+            </MenuList>
+          </Menu>
+          <Menu>
+            <MenuTrigger>
+              <MenuItem>Open 3</MenuItem>
+            </MenuTrigger>
+
+            <MenuList>
+              <MenuItem>Item 1</MenuItem>
+              <MenuItem>Item 1</MenuItem>
+              <MenuItem>Item 1</MenuItem>
+            </MenuList>
+          </Menu>
+        </MenuList>
+      </Menu>
+    </MenuList>
+  </Menu>
+);
+
 export const MenuSelectionExample = () => (
   <Menu>
     <MenuTrigger>
diff --git a/packages/react-menu/etc/react-menu.api.md b/packages/react-menu/etc/react-menu.api.md
index ee4d339fb26a91..118bd918d99f7b 100644
--- a/packages/react-menu/etc/react-menu.api.md
+++ b/packages/react-menu/etc/react-menu.api.md
@@ -61,44 +61,39 @@ export const MenuItemCheckbox: React.ForwardRefExoticComponent<MenuItemCheckboxP
 
 // @public (undocumented)
 export interface MenuItemCheckboxProps extends ComponentProps, React.HTMLAttributes<HTMLElement>, MenuItemProps, MenuItemSelectableProps {
-    checkmark?: ShorthandProps<HTMLElement>;
-    icon?: ShorthandProps<HTMLElement>;
+    checkmark?: ShorthandProps<React.HTMLAttributes<HTMLElement>>;
 }
 
 // @public
 export const menuItemCheckboxShorthandProps: string[];
 
 // @public (undocumented)
-export interface MenuItemCheckboxState extends MenuItemCheckboxProps, MenuItemState, MenuItemSelectableState {
-    checkmark: ObjectShorthandProps<HTMLElement>;
-    icon?: ObjectShorthandProps<HTMLElement>;
+export interface MenuItemCheckboxState extends MenuItemState, MenuItemSelectableState {
+    checkmark: ObjectShorthandProps<React.HTMLAttributes<HTMLElement>>;
     // (undocumented)
     ref: React.MutableRefObject<HTMLElement>;
 }
 
 // @public (undocumented)
 export interface MenuItemProps extends ComponentProps, React.HTMLAttributes<HTMLElement> {
-    icon?: ShorthandProps<HTMLElement>;
+    icon?: ShorthandProps<React.HTMLAttributes<HTMLElement>>;
 }
 
 // @public
 export const MenuItemRadio: React.ForwardRefExoticComponent<MenuItemRadioProps & React.RefAttributes<HTMLElement>>;
 
 // @public (undocumented)
-export interface MenuItemRadioProps extends ComponentProps, React.HTMLAttributes<HTMLElement>, MenuItemSelectableProps {
+export interface MenuItemRadioProps extends ComponentProps, React.HTMLAttributes<HTMLElement>, MenuItemProps, MenuItemSelectableProps {
     // (undocumented)
     checkmark?: ShorthandProps<HTMLElement>;
-    // (undocumented)
-    icon?: ShorthandProps<HTMLElement>;
 }
 
 // @public
 export const menuItemRadioShorthandProps: string[];
 
 // @public (undocumented)
-export interface MenuItemRadioState extends MenuItemRadioProps, MenuItemSelectableState {
-    checkmark: ObjectShorthandProps<HTMLElement>;
-    icon?: ObjectShorthandProps<HTMLElement>;
+export interface MenuItemRadioState extends MenuItemState, MenuItemSelectableState {
+    checkmark: ObjectShorthandProps<React.HTMLAttributes<HTMLElement>>;
     // (undocumented)
     ref: React.MutableRefObject<HTMLElement>;
 }
@@ -121,7 +116,7 @@ export const menuItemShorthandProps: string[];
 
 // @public (undocumented)
 export interface MenuItemState extends MenuItemProps {
-    icon?: ObjectShorthandProps<HTMLSpanElement>;
+    icon?: ObjectShorthandProps<React.HTMLAttributes<HTMLSpanElement>>;
     ref: React.MutableRefObject<HTMLElement>;
 }
 
@@ -222,7 +217,7 @@ export type SelectableHandler = (e: React.MouseEvent | React.KeyboardEvent, name
 
 // @public
 export const useCheckmarkStyles: (state: MenuItemSelectableState & {
-    checkmark: ObjectShorthandProps<HTMLElement>;
+    checkmark: ObjectShorthandProps<React.HTMLAttributes<HTMLElement>>;
 }) => void;
 
 // @public
diff --git a/packages/react-menu/src/components/Menu/Menu.test.tsx b/packages/react-menu/src/components/Menu/Menu.test.tsx
index e9399f0e968806..fe19e9218fd877 100644
--- a/packages/react-menu/src/components/Menu/Menu.test.tsx
+++ b/packages/react-menu/src/components/Menu/Menu.test.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { Menu } from './Menu';
-import * as renderer from 'react-test-renderer';
 import { render, fireEvent } from '@testing-library/react';
 import { ReactWrapper } from 'enzyme';
 import { isConformant } from '../../common/isConformant';
@@ -8,6 +7,7 @@ import { MenuTrigger } from '../MenuTrigger/index';
 import { MenuList } from '../MenuList/index';
 import { MenuItem } from '../MenuItem/index';
 import { MenuProps } from './Menu.types';
+import { MenuItemCheckbox } from '../MenuItemCheckbox/index';
 
 describe('Menu', () => {
   isConformant({
@@ -46,7 +46,7 @@ describe('Menu', () => {
    * Note: see more visual regression tests for Menu in /apps/vr-tests.
    */
   it('renders a default state', () => {
-    const component = renderer.create(
+    const { container } = render(
       <Menu>
         <MenuTrigger>
           <button>Menu trigger</button>
@@ -56,8 +56,27 @@ describe('Menu', () => {
         </MenuList>
       </Menu>,
     );
-    const tree = component.toJSON();
-    expect(tree).toMatchSnapshot();
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it('opens menu by clicking on trigger', () => {
+    // Arrange
+    const { getByRole, container } = render(
+      <Menu>
+        <MenuTrigger>
+          <button>Menu trigger</button>
+        </MenuTrigger>
+        <MenuList>
+          <MenuItem>Item</MenuItem>
+        </MenuList>
+      </Menu>,
+    );
+
+    // Act
+    fireEvent.click(getByRole('button'));
+
+    expect(container).toMatchSnapshot();
   });
 
   it.each([
@@ -70,7 +89,7 @@ describe('Menu', () => {
     const spy = jest.fn();
     const menuPopup: MenuProps['menuPopup'] = { [handler]: spy };
     const { getByRole } = render(
-      <Menu menuPopup={menuPopup}>
+      <Menu menuPopup={menuPopup} open>
         <MenuTrigger>
           <button>Menu trigger</button>
         </MenuTrigger>
@@ -81,10 +100,115 @@ describe('Menu', () => {
     );
 
     // Act
-    fireEvent.click(getByRole('button'));
     trigger(getByRole('menu'));
 
     // Assert
     expect(spy).toHaveBeenCalledTimes(1);
   });
+
+  it('should close menu after clicking on menuitem', () => {
+    // Arrange
+    const { getByRole, queryByRole } = render(
+      <Menu>
+        <MenuTrigger>
+          <button>Menu trigger</button>
+        </MenuTrigger>
+        <MenuList>
+          <MenuItem>Item</MenuItem>
+        </MenuList>
+      </Menu>,
+    );
+
+    // Act
+    fireEvent.click(getByRole('button'));
+    fireEvent.click(getByRole('menuitem'));
+
+    // Assert
+    expect(queryByRole('menuitem')).toBeNull();
+  });
+
+  it('should persist selection after popup close', () => {
+    // Arrange
+    const { getByRole } = render(
+      <Menu>
+        <MenuTrigger>
+          <button>Menu trigger</button>
+        </MenuTrigger>
+        <MenuList>
+          <MenuItemCheckbox name="test" value="1">
+            Item
+          </MenuItemCheckbox>
+        </MenuList>
+      </Menu>,
+    );
+
+    // Act
+    fireEvent.click(getByRole('button')); // open menu
+    fireEvent.click(getByRole('menuitemcheckbox')); // also closes menu
+    fireEvent.click(getByRole('button')); // open menu
+
+    // Assert
+    expect(getByRole('menuitemcheckbox').getAttribute('aria-checked')).toEqual('true');
+  });
+
+  it('should open nested menu with mouse enter', () => {
+    // Arrange
+    const expected = 'visible';
+    const { getByRole, getByText } = render(
+      <Menu open>
+        <MenuTrigger>
+          <button>Menu trigger</button>
+        </MenuTrigger>
+        <MenuList>
+          <Menu>
+            <MenuTrigger>
+              <MenuItem>Item</MenuItem>
+            </MenuTrigger>
+            <MenuList>
+              <MenuItem>{expected}</MenuItem>
+            </MenuList>
+          </Menu>
+        </MenuList>
+      </Menu>,
+    );
+
+    // Act
+    fireEvent.mouseEnter(getByRole('menuitem'));
+
+    // Assert
+    getByText(expected);
+  });
+
+  it('should close open nested menu when mouse enters another menuitem', () => {
+    // Arrange
+    const target = 'target';
+    const trigger = 'trigger';
+    const invisible = 'invisible';
+    const { queryByText, getByText } = render(
+      <Menu open>
+        <MenuTrigger>
+          <button>Menu trigger</button>
+        </MenuTrigger>
+        <MenuList>
+          <MenuItem>{target}</MenuItem>
+          <MenuItem>Item</MenuItem>
+          <Menu>
+            <MenuTrigger>
+              <MenuItem>{trigger}</MenuItem>
+            </MenuTrigger>
+            <MenuList>
+              <MenuItem>{invisible}</MenuItem>
+            </MenuList>
+          </Menu>
+        </MenuList>
+      </Menu>,
+    );
+
+    // Act
+    fireEvent.mouseEnter(getByText(trigger));
+    fireEvent.mouseEnter(getByText(target));
+
+    // Assert
+    expect(queryByText(invisible)).toBeNull();
+  });
 });
diff --git a/packages/react-menu/src/components/Menu/Menu.types.ts b/packages/react-menu/src/components/Menu/Menu.types.ts
index 185d5e9dfb275b..3da10f54125637 100644
--- a/packages/react-menu/src/components/Menu/Menu.types.ts
+++ b/packages/react-menu/src/components/Menu/Menu.types.ts
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ObjectShorthandProps, ShorthandProps } from '@fluentui/react-utilities';
-import { MenuListProps } from '../MenuList/index';
 import { PositioningProps } from '@fluentui/react-positioning';
+import { MenuListProps } from '../MenuList/index';
 
 /**
  * Extends and drills down Menulist props to simplify API
diff --git a/packages/react-menu/src/components/Menu/__snapshots__/Menu.test.tsx.snap b/packages/react-menu/src/components/Menu/__snapshots__/Menu.test.tsx.snap
index f41d976f9203aa..a15fc26783b3bd 100644
--- a/packages/react-menu/src/components/Menu/__snapshots__/Menu.test.tsx.snap
+++ b/packages/react-menu/src/components/Menu/__snapshots__/Menu.test.tsx.snap
@@ -1,14 +1,42 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Menu opens menu by clicking on trigger 1`] = `
+<div>
+  <button
+    aria-expanded="true"
+    aria-haspopup="true"
+    id="2"
+  >
+    Menu trigger
+  </button>
+  <div
+    aria-labelledby="2"
+    class=""
+    style="position: fixed; left: 0px; top: 0px; margin: 0px;"
+  >
+    <div
+      data-ah="{\\"focusable\\":{\\"mover\\":{\\"navigationType\\":1,\\"cyclic\\":true}}}"
+      role="menu"
+    >
+      <div
+        class=""
+        role="menuitem"
+        tabindex="0"
+      >
+        Item
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Menu renders a default state 1`] = `
-<button
-  aria-haspopup={true}
-  id="1"
-  onClick={[Function]}
-  onContextMenu={[Function]}
-  onMouseEnter={[Function]}
-  onMouseLeave={[Function]}
->
-  Menu trigger
-</button>
+<div>
+  <button
+    aria-haspopup="true"
+    id="1"
+  >
+    Menu trigger
+  </button>
+</div>
 `;
diff --git a/packages/react-menu/src/components/Menu/renderMenu.tsx b/packages/react-menu/src/components/Menu/renderMenu.tsx
index 5e29dda83978c6..6dc2da065164e5 100644
--- a/packages/react-menu/src/components/Menu/renderMenu.tsx
+++ b/packages/react-menu/src/components/Menu/renderMenu.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { getSlots } from '@fluentui/react-utilities';
 import { MenuState } from './Menu.types';
 import { menuShorthandProps } from './useMenu';
-import { MenuProvider } from '../../menuContext';
+import { MenuProvider } from '../../contexts/menuContext';
 
 /**
  * Render the final JSX of Menu
@@ -20,6 +20,7 @@ export const renderMenu = (state: MenuState) => {
     onContext,
     triggerRef,
     triggerId,
+    menuPopupRef,
   } = state;
 
   return (
@@ -35,6 +36,7 @@ export const renderMenu = (state: MenuState) => {
         onHover,
         onContext,
         triggerId,
+        menuPopupRef,
       }}
     >
       {state.menuTrigger}
diff --git a/packages/react-menu/src/components/Menu/useMenu.tsx b/packages/react-menu/src/components/Menu/useMenu.tsx
index 9f0a7ea2dd2df7..87da0611aebd36 100644
--- a/packages/react-menu/src/components/Menu/useMenu.tsx
+++ b/packages/react-menu/src/components/Menu/useMenu.tsx
@@ -7,11 +7,14 @@ import {
   useControllableValue,
   useId,
   useOnClickOutside,
+  useEventCallback,
 } from '@fluentui/react-utilities';
-import { MenuProps, MenuState } from './Menu.types';
-import { MenuTrigger } from '../MenuTrigger/index';
 import { useFluent } from '@fluentui/react-provider';
 import { getCode, keyboardKey } from '@fluentui/keyboard-key';
+import { MenuProps, MenuState } from './Menu.types';
+import { MenuTrigger } from '../MenuTrigger/index';
+import { useMenuContext } from '../../contexts/menuContext';
+import { isOutsideMenu } from '../../utils/index';
 
 export const menuShorthandProps: (keyof MenuProps)[] = ['menuPopup'];
 
@@ -32,19 +35,34 @@ const mergeProps = makeMergeProps<MenuState>({ deepMerge: menuShorthandProps });
 export const useMenu = (props: MenuProps, ref: React.Ref<HTMLElement>, defaultProps?: MenuProps): MenuState => {
   const { document } = useFluent();
   const triggerId = useId();
+  const isSubmenu = useMenuContext(context => context.hasMenuContext);
 
   const state = mergeProps(
     {
       ref: useMergedRefs(ref, React.useRef(null)),
       menuPopup: { as: 'div' },
-      position: 'below',
-      align: 'start',
+      position: isSubmenu ? 'after' : 'below',
+      align: isSubmenu ? 'top' : 'start',
+      onHover: isSubmenu,
       triggerId,
     },
     defaultProps,
     resolveShorthandProps(props, menuShorthandProps),
   );
 
+  const [checkedValues, setCheckedValues] = useControllableValue(state.checkedValues, state.defaultCheckedValues);
+  state.checkedValues = checkedValues;
+  const { onCheckedValueChange: onCheckedValueChangeOriginal } = state;
+  state.onCheckedValueChange = useEventCallback((e, name, checkedItems) => {
+    if (onCheckedValueChangeOriginal) {
+      onCheckedValueChangeOriginal(e, name, checkedItems);
+    }
+
+    setCheckedValues(s => {
+      return s ? { ...s, [name]: checkedItems } : { [name]: checkedItems };
+    });
+  });
+
   // TODO Better way to narrow types ?
   const children = React.Children.toArray(state.children) as React.ReactElement[];
 
@@ -54,7 +72,11 @@ export const useMenu = (props: MenuProps, ref: React.Ref<HTMLElement>, defaultPr
     console.warn('Menu can only take one MenuTrigger and one MenuList as children');
   }
 
-  const { targetRef: triggerRef, containerRef } = usePopper({ align: state.align, position: state.position });
+  const { targetRef: triggerRef, containerRef: menuPopupRef } = usePopper({
+    align: state.align,
+    position: state.position,
+  });
+  state.menuPopupRef = menuPopupRef;
   state.triggerRef = triggerRef;
   children.forEach(child => {
     if (child.type === MenuTrigger) {
@@ -64,16 +86,6 @@ export const useMenu = (props: MenuProps, ref: React.Ref<HTMLElement>, defaultPr
     }
   });
 
-  state.menuPopup.children = (Component, p) => {
-    return (
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      <Component ref={containerRef} {...p}>
-        {state.menuList}
-      </Component>
-    );
-  };
-
   const [open, setOpen] = useControllableValue(state.open, state.defaultOpen);
   // TODO fix useControllableValue typing
   state.open = open !== undefined ? open : state.open;
@@ -85,30 +97,33 @@ export const useMenu = (props: MenuProps, ref: React.Ref<HTMLElement>, defaultPr
   );
 
   useMenuPopup(state);
-  useOnClickOutside({ element: document, refs: [state.menuPopupRef, triggerRef], callback: () => setOpen(false) });
+  useOnClickOutside({
+    element: document,
+    refs: [state.menuPopupRef, triggerRef],
+    callback: () => setOpen(false),
+  });
+
   return state;
 };
 
 const useMenuPopup = (state: MenuState) => {
-  // TODO use Popper for the popup ref
-  const menuPopupRef = React.useRef<HTMLElement>(null) as React.MutableRefObject<HTMLElement>;
-  state.menuPopupRef = menuPopupRef;
-  state.menuPopup.children = (Component, originalProps) => {
-    const newProps = { 'aria-labelledby': state.triggerId, ...originalProps };
-
-    if (state.onHover && !state.onContext) {
-      newProps.onMouseEnter = (e: React.MouseEvent<HTMLElement>) => {
-        state.setOpen(true);
-        originalProps?.onMouseEnter?.(e);
-      };
-      newProps.onMouseLeave = (e: React.MouseEvent<HTMLElement>) => {
-        state.setOpen(false);
-        originalProps?.onMouseLeave?.(e);
-      };
-    }
+  const { menuPopup, menuList, setOpen, triggerId, menuPopupRef, triggerRef, onHover, onContext } = state;
+
+  menuPopup.children = (Component, originalProps) => {
+    const newProps = { 'aria-labelledby': triggerId, ...originalProps };
+
+    newProps.onMouseEnter = (e: React.MouseEvent<HTMLElement>) => {
+      if (onHover && !onContext) {
+        setOpen(true);
+      }
+
+      originalProps?.onMouseEnter?.(e);
+    };
 
     newProps.onBlur = (e: React.FocusEvent<HTMLElement>) => {
-      state.setOpen(false);
+      if (isOutsideMenu({ menuPopupRef, triggerRef, event: e })) {
+        setOpen(false);
+      }
       originalProps?.onBlur?.(e);
     };
 
@@ -120,16 +135,16 @@ const useMenuPopup = (state: MenuState) => {
         return;
       }
 
-      state.setOpen(false);
+      setOpen(false);
     };
 
     return React.createElement(
       Component as React.ElementType,
       {
         ...newProps,
-        ref: state.menuPopupRef,
+        ref: menuPopupRef,
       },
-      state.menuList,
+      menuList,
     );
   };
 
diff --git a/packages/react-menu/src/components/MenuGroup/renderMenuGroup.tsx b/packages/react-menu/src/components/MenuGroup/renderMenuGroup.tsx
index c991881d61f295..9a0f724b033626 100644
--- a/packages/react-menu/src/components/MenuGroup/renderMenuGroup.tsx
+++ b/packages/react-menu/src/components/MenuGroup/renderMenuGroup.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { getSlots } from '@fluentui/react-utilities';
 import { MenuGroupState } from './MenuGroup.types';
-import { MenuGroupContextProvider } from '../../menuGroupContext';
+import { MenuGroupContextProvider } from '../../contexts/menuGroupContext';
 
 /**
  * Redefine the render function to add slots. Reuse the menugroup structure but add
diff --git a/packages/react-menu/src/components/MenuGroupHeader/MenuGroupHeader.test.tsx b/packages/react-menu/src/components/MenuGroupHeader/MenuGroupHeader.test.tsx
index ba4a635c688625..0a45ee868abf4a 100644
--- a/packages/react-menu/src/components/MenuGroupHeader/MenuGroupHeader.test.tsx
+++ b/packages/react-menu/src/components/MenuGroupHeader/MenuGroupHeader.test.tsx
@@ -4,7 +4,7 @@ import * as renderer from 'react-test-renderer';
 import { ReactWrapper } from 'enzyme';
 import { render } from '@testing-library/react';
 import { isConformant } from '../../common/isConformant';
-import { MenuGroupContextProvider } from '../../menuGroupContext';
+import { MenuGroupContextProvider } from '../../contexts/menuGroupContext';
 
 describe('MenuGroupHeader', () => {
   isConformant({
diff --git a/packages/react-menu/src/components/MenuGroupHeader/useMenuGroupHeader.ts b/packages/react-menu/src/components/MenuGroupHeader/useMenuGroupHeader.ts
index 566b696b03b94f..90c2174c169bf9 100644
--- a/packages/react-menu/src/components/MenuGroupHeader/useMenuGroupHeader.ts
+++ b/packages/react-menu/src/components/MenuGroupHeader/useMenuGroupHeader.ts
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { makeMergeProps, resolveShorthandProps, useMergedRefs } from '@fluentui/react-utilities';
 import { MenuGroupHeaderProps, MenuGroupHeaderState } from './MenuGroupHeader.types';
-import { useMenuGroupContext } from '../../menuGroupContext';
+import { useMenuGroupContext } from '../../contexts/menuGroupContext';
 
 const mergeProps = makeMergeProps<MenuGroupHeaderState>({});
 
diff --git a/packages/react-menu/src/components/MenuItem/MenuItem.test.tsx b/packages/react-menu/src/components/MenuItem/MenuItem.test.tsx
index 5035f37ac567d3..a48c89026cdf2b 100644
--- a/packages/react-menu/src/components/MenuItem/MenuItem.test.tsx
+++ b/packages/react-menu/src/components/MenuItem/MenuItem.test.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { render, fireEvent } from '@testing-library/react';
 import { MenuItem } from './MenuItem';
 import * as renderer from 'react-test-renderer';
 import { ReactWrapper } from 'enzyme';
@@ -27,4 +28,16 @@ describe('MenuItem', () => {
     const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
+
+  it('should focus the item on mouseenter', () => {
+    // Arrange
+    const { getByRole } = render(<MenuItem>Item</MenuItem>);
+
+    // Act
+    const menuitem = getByRole('menuitem');
+    fireEvent.mouseEnter(menuitem);
+
+    // Assert
+    expect(document.activeElement).toBe(menuitem);
+  });
 });
diff --git a/packages/react-menu/src/components/MenuItem/MenuItem.tsx b/packages/react-menu/src/components/MenuItem/MenuItem.tsx
index bcc1912874121d..91d0ede253bfdf 100644
--- a/packages/react-menu/src/components/MenuItem/MenuItem.tsx
+++ b/packages/react-menu/src/components/MenuItem/MenuItem.tsx
@@ -9,10 +9,7 @@ import { useMenuItemStyles } from './useMenuItemStyles';
  * {@docCategory MenuItem}
  */
 export const MenuItem = React.forwardRef<HTMLElement, MenuItemProps>((props, ref) => {
-  const state = useMenuItem(props, ref, {
-    role: 'menuitem',
-    tabIndex: 0, // TODO keyboard navigation
-  });
+  const state = useMenuItem(props, ref);
 
   useMenuItemStyles(state);
   return renderMenuItem(state);
diff --git a/packages/react-menu/src/components/MenuItem/MenuItem.types.ts b/packages/react-menu/src/components/MenuItem/MenuItem.types.ts
index f6183f5649f6ed..af0a34823162bd 100644
--- a/packages/react-menu/src/components/MenuItem/MenuItem.types.ts
+++ b/packages/react-menu/src/components/MenuItem/MenuItem.types.ts
@@ -5,7 +5,7 @@ export interface MenuItemProps extends ComponentProps, React.HTMLAttributes<HTML
   /**
    * Icon slot rendered before children content
    */
-  icon?: ShorthandProps<HTMLElement>;
+  icon?: ShorthandProps<React.HTMLAttributes<HTMLElement>>;
 }
 
 export interface MenuItemState extends MenuItemProps {
@@ -16,5 +16,5 @@ export interface MenuItemState extends MenuItemProps {
   /**
    * Icon slot when processed by internal state
    */
-  icon?: ObjectShorthandProps<HTMLSpanElement>;
+  icon?: ObjectShorthandProps<React.HTMLAttributes<HTMLSpanElement>>;
 }
diff --git a/packages/react-menu/src/components/MenuItem/__snapshots__/MenuItem.test.tsx.snap b/packages/react-menu/src/components/MenuItem/__snapshots__/MenuItem.test.tsx.snap
index ac01b22c9c5546..cc02e25de028c4 100644
--- a/packages/react-menu/src/components/MenuItem/__snapshots__/MenuItem.test.tsx.snap
+++ b/packages/react-menu/src/components/MenuItem/__snapshots__/MenuItem.test.tsx.snap
@@ -3,7 +3,9 @@
 exports[`MenuItem renders a default state 1`] = `
 <div
   className=""
+  onClick={[Function]}
   onKeyDown={[Function]}
+  onMouseEnter={[Function]}
   role="menuitem"
   tabIndex={0}
 >
diff --git a/packages/react-menu/src/utils/useCharacterSearch.ts b/packages/react-menu/src/components/MenuItem/useCharacterSearch.ts
similarity index 80%
rename from packages/react-menu/src/utils/useCharacterSearch.ts
rename to packages/react-menu/src/components/MenuItem/useCharacterSearch.ts
index d03edfb75638e7..19c161eedbebbf 100644
--- a/packages/react-menu/src/utils/useCharacterSearch.ts
+++ b/packages/react-menu/src/components/MenuItem/useCharacterSearch.ts
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { MenuItemState } from '../components/index';
-import { useMenuListContext } from '../menuListContext';
+import { MenuItemState } from '../../components/index';
+import { useMenuListContext } from '../../menuListContext';
 
 export const useCharacterSearch = (state: MenuItemState) => {
   const setFocusByFirstCharacter = useMenuListContext(context => context.setFocusByFirstCharacter);
diff --git a/packages/react-menu/src/components/MenuItem/useMenuItem.ts b/packages/react-menu/src/components/MenuItem/useMenuItem.ts
index 10ab4f83750899..fdec6e2786b08c 100644
--- a/packages/react-menu/src/components/MenuItem/useMenuItem.ts
+++ b/packages/react-menu/src/components/MenuItem/useMenuItem.ts
@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { makeMergeProps, resolveShorthandProps, useMergedRefs } from '@fluentui/react-utilities';
+import { makeMergeProps, resolveShorthandProps, useMergedRefs, useEventCallback } from '@fluentui/react-utilities';
 import { MenuItemProps, MenuItemState } from './MenuItem.types';
-import { useCharacterSearch } from '../../utils/useCharacterSearch';
+import { useCharacterSearch } from './useCharacterSearch';
+import { useMenuItemOnClickDismiss } from './useMenuItemOnClickDismiss';
 
 /**
  * Consts listing which props are shorthand props.
@@ -22,11 +23,23 @@ export const useMenuItem = (
     {
       ref: useMergedRefs(ref, React.useRef(null)),
       icon: { as: 'span' },
+      role: 'menuitem',
+      tabIndex: 0,
     },
     defaultProps,
     resolveShorthandProps(props, menuItemShorthandProps),
   );
 
+  // useCloseSubmenusOnMouseEnter(state);
+  useMenuItemOnClickDismiss(state);
+
+  const { onMouseEnter: onMouseEnterOriginal } = state;
+  state.onMouseEnter = useEventCallback((e: React.MouseEvent<HTMLElement>) => {
+    state.ref.current?.focus();
+
+    onMouseEnterOriginal?.(e);
+  });
+
   useCharacterSearch(state);
   return state;
 };
diff --git a/packages/react-menu/src/components/MenuItem/useMenuItemOnClickDismiss.ts b/packages/react-menu/src/components/MenuItem/useMenuItemOnClickDismiss.ts
new file mode 100644
index 00000000000000..2d8eb4e2e87da4
--- /dev/null
+++ b/packages/react-menu/src/components/MenuItem/useMenuItemOnClickDismiss.ts
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { useEventCallback } from '@fluentui/react-utilities';
+import { useMenuContext } from '../../contexts/menuContext';
+
+/**
+ * Helper hook that adds menu dismiss to a menu item's onClick handler
+ */
+export const useMenuItemOnClickDismiss = <T extends React.HTMLAttributes<HTMLElement>>(state: T) => {
+  const setOpen = useMenuContext(context => context.setOpen);
+
+  const { onClick: onClickOriginal } = state;
+  state.onClick = useEventCallback((e: React.MouseEvent<HTMLElement>) => {
+    if (onClickOriginal) {
+      onClickOriginal(e);
+    }
+
+    setOpen(false);
+  });
+
+  return state;
+};
diff --git a/packages/react-menu/src/components/MenuItemCheckbox/MenuItemCheckbox.types.ts b/packages/react-menu/src/components/MenuItemCheckbox/MenuItemCheckbox.types.ts
index 2c679d57250a8a..bb1f06010a54a0 100644
--- a/packages/react-menu/src/components/MenuItemCheckbox/MenuItemCheckbox.types.ts
+++ b/packages/react-menu/src/components/MenuItemCheckbox/MenuItemCheckbox.types.ts
@@ -11,30 +11,20 @@ export interface MenuItemCheckboxProps
     React.HTMLAttributes<HTMLElement>,
     MenuItemProps,
     MenuItemSelectableProps {
-  /**
-   * Icon slot rendered before children content
-   */
-  icon?: ShorthandProps<HTMLElement>;
-
   /**
    * Slot for the checkmark indicator
    */
-  checkmark?: ShorthandProps<HTMLElement>;
+  checkmark?: ShorthandProps<React.HTMLAttributes<HTMLElement>>;
 }
 
 /**
  * {@docCategory MenuItemCheckbox}
  */
-export interface MenuItemCheckboxState extends MenuItemCheckboxProps, MenuItemState, MenuItemSelectableState {
+export interface MenuItemCheckboxState extends MenuItemState, MenuItemSelectableState {
   ref: React.MutableRefObject<HTMLElement>;
 
-  /**
-   * Icon slot rendered before children content
-   */
-  icon?: ObjectShorthandProps<HTMLElement>;
-
   /**
    * Slot for the checkmark indicator
    */
-  checkmark: ObjectShorthandProps<HTMLElement>;
+  checkmark: ObjectShorthandProps<React.HTMLAttributes<HTMLElement>>;
 }
diff --git a/packages/react-menu/src/components/MenuItemCheckbox/__snapshots__/MenuItemCheckbox.test.tsx.snap b/packages/react-menu/src/components/MenuItemCheckbox/__snapshots__/MenuItemCheckbox.test.tsx.snap
index 057e6021816346..319da91881be81 100644
--- a/packages/react-menu/src/components/MenuItemCheckbox/__snapshots__/MenuItemCheckbox.test.tsx.snap
+++ b/packages/react-menu/src/components/MenuItemCheckbox/__snapshots__/MenuItemCheckbox.test.tsx.snap
@@ -7,6 +7,7 @@ exports[`MenuItemCheckbox conformance renders a default state 1`] = `
   name="checkbox"
   onClick={[Function]}
   onKeyDown={[Function]}
+  onMouseEnter={[Function]}
   role="menuitemcheckbox"
   tabIndex={0}
 >
diff --git a/packages/react-menu/src/components/MenuItemCheckbox/useMenuItemCheckbox.ts b/packages/react-menu/src/components/MenuItemCheckbox/useMenuItemCheckbox.ts
index bba0b9b21deb3e..bf260a94797774 100644
--- a/packages/react-menu/src/components/MenuItemCheckbox/useMenuItemCheckbox.ts
+++ b/packages/react-menu/src/components/MenuItemCheckbox/useMenuItemCheckbox.ts
@@ -1,14 +1,14 @@
 import * as React from 'react';
-import { makeMergeProps, resolveShorthandProps, useMergedRefs } from '@fluentui/react-utilities';
+import { makeMergeProps, resolveShorthandProps } from '@fluentui/react-utilities';
 import { MenuItemCheckboxProps, MenuItemCheckboxState } from './MenuItemCheckbox.types';
 import { useMenuItemSelectable } from '../../selectable/index';
-import { useCharacterSearch } from '../../utils/useCharacterSearch';
 import { useMenuListContext } from '../../menuListContext';
+import { useMenuItem, menuItemShorthandProps } from '../MenuItem/useMenuItem';
 
 /**
  * Consts listing which props are shorthand props.
  */
-export const menuItemCheckboxShorthandProps = ['icon', 'checkmark'];
+export const menuItemCheckboxShorthandProps = [...menuItemShorthandProps, 'checkmark'];
 
 const mergeProps = makeMergeProps<MenuItemCheckboxState>({ deepMerge: menuItemCheckboxShorthandProps });
 
@@ -18,19 +18,14 @@ export const useMenuItemCheckbox = (
   ref: React.Ref<HTMLElement>,
   defaultProps?: MenuItemCheckboxProps,
 ): MenuItemCheckboxState => {
-  const state = mergeProps(
-    {
-      ref: useMergedRefs(ref, React.useRef(null)),
-      icon: { as: 'span' },
-      checkmark: { as: 'span' },
-      role: 'menuitemcheckbox',
-      tabIndex: 0,
-    },
-    defaultProps,
-    resolveShorthandProps(props, menuItemCheckboxShorthandProps),
-  );
+  const baseState = useMenuItem(props, ref, {
+    role: 'menuitemcheckbox',
+  });
 
-  useCharacterSearch(state);
+  // React elements cannot be extended and will break `resolveShorthandProps`
+  // set to undefined since it will be resolved again anyway
+  ((baseState as unknown) as MenuItemCheckboxProps).checkmark = undefined;
+  const state = mergeProps(baseState, defaultProps, resolveShorthandProps(props, menuItemCheckboxShorthandProps));
 
   const toggleCheckbox = useMenuListContext(context => context.toggleCheckbox);
   useMenuItemSelectable(state, toggleCheckbox);
diff --git a/packages/react-menu/src/components/MenuItemRadio/MenuItemRadio.types.ts b/packages/react-menu/src/components/MenuItemRadio/MenuItemRadio.types.ts
index b8867888a595fb..31b256240ad944 100644
--- a/packages/react-menu/src/components/MenuItemRadio/MenuItemRadio.types.ts
+++ b/packages/react-menu/src/components/MenuItemRadio/MenuItemRadio.types.ts
@@ -1,29 +1,26 @@
 import * as React from 'react';
 import { ComponentProps, ObjectShorthandProps, ShorthandProps } from '@fluentui/react-utilities';
 import { MenuItemSelectableProps, MenuItemSelectableState } from '../../selectable/index';
+import { MenuItemProps, MenuItemState } from '../MenuItem/MenuItem.types';
 
 /**
  * {@docCategory MenuItemRadio}
  */
-export interface MenuItemRadioProps extends ComponentProps, React.HTMLAttributes<HTMLElement>, MenuItemSelectableProps {
-  icon?: ShorthandProps<HTMLElement>;
-
+export interface MenuItemRadioProps
+  extends ComponentProps,
+    React.HTMLAttributes<HTMLElement>,
+    MenuItemProps,
+    MenuItemSelectableProps {
   checkmark?: ShorthandProps<HTMLElement>;
 }
 
 /**
  * {@docCategory MenuItemRadio}
  */
-export interface MenuItemRadioState extends MenuItemRadioProps, MenuItemSelectableState {
+export interface MenuItemRadioState extends MenuItemState, MenuItemSelectableState {
   ref: React.MutableRefObject<HTMLElement>;
-
-  /**
-   * Icon slot rendered before children content
-   */
-  icon?: ObjectShorthandProps<HTMLElement>;
-
   /**
    * Slot for the checkmark indicator
    */
-  checkmark: ObjectShorthandProps<HTMLElement>;
+  checkmark: ObjectShorthandProps<React.HTMLAttributes<HTMLElement>>;
 }
diff --git a/packages/react-menu/src/components/MenuItemRadio/__snapshots__/MenuItemRadio.test.tsx.snap b/packages/react-menu/src/components/MenuItemRadio/__snapshots__/MenuItemRadio.test.tsx.snap
index 3c9c3a1ff007d7..2583193c2ec1d9 100644
--- a/packages/react-menu/src/components/MenuItemRadio/__snapshots__/MenuItemRadio.test.tsx.snap
+++ b/packages/react-menu/src/components/MenuItemRadio/__snapshots__/MenuItemRadio.test.tsx.snap
@@ -7,6 +7,7 @@ exports[`MenuItemRadio renders a default state 1`] = `
   name="radio"
   onClick={[Function]}
   onKeyDown={[Function]}
+  onMouseEnter={[Function]}
   role="menuitemradio"
   tabIndex={0}
 >
diff --git a/packages/react-menu/src/components/MenuItemRadio/useMenuItemRadio.ts b/packages/react-menu/src/components/MenuItemRadio/useMenuItemRadio.ts
index 2db38307da8c0a..305ea02180e115 100644
--- a/packages/react-menu/src/components/MenuItemRadio/useMenuItemRadio.ts
+++ b/packages/react-menu/src/components/MenuItemRadio/useMenuItemRadio.ts
@@ -1,14 +1,14 @@
 import * as React from 'react';
-import { makeMergeProps, resolveShorthandProps, useMergedRefs } from '@fluentui/react-utilities';
+import { makeMergeProps, resolveShorthandProps } from '@fluentui/react-utilities';
 import { MenuItemRadioProps, MenuItemRadioState } from './MenuItemRadio.types';
 import { useMenuItemSelectable } from '../../selectable/index';
-import { useCharacterSearch } from '../../utils/useCharacterSearch';
 import { useMenuListContext } from '../../menuListContext';
+import { useMenuItem, menuItemShorthandProps } from '../MenuItem/useMenuItem';
 
 /**
  * Consts listing which props are shorthand props.
  */
-export const menuItemRadioShorthandProps = ['icon', 'checkmark'];
+export const menuItemRadioShorthandProps = [...menuItemShorthandProps, 'checkmark'];
 
 const mergeProps = makeMergeProps<MenuItemRadioState>({ deepMerge: menuItemRadioShorthandProps });
 
@@ -20,20 +20,14 @@ export const useMenuItemRadio = (
   ref: React.Ref<HTMLElement>,
   defaultProps?: MenuItemRadioProps,
 ): MenuItemRadioState => {
-  const state = mergeProps(
-    {
-      ref: useMergedRefs(ref, React.useRef<HTMLElement>(null)),
-      icon: { as: 'span' },
-      checkmark: { as: 'span' },
-      role: 'menuitemradio',
-      tabIndex: 0,
-    },
-    defaultProps,
-    resolveShorthandProps(props, menuItemRadioShorthandProps),
-  );
-
-  useCharacterSearch(state);
+  const baseState = useMenuItem(props, ref, {
+    role: 'menuitemradio',
+  });
 
+  // React elements cannot be extended and will break `resolveShorthandProps`
+  // set to undefined since it will be resolved again anyway
+  ((baseState as unknown) as MenuItemRadioProps).checkmark = undefined;
+  const state = mergeProps(baseState, defaultProps, resolveShorthandProps(props, menuItemRadioShorthandProps));
   const selectRadio = useMenuListContext(context => context.selectRadio);
   useMenuItemSelectable(state, selectRadio);
   return state;
diff --git a/packages/react-menu/src/components/MenuList/useMenuList.ts b/packages/react-menu/src/components/MenuList/useMenuList.ts
index 6845f028007597..de0b73811ff1bf 100644
--- a/packages/react-menu/src/components/MenuList/useMenuList.ts
+++ b/packages/react-menu/src/components/MenuList/useMenuList.ts
@@ -8,7 +8,7 @@ import {
 } from '@fluentui/react-utilities';
 import { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-focus-management';
 import { MenuListProps, MenuListState } from './MenuList.types';
-import { useMenuContext } from '../../menuContext';
+import { useMenuContext } from '../../contexts/menuContext';
 
 const mergeProps = makeMergeProps<MenuListState>();
 
diff --git a/packages/react-menu/src/components/MenuTrigger/__snapshots__/MenuTrigger.test.tsx.snap b/packages/react-menu/src/components/MenuTrigger/__snapshots__/MenuTrigger.test.tsx.snap
index ce785e562c888f..9487708bba0b06 100644
--- a/packages/react-menu/src/components/MenuTrigger/__snapshots__/MenuTrigger.test.tsx.snap
+++ b/packages/react-menu/src/components/MenuTrigger/__snapshots__/MenuTrigger.test.tsx.snap
@@ -5,10 +5,10 @@ exports[`MenuTrigger renders a default state 1`] = `
   aria-expanded={false}
   aria-haspopup={true}
   id=""
+  onBlur={[Function]}
   onClick={[Function]}
   onContextMenu={[Function]}
   onMouseEnter={[Function]}
-  onMouseLeave={[Function]}
 >
   Menu trigger
 </button>
diff --git a/packages/react-menu/src/components/MenuTrigger/useTriggerElement.test.tsx b/packages/react-menu/src/components/MenuTrigger/useTriggerElement.test.tsx
index c367c96383a713..10221c2da02c5e 100644
--- a/packages/react-menu/src/components/MenuTrigger/useTriggerElement.test.tsx
+++ b/packages/react-menu/src/components/MenuTrigger/useTriggerElement.test.tsx
@@ -2,14 +2,15 @@ import * as React from 'react';
 import { renderHook } from '@testing-library/react-hooks';
 import { render, fireEvent } from '@testing-library/react';
 import { useTriggerElement } from './useTriggerElement';
-import { MenuContextValue, useMenuContext } from '../../menuContext';
+import { MenuContextValue, useMenuContext } from '../../contexts/menuContext';
 
-jest.mock('../../menuContext');
+jest.mock('../../contexts/menuContext');
 
 describe('useTriggerElement', () => {
   const mockUseMenuContext = (options: Partial<MenuContextValue> = {}) => {
     const contextValue: Partial<MenuContextValue> = {
       triggerRef: React.createRef() as React.MutableRefObject<HTMLElement>,
+      menuPopupRef: React.createRef() as React.MutableRefObject<HTMLElement>,
       setOpen: jest.fn(),
       ...options,
     };
@@ -54,16 +55,15 @@ describe('useTriggerElement', () => {
   });
 
   describe('on hover', () => {
-    it('should use original mouse enter handler', () =>
+    it('should use original on mouse enter handler', () =>
       testOriginalEventHandlerExists('onMouseEnter', fireEvent.mouseEnter));
 
-    it('should use original mouse leave handler', () =>
-      testOriginalEventHandlerExists('onMouseLeave', fireEvent.mouseLeave));
+    it('should use original on blur handler', () => testOriginalEventHandlerExists('onBlur', fireEvent.blur));
 
     it.each([
       ['click', true, fireEvent.click],
       ['mouseenter', true, fireEvent.mouseEnter],
-      ['mouseleave', false, fireEvent.mouseLeave],
+      ['blur', false, fireEvent.blur],
     ])('should on %s event call setOpen with %s when onHover is set', (_, expectedValue, triggerEvent) => {
       // Arrange
       const spy = jest.fn();
diff --git a/packages/react-menu/src/components/MenuTrigger/useTriggerElement.ts b/packages/react-menu/src/components/MenuTrigger/useTriggerElement.ts
index a737b6c59cedbb..8174b625f98173 100644
--- a/packages/react-menu/src/components/MenuTrigger/useTriggerElement.ts
+++ b/packages/react-menu/src/components/MenuTrigger/useTriggerElement.ts
@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { useMergedRefs, useEventCallback } from '@fluentui/react-utilities';
 import { MenuTriggerState } from './MenuTrigger.types';
-import { useMenuContext } from '../../menuContext';
+import { useMenuContext } from '../../contexts/menuContext';
+import { isOutsideMenu } from '../../utils/index';
 
 // Helper type to select on parts of state the hook uses
 type UseTriggerElementState = Pick<MenuTriggerState, 'children'>;
@@ -14,6 +15,7 @@ type UseTriggerElementState = Pick<MenuTriggerState, 'children'>;
  */
 export const useTriggerElement = (state: UseTriggerElementState): MenuTriggerState => {
   const triggerRef = useMenuContext(context => context.triggerRef);
+  const menuPopupRef = useMenuContext(context => context.menuPopupRef);
   const setOpen = useMenuContext(context => context.setOpen);
   const open = useMenuContext(context => context.open);
   const triggerId = useMenuContext(context => context.triggerId);
@@ -38,13 +40,6 @@ export const useTriggerElement = (state: UseTriggerElementState): MenuTriggerSta
     child.props?.onMouseEnter?.(e);
   });
 
-  const onMouseLeave = useEventCallback((e: React.MouseEvent) => {
-    if (onHover && !onContext) {
-      setOpen(false);
-    }
-    child.props?.onMouseLeave?.(e);
-  });
-
   const onClick = useEventCallback((e: React.MouseEvent) => {
     if (!onContext) {
       setOpen(!open);
@@ -52,6 +47,14 @@ export const useTriggerElement = (state: UseTriggerElementState): MenuTriggerSta
     child.props?.onClick?.(e);
   });
 
+  const onBlur = useEventCallback((e: React.FocusEvent) => {
+    if (isOutsideMenu({ menuPopupRef, triggerRef, event: e })) {
+      setOpen(false);
+    }
+
+    child.props?.onBlur?.(e);
+  });
+
   const triggerProps: Partial<React.HTMLAttributes<HTMLElement>> = {
     'aria-haspopup': true,
     'aria-expanded': open,
@@ -61,8 +64,8 @@ export const useTriggerElement = (state: UseTriggerElementState): MenuTriggerSta
     // These handlers should always handle the child's props
     onClick,
     onMouseEnter,
-    onMouseLeave,
     onContextMenu,
+    onBlur,
   };
 
   state.children = React.cloneElement(child, {
diff --git a/packages/react-menu/src/menuContext.ts b/packages/react-menu/src/contexts/menuContext.ts
similarity index 64%
rename from packages/react-menu/src/menuContext.ts
rename to packages/react-menu/src/contexts/menuContext.ts
index 0a9b99b1fdde41..cda5220faef522 100644
--- a/packages/react-menu/src/menuContext.ts
+++ b/packages/react-menu/src/contexts/menuContext.ts
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { createContext, useContextSelector, ContextSelector } from '@fluentui/react-context-selector';
-import { MenuListProps } from './components/index';
-import { MenuState } from './components/Menu/index';
+import { MenuListProps } from '../components/index';
+import { MenuState } from '../components/Menu/index';
 
 const MenuContext = createContext<MenuContextValue>({
   open: false,
@@ -10,7 +10,8 @@ const MenuContext = createContext<MenuContextValue>({
   onCheckedValueChange: () => null,
   defaultCheckedValues: {},
   hasMenuContext: false,
-  triggerRef: (null as unknown) as React.MutableRefObject<HTMLElement>,
+  triggerRef: ({ current: null } as unknown) as React.MutableRefObject<HTMLElement>,
+  menuPopupRef: ({ current: null } as unknown) as React.MutableRefObject<HTMLElement>,
   triggerId: '',
   onContext: false,
   onHover: false,
@@ -21,9 +22,10 @@ const MenuContext = createContext<MenuContextValue>({
  *
  * Extends and drills down MenuList props to simplify API
  */
-export interface MenuContextValue extends MenuListProps, Pick<MenuState, 'onHover' | 'onContext' | 'triggerRef'> {
+export interface MenuContextValue
+  extends MenuListProps,
+    Pick<MenuState, 'onHover' | 'onContext' | 'triggerRef' | 'menuPopupRef' | 'setOpen'> {
   open: boolean;
-  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
   hasMenuContext: boolean;
   triggerId: string;
 }
diff --git a/packages/react-menu/src/menuGroupContext.ts b/packages/react-menu/src/contexts/menuGroupContext.ts
similarity index 100%
rename from packages/react-menu/src/menuGroupContext.ts
rename to packages/react-menu/src/contexts/menuGroupContext.ts
diff --git a/packages/react-menu/src/selectable/useCheckmarkStyles.ts b/packages/react-menu/src/selectable/useCheckmarkStyles.ts
index ee9de2c634fba0..5a3ad26241ce0a 100644
--- a/packages/react-menu/src/selectable/useCheckmarkStyles.ts
+++ b/packages/react-menu/src/selectable/useCheckmarkStyles.ts
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { ax, makeStyles } from '@fluentui/react-make-styles';
 import { ObjectShorthandProps } from '@fluentui/react-utilities';
 import { MenuItemSelectableState } from './types';
@@ -20,7 +21,7 @@ const useStyles = makeStyles({
  * @param state - should contain a `checkmark` slot
  */
 export const useCheckmarkStyles = (
-  state: MenuItemSelectableState & { checkmark: ObjectShorthandProps<HTMLElement> },
+  state: MenuItemSelectableState & { checkmark: ObjectShorthandProps<React.HTMLAttributes<HTMLElement>> },
 ) => {
   const styles = useStyles();
   if (state.checkmark) {
diff --git a/packages/react-menu/src/utils/index.ts b/packages/react-menu/src/utils/index.ts
new file mode 100644
index 00000000000000..4818e3efe22828
--- /dev/null
+++ b/packages/react-menu/src/utils/index.ts
@@ -0,0 +1 @@
+export * from './isOutsideMenu';
diff --git a/packages/react-menu/src/utils/isOutsideMenu.ts b/packages/react-menu/src/utils/isOutsideMenu.ts
new file mode 100644
index 00000000000000..c680e344b2a910
--- /dev/null
+++ b/packages/react-menu/src/utils/isOutsideMenu.ts
@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { MenuContextValue } from '../contexts/menuContext';
+
+/**
+ * Helper function that checks if a focus event moves focus outside of the menu trigger and menu popup
+ */
+export const isOutsideMenu = ({
+  triggerRef,
+  menuPopupRef,
+  event,
+}: {
+  triggerRef: MenuContextValue['triggerRef'];
+  menuPopupRef: MenuContextValue['menuPopupRef'];
+  event: React.FocusEvent;
+}) => {
+  const isOutsidePopup = !menuPopupRef.current?.contains(event.relatedTarget as Node);
+  const isOutsideTrigger = !triggerRef.current?.contains(event.relatedTarget as Node);
+
+  return isOutsidePopup && isOutsideTrigger;
+};

From 3d1887100d20b540e882c788845b1500ba4e363f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Charles=20Assun=C3=A7=C3=A3o?=
 <junioassuncaocharles@gmail.com>
Date: Thu, 25 Mar 2021 11:04:08 -0300
Subject: [PATCH 7/8] feat(Pill): add PillAction component (#17548)

* feat(Pills): add base pill

* feat(Pills): add unstable comment

* Update packages/fluentui/react-northstar/src/components/Pill/Pill.tsx

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

* feat(Pills): Address review comments

* Update packages/fluentui/docs/src/examples/components/Pill/Variations/PillExampleSizes.tsx

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

* feat(Pills): Address review comments

* feat(Pills): Fix example

* Update packages/fluentui/react-northstar/src/components/Pill/Pill.tsx

Co-authored-by: ling1726 <lingfangao@hotmail.com>

* feat(Pills): Export styles

* feat(Pills): Fix example

* feat(Pills): added disabled

* feat(Pills): added appearance variations

* feat(Pills): fix example

* Update packages/fluentui/react-northstar/src/themes/teams/components/Pill/pillStyles.ts

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

* feat(Pills): rename example file

* feat(Pills):update content

* feat(Pills): update example

* Update packages/fluentui/react-northstar/src/components/Pill/PillContent.tsx

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

* feat(Pills): update PillContent

* feat(Pills): update PillContent

* feat(Pills): update pillStyles

* feat(Pills): update rectangular instead rounded

* feat(Pills): Add changelog

* feat(Pills): update example

* feat(Pills): add pill action

* feat(Pills): update changelog

* feat(Pills): add behavior-test

* feat(Pills): fix test

* feat(Pills): fix test

* feat(Pill): remove gap from variables

* feat(Pill): avoid negative condition in pillActionStyles

* feat(Pill): action margin

* feat(AvatarStatus): remove smaller from default props PillAction

* feat(Pill): remove div from PillAction default props

* feat(Pill): update Rectangular title

* feat(Pill): remove docblock

* feat(Pill): pill action test and behavior definition

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
Co-authored-by: ling1726 <lingfangao@hotmail.com>
---
 .../Pill/pillActionBehaviorDefinition.ts      | 11 +++
 .../Pill/pillBehaviorDefinition.ts            | 13 +++
 .../a11y-testing/src/definitions/index.ts     |  2 +
 packages/fluentui/CHANGELOG.md                |  1 +
 .../src/behaviors/Pill/pillActionBehavior.ts  | 13 +++
 .../src/behaviors/Pill/pillBehavior.ts        | 16 +++
 .../accessibility/src/behaviors/index.ts      |  3 +
 .../test/behaviors/behavior-test.tsx          |  4 +
 .../test/behaviors/testHelper.tsx             |  2 +
 .../Pill/Variations/PillExampleActionable.tsx | 17 ++++
 .../components/Pill/Variations/index.tsx      | 11 ++-
 .../src/components/Pill/Pill.tsx              | 43 +++++++-
 .../src/components/Pill/PillAction.tsx        | 97 +++++++++++++++++++
 .../src/components/Pill/PillContent.tsx       | 13 ++-
 .../fluentui/react-northstar/src/index.ts     |  1 +
 .../src/themes/teams/componentStyles.ts       |  1 +
 .../src/themes/teams/componentVariables.ts    |  1 +
 .../teams/components/Pill/pillActionStyles.ts | 27 ++++++
 .../components/Pill/pillContentStyles.ts      |  3 +
 .../teams/components/Pill/pillStyles.ts       |  1 +
 .../teams/components/Pill/pillVariables.ts    | 10 ++
 .../test/specs/components/Pill/Pill-test.ts   | 13 +++
 .../specs/components/Pill/PillAction-test.ts  | 13 +++
 23 files changed, 307 insertions(+), 9 deletions(-)
 create mode 100644 packages/a11y-testing/src/definitions/Pill/pillActionBehaviorDefinition.ts
 create mode 100644 packages/a11y-testing/src/definitions/Pill/pillBehaviorDefinition.ts
 create mode 100644 packages/fluentui/accessibility/src/behaviors/Pill/pillActionBehavior.ts
 create mode 100644 packages/fluentui/accessibility/src/behaviors/Pill/pillBehavior.ts
 create mode 100644 packages/fluentui/docs/src/examples/components/Pill/Variations/PillExampleActionable.tsx
 create mode 100644 packages/fluentui/react-northstar/src/components/Pill/PillAction.tsx
 create mode 100644 packages/fluentui/react-northstar/src/themes/teams/components/Pill/pillActionStyles.ts
 create mode 100644 packages/fluentui/react-northstar/test/specs/components/Pill/Pill-test.ts
 create mode 100644 packages/fluentui/react-northstar/test/specs/components/Pill/PillAction-test.ts

diff --git a/packages/a11y-testing/src/definitions/Pill/pillActionBehaviorDefinition.ts b/packages/a11y-testing/src/definitions/Pill/pillActionBehaviorDefinition.ts
new file mode 100644
index 00000000000000..2832a8a167ae71
--- /dev/null
+++ b/packages/a11y-testing/src/definitions/Pill/pillActionBehaviorDefinition.ts
@@ -0,0 +1,11 @@
+import { Rule } from './../../types';
+import { BehaviorRule } from './../../rules/rules';
+
+export const pillActionBehaviorDefinition: Rule[] = [
+  BehaviorRule.root()
+    .hasAttribute('role', 'presentation')
+    .description(`Action is presentational`),
+  BehaviorRule.root()
+    .hasAttribute('aria-hidden', 'true')
+    .description(`Action should be hidden from screener`),
+];
diff --git a/packages/a11y-testing/src/definitions/Pill/pillBehaviorDefinition.ts b/packages/a11y-testing/src/definitions/Pill/pillBehaviorDefinition.ts
new file mode 100644
index 00000000000000..89d18544bdfe40
--- /dev/null
+++ b/packages/a11y-testing/src/definitions/Pill/pillBehaviorDefinition.ts
@@ -0,0 +1,13 @@
+import { Rule } from './../../types';
+import { BehaviorRule } from './../../rules/rules';
+
+export const pillBehaviorDefinition: Rule[] = [
+  BehaviorRule.root()
+    .forProps({ actionable: true })
+    .hasAttribute('role', 'button')
+    .description(`if element is actionable.`),
+  BehaviorRule.root()
+    .forProps({ actionable: false })
+    .hasAttribute('role', 'none')
+    .description(`if element is not actionable.`),
+];
diff --git a/packages/a11y-testing/src/definitions/index.ts b/packages/a11y-testing/src/definitions/index.ts
index 0e62898570951f..d7a0236044f6dd 100644
--- a/packages/a11y-testing/src/definitions/index.ts
+++ b/packages/a11y-testing/src/definitions/index.ts
@@ -4,3 +4,5 @@ export * from './Button/toggleButtonBehaviorDefinition';
 export * from './Link/linkBehaviorDefinition';
 export * from './Popup/popupBehaviorDefinition';
 export * from './MenuButton/menuButtonBehaviorDefinition';
+export * from './Pill/pillBehaviorDefinition';
+export * from './Pill/pillActionBehaviorDefinition';
diff --git a/packages/fluentui/CHANGELOG.md b/packages/fluentui/CHANGELOG.md
index 4220643ca5b7f3..65d640addb303e 100644
--- a/packages/fluentui/CHANGELOG.md
+++ b/packages/fluentui/CHANGELOG.md
@@ -21,6 +21,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ## Features
 - Add `borderActive4` color slot @notandrew ([#17391](https://github.com/microsoft/fluentui/pull/17391))
 - Add `Pill` base componet @assuncaocharles ([#17500](https://github.com/microsoft/fluentui/pull/17500))
+- Add `PillAction` base componet @assuncaocharles ([#17548](https://github.com/microsoft/fluentui/pull/17548))
 
 ## Fixes
 - Add success to AlertDismissAction propTypes @jurokapsiar ([#17542](https://github.com/microsoft/fluentui/pull/17542))
diff --git a/packages/fluentui/accessibility/src/behaviors/Pill/pillActionBehavior.ts b/packages/fluentui/accessibility/src/behaviors/Pill/pillActionBehavior.ts
new file mode 100644
index 00000000000000..29b956bf8d1a26
--- /dev/null
+++ b/packages/fluentui/accessibility/src/behaviors/Pill/pillActionBehavior.ts
@@ -0,0 +1,13 @@
+import { Accessibility } from '../../types';
+
+export const pillActionBehavior: Accessibility<PillActionBehaviorProps> = () => ({
+  attributes: {
+    root: {
+      role: 'presentation',
+      'aria-hidden': 'true',
+      tabIndex: -1,
+    },
+  },
+});
+
+export type PillActionBehaviorProps = never;
diff --git a/packages/fluentui/accessibility/src/behaviors/Pill/pillBehavior.ts b/packages/fluentui/accessibility/src/behaviors/Pill/pillBehavior.ts
new file mode 100644
index 00000000000000..cebb07757da8d7
--- /dev/null
+++ b/packages/fluentui/accessibility/src/behaviors/Pill/pillBehavior.ts
@@ -0,0 +1,16 @@
+import { Accessibility } from '../../types';
+import { IS_FOCUSABLE_ATTRIBUTE } from '../../attributes';
+
+export const pillBehavior: Accessibility<PillBehaviorProps> = p => ({
+  attributes: {
+    root: {
+      role: p.actionable ? 'button' : 'none',
+      tabIndex: p.actionable ? 0 : -1,
+      [IS_FOCUSABLE_ATTRIBUTE]: p.actionable,
+    },
+  },
+});
+
+export type PillBehaviorProps = {
+  actionable: boolean;
+};
diff --git a/packages/fluentui/accessibility/src/behaviors/index.ts b/packages/fluentui/accessibility/src/behaviors/index.ts
index 789989b0248077..644e0b3c60799e 100644
--- a/packages/fluentui/accessibility/src/behaviors/index.ts
+++ b/packages/fluentui/accessibility/src/behaviors/index.ts
@@ -79,6 +79,9 @@ export * from './Checkbox/checkboxBehavior';
 export * from './Tooltip/tooltipAsDescriptionBehavior';
 export { tooltipAsLabelBehavior } from './Tooltip/tooltipAsLabelBehavior';
 
+export * from './Pill/pillBehavior';
+export * from './Pill/pillActionBehavior';
+
 export * from './Slider/sliderBehavior';
 
 export * from './MenuButton/menuButtonBehavior';
diff --git a/packages/fluentui/accessibility/test/behaviors/behavior-test.tsx b/packages/fluentui/accessibility/test/behaviors/behavior-test.tsx
index bbcd9e1ad78516..ba3c6eea4b27b8 100644
--- a/packages/fluentui/accessibility/test/behaviors/behavior-test.tsx
+++ b/packages/fluentui/accessibility/test/behaviors/behavior-test.tsx
@@ -101,6 +101,8 @@ import {
   breadcrumbBehavior,
   breadcrumbItemBehavior,
   breadcrumbDividerBehavior,
+  pillBehavior,
+  pillActionBehavior,
 } from '@fluentui/accessibility';
 import { TestHelper } from './testHelper';
 import { definitions } from './testDefinitions';
@@ -206,5 +208,7 @@ testHelper.addBehavior('datepickerCalendarCellButtonBehavior', datepickerCalenda
 testHelper.addBehavior('breadcrumbBehavior', breadcrumbBehavior);
 testHelper.addBehavior('breadcrumbItemBehavior', breadcrumbItemBehavior);
 testHelper.addBehavior('breadcrumbDividerBehavior', breadcrumbDividerBehavior);
+testHelper.addBehavior('pillBehavior', pillBehavior);
+testHelper.addBehavior('pillActionBehavior', pillActionBehavior);
 
 testHelper.run(behaviorMenuItems);
diff --git a/packages/fluentui/accessibility/test/behaviors/testHelper.tsx b/packages/fluentui/accessibility/test/behaviors/testHelper.tsx
index 7b4d28540b28a2..98bae7b6c3b5fd 100644
--- a/packages/fluentui/accessibility/test/behaviors/testHelper.tsx
+++ b/packages/fluentui/accessibility/test/behaviors/testHelper.tsx
@@ -33,6 +33,8 @@ const skipSpecChecksForFiles = [
   'treeItemAsOptionBehavior.ts', // tests are written in treeItemAsOptionBehavior-test.ts
   'treeTitleAsOptionBehavior.ts', // tests are written in treeTitleAsOptionBehavior-test.ts
   'gridRowBehavior.ts', // tests are written in gridRowBehavior-test.ts
+  'pillBehavior.ts', // tests are written in pillBehaviorDefinition.ts
+  'pillActionBehavior.ts', // tests are written in pillBehaviorDefinition.ts
 ];
 
 export class TestHelper {
diff --git a/packages/fluentui/docs/src/examples/components/Pill/Variations/PillExampleActionable.tsx b/packages/fluentui/docs/src/examples/components/Pill/Variations/PillExampleActionable.tsx
new file mode 100644
index 00000000000000..75c6455be176ab
--- /dev/null
+++ b/packages/fluentui/docs/src/examples/components/Pill/Variations/PillExampleActionable.tsx
@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { Pill } from '@fluentui/react-northstar';
+import { CloseIcon } from '@fluentui/react-icons-northstar';
+
+const PillActionableExample = () => (
+  <Pill
+    actionable
+    action={{
+      content: <CloseIcon />,
+      title: 'Close',
+    }}
+  >
+    Outlined Pill
+  </Pill>
+);
+
+export default PillActionableExample;
diff --git a/packages/fluentui/docs/src/examples/components/Pill/Variations/index.tsx b/packages/fluentui/docs/src/examples/components/Pill/Variations/index.tsx
index 7eb61ed7d6010a..9c356c0a19f916 100644
--- a/packages/fluentui/docs/src/examples/components/Pill/Variations/index.tsx
+++ b/packages/fluentui/docs/src/examples/components/Pill/Variations/index.tsx
@@ -16,9 +16,14 @@ const Variations = () => (
       examplePath="components/Pill/Variations/PillExampleAppearance"
     />
     <ComponentExample
-      title="Rounded"
-      description="A Pill can be rounded."
-      examplePath="components/Pill/Variations/PillExampleRounded"
+      title="Rectangular"
+      description="A Pill can be rectangular."
+      examplePath="components/Pill/Variations/PillExampleRectangular"
+    />
+    <ComponentExample
+      title="Actionable"
+      description="A Pill can be actionable."
+      examplePath="components/Pill/Variations/PillExampleActionable"
     />
   </ExampleSection>
 );
diff --git a/packages/fluentui/react-northstar/src/components/Pill/Pill.tsx b/packages/fluentui/react-northstar/src/components/Pill/Pill.tsx
index f4da514038c0a1..3f85176e12221c 100644
--- a/packages/fluentui/react-northstar/src/components/Pill/Pill.tsx
+++ b/packages/fluentui/react-northstar/src/components/Pill/Pill.tsx
@@ -1,6 +1,7 @@
 import * as PropTypes from 'prop-types';
 import * as React from 'react';
 import * as customPropTypes from '@fluentui/react-proptypes';
+import { Accessibility, pillBehavior, PillBehaviorProps } from '@fluentui/accessibility';
 import { UIComponentProps, ContentComponentProps, commonPropTypes, SizeValue, createShorthand } from '../../utils';
 import { ShorthandValue, FluentComponentStaticProps } from '../../types';
 import { BoxProps } from '../Box/Box';
@@ -15,8 +16,14 @@ import {
   useUnhandledProps,
 } from '@fluentui/react-bindings';
 import { PillContent } from './PillContent';
+import { PillActionProps, PillAction } from './PillAction';
 
 export interface PillProps extends UIComponentProps, ContentComponentProps<ShorthandValue<BoxProps>> {
+  /**
+   * Accessibility behavior if overridden by the user.
+   */
+  accessibility?: Accessibility<PillBehaviorProps>;
+
   /**
    * A Pill can be sized.
    */
@@ -36,6 +43,16 @@ export interface PillProps extends UIComponentProps, ContentComponentProps<Short
    * A Pill can be disbled
    */
   disabled?: boolean;
+
+  /**
+   * A Pill can be actionable
+   */
+  actionable?: boolean;
+
+  /**
+   * A PillAction shorthand for the action slot.
+   */
+  action?: ShorthandValue<PillActionProps>;
 }
 
 export type PillStylesProps = Required<Pick<PillProps, 'appearance' | 'size' | 'rectangular' | 'disabled'>>;
@@ -43,7 +60,7 @@ export type PillStylesProps = Required<Pick<PillProps, 'appearance' | 'size' | '
 export const pillClassName = 'ui-pill';
 
 /**
- * THIS COMPONENT IS STILL IN DEVELOPMENT AND IS NOT READY FOR PRODUCTION
+ * THIS COMPONENT IS UNSTABLE
  * Pills should be used when representing an input, as a way to filter content, or to represent an attribute.
  */
 export const Pill: ComponentWithAs<'span', PillProps> & FluentComponentStaticProps<PillProps> = props => {
@@ -51,14 +68,29 @@ export const Pill: ComponentWithAs<'span', PillProps> & FluentComponentStaticPro
   const { setStart, setEnd } = useTelemetry(Pill.displayName, context.telemetry);
   setStart();
 
-  const { className, design, styles, variables, appearance, size, rectangular, children, content, disabled } = props;
+  const {
+    className,
+    design,
+    styles,
+    variables,
+    appearance,
+    size,
+    rectangular,
+    children,
+    content,
+    disabled,
+    action,
+    actionable,
+  } = props;
 
   const ElementType = getElementType(props);
   const unhandledProps = useUnhandledProps(Pill.handledProps, props);
 
   const getA11yProps = useAccessibility(props.accessibility, {
     debugName: Pill.displayName,
-    mapPropsToBehavior: () => ({}),
+    mapPropsToBehavior: () => ({
+      actionable,
+    }),
     rtl: context.rtl,
   });
 
@@ -90,8 +122,10 @@ export const Pill: ComponentWithAs<'span', PillProps> & FluentComponentStaticPro
         defaultProps: () => ({
           children,
           size,
+          actionable,
         }),
       })}
+      {createShorthand(PillAction, actionable ? action || {} : action, {})}
     </ElementType>,
   );
 
@@ -102,6 +136,7 @@ export const Pill: ComponentWithAs<'span', PillProps> & FluentComponentStaticPro
 
 Pill.defaultProps = {
   as: 'span',
+  accessibility: pillBehavior,
 };
 
 Pill.propTypes = {
@@ -111,6 +146,8 @@ Pill.propTypes = {
   rectangular: PropTypes.bool,
   disabled: PropTypes.bool,
   appearance: PropTypes.oneOf(['filled', 'inverted', 'outline']),
+  actionable: PropTypes.bool,
+  action: customPropTypes.shorthandAllowingChildren,
 };
 
 Pill.displayName = 'Pill';
diff --git a/packages/fluentui/react-northstar/src/components/Pill/PillAction.tsx b/packages/fluentui/react-northstar/src/components/Pill/PillAction.tsx
new file mode 100644
index 00000000000000..455b4d05a3a81b
--- /dev/null
+++ b/packages/fluentui/react-northstar/src/components/Pill/PillAction.tsx
@@ -0,0 +1,97 @@
+import * as React from 'react';
+import { Accessibility, pillActionBehavior, PillActionBehaviorProps } from '@fluentui/accessibility';
+import {
+  ComponentWithAs,
+  getElementType,
+  useUnhandledProps,
+  useAccessibility,
+  useFluentContext,
+  useStyles,
+  useTelemetry,
+} from '@fluentui/react-bindings';
+import {
+  childrenExist,
+  UIComponentProps,
+  ChildrenComponentProps,
+  ContentComponentProps,
+  commonPropTypes,
+  rtlTextContainer,
+  SizeValue,
+} from '../../utils';
+import { FluentComponentStaticProps } from '../../types';
+import { CloseIcon } from '@fluentui/react-icons-northstar';
+
+export interface PillActionProps extends UIComponentProps, ChildrenComponentProps, ContentComponentProps {
+  /**
+   * Accessibility behavior if overridden by the user.
+   */
+  accessibility?: Accessibility<PillActionBehaviorProps>;
+
+  /**
+   * A Pill can be sized.
+   */
+  size?: Extract<SizeValue, 'smaller' | 'small' | 'medium'>;
+}
+
+export type PillActionStylesProps = Required<Pick<PillActionProps, 'size'>>;
+export const pillActionClassName = 'ui-pill__action';
+
+/**
+ * A PillAction allows user to execute an action.
+ */
+export const PillAction: ComponentWithAs<'div', PillActionProps> &
+  FluentComponentStaticProps<PillActionProps> = props => {
+  const context = useFluentContext();
+  const { setStart, setEnd } = useTelemetry(PillAction.displayName, context.telemetry);
+  setStart();
+
+  const { accessibility, children, className, content, design, styles, variables, size } = props;
+
+  const getA11Props = useAccessibility(accessibility, {
+    debugName: PillAction.displayName,
+    rtl: context.rtl,
+  });
+
+  const { classes } = useStyles<PillActionStylesProps>(PillAction.displayName, {
+    className: pillActionClassName,
+    mapPropsToStyles: () => ({ size }),
+    mapPropsToInlineStyles: () => ({ className, design, styles, variables }),
+    rtl: context.rtl,
+  });
+
+  const ElementType = getElementType(props);
+  const unhandledProps = useUnhandledProps(PillAction.handledProps, props);
+
+  const element = (
+    <ElementType
+      {...getA11Props('root', {
+        className: classes.root,
+        ...rtlTextContainer.getAttributes({ forElements: [children] }),
+        ...unhandledProps,
+      })}
+    >
+      {childrenExist(children) ? children : content}
+    </ElementType>
+  );
+
+  setEnd();
+
+  return element;
+};
+
+PillAction.displayName = 'PillAction';
+
+PillAction.propTypes = {
+  ...commonPropTypes.createCommon(),
+};
+
+PillAction.handledProps = Object.keys(PillAction.propTypes) as any;
+
+PillAction.defaultProps = {
+  accessibility: pillActionBehavior,
+  content: <CloseIcon />,
+};
+
+PillAction.shorthandConfig = {
+  mappedProp: 'content',
+};
diff --git a/packages/fluentui/react-northstar/src/components/Pill/PillContent.tsx b/packages/fluentui/react-northstar/src/components/Pill/PillContent.tsx
index fb17bbc0f05118..94fe682c9611dc 100644
--- a/packages/fluentui/react-northstar/src/components/Pill/PillContent.tsx
+++ b/packages/fluentui/react-northstar/src/components/Pill/PillContent.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import * as PropTypes from 'prop-types';
 import { Accessibility } from '@fluentui/accessibility';
 import {
   ComponentWithAs,
@@ -31,9 +32,14 @@ export interface PillContentProps extends UIComponentProps, ChildrenComponentPro
    * A Pill can be sized.
    */
   size?: Extract<SizeValue, 'smaller' | 'small' | 'medium'>;
+
+  /**
+   * A Pill can be actionable.
+   */
+  actionable?: boolean;
 }
 
-export type PillContentStylesProps = Required<Pick<PillContentProps, 'size'>>;
+export type PillContentStylesProps = Required<Pick<PillContentProps, 'size' | 'actionable'>>;
 export const pillContentClassName = 'ui-pillcontent';
 
 /**
@@ -45,7 +51,7 @@ export const PillContent: ComponentWithAs<'span', PillContentProps> &
   const { setStart, setEnd } = useTelemetry(PillContent.displayName, context.telemetry);
   setStart();
 
-  const { accessibility, children, className, content, design, styles, variables, size } = props;
+  const { accessibility, children, className, content, design, styles, variables, size, actionable } = props;
 
   const getA11Props = useAccessibility(accessibility, {
     debugName: PillContent.displayName,
@@ -54,7 +60,7 @@ export const PillContent: ComponentWithAs<'span', PillContentProps> &
 
   const { classes } = useStyles<PillContentStylesProps>(PillContent.displayName, {
     className: pillContentClassName,
-    mapPropsToStyles: () => ({ size }),
+    mapPropsToStyles: () => ({ size, actionable }),
     mapPropsToInlineStyles: () => ({ className, design, styles, variables }),
     rtl: context.rtl,
   });
@@ -83,6 +89,7 @@ PillContent.displayName = 'PillContent';
 
 PillContent.propTypes = {
   ...commonPropTypes.createCommon(),
+  actionable: PropTypes.bool,
 };
 
 PillContent.handledProps = Object.keys(PillContent.propTypes) as any;
diff --git a/packages/fluentui/react-northstar/src/index.ts b/packages/fluentui/react-northstar/src/index.ts
index e11721488301e2..23df5eff0b9e4c 100644
--- a/packages/fluentui/react-northstar/src/index.ts
+++ b/packages/fluentui/react-northstar/src/index.ts
@@ -74,6 +74,7 @@ export * from './components/MenuButton/MenuButton';
 
 export * from './components/Pill/Pill';
 export * from './components/Pill/PillContent';
+export * from './components/Pill/PillAction';
 
 export * from './components/Divider/Divider';
 export * from './components/Divider/DividerContent';
diff --git a/packages/fluentui/react-northstar/src/themes/teams/componentStyles.ts b/packages/fluentui/react-northstar/src/themes/teams/componentStyles.ts
index 5cd29e953e0c4a..3c74568651249e 100644
--- a/packages/fluentui/react-northstar/src/themes/teams/componentStyles.ts
+++ b/packages/fluentui/react-northstar/src/themes/teams/componentStyles.ts
@@ -99,6 +99,7 @@ export { menuButtonStyles as MenuButton } from './components/MenuButton/menuButt
 
 export { pillStyles as Pill } from './components/Pill/pillStyles';
 export { pillContentStyles as PillContent } from './components/Pill/pillContentStyles';
+export { pillActionStyles as PillAction } from './components/Pill/pillActionStyles';
 
 export { popupContentStyles as PopupContent } from './components/Popup/popupContentStyles';
 
diff --git a/packages/fluentui/react-northstar/src/themes/teams/componentVariables.ts b/packages/fluentui/react-northstar/src/themes/teams/componentVariables.ts
index 3d43639ce03374..af1bf55610af15 100644
--- a/packages/fluentui/react-northstar/src/themes/teams/componentVariables.ts
+++ b/packages/fluentui/react-northstar/src/themes/teams/componentVariables.ts
@@ -92,6 +92,7 @@ export { menuDividerVariables as MenuDivider } from './components/Menu/menuDivid
 
 export { pillVariables as Pill } from './components/Pill/pillVariables';
 export { pillVariables as PillContent } from './components/Pill/pillVariables';
+export { pillVariables as PillAction } from './components/Pill/pillVariables';
 
 export { popupContentVariables as PopupContent } from './components/Popup/popupContentVariables';
 
diff --git a/packages/fluentui/react-northstar/src/themes/teams/components/Pill/pillActionStyles.ts b/packages/fluentui/react-northstar/src/themes/teams/components/Pill/pillActionStyles.ts
new file mode 100644
index 00000000000000..7f32ece25c2122
--- /dev/null
+++ b/packages/fluentui/react-northstar/src/themes/teams/components/Pill/pillActionStyles.ts
@@ -0,0 +1,27 @@
+import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles';
+import { PillActionStylesProps } from '../../../../components/Pill/PillAction';
+import { PillVariables } from './pillVariables';
+import { svgIconClassName } from '@fluentui/react-icons-northstar';
+
+export const pillActionStyles: ComponentSlotStylesPrepared<PillActionStylesProps, PillVariables> = {
+  root: ({ props: p, variables: v }): ICSSInJSStyle => ({
+    border: 'none',
+    background: 'transparent',
+    margin: v.actionMargin,
+    width: v.actionWidth,
+    cursor: 'pointer',
+
+    ...((p.size === 'small' || p.size === 'smaller') && {
+      width: v.smallOrSmallerActionWidth,
+    }),
+
+    [`& .${svgIconClassName}`]: {
+      height: '100%',
+      width: '100%',
+      '& svg': {
+        height: '100%',
+        width: '100%',
+      },
+    },
+  }),
+};
diff --git a/packages/fluentui/react-northstar/src/themes/teams/components/Pill/pillContentStyles.ts b/packages/fluentui/react-northstar/src/themes/teams/components/Pill/pillContentStyles.ts
index 6ba101da950e8f..a284a938ed1f15 100644
--- a/packages/fluentui/react-northstar/src/themes/teams/components/Pill/pillContentStyles.ts
+++ b/packages/fluentui/react-northstar/src/themes/teams/components/Pill/pillContentStyles.ts
@@ -15,5 +15,8 @@ export const pillContentStyles: ComponentSlotStylesPrepared<PillContentStylesPro
       fontSize: v.contentFontSizeSmaller,
       padding: v.contentPaddingSmaller,
     }),
+    ...(p.actionable && {
+      paddingRight: 0,
+    }),
   }),
 };
diff --git a/packages/fluentui/react-northstar/src/themes/teams/components/Pill/pillStyles.ts b/packages/fluentui/react-northstar/src/themes/teams/components/Pill/pillStyles.ts
index b0f84b9b4284ed..024faabd94aa54 100644
--- a/packages/fluentui/react-northstar/src/themes/teams/components/Pill/pillStyles.ts
+++ b/packages/fluentui/react-northstar/src/themes/teams/components/Pill/pillStyles.ts
@@ -8,6 +8,7 @@ export const pillStyles: ComponentSlotStylesPrepared<PillStylesProps, PillVariab
     return {
       display: 'inline-flex',
       width: 'fit-content',
+      position: 'relative',
       height: v.height,
       maxHeight: v.height,
       borderRadius: v.borderRadius,
diff --git a/packages/fluentui/react-northstar/src/themes/teams/components/Pill/pillVariables.ts b/packages/fluentui/react-northstar/src/themes/teams/components/Pill/pillVariables.ts
index 33da8f4396d1ce..53c933e73ce317 100644
--- a/packages/fluentui/react-northstar/src/themes/teams/components/Pill/pillVariables.ts
+++ b/packages/fluentui/react-northstar/src/themes/teams/components/Pill/pillVariables.ts
@@ -46,6 +46,11 @@ export interface PillVariables {
   // Content Small
   contentPaddingSmall: string;
   contentFontSizeSmall: string;
+
+  // Action
+  actionMargin: string;
+  actionWidth: string;
+  smallOrSmallerActionWidth: string;
 }
 
 export const pillVariables = (siteVars: SiteVariablesPrepared): PillVariables => ({
@@ -95,4 +100,9 @@ export const pillVariables = (siteVars: SiteVariablesPrepared): PillVariables =>
   // Content Medium
   contentFontSize: pxToRem(14),
   contentPadding: `${pxToRem(6)} ${pxToRem(8)}`,
+
+  // Action Pill
+  actionMargin: `0 ${pxToRem(4)}`,
+  actionWidth: pxToRem(16),
+  smallOrSmallerActionWidth: pxToRem(12),
 });
diff --git a/packages/fluentui/react-northstar/test/specs/components/Pill/Pill-test.ts b/packages/fluentui/react-northstar/test/specs/components/Pill/Pill-test.ts
new file mode 100644
index 00000000000000..8bf346b4f2c978
--- /dev/null
+++ b/packages/fluentui/react-northstar/test/specs/components/Pill/Pill-test.ts
@@ -0,0 +1,13 @@
+import { isConformant } from 'test/specs/commonTests';
+import { validateBehavior, ComponentTestFacade, pillBehaviorDefinition } from '@fluentui/a11y-testing';
+import { Pill } from 'src/components/Pill/Pill';
+
+describe('Pill', () => {
+  isConformant(Pill, { testPath: __filename, constructorName: 'Pill' });
+
+  describe('PillBehavior', () => {
+    const testFacade = new ComponentTestFacade(Pill, {});
+    const errors = validateBehavior(pillBehaviorDefinition, testFacade);
+    expect(errors).toEqual([]);
+  });
+});
diff --git a/packages/fluentui/react-northstar/test/specs/components/Pill/PillAction-test.ts b/packages/fluentui/react-northstar/test/specs/components/Pill/PillAction-test.ts
new file mode 100644
index 00000000000000..ed95507f615181
--- /dev/null
+++ b/packages/fluentui/react-northstar/test/specs/components/Pill/PillAction-test.ts
@@ -0,0 +1,13 @@
+import { isConformant } from 'test/specs/commonTests';
+import { validateBehavior, ComponentTestFacade, pillActionBehaviorDefinition } from '@fluentui/a11y-testing';
+import { PillAction } from 'src/components/Pill/PillAction';
+
+describe('PillAction', () => {
+  isConformant(PillAction, { testPath: __filename, constructorName: 'PillAction' });
+
+  describe('PillActionBehavior', () => {
+    const testFacade = new ComponentTestFacade(PillAction, {});
+    const errors = validateBehavior(pillActionBehaviorDefinition, testFacade);
+    expect(errors).toEqual([]);
+  });
+});

From 0913259cdea5a3d692720299516aec613b7c072a Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <olfedias@microsoft.com>
Date: Thu, 25 Mar 2021 16:59:44 +0100
Subject: [PATCH 8/8] fix: fix performance test for ButtonNext (#17573)

---
 apps/perf-test/src/scenarios/ButtonNext.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/apps/perf-test/src/scenarios/ButtonNext.tsx b/apps/perf-test/src/scenarios/ButtonNext.tsx
index 175fbe6e025dcf..d3bc4f5e8245e6 100644
--- a/apps/perf-test/src/scenarios/ButtonNext.tsx
+++ b/apps/perf-test/src/scenarios/ButtonNext.tsx
@@ -1,6 +1,12 @@
 import * as React from 'react';
 import { Button } from '@fluentui/react-button';
+import { FluentProvider } from '@fluentui/react-provider';
+import { webLightTheme } from '@fluentui/react-theme';
 
 const Scenario = () => <Button>I am a button</Button>;
 
+Scenario.decorator = (props: { children: React.ReactNode }) => (
+  <FluentProvider theme={webLightTheme}>{props.children}</FluentProvider>
+);
+
 export default Scenario;