From 9cb113165d6b17881e51f21f8bb74b313c7fd890 Mon Sep 17 00:00:00 2001
From: Charles <chassunc@microsoft.com>
Date: Fri, 11 Nov 2022 11:05:30 -0300
Subject: [PATCH 01/11] chore: add few improvements to toolbar stories

---
 .../ToolbarControlledToggleButton.stories.tsx |  16 +-
 .../Toolbar/ToolbarDefault.stories.tsx        |  12 +-
 .../Toolbar/ToolbarOverflow.stories.tsx       |  84 +++++------
 .../stories/Toolbar/ToolbarRadio.stories.tsx  |  25 ++--
 .../ToolbarRadioControlled.stories.tsx        |  16 +-
 .../stories/Toolbar/ToolbarSmall.stories.tsx  |  19 +--
 .../stories/Toolbar/ToolbarSubtle.stories.tsx |  13 +-
 .../Toolbar/ToolbarVertical.stories.tsx       |   6 +-
 .../Toolbar/ToolbarWithPopover.stories.tsx    | 140 +++++++++++++-----
 .../Toolbar/ToolbarWithTooltip.stories.tsx    |  21 ++-
 10 files changed, 199 insertions(+), 153 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 b7c64f7c6a34bf..df81a14dbcd057 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
@@ -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"
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 ed66c91780a718..a156017810851e 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,8 +1,8 @@
 import * as React from 'react';
 import {
-  TextBold24Regular,
-  TextItalic24Regular,
-  TextUnderline24Regular,
+  FontIncrease24Regular,
+  FontDecrease24Regular,
+  TextFont24Regular,
   AlertSnooze24Regular,
   MoreHorizontal24Filled,
 } from '@fluentui/react-icons';
@@ -12,9 +12,9 @@ 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"
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 7d95d4f7cc1913..9ee1ad219106af 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
@@ -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>;
@@ -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>
diff --git a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarRadio.stories.tsx b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarRadio.stories.tsx
index 86949e4431231f..9d4894b80530ee 100644
--- a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarRadio.stories.tsx
+++ b/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: ['bold'],
+    }}
+  >
+    <ToolbarRadioButton aria-label="Align left" name="textOptions" value="italic" 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"
+      aria-label="Align Center"
+      name="textOptions"
       value="bold"
       icon={<AlignCenterHorizontal24Regular />}
     />
-    <ToolbarRadioButton
-      aria-label="Radio Option - Align Right"
-      name="text-style"
-      value="underline"
-      icon={<AlignRight24Regular />}
-    />
+    <ToolbarRadioButton aria-label="Align Right" name="textOptions" value="underline" icon={<AlignRight24Regular />} />
   </Toolbar>
 );
diff --git a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarRadioControlled.stories.tsx b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarRadioControlled.stories.tsx
index e4ee92e14503eb..f49e649c9a7d9f 100644
--- a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarRadioControlled.stories.tsx
+++ b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarRadioControlled.stories.tsx
@@ -16,24 +16,14 @@ export const ControlledRadio = (props: Partial<ToolbarProps>) => {
 
   return (
     <Toolbar checkedValues={checkedValues} onCheckedValueChange={onChange}>
+      <ToolbarRadioButton aria-label="Align left" name="text-style" value="italic" icon={<AlignLeft24Regular />} />
       <ToolbarRadioButton
-        aria-label="Radio Option - Align left"
-        name="text-style"
-        value="italic"
-        icon={<AlignLeft24Regular />}
-      />
-      <ToolbarRadioButton
-        aria-label="Radio Option - Align Center"
+        aria-label="Align Center"
         name="text-style"
         value="bold"
         icon={<AlignCenterHorizontal24Regular />}
       />
-      <ToolbarRadioButton
-        aria-label="Radio Option - Align Right"
-        name="text-style"
-        value="underline"
-        icon={<AlignRight24Regular />}
-      />
+      <ToolbarRadioButton aria-label="Align Right" name="text-style" value="underline" icon={<AlignRight24Regular />} />
     </Toolbar>
   );
 };
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 ec7cffdaef4392..7239278e95d425 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,8 +1,8 @@
 import * as React from 'react';
 import {
-  TextBold16Regular,
-  TextItalic16Regular,
-  TextUnderline16Regular,
+  FontIncrease24Regular,
+  FontDecrease24Regular,
+  TextFont24Regular,
   AlertSnooze16Regular,
 } from '@fluentui/react-icons';
 import { Toolbar, ToolbarButton, ToolbarDivider, ToolbarToggleButton } from '@fluentui/react-toolbar';
@@ -10,15 +10,10 @@ 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 />} />
+    <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="Toggle Option - Alert Snooze"
-      name="toggle"
-      value="toggle"
-      icon={<AlertSnooze16Regular />}
-    />
+    <ToolbarToggleButton aria-label="Alert Snooze" 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 0cd05053107141..15565aea4c0156 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,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>
 );
