From 0fba0cd56df4868f71204eb5898fd8c03f4cac7b Mon Sep 17 00:00:00 2001
From: Charles <chassunc@microsoft.com>
Date: Tue, 18 Oct 2022 10:05:46 -0300
Subject: [PATCH 1/4] docs: improve Toolbar docs examples

---
 .../ToolbarControlledToggleButton.stories.tsx |  9 ++---
 .../Toolbar/ToolbarDefault.stories.tsx        | 33 +++++++++++++++----
 .../Toolbar/ToolbarOverflow.stories.tsx       |  2 --
 .../stories/Toolbar/ToolbarSmall.stories.tsx  | 17 ++++++----
 .../stories/Toolbar/ToolbarSubtle.stories.tsx | 13 +++-----
 .../Toolbar/ToolbarWithPopover.stories.tsx    |  6 ++--
 .../Toolbar/ToolbarWithTooltip.stories.tsx    |  9 ++---
 7 files changed, 50 insertions(+), 39 deletions(-)

diff --git a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarControlledToggleButton.stories.tsx b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarControlledToggleButton.stories.tsx
index 5cd3178d4a732..7b221bc1051a0 100644
--- a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarControlledToggleButton.stories.tsx
+++ b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarControlledToggleButton.stories.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { TextBold24Regular, TextItalic24Regular } from '@fluentui/react-icons';
 import { Toolbar, ToolbarToggleButton, ToolbarProps } from '@fluentui/react-toolbar';
 
 export const ControlledToggleButton = () => {
@@ -11,12 +12,8 @@ export const ControlledToggleButton = () => {
 
   return (
     <Toolbar checkedValues={checkedValues} onCheckedValueChange={onChange}>
-      <ToolbarToggleButton name="edit" value="cut">
-        Enable Group
-      </ToolbarToggleButton>
-      <ToolbarToggleButton name="edit" value="paste">
-        Enable Group
-      </ToolbarToggleButton>
+      <ToolbarToggleButton icon={<TextBold24Regular />} name="edit" value="cut" />
+      <ToolbarToggleButton icon={<TextItalic24Regular />} name="edit" value="paste" />
     </Toolbar>
   );
 };
diff --git a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarDefault.stories.tsx b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarDefault.stories.tsx
index 5e952f62fa697..18f853b8b1707 100644
--- a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarDefault.stories.tsx
+++ b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarDefault.stories.tsx
@@ -1,16 +1,35 @@
 import * as React from 'react';
+import {
+  TextBold24Regular,
+  TextItalic24Regular,
+  TextUnderline24Regular,
+  AlertSnooze24Regular,
+  MoreHorizontal24Filled,
+} from '@fluentui/react-icons';
+import { Menu, MenuTrigger, MenuPopover, MenuList, MenuItem } from '@fluentui/react-components';
 import { Toolbar, ToolbarButton, ToolbarDivider, ToolbarToggleButton } from '@fluentui/react-toolbar';
 import type { ToolbarProps } from '@fluentui/react-toolbar';
 
 export const Default = (props: Partial<ToolbarProps>) => (
   <Toolbar {...props}>
-    <ToolbarButton>Click me</ToolbarButton>
-    <ToolbarButton>Click me</ToolbarButton>
-    <ToolbarDivider />
-    <ToolbarButton>Click me</ToolbarButton>
-    <ToolbarToggleButton name="toggle" value="toggle">
-      Click me to Toggle
-    </ToolbarToggleButton>
+    <ToolbarButton appearance="primary" icon={<TextBold24Regular />} />
+    <ToolbarButton icon={<TextItalic24Regular />} />
+    <ToolbarButton icon={<TextUnderline24Regular />} />
     <ToolbarDivider />
+    <ToolbarToggleButton name="toggle" value="toggle" icon={<AlertSnooze24Regular />} />
+    <Menu>
+      <MenuTrigger>
+        <ToolbarButton icon={<MoreHorizontal24Filled />} />
+      </MenuTrigger>
+
+      <MenuPopover>
+        <MenuList>
+          <MenuItem>New </MenuItem>
+          <MenuItem>New Window</MenuItem>
+          <MenuItem disabled>Open File</MenuItem>
+          <MenuItem>Open Folder</MenuItem>
+        </MenuList>
+      </MenuPopover>
+    </Menu>
   </Toolbar>
 );
diff --git a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarOverflow.stories.tsx b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarOverflow.stories.tsx
index 922622d6775ec..b0ba5639e8cc8 100644
--- a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarOverflow.stories.tsx
+++ b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarOverflow.stories.tsx
@@ -198,8 +198,6 @@ export const OverflowItems = (props: Partial<ToolbarProps>) => (
           icon={<TextItalic16Regular />}
         />
 
-        <ToolbarOverflowDivider groupId="3" />
-
         <OverflowMenu
           itemIds={[
             ['underline-1', 'bold-1'],
diff --git a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarSmall.stories.tsx b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarSmall.stories.tsx
index 37f79eee38caf..5877cd0b39c2f 100644
--- a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarSmall.stories.tsx
+++ b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarSmall.stories.tsx
@@ -1,16 +1,19 @@
 import * as React from 'react';
+import {
+  TextBold16Regular,
+  TextItalic16Regular,
+  TextUnderline16Regular,
+  AlertSnooze16Regular,
+} from '@fluentui/react-icons';
 import { Toolbar, ToolbarButton, ToolbarDivider, ToolbarToggleButton } from '@fluentui/react-toolbar';
 import type { ToolbarProps } from '@fluentui/react-toolbar';
 
 export const Small = (props: Partial<ToolbarProps>) => (
   <Toolbar {...props} size="small">
-    <ToolbarButton>Click me</ToolbarButton>
-    <ToolbarButton>Click me</ToolbarButton>
-    <ToolbarDivider />
-    <ToolbarButton>Click me</ToolbarButton>
-    <ToolbarToggleButton name="toggle" value="toggle">
-      Click me to Toggle
-    </ToolbarToggleButton>
+    <ToolbarButton appearance="primary" icon={<TextBold16Regular />} />
+    <ToolbarButton icon={<TextItalic16Regular />} />
+    <ToolbarButton icon={<TextUnderline16Regular />} />
     <ToolbarDivider />
+    <ToolbarToggleButton name="toggle" value="toggle" icon={<AlertSnooze16Regular />} />
   </Toolbar>
 );
diff --git a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarSubtle.stories.tsx b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarSubtle.stories.tsx
index 0c41bc5035084..fcd9f3dc4c506 100644
--- a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarSubtle.stories.tsx
+++ b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarSubtle.stories.tsx
@@ -1,15 +1,12 @@
 import * as React from 'react';
-import { Toolbar, ToolbarButton, ToolbarDivider, ToolbarToggleButton } from '@fluentui/react-toolbar';
+import { TextBold24Regular, TextItalic24Regular, TextUnderline24Regular } from '@fluentui/react-icons';
+import { Toolbar, ToolbarButton } from '@fluentui/react-toolbar';
 import type { ToolbarProps } from '@fluentui/react-toolbar';
 
 export const Subtle = (props: Partial<ToolbarProps>) => (
   <Toolbar {...props}>
-    <ToolbarButton appearance="subtle">Click me</ToolbarButton>
-    <ToolbarButton appearance="subtle">Click me</ToolbarButton>
-    <ToolbarButton appearance="subtle">Click me</ToolbarButton>
-    <ToolbarDivider />
-    <ToolbarToggleButton name="toggle" value="toggle" appearance="subtle">
-      Click me to Toggle
-    </ToolbarToggleButton>
+    <ToolbarButton appearance="subtle" icon={<TextBold24Regular />} />
+    <ToolbarButton appearance="subtle" icon={<TextItalic24Regular />} />
+    <ToolbarButton appearance="subtle" icon={<TextUnderline24Regular />} />
   </Toolbar>
 );
diff --git a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarWithPopover.stories.tsx b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarWithPopover.stories.tsx
index a0e2a2f0ad029..ab12c651199a9 100644
--- a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarWithPopover.stories.tsx
+++ b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarWithPopover.stories.tsx
@@ -6,16 +6,16 @@ import { CalendarMonthRegular } from '@fluentui/react-icons';
 
 export const WithPopover = (props: Partial<ToolbarProps>) => (
   <Toolbar {...props} size="small">
-    <Popover>
+    <Popover withArrow>
       <PopoverTrigger>
-        <ToolbarButton>Click here</ToolbarButton>
+        <ToolbarButton appearance="primary">See more...</ToolbarButton>
       </PopoverTrigger>
       <PopoverSurface>
         <div>Popover content</div>
       </PopoverSurface>
     </Popover>
     <ToolbarDivider />
-    <Popover>
+    <Popover withArrow>
       <PopoverTrigger>
         <ToolbarButton icon={<CalendarMonthRegular />} />
       </PopoverTrigger>
diff --git a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarWithTooltip.stories.tsx b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarWithTooltip.stories.tsx
index 4572f1afe833e..25d25c88d8732 100644
--- a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarWithTooltip.stories.tsx
+++ b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarWithTooltip.stories.tsx
@@ -2,19 +2,16 @@ import * as React from 'react';
 import { Toolbar, ToolbarButton, ToolbarDivider } from '@fluentui/react-toolbar';
 import type { ToolbarProps } from '@fluentui/react-toolbar';
 import { Tooltip } from '@fluentui/react-components';
-import { CalendarMonthRegular } from '@fluentui/react-icons';
+import { CalendarMonthRegular, TextBold24Regular } from '@fluentui/react-icons';
 
 export const WithTooltip = (props: Partial<ToolbarProps>) => (
   <Toolbar {...props} size="small">
-    <Tooltip content="No Icon On this one" relationship="label" withArrow>
-      <ToolbarButton>Hover me</ToolbarButton>
+    <Tooltip content="Makes text bold" relationship="label" withArrow>
+      <ToolbarButton appearance="primary" icon={<TextBold24Regular />} />
     </Tooltip>
     <ToolbarDivider />
     <Tooltip content="With calendar icon" relationship="label" withArrow>
       <ToolbarButton icon={<CalendarMonthRegular />} />
     </Tooltip>
-    <ToolbarButton>Click me</ToolbarButton>
-    <ToolbarButton>Hover me</ToolbarButton>
-    <ToolbarDivider />
   </Toolbar>
 );

From 07ca1761c27c9fbc31c0b96c72d1e686bdd094e6 Mon Sep 17 00:00:00 2001
From: Charles <chassunc@microsoft.com>
Date: Fri, 21 Oct 2022 18:07:16 -0300
Subject: [PATCH 2/4] chore: remove best practices

---
 .../react-toolbar/src/stories/Toolbar/ToolbarBestPractices.md  | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarBestPractices.md b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarBestPractices.md
index 35112d2cc48f2..132bda51a5f9c 100644
--- a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarBestPractices.md
+++ b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarBestPractices.md
@@ -5,7 +5,6 @@
 
 - Use toolbar as a grouping element only if the group contains 3 or more controls. Refer to ['toolbar aria practices'](https://www.w3.org/TR/wai-aria-practices-1.2/#toolbar) for details.
 - Label each toolbar when the application contains more than one toolbar (using `aria-label` or `aria-labelledby` props). Refer to [toolbar(role)](https://www.w3.org/WAI/PF/aria/roles#toolbar) for details.
-- Use `active` prop on a ToolbarMenuItem if you want to have an active icon indicator displayed next to it.
 - If `Toolbar` contains menu, the menu closes after clicking on one of the menu items. To prevent losing focus, move it manually in the `onClick` handler.
-- If `Toolbar` contains multiple radio groups in the menu, consider using role="group" and `aria-label` for radio group shorthands
+
 </details>

From 82c871b04faf754164ee3d101545f3c7d00f9317 Mon Sep 17 00:00:00 2001
From: Charles <chassunc@microsoft.com>
Date: Fri, 21 Oct 2022 18:10:02 -0300
Subject: [PATCH 3/4] chore: changes

---
 ...react-toolbar-18a47778-1d2f-48f2-bd7e-e5b5f3b31054.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@fluentui-react-toolbar-18a47778-1d2f-48f2-bd7e-e5b5f3b31054.json

diff --git a/change/@fluentui-react-toolbar-18a47778-1d2f-48f2-bd7e-e5b5f3b31054.json b/change/@fluentui-react-toolbar-18a47778-1d2f-48f2-bd7e-e5b5f3b31054.json
new file mode 100644
index 0000000000000..eed60121998f8
--- /dev/null
+++ b/change/@fluentui-react-toolbar-18a47778-1d2f-48f2-bd7e-e5b5f3b31054.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: remove best practices",
+  "packageName": "@fluentui/react-toolbar",
+  "email": "chassunc@microsoft.com",
+  "dependentChangeType": "none"
+}

From 636cca468a9dc5da31d4fac5d95979ee4e202d91 Mon Sep 17 00:00:00 2001
From: Charles <chassunc@microsoft.com>
Date: Mon, 24 Oct 2022 09:34:38 -0300
Subject: [PATCH 4/4] chore: remove docs about menu focus in toolbar practices

---
 .../react-toolbar/src/stories/Toolbar/ToolbarBestPractices.md    | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarBestPractices.md b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarBestPractices.md
index 132bda51a5f9c..7d33b63ccb4ee 100644
--- a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarBestPractices.md
+++ b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarBestPractices.md
@@ -5,6 +5,5 @@
 
 - Use toolbar as a grouping element only if the group contains 3 or more controls. Refer to ['toolbar aria practices'](https://www.w3.org/TR/wai-aria-practices-1.2/#toolbar) for details.
 - Label each toolbar when the application contains more than one toolbar (using `aria-label` or `aria-labelledby` props). Refer to [toolbar(role)](https://www.w3.org/WAI/PF/aria/roles#toolbar) for details.
-- If `Toolbar` contains menu, the menu closes after clicking on one of the menu items. To prevent losing focus, move it manually in the `onClick` handler.
 
 </details>