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 0000000000000..a56684cea29e7 --- /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 abddbac54afcc..05dfaa620a01a 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 { if (name && value) { @@ -57,9 +55,7 @@ export const useToolbar_unstable = (props: ToolbarProps, ref: React.Ref ({ ...s, [name]: newCheckedItems })); } }, ); @@ -71,7 +67,6 @@ export const useToolbar_unstable = (props: ToolbarProps, ref: React.Ref ({ ...s, [name]: [value] })); } }, ); @@ -83,3 +78,29 @@ export const useToolbar_unstable = (props: ToolbarProps, ref: React.Ref, +) => { + 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 7b221bc1051a0..32a8760dfdf38 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>({ edit: ['cut', 'paste'] }); + const [checkedValues, setCheckedValues] = React.useState>({ + 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 ( - } name="edit" value="cut" /> - } name="edit" value="paste" /> + } name="textOptions" value="bold" /> + } name="textOptions" value="italic" /> ); }; 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 fa3a97bb25482..7d95d4f7cc191 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) => ( overflowId="underline-1" overflowGroupId="1" appearance="subtle" + aria-label="Italic option ( Group 1 )" icon={} /> @@ -135,6 +136,7 @@ export const OverflowItems = (props: Partial) => ( overflowId="bold-1" overflowGroupId="1" appearance="subtle" + aria-label="Bold option ( Group 1 )" icon={} /> @@ -144,6 +146,7 @@ export const OverflowItems = (props: Partial) => ( overflowId="underline-2" overflowGroupId="2" appearance="subtle" + aria-label="Underline option ( Group 2 )" icon={} /> @@ -151,6 +154,7 @@ export const OverflowItems = (props: Partial) => ( overflowId="bold-2" overflowGroupId="2" appearance="subtle" + aria-label="Bold option ( Group 2 )" icon={} /> @@ -158,6 +162,7 @@ export const OverflowItems = (props: Partial) => ( overflowId="italic-1" overflowGroupId="2" appearance="subtle" + aria-label="Italic option ( Group 2 )" icon={} /> @@ -165,6 +170,7 @@ export const OverflowItems = (props: Partial) => ( overflowId="underline-3" overflowGroupId="2" appearance="subtle" + aria-label="Underline option ( Group 2 )" icon={} /> @@ -172,6 +178,7 @@ export const OverflowItems = (props: Partial) => ( overflowId="bold-3" overflowGroupId="2" appearance="subtle" + aria-label="Bold option ( Group 2 )" icon={} /> @@ -181,6 +188,7 @@ export const OverflowItems = (props: Partial) => ( overflowId="underline-4" overflowGroupId="3" appearance="subtle" + aria-label="Underline option ( Group 3 )" icon={} /> @@ -188,6 +196,7 @@ export const OverflowItems = (props: Partial) => ( overflowId="bold-4" overflowGroupId="3" appearance="subtle" + aria-label="Bold option ( Group 3 )" icon={} /> @@ -195,6 +204,7 @@ export const OverflowItems = (props: Partial) => ( overflowId="italic-2" overflowGroupId="3" appearance="subtle" + aria-label="Italic option ( Group 3 )" icon={} />