From 0da02e55aa18fed9f7bc0a2f50003fbfe198304a Mon Sep 17 00:00:00 2001
From: Charles <chassunc@microsoft.com>
Date: Tue, 1 Nov 2022 14:38:19 -0300
Subject: [PATCH 1/2] chore: add few small toolbar improvements

---
 .../src/components/Toolbar/useToolbar.ts      | 39 ++++++++++++++-----
 .../ToolbarControlledToggleButton.stories.tsx |  8 ++--
 .../Toolbar/ToolbarOverflow.stories.tsx       | 10 +++++
 3 files changed, 45 insertions(+), 12 deletions(-)

diff --git a/packages/react-components/react-toolbar/src/components/Toolbar/useToolbar.ts b/packages/react-components/react-toolbar/src/components/Toolbar/useToolbar.ts
index abddbac54afccb..05dfaa620a01a3 100644
--- a/packages/react-components/react-toolbar/src/components/Toolbar/useToolbar.ts
+++ b/packages/react-components/react-toolbar/src/components/Toolbar/useToolbar.ts
@@ -39,14 +39,12 @@ export const useToolbar_unstable = (props: ToolbarProps, ref: React.Ref<HTMLElem
     }),
   };
 
-  const [checkedValues, setCheckedValues] = useControllableState({
-    state: initialState.checkedValues,
-    defaultState: initialState.defaultCheckedValues,
-    initialState: {},
+  const [checkedValues, onCheckedValueChange] = useToolbarSelectableState({
+    checkedValues: props.checkedValues,
+    defaultCheckedValues: props.defaultCheckedValues,
+    onCheckedValueChange: props.onCheckedValueChange,
   });
 
-  const { onCheckedValueChange } = initialState;
-
   const handleToggleButton: ToggableHandler = useEventCallback(
     (e: React.MouseEvent | React.KeyboardEvent, name: string, value: string, checked?: boolean) => {
       if (name && value) {
@@ -57,9 +55,7 @@ export const useToolbar_unstable = (props: ToolbarProps, ref: React.Ref<HTMLElem
         } else {
           newCheckedItems.push(value);
         }
-
         onCheckedValueChange?.(e, { name, checkedItems: newCheckedItems });
-        setCheckedValues(s => ({ ...s, [name]: newCheckedItems }));
       }
     },
   );
@@ -71,7 +67,6 @@ export const useToolbar_unstable = (props: ToolbarProps, ref: React.Ref<HTMLElem
           name,
           checkedItems: checkedValues?.[name],
         });
-        setCheckedValues(s => ({ ...s, [name]: [value] }));
       }
     },
   );
@@ -83,3 +78,29 @@ export const useToolbar_unstable = (props: ToolbarProps, ref: React.Ref<HTMLElem
     checkedValues: checkedValues ?? {},
   };
 };