diff --git a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarVertical.stories.tsx b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarVertical.stories.tsx
index 101631b357e4e2..55e8e5bf3abb7e 100644
--- a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarVertical.stories.tsx
+++ b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarVertical.stories.tsx
@@ -5,8 +5,8 @@ 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 />} />
+    <ToolbarButton aria-label="Bold" icon={<TextBold24Regular />} />
+    <ToolbarButton aria-label="Italic" icon={<TextItalic24Regular />} />
+    <ToolbarButton aria-label="Underline" 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 2f379a241328e5..bcbd8ee6f471c2 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
@@ -4,40 +4,106 @@ import type { ToolbarProps } from '@fluentui/react-toolbar';
 import { Popover, PopoverSurface, PopoverTrigger, Button } from '@fluentui/react-components';
 import { CalendarMonthRegular, Accessibility24Filled } from '@fluentui/react-icons';
 
-export const WithPopover = (props: Partial<ToolbarProps>) => (
-  <Toolbar {...props} size="small">
-    <Popover withArrow>
-      <PopoverTrigger disableButtonEnhancement>
-        <ToolbarButton appearance="primary">See more...</ToolbarButton>
-      </PopoverTrigger>
-      <PopoverSurface>
-        <div>
-          <h3>Popover content</h3>
-          <Button>Action</Button>
-        </div>
-      </PopoverSurface>
-    </Popover>
-    <ToolbarDivider />
-    <Popover withArrow>
-      <PopoverTrigger disableButtonEnhancement>
-        <ToolbarButton aria-label="Popover trigger - Calendar" icon={<CalendarMonthRegular />} />
-      </PopoverTrigger>
-      <PopoverSurface>
-        <div>
-          <h3>Popover content</h3>
-          <Button>Action</Button>
-        </div>
-      </PopoverSurface>
-    </Popover>
-    <Popover withArrow>
-      <PopoverTrigger disableButtonEnhancement>
-        <ToolbarButton aria-label="Popover trigger - Accessibility" icon={<Accessibility24Filled />} />
-      </PopoverTrigger>
-      <PopoverSurface>
-        <div>
-          <h3>Popover content - Accessibility</h3> <Button>Action</Button>
-        </div>
-      </PopoverSurface>
-    </Popover>
-  </Toolbar>
-);
+export const WithPopover = (props: Partial<ToolbarProps>) => {
+  const [open, setOpen] = React.useState({
+    first: false,
+    second: false,
+    third: false,
+  });
+
+  return (
+    <Toolbar {...props} size="small">
+      <Popover
+        withArrow
+        trapFocus
+        open={open.first}
+        onOpenChange={() => {
+          setOpen(currOpen => ({
+            ...currOpen,
+            first: !currOpen.first,
+          }));
+        }}
+      >
+        <PopoverTrigger disableButtonEnhancement>
+          <ToolbarButton appearance="primary">See more...</ToolbarButton>
+        </PopoverTrigger>
+        <PopoverSurface>
+          <div>
+            <h3>Popover content</h3>
+            <Button
+              onClick={() =>
+                setOpen(currOpen => ({
+                  ...currOpen,
+                  first: false,
+                }))
+              }
+            >
+              Close
+            </Button>
+          </div>
+        </PopoverSurface>
+      </Popover>
+      <ToolbarDivider />
+      <Popover
+        withArrow
+        trapFocus
+        open={open.second}
+        onOpenChange={() => {
+          setOpen(currOpen => ({
+            ...currOpen,
+            second: !currOpen.second,
+          }));
+        }}
+      >
+        <PopoverTrigger disableButtonEnhancement>
+          <ToolbarButton aria-label="Open Calendar Popover" icon={<CalendarMonthRegular />} />
+        </PopoverTrigger>
+        <PopoverSurface>
+          <div>
+            <h3>Popover content</h3>
+            <Button
+              onClick={() =>
+                setOpen(currOpen => ({
+                  ...currOpen,
+                  second: false,
+                }))
+              }
+            >
+              Close
+            </Button>
+          </div>
+        </PopoverSurface>
+      </Popover>
+      <Popover
+        withArrow
+        trapFocus
+        open={open.third}
+        onOpenChange={() => {
+          setOpen(currOpen => ({
+            ...currOpen,
+            third: !currOpen.third,
+          }));
+        }}
+      >
+        <PopoverTrigger disableButtonEnhancement>
+          <ToolbarButton aria-label="Open Accessibility Popover" icon={<Accessibility24Filled />} />
+        </PopoverTrigger>
+        <PopoverSurface>
+          <div>
+            <h3>Popover content - Accessibility</h3>{' '}
+            <Button
+              onClick={() =>
+                setOpen(currOpen => ({
+                  ...currOpen,
+                  third: false,
+                }))
+              }
+            >
+              Close
+            </Button>
+          </div>
+        </PopoverSurface>
+      </Popover>
+    </Toolbar>
+  );
+};
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 ddc2434481a3bf..9a5b64fa22a491 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
@@ -1,20 +1,25 @@
 import * as React from 'react';
-import { Toolbar, ToolbarButton, ToolbarDivider } from '@fluentui/react-toolbar';
+import { Toolbar, ToolbarToggleButton, ToolbarDivider } from '@fluentui/react-toolbar';
 import type { ToolbarProps } from '@fluentui/react-toolbar';
 import { Tooltip } from '@fluentui/react-components';
