docs: improve Toolbar docs examples (microsoft#25269)

* docs: improve Toolbar docs examples * chore: remove best practices * chore: changes * chore: remove docs about menu focus in toolbar practices
NotWoods · Nov 18, 2022 · 016a37d · 016a37d
1 parent f7d9c36
commit 016a37d
Show file tree

Hide file tree

Showing 9 changed files with 58 additions and 42 deletions.
diff --git a/change/@fluentui-react-toolbar-18a47778-1d2f-48f2-bd7e-e5b5f3b31054.json 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/...ages/react-components/react-toolbar/src/stories/Toolbar/ToolbarBestPractices.md b/...ages/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
+
 </details>
diff --git a/...ct-components/react-toolbar/src/stories/Toolbar/ToolbarControlledToggleButton.stories.tsx b/...ct-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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>
 );