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 00000000000000..eed60121998f86
--- /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"
+}
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 35112d2cc48f26..7d33b63ccb4ee2 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,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.
-- 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
+
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 5cd3178d4a7329..7b221bc1051a09 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 (
-
- Enable Group
-
-
- Enable Group
-
+ } name="edit" value="cut" />
+ } name="edit" value="paste" />
);
};
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 5e952f62fa6978..18f853b8b17079 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) => (
- Click me
- Click me
-
- Click me
-
- Click me to Toggle
-
+ } />
+ } />
+ } />
+ } />
+
);
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 922622d6775ecd..b0ba5639e8cc8e 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) => (
icon={}
/>
-
-
) => (
- Click me
- Click me
-
- Click me
-
- Click me to Toggle
-
+ } />
+ } />
+ } />
+ } />
);
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 0c41bc50350841..fcd9f3dc4c5062 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) => (
- Click me
- Click me
- Click me
-
-
- Click me to Toggle
-
+ } />
+ } />
+ } />
);
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 a0e2a2f0ad0297..ab12c651199a98 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) => (
-
+
- Click here
+ See more...
Popover content
-
+
} />
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 4572f1afe833eb..25d25c88d87323 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) => (
-
- Hover me
+
+ } />
} />
- Click me
- Hover me
-
);