From 7ede4419f2545fcf58086678ca1ee17221e73fac Mon Sep 17 00:00:00 2001 From: Charles Date: Thu, 3 Nov 2022 13:46:44 -0300 Subject: [PATCH 1/3] fix: ToolbarRadio example and click --- .../react-toolbar/src/components/Toolbar/useToolbar.ts | 2 +- .../components/ToolbarRadioButton/useToolbarRadioButton.ts | 4 ---- .../src/stories/Toolbar/ToolbarRadioControlled.stories.tsx | 6 +++--- 3 files changed, 4 insertions(+), 8 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 05dfaa620a01a..d688508a5b859 100644 --- 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 & React.MouseEvent) => { - e.preventDefault(); - e.stopPropagation(); - return; - handleRadio?.(e, state.name, state.value, state.checked); onClickOriginal?.(e); }, 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 61dbfa07e7dbc..587f4d8f697bd 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 @@ -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) => { const [checkedValues, setCheckedValues] = React.useState>({ - 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) => { } /> } /> } /> - ); }; From 889916d8962435d0fee51d39937626f120d07025 Mon Sep 17 00:00:00 2001 From: Charles Date: Fri, 4 Nov 2022 10:12:17 -0300 Subject: [PATCH 2/3] chore: add changes --- ...react-toolbar-bac826cc-5a66-447f-ab37-f85d8df68fb9.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-toolbar-bac826cc-5a66-447f-ab37-f85d8df68fb9.json diff --git a/change/@fluentui-react-toolbar-bac826cc-5a66-447f-ab37-f85d8df68fb9.json b/change/@fluentui-react-toolbar-bac826cc-5a66-447f-ab37-f85d8df68fb9.json new file mode 100644 index 0000000000000..5d22ae19dc707 --- /dev/null +++ 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": "chassunc@microsoft.com", + "dependentChangeType": "none" +} From 5714272abd288d0f02152647d8b1833eab73d63f Mon Sep 17 00:00:00 2001 From: Charles Date: Sun, 6 Nov 2022 18:54:09 -0300 Subject: [PATCH 3/3] chore: add tests --- .../ToolbarRadioButton.test.tsx | 47 +++++++++++++++++++ 1 file changed, 47 insertions(+) diff --git a/packages/react-components/react-toolbar/src/components/ToolbarRadioButton/ToolbarRadioButton.test.tsx b/packages/react-components/react-toolbar/src/components/ToolbarRadioButton/ToolbarRadioButton.test.tsx index 2d8d20a585023..466dc3cb4967f 100644 --- a/packages/react-components/react-toolbar/src/components/ToolbarRadioButton/ToolbarRadioButton.test.tsx +++ b/packages/react-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( + + + italic + + + bold + + , + ); + + 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( + + + italic + + + bold + + , + ); + + userEvent.click(getByText('bold')); + + expect(getByText('bold').getAttribute('aria-pressed')).toBe('true'); + }); });