From abfb64d82916efdb0e5129cf41081a13e4e9d9ff Mon Sep 17 00:00:00 2001
From: chajun <86579954+chpalac@users.noreply.github.com>
Date: Tue, 1 Nov 2022 15:40:03 -0300
Subject: [PATCH] chore: add few small toolbar improvements (#25468)

* chore: add few small toolbar improvements

* chore: add changes
---
 ...-afed7d12-591a-462e-9ddf-b8a079a5e05a.json |  7 ++++
 .../src/components/Toolbar/useToolbar.ts      | 39 ++++++++++++++-----
 .../ToolbarControlledToggleButton.stories.tsx |  8 ++--
 .../Toolbar/ToolbarOverflow.stories.tsx       | 10 +++++
 4 files changed, 52 insertions(+), 12 deletions(-)
 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"
+}
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 fa3a97bb25482b..7d95d4f7cc1913 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 />}
         />