chore: add few small toolbar improvements (microsoft#25468)

* chore: add few small toolbar improvements

* chore: add changes

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"
+}

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;
+};

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>
  );
 };

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

@@ -128,13 +128,15 @@ export const OverflowItems = (props: Partial<ToolbarProps>) => (
  overflowId="underline-1"
  overflowGroupId="1"
  appearance="subtle"
+ aria-label="Italic option ( Group 1 )"
  icon={<TextUnderline16Regular />}
  />
 
  <ToolbarOverflowButton
  overflowId="bold-1"
  overflowGroupId="1"
  appearance="subtle"
+ aria-label="Bold option ( Group 1 )"
  icon={<TextBold16Regular />}
  />
 
@@ -144,34 +146,39 @@ export const OverflowItems = (props: Partial<ToolbarProps>) => (
  overflowId="underline-2"
  overflowGroupId="2"
  appearance="subtle"
+ aria-label="Underline option ( Group 2 )"
  icon={<TextUnderline16Regular />}
  />
 
  <ToolbarOverflowButton
  overflowId="bold-2"
  overflowGroupId="2"
  appearance="subtle"
+ aria-label="Bold option ( Group 2 )"
  icon={<TextBold16Regular />}
  />
 
  <ToolbarOverflowButton
  overflowId="italic-1"
  overflowGroupId="2"
  appearance="subtle"
+ aria-label="Italic option ( Group 2 )"
  icon={<TextItalic16Regular />}
  />
 
  <ToolbarOverflowButton
  overflowId="underline-3"
  overflowGroupId="2"
  appearance="subtle"
+ aria-label="Underline option ( Group 2 )"
  icon={<TextUnderline16Regular />}
  />
 
  <ToolbarOverflowButton
  overflowId="bold-3"
  overflowGroupId="2"
  appearance="subtle"
+ aria-label="Bold option ( Group 2 )"
  icon={<TextBold16Regular />}
  />
 
@@ -181,20 +188,23 @@ export const OverflowItems = (props: Partial<ToolbarProps>) => (
  overflowId="underline-4"
  overflowGroupId="3"
  appearance="subtle"
+ aria-label="Underline option ( Group 3 )"
  icon={<TextUnderline16Regular />}
  />
 
  <ToolbarOverflowButton
  overflowId="bold-4"
  overflowGroupId="3"
  appearance="subtle"
+ aria-label="Bold option ( Group 3 )"
  icon={<TextBold16Regular />}
  />
 
  <ToolbarOverflowButton
  overflowId="italic-2"
  overflowGroupId="3"
  appearance="subtle"
+ aria-label="Italic option ( Group 3 )"
  icon={<TextItalic16Regular />}
  />