-import { CalendarMonthRegular, TextBold24Regular, TextItalic24Regular } from '@fluentui/react-icons';
+import { TextUnderline24Regular, TextBold24Regular, TextItalic24Regular } from '@fluentui/react-icons';
 
 export const WithTooltip = (props: Partial<ToolbarProps>) => (
   <Toolbar {...props} size="small">
-    <Tooltip content="Content - Makes text bold" relationship="label" withArrow>
-      <ToolbarButton aria-label="Text Options - Bold" appearance="primary" icon={<TextBold24Regular />} />
+    <Tooltip content="Makes text Bold" relationship="label" withArrow>
+      <ToolbarToggleButton aria-label="Bold" icon={<TextBold24Regular />} name="textOptions" value="bold" />
     </Tooltip>
     <ToolbarDivider />
-    <Tooltip content="Tooltip Content - Show something here" relationship="label" withArrow>
-      <ToolbarButton aria-label="Calendar" icon={<CalendarMonthRegular />} />
+    <Tooltip content="Makes text Italic" relationship="label" withArrow>
+      <ToolbarToggleButton aria-label="Italic" icon={<TextItalic24Regular />} name="textOptions" value="italic" />
     </Tooltip>
-    <Tooltip content="Tooltip Content - Makes text Italic" relationship="label" withArrow>
-      <ToolbarButton aria-label="Italic Option" icon={<TextItalic24Regular />} />
+    <Tooltip content="Makes text Underline" relationship="label" withArrow>
+      <ToolbarToggleButton
+        aria-label="Underline"
+        icon={<TextUnderline24Regular />}
+        name="textOptions"
+        value="underline"
+      />
     </Tooltip>
   </Toolbar>
 );

From c6ee1f7cf44e292ca0e7b065c29a4d6651806603 Mon Sep 17 00:00:00 2001
From: Charles <chassunc@microsoft.com>
Date: Mon, 14 Nov 2022 13:00:06 -0300
Subject: [PATCH 02/11] chore: remove snooze from examples

