fix: ToolbarRadio example and click event (microsoft#25509)

* fix: ToolbarRadio example and click * chore: add changes * chore: add tests
NotWoods · Nov 18, 2022 · c8a4fd4 · c8a4fd4
1 parent 76d6905
commit c8a4fd4
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 8 deletions.
diff --git a/change/@fluentui-react-toolbar-bac826cc-5a66-447f-ab37-f85d8df68fb9.json b/change/@fluentui-react-toolbar-bac826cc-5a66-447f-ab37-f85d8df68fb9.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "fix: ToolbarRadio example and click",
+  "packageName": "@fluentui/react-toolbar",
+  "email": "[email protected]",
+  "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
@@ -65,7 +65,7 @@ export const useToolbar_unstable = (props: ToolbarProps, ref: React.Ref<HTMLElem
       if (name && value) {
         onCheckedValueChange?.(e, {
           name,
-          checkedItems: checkedValues?.[name],
+          checkedItems: [value],
         });
       }
     },

diff --git a/...ct-components/react-toolbar/src/components/ToolbarRadioButton/ToolbarRadioButton.test.tsx b/...ct-components/react-toolbar/src/components/ToolbarRadioButton/ToolbarRadioButton.test.tsx
@@ -3,6 +3,8 @@ import { render } from '@testing-library/react';
 import { ToolbarRadioButton } from './ToolbarRadioButton';
 import { isConformant } from '../../common/isConformant';
 import { ToggleButtonProps } from '@fluentui/react-button';
+import userEvent from '@testing-library/user-event';
+import { Toolbar } from '../Toolbar/Toolbar';
 
 describe('ToolbarRadioButton', () => {
   isConformant({
@@ -21,4 +23,49 @@ describe('ToolbarRadioButton', () => {
     );
     expect(result.container).toMatchSnapshot();
   });
+
+  it('should call onCheckedValueChange with proper value', () => {
+    const onCheckedValueChange = jest.fn();
+
+    const { getByText } = render(
+      <Toolbar onCheckedValueChange={onCheckedValueChange}>
+        <ToolbarRadioButton name="text" value="italic">
+          italic
+        </ToolbarRadioButton>
+        <ToolbarRadioButton name="text" value="bold">
+          bold
+        </ToolbarRadioButton>
+      </Toolbar>,
+    );
+
+    userEvent.click(getByText('bold'));
+
+    expect(onCheckedValueChange).toHaveBeenCalledWith(
+      expect.objectContaining({
+        type: 'click',
+      }),
+      expect.objectContaining({
+        checkedItems: expect.arrayContaining(['bold']),
+      }),
+    );
+  });
+
+  it('should check the proper value', () => {
+    const onCheckedValueChange = jest.fn();
+
+    const { getByText } = render(
+      <Toolbar onCheckedValueChange={onCheckedValueChange}>
+        <ToolbarRadioButton name="text" value="italic">
+          italic
+        </ToolbarRadioButton>
+        <ToolbarRadioButton name="text" value="bold">
+          bold
+        </ToolbarRadioButton>
+      </Toolbar>,
+    );
+
+    userEvent.click(getByText('bold'));
+
+    expect(getByText('bold').getAttribute('aria-pressed')).toBe('true');
+  });
 });
diff --git a/...react-components/react-toolbar/src/components/ToolbarRadioButton/useToolbarRadioButton.ts b/...react-components/react-toolbar/src/components/ToolbarRadioButton/useToolbarRadioButton.ts
@@ -28,10 +28,6 @@ export const useToolbarRadioButton_unstable = (
 
   const handleOnClick = useEventCallback(
     (e: React.MouseEvent<HTMLButtonElement, MouseEvent> & React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
-      e.preventDefault();
-      e.stopPropagation();
-      return;
-
       handleRadio?.(e, state.name, state.value, state.checked);
       onClickOriginal?.(e);
     },

diff --git a/...ges/react-components/react-toolbar/src/stories/Toolbar/ToolbarRadioControlled.stories.tsx b/...ges/react-components/react-toolbar/src/stories/Toolbar/ToolbarRadioControlled.stories.tsx
@@ -1,12 +1,13 @@
 import * as React from 'react';
 import { TextBold24Regular, TextItalic24Regular, TextUnderline24Regular } from '@fluentui/react-icons';
-import { Toolbar, ToolbarRadioButton, ToolbarDivider } from '@fluentui/react-toolbar';
+import { Toolbar, ToolbarRadioButton } from '@fluentui/react-toolbar';
 import type { ToolbarProps } from '@fluentui/react-toolbar';
 
 export const ControlledRadio = (props: Partial<ToolbarProps>) => {
   const [checkedValues, setCheckedValues] = React.useState<Record<string, string[]>>({
-    edit: ['cut', 'paste'],
+    edit: ['italic', 'bold'],
   });
+
   const onChange: ToolbarProps['onCheckedValueChange'] = (e, { name, checkedItems }) => {
     setCheckedValues(s => {
       return s ? { ...s, [name]: checkedItems } : { [name]: checkedItems };
@@ -18,7 +19,6 @@ export const ControlledRadio = (props: Partial<ToolbarProps>) => {
       <ToolbarRadioButton name="text-style" value="italic" icon={<TextItalic24Regular />} />
       <ToolbarRadioButton name="text-style" value="bold" icon={<TextBold24Regular />} />
       <ToolbarRadioButton name="text-style" value="underline" icon={<TextUnderline24Regular />} />
-      <ToolbarDivider />
     </Toolbar>
   );
 };