chore: add few improvements to toolbar stories

packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarControlledToggleButton.stories.tsx

@@ -14,20 +14,10 @@ export const ControlledToggleButton = () => {
 
   return (
     <Toolbar checkedValues={checkedValues} onCheckedValueChange={onChange}>
+      <ToolbarToggleButton aria-label="Bold" icon={<TextBold24Regular />} name="textOptions" value="bold" />
+      <ToolbarToggleButton aria-label="Italic" icon={<TextItalic24Regular />} name="textOptions" value="italic" />
       <ToolbarToggleButton
-        aria-label="Text option - Bold"
-        icon={<TextBold24Regular />}
-        name="textOptions"
-        value="bold"
-      />
-      <ToolbarToggleButton
-        aria-label="Text option - Italic"
-        icon={<TextItalic24Regular />}
-        name="textOptions"
-        value="italic"
-      />
-      <ToolbarToggleButton
-        aria-label="Text option - Underline"
+        aria-label="Underline"
         icon={<TextUnderline24Regular />}
         name="textOptions"
         value="underline"

packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarDefault.stories.tsx

@@ -1,30 +1,23 @@
 import * as React from 'react';
 import {
-  TextBold24Regular,
-  TextItalic24Regular,
-  TextUnderline24Regular,
-  AlertSnooze24Regular,
+  FontIncrease24Regular,
+  FontDecrease24Regular,
+  TextFont24Regular,
   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 { Toolbar, ToolbarButton, ToolbarDivider } from '@fluentui/react-toolbar';
 import type { ToolbarProps } from '@fluentui/react-toolbar';
 
 export const Default = (props: Partial<ToolbarProps>) => (
   <Toolbar {...props}>
-    <ToolbarButton aria-label="Text option - Bold" appearance="primary" icon={<TextBold24Regular />} />
-    <ToolbarButton aria-label="Text option - Italic" icon={<TextItalic24Regular />} />
-    <ToolbarButton aria-label="Text option - Underline" icon={<TextUnderline24Regular />} />
+    <ToolbarButton aria-label="Increase Font Size" appearance="primary" icon={<FontIncrease24Regular />} />
+    <ToolbarButton aria-label="Decrease Font Size" icon={<FontDecrease24Regular />} />
+    <ToolbarButton aria-label="Reset Font Size" icon={<TextFont24Regular />} />
     <ToolbarDivider />
-    <ToolbarToggleButton
-      aria-label="Snooze Alert Option"
-      name="toggle"
-      value="toggle"
-      icon={<AlertSnooze24Regular />}
-    />
     <Menu>
       <MenuTrigger>
-        <ToolbarButton aria-label="More menu" icon={<MoreHorizontal24Filled />} />
+        <ToolbarButton aria-label="More" icon={<MoreHorizontal24Filled />} />
       </MenuTrigger>
 
       <MenuPopover>

packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarOverflow.stories.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import {
-  TextBold16Regular,
-  TextItalic16Regular,
-  TextUnderline16Regular,
+  FontDecrease24Regular,
+  TextFont24Regular,
+  FontIncrease24Regular,
   MoreHorizontal20Filled,
 } from '@fluentui/react-icons';
 import { Toolbar, ToolbarButton, ToolbarDivider } from '@fluentui/react-toolbar';
@@ -29,16 +29,16 @@ export const ToolbarOverflowMenuItem: React.FC<ToolbarOverflowMenuItemProps> = p
     return null;
   }
 
-  if (id.includes('underline')) {
-    return <MenuItem icon={<TextUnderline16Regular />}> Underline</MenuItem>;
+  if (id.includes('increase')) {
+    return <MenuItem icon={<FontIncrease24Regular />}>Increase Font Size</MenuItem>;
   }
 
-  if (id.includes('bold')) {
-    return <MenuItem icon={<TextBold16Regular />}> Bold</MenuItem>;
+  if (id.includes('decrease')) {
+    return <MenuItem icon={<FontDecrease24Regular />}>Decrease Font Size</MenuItem>;
   }
 
-  if (id.includes('italic')) {
-    return <MenuItem icon={<TextItalic16Regular />}> Italic</MenuItem>;
+  if (id.includes('reset')) {
+    return <MenuItem icon={<TextFont24Regular />}>Reset Font Size</MenuItem>;
   }
 
   return <MenuItem {...(rest as MenuItemProps)}>Item {id}</MenuItem>;
@@ -66,7 +66,7 @@ export const OverflowMenu: React.FC<{ itemIds: Array<Array<string>> }> = ({ item
   return (
     <Menu>
       <MenuTrigger disableButtonEnhancement>
-        <Button ref={ref} icon={<MoreHorizontal20Filled />} appearance="subtle" />
+        <Button ref={ref} icon={<MoreHorizontal20Filled />} aria-label="More items" appearance="subtle" />
       </MenuTrigger>
 
       <MenuPopover>
@@ -125,94 +125,94 @@ export const OverflowItems = (props: Partial<ToolbarProps>) => (
     <Overflow padding={90}>
       <Toolbar {...props} size="small">
         <ToolbarOverflowButton
-          overflowId="underline-1"
+          overflowId="increase-1"
           overflowGroupId="1"
           appearance="subtle"
-          aria-label="Italic option ( Group 1 )"
-          icon={<TextUnderline16Regular />}
+          aria-label="Increase Font Size ( Group 1 )"
+          icon={<FontIncrease24Regular />}
         />
 
         <ToolbarOverflowButton
-          overflowId="bold-1"
+          overflowId="decrease-1"
           overflowGroupId="1"
           appearance="subtle"
-          aria-label="Bold option ( Group 1 )"
-          icon={<TextBold16Regular />}
+          aria-label="Decrease Font Size ( Group 1 )"
+          icon={<FontDecrease24Regular />}
         />
 
         <ToolbarOverflowDivider groupId="1" />
 
         <ToolbarOverflowButton
-          overflowId="underline-2"
+          overflowId="increase-2"
           overflowGroupId="2"
           appearance="subtle"
-          aria-label="Underline option ( Group 2 )"
-          icon={<TextUnderline16Regular />}
+          aria-label="Increase Font Size ( Group 2 )"
+          icon={<FontIncrease24Regular />}
         />
 
         <ToolbarOverflowButton
-          overflowId="bold-2"
+          overflowId="decrease-2"
           overflowGroupId="2"
           appearance="subtle"
-          aria-label="Bold option ( Group 2 )"
-          icon={<TextBold16Regular />}
+          aria-label="Decrease Font Size ( Group 2 )"
+          icon={<FontDecrease24Regular />}
         />
 
         <ToolbarOverflowButton
-          overflowId="italic-1"
+          overflowId="reset-1"
           overflowGroupId="2"
           appearance="subtle"
-          aria-label="Italic option ( Group 2 )"
-          icon={<TextItalic16Regular />}
+          aria-label="Reset Font Size ( Group 2 )"
+          icon={<TextFont24Regular />}
         />
 
         <ToolbarOverflowButton
-          overflowId="underline-3"
+          overflowId="increase-3"
           overflowGroupId="2"
           appearance="subtle"
-          aria-label="Underline option ( Group 2 )"
-          icon={<TextUnderline16Regular />}
+          aria-label="Increase Font Size ( Group 2 )"
+          icon={<FontIncrease24Regular />}
         />
 
         <ToolbarOverflowButton
-          overflowId="bold-3"
+          overflowId="decrease-3"
           overflowGroupId="2"
           appearance="subtle"
-          aria-label="Bold option ( Group 2 )"
-          icon={<TextBold16Regular />}
+          aria-label="Decrease Font Size ( Group 2 )"
+          icon={<FontDecrease24Regular />}
         />
 
         <ToolbarOverflowDivider groupId="2" />
 
         <ToolbarOverflowButton
-          overflowId="underline-4"
+          overflowId="increase-4"
           overflowGroupId="3"
           appearance="subtle"
-          aria-label="Underline option ( Group 3 )"
-          icon={<TextUnderline16Regular />}
+          aria-label="Increase Font Size ( Group 3 )"
+          icon={<FontIncrease24Regular />}
         />
 
         <ToolbarOverflowButton
-          overflowId="bold-4"
+          overflowId="decrease-4"
           overflowGroupId="3"
           appearance="subtle"
-          aria-label="Bold option ( Group 3 )"
-          icon={<TextBold16Regular />}
+          aria-label="Decrease Font Size ( Group 3 )"
+          icon={<FontDecrease24Regular />}
         />
 
         <ToolbarOverflowButton
-          overflowId="italic-2"
+          overflowId="reset-2"
           overflowGroupId="3"
           appearance="subtle"
-          aria-label="Italic option ( Group 3 )"
-          icon={<TextItalic16Regular />}
+          aria-label="Reset Font Size ( Group 3 )"
+          icon={<TextFont24Regular />}
         />
 
         <OverflowMenu
           itemIds={[
-            ['underline-1', 'bold-1'],
-            ['underline-2', 'bold-2', 'italic-1', 'underline-3', 'bold-3'],
-            ['underline-4', 'bold-4', 'italic-2'],
+            ['increase-1', 'decrease-1'],
+            ['increase-2', 'decrease-2', 'reset-1', 'increase-3', 'decrease-3'],
+            ['increase-4', 'decrease-4', 'reset-2'],
           ]}
         />
       </Toolbar>

packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarRadio.stories.tsx

@@ -4,24 +4,19 @@ import { Toolbar, ToolbarRadioButton } from '@fluentui/react-toolbar';
 import type { ToolbarProps } from '@fluentui/react-toolbar';
 
 export const Radio = (props: Partial<ToolbarProps>) => (
-  <Toolbar {...props}>
+  <Toolbar
+    {...props}
+    defaultCheckedValues={{
+      textOptions: ['center'],
+    }}
+  >
+    <ToolbarRadioButton aria-label="Align left" name="textOptions" value="left" icon={<AlignLeft24Regular />} />
     <ToolbarRadioButton
-      aria-label="Radio Option - Align left"
-      name="text-style"
-      value="italic"
-      icon={<AlignLeft24Regular />}
-    />
-    <ToolbarRadioButton
-      aria-label="Radio Option - Align Center"
-      name="text-style"
-      value="bold"
+      aria-label="Align Center"
+      name="textOptions"
+      value="center"
       icon={<AlignCenterHorizontal24Regular />}
     />
-    <ToolbarRadioButton
-      aria-label="Radio Option - Align Right"
-      name="text-style"
-      value="underline"
-      icon={<AlignRight24Regular />}
-    />
+    <ToolbarRadioButton aria-label="Align Right" name="textOptions" value="right" icon={<AlignRight24Regular />} />
   </Toolbar>
 );

packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarRadioControlled.stories.tsx

@@ -5,7 +5,7 @@ import type { ToolbarProps } from '@fluentui/react-toolbar';
 
 export const ControlledRadio = (props: Partial<ToolbarProps>) => {
   const [checkedValues, setCheckedValues] = React.useState<Record<string, string[]>>({
-    edit: ['italic', 'bold'],
+    textOptions: ['center'],
   });
 
   const onChange: ToolbarProps['onCheckedValueChange'] = (e, { name, checkedItems }) => {
@@ -16,24 +16,14 @@ export const ControlledRadio = (props: Partial<ToolbarProps>) => {
 
   return (
     <Toolbar checkedValues={checkedValues} onCheckedValueChange={onChange}>
+      <ToolbarRadioButton aria-label="Align left" name="textOptions" value="left" icon={<AlignLeft24Regular />} />
       <ToolbarRadioButton
-        aria-label="Radio Option - Align left"
-        name="text-style"
-        value="italic"
-        icon={<AlignLeft24Regular />}
-      />
-      <ToolbarRadioButton
-        aria-label="Radio Option - Align Center"
-        name="text-style"
-        value="bold"
+        aria-label="Align Center"
+        name="textOptions"
+        value="center"
         icon={<AlignCenterHorizontal24Regular />}
       />
-      <ToolbarRadioButton
-        aria-label="Radio Option - Align Right"
-        name="text-style"
-        value="underline"
-        icon={<AlignRight24Regular />}
-      />
+      <ToolbarRadioButton aria-label="Align Right" name="textOptions" value="right" icon={<AlignRight24Regular />} />
     </Toolbar>
   );
 };

packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarSmall.stories.tsx

@@ -1,24 +1,12 @@
 import * as React from 'react';
-import {
-  TextBold16Regular,
-  TextItalic16Regular,
-  TextUnderline16Regular,
-  AlertSnooze16Regular,
-} from '@fluentui/react-icons';
-import { Toolbar, ToolbarButton, ToolbarDivider, ToolbarToggleButton } from '@fluentui/react-toolbar';
+import { FontIncrease24Regular, FontDecrease24Regular, TextFont24Regular } from '@fluentui/react-icons';
+import { Toolbar, ToolbarButton } from '@fluentui/react-toolbar';
 import type { ToolbarProps } from '@fluentui/react-toolbar';
 
 export const Small = (props: Partial<ToolbarProps>) => (
   <Toolbar {...props} size="small">
-    <ToolbarButton aria-label="Text Options - Bold" appearance="primary" icon={<TextBold16Regular />} />
-    <ToolbarButton aria-label="Text Options - Italic" icon={<TextItalic16Regular />} />
-    <ToolbarButton aria-label="Text Options - Underline" icon={<TextUnderline16Regular />} />
-    <ToolbarDivider />
-    <ToolbarToggleButton
-      aria-label="Toggle Option - Alert Snooze"
-      name="toggle"
-      value="toggle"
-      icon={<AlertSnooze16Regular />}
-    />
+    <ToolbarButton aria-label="Increase Font Size" appearance="primary" icon={<FontIncrease24Regular />} />
+    <ToolbarButton aria-label="Decrease Font Size" icon={<FontDecrease24Regular />} />
+    <ToolbarButton aria-label="Reset Font Size" icon={<TextFont24Regular />} />
   </Toolbar>
 );

packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarSubtle.stories.tsx

@@ -1,12 +1,17 @@
 import * as React from 'react';
 import { TextBold24Regular, TextItalic24Regular, TextUnderline24Regular } from '@fluentui/react-icons';
-import { Toolbar, ToolbarButton } from '@fluentui/react-toolbar';
+import { Toolbar, ToolbarToggleButton } from '@fluentui/react-toolbar';
 import type { ToolbarProps } from '@fluentui/react-toolbar';
 
 export const Subtle = (props: Partial<ToolbarProps>) => (
   <Toolbar {...props}>
-    <ToolbarButton aria-label="Text Options - Bold" appearance="subtle" icon={<TextBold24Regular />} />
-    <ToolbarButton aria-label="Text Options - Italic" appearance="subtle" icon={<TextItalic24Regular />} />
-    <ToolbarButton aria-label="Text Options - Underline" appearance="subtle" icon={<TextUnderline24Regular />} />
+    <ToolbarToggleButton aria-label="Bold" icon={<TextBold24Regular />} name="textOptions" value="bold" />
+    <ToolbarToggleButton aria-label="Italic" icon={<TextItalic24Regular />} name="textOptions" value="italic" />
+    <ToolbarToggleButton
+      aria-label="Underline"
+      icon={<TextUnderline24Regular />}
+      name="textOptions"
+      value="underline"
+    />
   </Toolbar>
 );

packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarVertical.stories.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { TextBold24Regular, TextItalic24Regular, TextUnderline24Regular } from '@fluentui/react-icons';
-import { Toolbar, ToolbarButton } from '@fluentui/react-toolbar';
+import { Toolbar, ToolbarToggleButton } from '@fluentui/react-toolbar';
 import type { ToolbarProps } from '@fluentui/react-toolbar';
 
 export const Vertical = (props: Partial<ToolbarProps>) => (
   <Toolbar vertical {...props}>
-    <ToolbarButton aria-label="Text option - Bold" icon={<TextBold24Regular />} />
-    <ToolbarButton aria-label="Text option - Italic" icon={<TextItalic24Regular />} />
-    <ToolbarButton aria-label="Text option - Underline" icon={<TextUnderline24Regular />} />
+    <ToolbarToggleButton name="text" value="bold" aria-label="Bold" icon={<TextBold24Regular />} />
+    <ToolbarToggleButton name="text" value="italic" aria-label="Italic" icon={<TextItalic24Regular />} />
+    <ToolbarToggleButton name="text" value="underline" aria-label="Underline" icon={<TextUnderline24Regular />} />
   </Toolbar>
 );