+
+/**
+ * Adds appropriate state values and handlers for selectable items
+ * i.e checkboxes and radios
+ */
+const useToolbarSelectableState = (
+  state: Pick<ToolbarProps, 'checkedValues' | 'defaultCheckedValues' | 'onCheckedValueChange'>,
+) => {
+  const [checkedValues, setCheckedValues] = useControllableState({
+    state: state.checkedValues,
+    defaultState: state.defaultCheckedValues,
+    initialState: {},
+  });
+  const { onCheckedValueChange: onCheckedValueChangeOriginal } = state;
+  const onCheckedValueChange: ToolbarState['onCheckedValueChange'] = useEventCallback((e, { name, checkedItems }) => {
+    if (onCheckedValueChangeOriginal) {
+      onCheckedValueChangeOriginal(e, { name, checkedItems });
+    }
+
+    setCheckedValues(s => {
+      return s ? { ...s, [name]: checkedItems } : { [name]: checkedItems };
+    });
+  });
+
+  return [checkedValues, onCheckedValueChange] as const;
+};
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 7b221bc1051a09..32a8760dfdf383 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
@@ -3,7 +3,9 @@ import { TextBold24Regular, TextItalic24Regular } from '@fluentui/react-icons';
 import { Toolbar, ToolbarToggleButton, ToolbarProps } from '@fluentui/react-toolbar';
 
 export const ControlledToggleButton = () => {
-  const [checkedValues, setCheckedValues] = React.useState<Record<string, string[]>>({ edit: ['cut', 'paste'] });
+  const [checkedValues, setCheckedValues] = React.useState<Record<string, string[]>>({
+    textOptions: ['bold', 'italic'],
+  });
   const onChange: ToolbarProps['onCheckedValueChange'] = (e, { name, checkedItems }) => {
     setCheckedValues(s => {
       return s ? { ...s, [name]: checkedItems } : { [name]: checkedItems };
@@ -12,8 +14,8 @@ export const ControlledToggleButton = () => {
 
   return (
     <Toolbar checkedValues={checkedValues} onCheckedValueChange={onChange}>
-      <ToolbarToggleButton icon={<TextBold24Regular />} name="edit" value="cut" />
-      <ToolbarToggleButton icon={<TextItalic24Regular />} name="edit" value="paste" />
+      <ToolbarToggleButton icon={<TextBold24Regular />} name="textOptions" value="bold" />
+      <ToolbarToggleButton icon={<TextItalic24Regular />} name="textOptions" value="italic" />
     </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 b0ba5639e8cc8e..c73bfb6eb427c9 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
@@ -128,6 +128,7 @@ export const OverflowItems = (props: Partial<ToolbarProps>) => (
           overflowId="underline-1"
           overflowGroupId="1"
           appearance="subtle"
+          aria-label="Italic option ( Group 1 )"
           icon={<TextUnderline16Regular />}
         />
 
@@ -135,6 +136,7 @@ export const OverflowItems = (props: Partial<ToolbarProps>) => (
           overflowId="bold-1"
           overflowGroupId="1"
           appearance="subtle"
+          aria-label="Bold option ( Group 1 )"
           icon={<TextBold16Regular />}
         />
 
@@ -144,6 +146,7 @@ export const OverflowItems = (props: Partial<ToolbarProps>) => (
           overflowId="underline-2"
           overflowGroupId="2"
           appearance="subtle"
+          aria-label="Underline option ( Group 2 )"
           icon={<TextUnderline16Regular />}
         />
 
@@ -151,6 +154,7 @@ export const OverflowItems = (props: Partial<ToolbarProps>) => (
           overflowId="bold-2"
           overflowGroupId="2"
           appearance="subtle"
+          aria-label="Bold option ( Group 2 )"
           icon={<TextBold16Regular />}
         />
 
@@ -158,6 +162,7 @@ export const OverflowItems = (props: Partial<ToolbarProps>) => (
           overflowId="italic-1"
           overflowGroupId="2"
           appearance="subtle"
+          aria-label="Italic option ( Group 2 )"
           icon={<TextItalic16Regular />}
         />
 
@@ -165,6 +170,7 @@ export const OverflowItems = (props: Partial<ToolbarProps>) => (
           overflowId="underline-3"
           overflowGroupId="2"
           appearance="subtle"
+          aria-label="Underline option ( Group 2 )"
           icon={<TextUnderline16Regular />}
         />
 
@@ -172,6 +178,7 @@ export const OverflowItems = (props: Partial<ToolbarProps>) => (
           overflowId="bold-3"
           overflowGroupId="2"
           appearance="subtle"
+          aria-label="Bold option ( Group 2 )"
           icon={<TextBold16Regular />}
         />
 
@@ -181,6 +188,7 @@ export const OverflowItems = (props: Partial<ToolbarProps>) => (
           overflowId="underline-4"
           overflowGroupId="3"
           appearance="subtle"
+          aria-label="Underline option ( Group 3 )"
           icon={<TextUnderline16Regular />}
         />
 
@@ -188,6 +196,7 @@ export const OverflowItems = (props: Partial<ToolbarProps>) => (
           overflowId="bold-4"
           overflowGroupId="3"
           appearance="subtle"
+          aria-label="Bold option ( Group 3 )"
           icon={<TextBold16Regular />}
         />
 
@@ -195,6 +204,7 @@ export const OverflowItems = (props: Partial<ToolbarProps>) => (
           overflowId="italic-2"
           overflowGroupId="3"
           appearance="subtle"
+          aria-label="Italic option ( Group 3 )"
           icon={<TextItalic16Regular />}
         />
 

From 8a7a53aee2e5321c0f0168c1a4d2b196fdc69aa0 Mon Sep 17 00:00:00 2001
From: Charles <chassunc@microsoft.com>
Date: Tue, 1 Nov 2022 15:13:55 -0300
Subject: [PATCH 2/2] chore: add changes

---
 ...react-toolbar-afed7d12-591a-462e-9ddf-b8a079a5e05a.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@fluentui-react-toolbar-afed7d12-591a-462e-9ddf-b8a079a5e05a.json

diff --git a/change/@fluentui-react-toolbar-afed7d12-591a-462e-9ddf-b8a079a5e05a.json b/change/@fluentui-react-toolbar-afed7d12-591a-462e-9ddf-b8a079a5e05a.json
new file mode 100644
index 00000000000000..a56684cea29e73
--- /dev/null
+++ b/change/@fluentui-react-toolbar-afed7d12-591a-462e-9ddf-b8a079a5e05a.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: add few small toolbar improvements",
+  "packageName": "@fluentui/react-toolbar",
+  "email": "chassunc@microsoft.com",
+  "dependentChangeType": "none"
+}