---
 .../src/stories/Toolbar/ToolbarDefault.stories.tsx    |  9 +--------
 .../src/stories/Toolbar/ToolbarSmall.stories.tsx      | 11 ++---------
 2 files changed, 3 insertions(+), 17 deletions(-)

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 a156017810851e..d8f24dfb0c1350 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
@@ -3,11 +3,10 @@ import {
   FontIncrease24Regular,
   FontDecrease24Regular,
   TextFont24Regular,
-  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 { Toolbar, ToolbarButton, ToolbarDivider } from '@fluentui/react-toolbar';
 import type { ToolbarProps } from '@fluentui/react-toolbar';
 
 export const Default = (props: Partial<ToolbarProps>) => (
@@ -16,12 +15,6 @@ export const Default = (props: Partial<ToolbarProps>) => (
     <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 />} />
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 7239278e95d425..c7458febc493cb 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,11 +1,6 @@
 import * as React from 'react';
-import {
-  FontIncrease24Regular,
-  FontDecrease24Regular,
-  TextFont24Regular,
-  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>) => (
@@ -13,7 +8,5 @@ export const Small = (props: Partial<ToolbarProps>) => (
     <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="Alert Snooze" name="toggle" value="toggle" icon={<AlertSnooze16Regular />} />
   </Toolbar>
 );

From e795f17c20f42b0f06bcd1b428aabefdf9f9b755 Mon Sep 17 00:00:00 2001
From: Charles <chassunc@microsoft.com>
Date: Mon, 14 Nov 2022 13:24:31 -0300
Subject: [PATCH 03/11] chore: add label for more meu trigger

---
 .../src/stories/Toolbar/ToolbarOverflow.stories.tsx             | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 9ee1ad219106af..5d2520e3b64cbc 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
@@ -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>

From bb6c3d1059cde12555313944c384a573d2d0f7e8 Mon Sep 17 00:00:00 2001
From: Charles <chassunc@microsoft.com>
Date: Mon, 14 Nov 2022 13:34:38 -0300
Subject: [PATCH 04/11] chore: add few examples

---
 .../ToolbarRadioControlled.stories.tsx        | 14 ++++--
 .../Toolbar/ToolbarWithPopover.stories.tsx    | 43 ++++++++++++++++---
 .../Toolbar/ToolbarWithTooltip.stories.tsx    |  6 +--
 3 files changed, 50 insertions(+), 13 deletions(-)

diff --git a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarRadioControlled.stories.tsx b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarRadioControlled.stories.tsx
index f49e649c9a7d9f..7f6f3cfb321c75 100644
--- a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarRadioControlled.stories.tsx
+++ b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarRadioControlled.stories.tsx
@@ -15,15 +15,21 @@ export const ControlledRadio = (props: Partial<ToolbarProps>) => {
   };
 
   return (
-    <Toolbar checkedValues={checkedValues} onCheckedValueChange={onChange}>
-      <ToolbarRadioButton aria-label="Align left" name="text-style" value="italic" icon={<AlignLeft24Regular />} />
+    <Toolbar
+      checkedValues={checkedValues}
+      onCheckedValueChange={onChange}
+      defaultCheckedValues={{
+        textOptions: ['bold'],
+      }}
+    >
+      <ToolbarRadioButton aria-label="Align left" name="textStyle" value="italic" icon={<AlignLeft24Regular />} />
       <ToolbarRadioButton
         aria-label="Align Center"
-        name="text-style"
+        name="textStyle"
         value="bold"
         icon={<AlignCenterHorizontal24Regular />}
       />
-      <ToolbarRadioButton aria-label="Align Right" name="text-style" value="underline" icon={<AlignRight24Regular />} />
+      <ToolbarRadioButton aria-label="Align Right" name="textStyle" value="underline" icon={<AlignRight24Regular />} />
     </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 bcbd8ee6f471c2..f4155f7f6f9cc0 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
@@ -2,13 +2,14 @@ import * as React from 'react';
 import { Toolbar, ToolbarButton, ToolbarDivider } from '@fluentui/react-toolbar';
 import type { ToolbarProps } from '@fluentui/react-toolbar';
 import { Popover, PopoverSurface, PopoverTrigger, Button } from '@fluentui/react-components';
-import { CalendarMonthRegular, Accessibility24Filled } from '@fluentui/react-icons';
+import { MathFormatLinear24Regular, Image24Regular, Table24Filled } from '@fluentui/react-icons';
 
 export const WithPopover = (props: Partial<ToolbarProps>) => {
   const [open, setOpen] = React.useState({
     first: false,
     second: false,
     third: false,
+    fourth: false,
   });
 
   return (
@@ -25,7 +26,7 @@ export const WithPopover = (props: Partial<ToolbarProps>) => {
         }}
       >
         <PopoverTrigger disableButtonEnhancement>
-          <ToolbarButton appearance="primary">See more...</ToolbarButton>
+          <ToolbarButton appearance="primary" icon={<Table24Filled />} aria-label="Insert Table" />
         </PopoverTrigger>
         <PopoverSurface>
           <div>
@@ -43,7 +44,6 @@ export const WithPopover = (props: Partial<ToolbarProps>) => {
           </div>
         </PopoverSurface>
       </Popover>
-      <ToolbarDivider />
       <Popover
         withArrow
         trapFocus
@@ -56,7 +56,7 @@ export const WithPopover = (props: Partial<ToolbarProps>) => {
         }}
       >
         <PopoverTrigger disableButtonEnhancement>
-          <ToolbarButton aria-label="Open Calendar Popover" icon={<CalendarMonthRegular />} />
+          <ToolbarButton aria-label="Inser image" icon={<Image24Regular />} />
         </PopoverTrigger>
         <PopoverSurface>
           <div>
@@ -86,11 +86,11 @@ export const WithPopover = (props: Partial<ToolbarProps>) => {
         }}
       >
         <PopoverTrigger disableButtonEnhancement>
-          <ToolbarButton aria-label="Open Accessibility Popover" icon={<Accessibility24Filled />} />
+          <ToolbarButton aria-label="Insert Formula" icon={<MathFormatLinear24Regular />} />
         </PopoverTrigger>
         <PopoverSurface>
           <div>
-            <h3>Popover content - Accessibility</h3>{' '}
+            <h3>Popover content - Formula</h3>{' '}
             <Button
               onClick={() =>
                 setOpen(currOpen => ({
@@ -104,6 +104,37 @@ export const WithPopover = (props: Partial<ToolbarProps>) => {
           </div>
         </PopoverSurface>
       </Popover>
+      <ToolbarDivider />
+      <Popover
+        withArrow
+        trapFocus
+        open={open.fourth}
+        onOpenChange={() => {
+          setOpen(currOpen => ({
+            ...currOpen,
+            fourth: !currOpen.third,
+          }));
+        }}
+      >
+        <PopoverTrigger disableButtonEnhancement>
+          <ToolbarButton>Quick Actions</ToolbarButton>
+        </PopoverTrigger>
+        <PopoverSurface>
+          <div>
+            <h3>Popover content - Quick Actions</h3>{' '}
+            <Button
+              onClick={() =>
+                setOpen(currOpen => ({
+                  ...currOpen,
+                  fourth: false,
+                }))
+              }
+            >
+              Close
+            </Button>
+          </div>
+        </PopoverSurface>
+      </Popover>
     </Toolbar>
   );
 };
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 9a5b64fa22a491..9f0efd4ff98803 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
@@ -6,14 +6,14 @@ import { TextUnderline24Regular, TextBold24Regular, TextItalic24Regular } from '
 
 export const WithTooltip = (props: Partial<ToolbarProps>) => (
   <Toolbar {...props} size="small">
-    <Tooltip content="Makes text Bold" relationship="label" withArrow>
+    <Tooltip content="Makes selected text Bold" relationship="description" withArrow>
       <ToolbarToggleButton aria-label="Bold" icon={<TextBold24Regular />} name="textOptions" value="bold" />
     </Tooltip>
     <ToolbarDivider />
-    <Tooltip content="Makes text Italic" relationship="label" withArrow>
+    <Tooltip content="Makes selected text Italic" relationship="description" withArrow>
       <ToolbarToggleButton aria-label="Italic" icon={<TextItalic24Regular />} name="textOptions" value="italic" />
     </Tooltip>
-    <Tooltip content="Makes text Underline" relationship="label" withArrow>
+    <Tooltip content="Makes selected text Underline" relationship="description" withArrow>
       <ToolbarToggleButton
         aria-label="Underline"
         icon={<TextUnderline24Regular />}

From 9ade33a69fd97b84abdba715ff0137837f311525 Mon Sep 17 00:00:00 2001
From: Charles <chassunc@microsoft.com>
Date: Mon, 14 Nov 2022 13:43:29 -0300
Subject: [PATCH 05/11] chore: change approach on the popover example

---
 .../Toolbar/ToolbarWithPopover.stories.tsx    | 93 +++----------------
 1 file changed, 15 insertions(+), 78 deletions(-)

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 f4155f7f6f9cc0..68ba3f6df95d20 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
@@ -5,102 +5,54 @@ import { Popover, PopoverSurface, PopoverTrigger, Button } from '@fluentui/react
 import { MathFormatLinear24Regular, Image24Regular, Table24Filled } from '@fluentui/react-icons';
 
 export const WithPopover = (props: Partial<ToolbarProps>) => {
-  const [open, setOpen] = React.useState({
-    first: false,
-    second: false,
-    third: false,
-    fourth: false,
-  });
+  const [open, setOpen] = React.useState<'first' | 'second' | 'third' | 'fourth' | undefined>();
 
   return (
     <Toolbar {...props} size="small">
       <Popover
         withArrow
         trapFocus
-        open={open.first}
-        onOpenChange={() => {
-          setOpen(currOpen => ({
-            ...currOpen,
-            first: !currOpen.first,
-          }));
-        }}
+        open={open === 'first'}
+        onOpenChange={(_, data) => setOpen(data.open ? 'first' : undefined)}
       >
         <PopoverTrigger disableButtonEnhancement>
-          <ToolbarButton appearance="primary" icon={<Table24Filled />} aria-label="Insert Table" />
+          <ToolbarButton aria-label="Inser image" icon={<Image24Regular />} />
         </PopoverTrigger>
         <PopoverSurface>
           <div>
             <h3>Popover content</h3>
-            <Button
-              onClick={() =>
-                setOpen(currOpen => ({
-                  ...currOpen,
-                  first: false,
-                }))
-              }
-            >
-              Close
-            </Button>
+            <Button onClick={() => setOpen(undefined)}>Close</Button>
           </div>
         </PopoverSurface>
       </Popover>
       <Popover
         withArrow
         trapFocus
-        open={open.second}
-        onOpenChange={() => {
-          setOpen(currOpen => ({
-            ...currOpen,
-            second: !currOpen.second,
-          }));
-        }}
+        open={open === 'second'}
+        onOpenChange={(_, data) => setOpen(data.open ? 'second' : undefined)}
       >
         <PopoverTrigger disableButtonEnhancement>
-          <ToolbarButton aria-label="Inser image" icon={<Image24Regular />} />
+          <ToolbarButton appearance="primary" icon={<Table24Filled />} aria-label="Insert Table" />
         </PopoverTrigger>
         <PopoverSurface>
           <div>
             <h3>Popover content</h3>
-            <Button
-              onClick={() =>
-                setOpen(currOpen => ({
-                  ...currOpen,
-                  second: false,
-                }))
-              }
-            >
-              Close
-            </Button>
+            <Button onClick={() => setOpen(undefined)}>Close</Button>
           </div>
         </PopoverSurface>
       </Popover>
       <Popover
         withArrow
         trapFocus
-        open={open.third}
-        onOpenChange={() => {
-          setOpen(currOpen => ({
-            ...currOpen,
-            third: !currOpen.third,
-          }));
-        }}
+        open={open === 'third'}
+        onOpenChange={(_, data) => setOpen(data.open ? 'third' : undefined)}
       >
         <PopoverTrigger disableButtonEnhancement>
           <ToolbarButton aria-label="Insert Formula" icon={<MathFormatLinear24Regular />} />
         </PopoverTrigger>
         <PopoverSurface>
           <div>
-            <h3>Popover content - Formula</h3>{' '}
-            <Button
-              onClick={() =>
-                setOpen(currOpen => ({
-                  ...currOpen,
-                  third: false,
-                }))
-              }
-            >
-              Close
-            </Button>
+            <h3>Popover content - Formula</h3> <Button onClick={() => setOpen(undefined)}>Close</Button>
           </div>
         </PopoverSurface>
       </Popover>
@@ -108,30 +60,15 @@ export const WithPopover = (props: Partial<ToolbarProps>) => {
       <Popover
         withArrow
         trapFocus
-        open={open.fourth}
-        onOpenChange={() => {
-          setOpen(currOpen => ({
-            ...currOpen,
-            fourth: !currOpen.third,
-          }));
-        }}
+        open={open === 'fourth'}
+        onOpenChange={(_, data) => setOpen(data.open ? 'fourth' : undefined)}
       >
         <PopoverTrigger disableButtonEnhancement>
           <ToolbarButton>Quick Actions</ToolbarButton>
         </PopoverTrigger>
         <PopoverSurface>
           <div>
-            <h3>Popover content - Quick Actions</h3>{' '}
-            <Button
-              onClick={() =>
-                setOpen(currOpen => ({
-                  ...currOpen,
-                  fourth: false,
-                }))
-              }
-            >
-              Close
-            </Button>
+            <h3>Popover content - Quick Actions</h3> <Button onClick={() => setOpen(undefined)}>Close</Button>
           </div>
         </PopoverSurface>
       </Popover>

From 7c8d6c61c788b11c2f89eb68666ab984851622c6 Mon Sep 17 00:00:00 2001
From: Charles <chassunc@microsoft.com>
Date: Thu, 17 Nov 2022 22:17:51 -0300
Subject: [PATCH 06/11] chore: add new round of feedback

---
 .../src/stories/Toolbar/ToolbarDefault.stories.tsx   |  2 +-
 .../src/stories/Toolbar/ToolbarRadio.stories.tsx     |  8 ++++----
 .../Toolbar/ToolbarRadioControlled.stories.tsx       | 10 +++++-----
 .../src/stories/Toolbar/ToolbarVertical.stories.tsx  |  8 ++++----
 .../stories/Toolbar/ToolbarWithPopover.stories.tsx   | 12 +++++++++---
 5 files changed, 23 insertions(+), 17 deletions(-)

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 d8f24dfb0c1350..de1ca97daf817e 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
@@ -17,7 +17,7 @@ export const Default = (props: Partial<ToolbarProps>) => (
     <ToolbarDivider />
     <Menu>
       <MenuTrigger>
-        <ToolbarButton aria-label="More menu" icon={<MoreHorizontal24Filled />} />
+        <ToolbarButton aria-label="More" icon={<MoreHorizontal24Filled />} />
       </MenuTrigger>
 
       <MenuPopover>
diff --git a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarRadio.stories.tsx b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarRadio.stories.tsx
index 9d4894b80530ee..6f61d549524dcd 100644
--- a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarRadio.stories.tsx
+++ b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarRadio.stories.tsx
@@ -7,16 +7,16 @@ export const Radio = (props: Partial<ToolbarProps>) => (
   <Toolbar
     {...props}
     defaultCheckedValues={{
-      textOptions: ['bold'],
+      textOptions: ['center'],
     }}
   >
-    <ToolbarRadioButton aria-label="Align left" name="textOptions" value="italic" icon={<AlignLeft24Regular />} />
+    <ToolbarRadioButton aria-label="Align left" name="textOptions" value="left" icon={<AlignLeft24Regular />} />
     <ToolbarRadioButton
       aria-label="Align Center"
       name="textOptions"
-      value="bold"
+      value="center"
       icon={<AlignCenterHorizontal24Regular />}
     />
-    <ToolbarRadioButton aria-label="Align Right" name="textOptions" value="underline" icon={<AlignRight24Regular />} />
+    <ToolbarRadioButton aria-label="Align Right" name="textOptions" value="right" icon={<AlignRight24Regular />} />
   </Toolbar>
 );
diff --git a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarRadioControlled.stories.tsx b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarRadioControlled.stories.tsx
index 7f6f3cfb321c75..21aa8248b23899 100644
--- a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarRadioControlled.stories.tsx
+++ b/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'],
+    edit: ['italic', 'center'],
   });
 
   const onChange: ToolbarProps['onCheckedValueChange'] = (e, { name, checkedItems }) => {
@@ -19,17 +19,17 @@ export const ControlledRadio = (props: Partial<ToolbarProps>) => {
       checkedValues={checkedValues}
       onCheckedValueChange={onChange}
       defaultCheckedValues={{
-        textOptions: ['bold'],
+        textOptions: ['center'],
       }}
     >
-      <ToolbarRadioButton aria-label="Align left" name="textStyle" value="italic" icon={<AlignLeft24Regular />} />
+      <ToolbarRadioButton aria-label="Align left" name="textStyle" value="left" icon={<AlignLeft24Regular />} />
       <ToolbarRadioButton
         aria-label="Align Center"
         name="textStyle"
-        value="bold"
+        value="center"
         icon={<AlignCenterHorizontal24Regular />}
       />
-      <ToolbarRadioButton aria-label="Align Right" name="textStyle" value="underline" icon={<AlignRight24Regular />} />
+      <ToolbarRadioButton aria-label="Align Right" name="textStyle" value="right" icon={<AlignRight24Regular />} />
     </Toolbar>
   );
 };
diff --git a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarVertical.stories.tsx b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarVertical.stories.tsx
index 55e8e5bf3abb7e..6696758d4375a5 100644
--- a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarVertical.stories.tsx
+++ b/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="Bold" icon={<TextBold24Regular />} />
-    <ToolbarButton aria-label="Italic" icon={<TextItalic24Regular />} />
-    <ToolbarButton aria-label="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>
 );
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 68ba3f6df95d20..b3a69e2f03c5b1 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
@@ -16,11 +16,12 @@ export const WithPopover = (props: Partial<ToolbarProps>) => {
         onOpenChange={(_, data) => setOpen(data.open ? 'first' : undefined)}
       >
         <PopoverTrigger disableButtonEnhancement>
-          <ToolbarButton aria-label="Inser image" icon={<Image24Regular />} />
+          <ToolbarButton aria-label="Insert image" icon={<Image24Regular />} />
         </PopoverTrigger>
         <PopoverSurface>
           <div>
             <h3>Popover content</h3>
+            <Button>Open users list</Button>
             <Button onClick={() => setOpen(undefined)}>Close</Button>
           </div>
         </PopoverSurface>
@@ -37,6 +38,7 @@ export const WithPopover = (props: Partial<ToolbarProps>) => {
         <PopoverSurface>
           <div>
             <h3>Popover content</h3>
+            <Button>Calculate total</Button>
             <Button onClick={() => setOpen(undefined)}>Close</Button>
           </div>
         </PopoverSurface>
@@ -52,7 +54,9 @@ export const WithPopover = (props: Partial<ToolbarProps>) => {
         </PopoverTrigger>
         <PopoverSurface>
           <div>
-            <h3>Popover content - Formula</h3> <Button onClick={() => setOpen(undefined)}>Close</Button>
+            <h3>Popover content - Formula</h3>
+            <Button>Calculate total</Button>
+            <Button onClick={() => setOpen(undefined)}>Close</Button>
           </div>
         </PopoverSurface>
       </Popover>
@@ -68,7 +72,9 @@ export const WithPopover = (props: Partial<ToolbarProps>) => {
         </PopoverTrigger>
         <PopoverSurface>
           <div>
-            <h3>Popover content - Quick Actions</h3> <Button onClick={() => setOpen(undefined)}>Close</Button>
+            <h3>Popover content - Quick Actions</h3>
+            <Button>Calculate total</Button>
+            <Button onClick={() => setOpen(undefined)}>Close</Button>
           </div>
         </PopoverSurface>
       </Popover>

From 58535f981d8e2b5f9f3aeadbff8252992c00f960 Mon Sep 17 00:00:00 2001
From: Charles <chassunc@microsoft.com>
Date: Fri, 18 Nov 2022 23:15:19 -0300
Subject: [PATCH 07/11] chore: update toolbar popover example

---
 .../src/stories/Toolbar/ToolbarWithPopover.stories.tsx    | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

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 b3a69e2f03c5b1..50c3aa0f2b8585 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
@@ -21,7 +21,7 @@ export const WithPopover = (props: Partial<ToolbarProps>) => {
         <PopoverSurface>
           <div>
             <h3>Popover content</h3>
-            <Button>Open users list</Button>
+            <Button>Example 1</Button>
             <Button onClick={() => setOpen(undefined)}>Close</Button>
           </div>
         </PopoverSurface>
@@ -38,7 +38,7 @@ export const WithPopover = (props: Partial<ToolbarProps>) => {
         <PopoverSurface>
           <div>
             <h3>Popover content</h3>
-            <Button>Calculate total</Button>
+            <Button>Example 2</Button>
             <Button onClick={() => setOpen(undefined)}>Close</Button>
           </div>
         </PopoverSurface>
@@ -55,7 +55,7 @@ export const WithPopover = (props: Partial<ToolbarProps>) => {
         <PopoverSurface>
           <div>
             <h3>Popover content - Formula</h3>
-            <Button>Calculate total</Button>
+            <Button>Example 3</Button>
             <Button onClick={() => setOpen(undefined)}>Close</Button>
           </div>
         </PopoverSurface>
@@ -73,7 +73,7 @@ export const WithPopover = (props: Partial<ToolbarProps>) => {
         <PopoverSurface>
           <div>
             <h3>Popover content - Quick Actions</h3>
-            <Button>Calculate total</Button>
+            <Button>Example 4</Button>
             <Button onClick={() => setOpen(undefined)}>Close</Button>
           </div>
         </PopoverSurface>

From 5c58a2f013aa06195f515541bdea11dfbb2fc5b5 Mon Sep 17 00:00:00 2001
From: Charles <chassunc@microsoft.com>
Date: Fri, 18 Nov 2022 23:17:25 -0300
Subject: [PATCH 08/11] chore: update toolbar popover example

---
 .../src/stories/Toolbar/ToolbarWithPopover.stories.tsx    | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

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 50c3aa0f2b8585..74368a6c0ee473 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
@@ -20,7 +20,7 @@ export const WithPopover = (props: Partial<ToolbarProps>) => {
         </PopoverTrigger>
         <PopoverSurface>
           <div>
-            <h3>Popover content</h3>
+            <h3>Insert Image</h3>
             <Button>Example 1</Button>
             <Button onClick={() => setOpen(undefined)}>Close</Button>
           </div>
@@ -37,7 +37,7 @@ export const WithPopover = (props: Partial<ToolbarProps>) => {
         </PopoverTrigger>
         <PopoverSurface>
           <div>
-            <h3>Popover content</h3>
+            <h3>Insert Table</h3>
             <Button>Example 2</Button>
             <Button onClick={() => setOpen(undefined)}>Close</Button>
           </div>
@@ -54,7 +54,7 @@ export const WithPopover = (props: Partial<ToolbarProps>) => {
         </PopoverTrigger>
         <PopoverSurface>
           <div>
-            <h3>Popover content - Formula</h3>
+            <h3>Insert Formula</h3>
             <Button>Example 3</Button>
             <Button onClick={() => setOpen(undefined)}>Close</Button>
           </div>
@@ -72,7 +72,7 @@ export const WithPopover = (props: Partial<ToolbarProps>) => {
         </PopoverTrigger>
         <PopoverSurface>
           <div>
-            <h3>Popover content - Quick Actions</h3>
+            <h3>Quick Actions</h3>
             <Button>Example 4</Button>
             <Button onClick={() => setOpen(undefined)}>Close</Button>
           </div>

From 1fcae8fb230ee7918a201d7fc1651b30e6346a80 Mon Sep 17 00:00:00 2001
From: Charles <chassunc@microsoft.com>
Date: Fri, 18 Nov 2022 23:19:10 -0300
Subject: [PATCH 09/11] chore: fix controlled radio example

---
 .../src/stories/Toolbar/ToolbarRadioControlled.stories.tsx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarRadioControlled.stories.tsx b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarRadioControlled.stories.tsx
index 21aa8248b23899..321dab99387cee 100644
--- a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarRadioControlled.stories.tsx
+++ b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarRadioControlled.stories.tsx
@@ -19,7 +19,7 @@ export const ControlledRadio = (props: Partial<ToolbarProps>) => {
       checkedValues={checkedValues}
       onCheckedValueChange={onChange}
       defaultCheckedValues={{
-        textOptions: ['center'],
+        textStyle: ['center'],
       }}
     >
       <ToolbarRadioButton aria-label="Align left" name="textStyle" value="left" icon={<AlignLeft24Regular />} />

From 05061410805cc698d782f67846ca4cb632606f40 Mon Sep 17 00:00:00 2001
From: Charles <chassunc@microsoft.com>
Date: Sat, 19 Nov 2022 05:13:31 -0300
Subject: [PATCH 10/11] chore: update controlled radio example

---
 .../Toolbar/ToolbarRadioControlled.stories.tsx   | 16 +++++-----------
 1 file changed, 5 insertions(+), 11 deletions(-)

diff --git a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarRadioControlled.stories.tsx b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarRadioControlled.stories.tsx
index 321dab99387cee..9b8503b00b540a 100644
--- a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarRadioControlled.stories.tsx
+++ b/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', 'center'],
+    textOptions: ['center'],
   });
 
   const onChange: ToolbarProps['onCheckedValueChange'] = (e, { name, checkedItems }) => {
@@ -15,21 +15,15 @@ export const ControlledRadio = (props: Partial<ToolbarProps>) => {
   };
 
   return (
-    <Toolbar
-      checkedValues={checkedValues}
-      onCheckedValueChange={onChange}
-      defaultCheckedValues={{
-        textStyle: ['center'],
-      }}
-    >
-      <ToolbarRadioButton aria-label="Align left" name="textStyle" value="left" icon={<AlignLeft24Regular />} />
+    <Toolbar checkedValues={checkedValues} onCheckedValueChange={onChange}>
+      <ToolbarRadioButton aria-label="Align left" name="textOptions" value="left" icon={<AlignLeft24Regular />} />
       <ToolbarRadioButton
         aria-label="Align Center"
-        name="textStyle"
+        name="textOptions"
         value="center"
         icon={<AlignCenterHorizontal24Regular />}
       />
-      <ToolbarRadioButton aria-label="Align Right" name="textStyle" value="right" icon={<AlignRight24Regular />} />
+      <ToolbarRadioButton aria-label="Align Right" name="textOptions" value="right" icon={<AlignRight24Regular />} />
     </Toolbar>
   );
 };

From ed3282b881901a07cc0f3e29bb67f95b259ede94 Mon Sep 17 00:00:00 2001
From: Charles <chassunc@microsoft.com>
Date: Sat, 19 Nov 2022 05:16:12 -0300
Subject: [PATCH 11/11] chore: update with tooltip example

---
 .../stories/Toolbar/ToolbarWithTooltip.stories.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

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 9f0efd4ff98803..4283413c47f561 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
@@ -1,15 +1,19 @@
 import * as React from 'react';
-import { Toolbar, ToolbarToggleButton, ToolbarDivider } from '@fluentui/react-toolbar';
+import { Toolbar, ToolbarToggleButton, ToolbarDivider, ToolbarButton } from '@fluentui/react-toolbar';
 import type { ToolbarProps } from '@fluentui/react-toolbar';
 import { Tooltip } from '@fluentui/react-components';
-import { TextUnderline24Regular, TextBold24Regular, TextItalic24Regular } from '@fluentui/react-icons';
+import {
+  TextUnderline24Regular,
+  TextBold24Regular,
+  TextItalic24Regular,
+  Highlight24Filled,
+} from '@fluentui/react-icons';
 
 export const WithTooltip = (props: Partial<ToolbarProps>) => (
   <Toolbar {...props} size="small">
     <Tooltip content="Makes selected text Bold" relationship="description" withArrow>
       <ToolbarToggleButton aria-label="Bold" icon={<TextBold24Regular />} name="textOptions" value="bold" />
     </Tooltip>
-    <ToolbarDivider />
     <Tooltip content="Makes selected text Italic" relationship="description" withArrow>
       <ToolbarToggleButton aria-label="Italic" icon={<TextItalic24Regular />} name="textOptions" value="italic" />
     </Tooltip>
@@ -21,5 +25,9 @@ export const WithTooltip = (props: Partial<ToolbarProps>) => (
         value="underline"
       />
     </Tooltip>
+    <ToolbarDivider />
+    <Tooltip content="Highlights the selected text" relationship="description" withArrow>
+      <ToolbarButton aria-label="Highlight" icon={<Highlight24Filled />} />
+    </Tooltip>
   </Toolbar>
 );