fix(react-toolbar): ToolbarRadioButton should respect "size" prop

change/@fluentui-react-toolbar-bf51238a-5c69-41cd-9cdf-32e82f044fb0.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: ToolbarRadioButton should respect \"size\" prop",
+  "packageName": "@fluentui/react-toolbar",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-toolbar/library/src/components/ToolbarRadioButton/ToolbarRadioButton.types.ts

@@ -21,4 +21,4 @@ export type ToolbarRadioButtonState = ComponentState<Partial<ButtonSlots>> &
   Required<Pick<ToggleButtonProps, 'checked'>> &
   Pick<ToolbarRadioButtonProps, 'name' | 'value'>;
 
-export type ToolbarRadioButtonBaseState = DistributiveOmit<ToolbarRadioButtonState, 'appearance'>;
+export type ToolbarRadioButtonBaseState = DistributiveOmit<ToolbarRadioButtonState, 'appearance' | 'size'>;

packages/react-components/react-toolbar/library/src/components/ToolbarRadioButton/useToolbarRadioButton.test.tsx

@@ -0,0 +1,46 @@
+import { renderHook } from '@testing-library/react-hooks';
+import * as React from 'react';
+
+import { ToolbarContext } from '../Toolbar/ToolbarContext';
+import { useToolbarRadioButton_unstable } from './useToolbarRadioButton';
+import type { ToolbarRadioButtonProps } from './ToolbarRadioButton.types';
+
+const refMock = React.createRef<HTMLButtonElement>();
+const propsMock: ToolbarRadioButtonProps = {
+  name: 'test-radio',
+  value: 'test-value',
+};
+
+const Wrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  return (
+    <ToolbarContext.Provider value={{ size: 'large', vertical: false, checkedValues: {} }}>
+      {children}
+    </ToolbarContext.Provider>
+  );
+};
+
+describe('useToolbarRadioButton', () => {
+  describe('size', () => {
+    it('applies the medium size by default', () => {
+      const { result } = renderHook(() => useToolbarRadioButton_unstable(propsMock, refMock));
+
+      expect(result.current.size).toBe('medium');
+    });
+
+    it('applies the size from a context', () => {
+      const { result } = renderHook(() => useToolbarRadioButton_unstable(propsMock, refMock), {
+        wrapper: Wrapper,
+      });
+
+      expect(result.current.size).toBe('large');
+    });
+
+    it('applies the size from props over context', () => {
+      const { result } = renderHook(() => useToolbarRadioButton_unstable({ ...propsMock, size: 'small' }, refMock), {
+        wrapper: Wrapper,
+      });
+
+      expect(result.current.size).toBe('small');
+    });
+  });
+});

packages/react-components/react-toolbar/library/src/components/ToolbarRadioButton/useToolbarRadioButton.ts

@@ -24,10 +24,12 @@ export const useToolbarRadioButton_unstable = (
   const { appearance = 'secondary' } = props;
   const size = useToolbarContext_unstable(ctx => ctx.size);
   const state = useToolbarRadioButtonBase_unstable(props, ref);
+
   return {
     ...state,
+
     appearance,
-    size,
+    size: props.size || size,
   };
 };