From 6be1fb04f1eb641b9e5e456c69e874b9d97d3590 Mon Sep 17 00:00:00 2001
From: Charles <chassunc@microsoft.com>
Date: Fri, 21 Oct 2022 17:57:47 -0300
Subject: [PATCH 01/10] feat: replace ToolbarRadio implementation by usage of
 toggle button as radio

---
 .../src/components/Toolbar/Toolbar.types.ts   | 13 ++++--
 .../src/components/Toolbar/ToolbarContext.ts  |  1 +
 .../src/components/Toolbar/useToolbar.ts      | 14 ++++++
 .../Toolbar/useToolbarContextValues.tsx       |  3 +-
 .../ToolbarRadio/ToolbarRadio.test.tsx        | 10 +++--
 .../components/ToolbarRadio/ToolbarRadio.tsx  | 14 +++---
 .../ToolbarRadio/ToolbarRadio.types.ts        | 23 ++++++----
 .../__snapshots__/ToolbarRadio.test.tsx.snap  | 34 ---------------
 .../ToolbarRadio/useToolbarRadio.ts           | 43 +++++++++++++++++++
 .../ToolbarRadio/useToolbarRadioStyles.ts     | 38 +++++-----------
 .../ToolbarRadioGroup.test.tsx                | 19 --------
 .../ToolbarRadioGroup/ToolbarRadioGroup.tsx   | 19 --------
 .../ToolbarRadioGroup.types.ts                | 20 ---------
 .../ToolbarRadioGroup.test.tsx.snap           | 12 ------
 .../contexts/useRadioGroupContextValues.ts    | 20 ---------
 .../src/components/ToolbarRadioGroup/index.ts |  2 -
 .../useToolbarRadioGroupStyles.ts             | 27 ------------
 .../react-toolbar/src/index.ts                |  7 ---
 .../stories/Toolbar/ToolbarRadio.stories.tsx  | 12 ++++++
 .../ToolbarRadioControlled.stories.tsx        | 24 +++++++++++
 .../src/stories/Toolbar/index.stories.tsx     |  2 +
 21 files changed, 145 insertions(+), 212 deletions(-)
 delete mode 100644 packages/react-components/react-toolbar/src/components/ToolbarRadio/__snapshots__/ToolbarRadio.test.tsx.snap
 create mode 100644 packages/react-components/react-toolbar/src/components/ToolbarRadio/useToolbarRadio.ts
 delete mode 100644 packages/react-components/react-toolbar/src/components/ToolbarRadioGroup/ToolbarRadioGroup.test.tsx
 delete mode 100644 packages/react-components/react-toolbar/src/components/ToolbarRadioGroup/ToolbarRadioGroup.tsx
 delete mode 100644 packages/react-components/react-toolbar/src/components/ToolbarRadioGroup/ToolbarRadioGroup.types.ts
 delete mode 100644 packages/react-components/react-toolbar/src/components/ToolbarRadioGroup/__snapshots__/ToolbarRadioGroup.test.tsx.snap
 delete mode 100644 packages/react-components/react-toolbar/src/components/ToolbarRadioGroup/contexts/useRadioGroupContextValues.ts
 delete mode 100644 packages/react-components/react-toolbar/src/components/ToolbarRadioGroup/index.ts
 delete mode 100644 packages/react-components/react-toolbar/src/components/ToolbarRadioGroup/useToolbarRadioGroupStyles.ts
 create mode 100644 packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarRadio.stories.tsx
 create mode 100644 packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarRadioControlled.stories.tsx

diff --git a/packages/react-components/react-toolbar/src/components/Toolbar/Toolbar.types.ts b/packages/react-components/react-toolbar/src/components/Toolbar/Toolbar.types.ts
index b5bc5288aa4ea2..2fba77e187e27c 100644
--- a/packages/react-components/react-toolbar/src/components/Toolbar/Toolbar.types.ts
+++ b/packages/react-components/react-toolbar/src/components/Toolbar/Toolbar.types.ts
@@ -7,7 +7,7 @@ export type ToolbarSlots = {
 
 export type ToolbarCheckedValueChangeData = {
   /** The items for this value that are checked */
-  checkedItems: string[];
+  checkedItems: string[] | string;
   /** The name of the value */
   name: string;
 };
@@ -34,12 +34,12 @@ export type ToolbarProps = ComponentProps<ToolbarSlots> & {
   /**
    * Map of all checked values
    */
-  checkedValues?: Record<string, string[]>;
+  checkedValues?: Record<string, string[] | string>;
 
   /**
    * Default values to be checked on mount
    */
-  defaultCheckedValues?: Record<string, string[]>;
+  defaultCheckedValues?: Record<string, string[] | string>;
 
   /**
    * Callback when checked items change for value with a name
@@ -60,17 +60,22 @@ export type ToolbarState = ComponentState<ToolbarSlots> &
      * Toggles the state of a ToggleButton item
      */
     handleToggleButton: ToggableHandler;
+    /*
+     * Toggles the state of a ToggleButton item
+     */
+    handleRadio: ToggableHandler;
   };
 
 export type ToolbarContextValue = Pick<ToolbarState, 'size' | 'vertical' | 'checkedValues'> & {
   handleToggleButton?: ToggableHandler;
+  handleRadio?: ToggableHandler;
 };
 
 export type ToolbarContextValues = {
   toolbar: ToolbarContextValue;
 };
 
-export type UninitializedToolbarState = Omit<ToolbarState, 'checkedValues' | 'handleToggleButton'> &
+export type UninitializedToolbarState = Omit<ToolbarState, 'checkedValues' | 'handleToggleButton' | 'handleRadio'> &
   Partial<Pick<ToolbarState, 'checkedValues'>>;
 
 export type ToggableHandler = (
diff --git a/packages/react-components/react-toolbar/src/components/Toolbar/ToolbarContext.ts b/packages/react-components/react-toolbar/src/components/Toolbar/ToolbarContext.ts
index 5201fd334bde1b..59e68867353bc5 100644
--- a/packages/react-components/react-toolbar/src/components/Toolbar/ToolbarContext.ts
+++ b/packages/react-components/react-toolbar/src/components/Toolbar/ToolbarContext.ts
@@ -7,6 +7,7 @@ export const ToolbarContext = createContext<ToolbarContextValue | undefined>(und
 const toolbarContextDefaultValue: ToolbarContextValue = {
   size: 'medium' as 'medium',
   handleToggleButton: () => null,
+  handleRadio: () => null,
   vertical: false,
   checkedValues: {},
 };
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 7bff9a5d37fb82..15dce699728b4c 100644
--- a/packages/react-components/react-toolbar/src/components/Toolbar/useToolbar.ts
+++ b/packages/react-components/react-toolbar/src/components/Toolbar/useToolbar.ts
@@ -64,9 +64,23 @@ export const useToolbar_unstable = (props: ToolbarProps, ref: React.Ref<HTMLElem
     },
   );
 
+  const handleRadio: ToggableHandler = useEventCallback(
+    (e: React.MouseEvent | React.KeyboardEvent, name?: string, value?: string, checked?: boolean) => {
+      if (name && value) {
+        checkedValues?.[name];
+        onCheckedValueChange?.(e, {
+          name,
+          checkedItems: checkedValues?.[name],
+        });
+        setCheckedValues(s => ({ ...s, [name]: value }));
+      }
+    },
+  );
+
   return {
     ...initialState,
     handleToggleButton,
+    handleRadio,
     checkedValues: checkedValues ?? {},
   };
 };
diff --git a/packages/react-components/react-toolbar/src/components/Toolbar/useToolbarContextValues.tsx b/packages/react-components/react-toolbar/src/components/Toolbar/useToolbarContextValues.tsx
index c31cefe2d8dee6..7426e78e1af82d 100644
--- a/packages/react-components/react-toolbar/src/components/Toolbar/useToolbarContextValues.tsx
+++ b/packages/react-components/react-toolbar/src/components/Toolbar/useToolbarContextValues.tsx
@@ -1,12 +1,13 @@
 import type { ToolbarContextValue, ToolbarContextValues, ToolbarState } from './Toolbar.types';
 
 export function useToolbarContextValues_unstable(state: ToolbarState): ToolbarContextValues {
-  const { size, handleToggleButton, vertical, checkedValues } = state;
+  const { size, handleToggleButton, vertical, checkedValues, handleRadio } = state;
   // This context is created with "@fluentui/react-context-selector", these is no sense to memoize it
   const toolbar: ToolbarContextValue = {
     size,
     vertical,
     handleToggleButton,
+    handleRadio,
     checkedValues,
   };
 
diff --git a/packages/react-components/react-toolbar/src/components/ToolbarRadio/ToolbarRadio.test.tsx b/packages/react-components/react-toolbar/src/components/ToolbarRadio/ToolbarRadio.test.tsx
index efeb576802f2af..03cf16fee26ead 100644
--- a/packages/react-components/react-toolbar/src/components/ToolbarRadio/ToolbarRadio.test.tsx
+++ b/packages/react-components/react-toolbar/src/components/ToolbarRadio/ToolbarRadio.test.tsx
@@ -2,19 +2,23 @@ import * as React from 'react';
 import { render } from '@testing-library/react';
 import { ToolbarRadio } from './ToolbarRadio';
 import { isConformant } from '../../common/isConformant';
+import { ToggleButtonProps } from '@fluentui/react-button';
 
 describe('ToolbarRadio', () => {
   isConformant({
-    Component: ToolbarRadio,
+    Component: ToolbarRadio as React.FunctionComponent<ToggleButtonProps>,
     displayName: 'ToolbarRadio',
-    primarySlot: 'input',
     disabledTests: ['component-has-static-classnames-object'],
   });
 
   // TODO add more tests here, and create visual regression tests in /apps/vr-tests
 
   it('renders a default state', () => {
-    const result = render(<ToolbarRadio />);
+    const result = render(
+      <ToolbarRadio name="name" value="value">
+        Default ToolbarRadio
+      </ToolbarRadio>,
+    );
     expect(result.container).toMatchSnapshot();
   });
 });
diff --git a/packages/react-components/react-toolbar/src/components/ToolbarRadio/ToolbarRadio.tsx b/packages/react-components/react-toolbar/src/components/ToolbarRadio/ToolbarRadio.tsx
index b19a7d7a5894e6..c06922a1e585d6 100644
--- a/packages/react-components/react-toolbar/src/components/ToolbarRadio/ToolbarRadio.tsx
+++ b/packages/react-components/react-toolbar/src/components/ToolbarRadio/ToolbarRadio.tsx
@@ -1,18 +1,18 @@
 import * as React from 'react';
 import type { ToolbarRadioProps } from './ToolbarRadio.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
-import { useRadio_unstable, renderRadio_unstable } from '@fluentui/react-radio';
+import { renderToggleButton_unstable } from '@fluentui/react-button';
+import { useToolbarRadio_unstable } from './useToolbarRadio';
 import { useToolbarRadioStyles_unstable } from './useToolbarRadioStyles';
-import { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';
 
 /**
- * ToolbarRadio component is a Radio to be used inside Toolbar
+ * ToolbarToggleButton component
  */
 export const ToolbarRadio: ForwardRefComponent<ToolbarRadioProps> = React.forwardRef((props, ref) => {
-  const size = useToolbarContext_unstable(ctx => ctx.size);
-  const state = useRadio_unstable(props, ref);
-  useToolbarRadioStyles_unstable({ size, ...state });
-  return renderRadio_unstable(state);
+  const state = useToolbarRadio_unstable(props, ref);
+
+  useToolbarRadioStyles_unstable(state);
+  return renderToggleButton_unstable(state);
 }) as ForwardRefComponent<ToolbarRadioProps>;
 
 ToolbarRadio.displayName = 'ToolbarRadio';
diff --git a/packages/react-components/react-toolbar/src/components/ToolbarRadio/ToolbarRadio.types.ts b/packages/react-components/react-toolbar/src/components/ToolbarRadio/ToolbarRadio.types.ts
index 323d5d6fcc0fdd..59d0e831df1f4f 100644
--- a/packages/react-components/react-toolbar/src/components/ToolbarRadio/ToolbarRadio.types.ts
+++ b/packages/react-components/react-toolbar/src/components/ToolbarRadio/ToolbarRadio.types.ts
@@ -1,15 +1,20 @@
-import { RadioState, RadioProps } from '@fluentui/react-radio';
+import type { ComponentProps, ComponentState } from '@fluentui/react-utilities';
+import { ToggleButtonProps, ButtonSlots, ToggleButtonState } from '@fluentui/react-button';
 
 /**
- * ToolbarRadio Props
+ * ToolbarToggleButton Props
  */
-export type ToolbarRadioProps = RadioProps & {
-  size?: 'small' | 'medium';
-};
+export type ToolbarRadioProps = ComponentProps<ButtonSlots> &
+  Partial<Pick<ToggleButtonProps, 'disabled' | 'disabledFocusable' | 'size'>> & {
+    appearance?: 'primary' | 'subtle';
+    name: string;
+    value: string;
+  };
 
 /**
- * State used in rendering ToolbarRadio
+ * State used in rendering ToolbarToggleButton
  */
-export type ToolbarRadioState = RadioState & {
-  size?: 'small' | 'medium';
-};
+export type ToolbarRadioState = ComponentState<Partial<ButtonSlots>> &
+  ToggleButtonState &
+  Required<Pick<ToggleButtonProps, 'checked'>> &
+  Pick<ToolbarRadioProps, 'name' | 'value'>;
diff --git a/packages/react-components/react-toolbar/src/components/ToolbarRadio/__snapshots__/ToolbarRadio.test.tsx.snap b/packages/react-components/react-toolbar/src/components/ToolbarRadio/__snapshots__/ToolbarRadio.test.tsx.snap
deleted file mode 100644
index 8738b701c6762d..00000000000000
--- a/packages/react-components/react-toolbar/src/components/ToolbarRadio/__snapshots__/ToolbarRadio.test.tsx.snap
+++ /dev/null
@@ -1,34 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ToolbarRadio renders a default state 1`] = `
-<div>
-  <span
-    class="fui-Radio"
-  >
-    <input
-      class="fui-Radio__input"
-      id="radio-8"
-      type="radio"
-    />
-    <div
-      aria-hidden="true"
-      class="fui-Radio__indicator"
-    >
-      <svg
-        aria-hidden="true"
-        class=""
-        fill="currentColor"
-        height="1em"
-        viewBox="0 0 20 20"
-        width="1em"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M10 2a8 8 0 100 16 8 8 0 000-16z"
-          fill="currentColor"
-        />
-      </svg>
-    </div>
-  </span>
-</div>
-`;
diff --git a/packages/react-components/react-toolbar/src/components/ToolbarRadio/useToolbarRadio.ts b/packages/react-components/react-toolbar/src/components/ToolbarRadio/useToolbarRadio.ts
new file mode 100644
index 00000000000000..fda8920429280b
--- /dev/null
+++ b/packages/react-components/react-toolbar/src/components/ToolbarRadio/useToolbarRadio.ts
@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { useToggleButton_unstable } from '@fluentui/react-button';
+import { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';
+import { ToolbarRadioProps, ToolbarRadioState } from './ToolbarRadio.types';
+
+/**
+ * Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns
+ * processed state.
+ * @param props - User provided props to the ToggleButton component.
+ * @param ref - User provided ref to be passed to the ToggleButton component.
+ */
+export const useToolbarRadio_unstable = (
+  props: ToolbarRadioProps,
+  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,
+): ToolbarRadioState => {
+  const handleRadio = useToolbarContext_unstable(ctx => ctx.handleRadio);
+  const checked = useToolbarContext_unstable(ctx => !!ctx.checkedValues[props.name]?.includes(props.value));
+  const size = useToolbarContext_unstable(ctx => ctx.size);
+
+  const { onClick: onClickOriginal } = props;
+  const toggleButtonState = useToggleButton_unstable({ size, checked, ...props }, ref);
+  const state: ToolbarRadioState = {
+    ...toggleButtonState,
+    name: props.name,
+    value: props.value,
+  };
+
+  const handleOnClick = (
+    e: React.MouseEvent<HTMLButtonElement, MouseEvent> & React.MouseEvent<HTMLAnchorElement, MouseEvent>,
+  ) => {
+    if (state.disabled) {
+      e.preventDefault();
+      e.stopPropagation();
+      return;
+    }
+
+    handleRadio?.(e, state.name, state.value, state.checked);
+    onClickOriginal?.(e);
+  };
+
+  state.root.onClick = handleOnClick;
+  return state;
+};
diff --git a/packages/react-components/react-toolbar/src/components/ToolbarRadio/useToolbarRadioStyles.ts b/packages/react-components/react-toolbar/src/components/ToolbarRadio/useToolbarRadioStyles.ts
index 963bab584036f7..791bc7ed8770df 100644
--- a/packages/react-components/react-toolbar/src/components/ToolbarRadio/useToolbarRadioStyles.ts
+++ b/packages/react-components/react-toolbar/src/components/ToolbarRadio/useToolbarRadioStyles.ts
@@ -1,38 +1,20 @@
-import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
-import { useRadioStyles_unstable } from '@fluentui/react-radio';
+import { tokens } from '@fluentui/react-theme';
+import { makeStyles, mergeClasses } from '@griffel/react';
+import { useToggleButtonStyles_unstable } from '@fluentui/react-button';
 import { ToolbarRadioState } from './ToolbarRadio.types';
 
 const useBaseStyles = makeStyles({
-  root: {
-    ...shorthands.padding('0px'),
-  },
-});
-
-const useSmallStyles = makeStyles({
-  label: {
-    fontSize: 'var(--fontSizeBase200)',
-  },
-  root: {
-    columnGap: '8px',
+  selected: {
+    color: tokens.colorBrandForeground1,
   },
 });
 
 /**
- * Apply styling to the ToolbarRadio slots based on the state
+ * Apply styling to the ToolbarToggleButton slots based on the state
  */
 export const useToolbarRadioStyles_unstable = (state: ToolbarRadioState) => {
-  useRadioStyles_unstable(state);
-  const baseToolbarRadioStyles = useBaseStyles();
-  const toolbarRadioSmallStyles = useSmallStyles();
-  if (state.label) {
-    state.label.className = mergeClasses(
-      state.label.className,
-      state.size === 'small' && toolbarRadioSmallStyles.label,
-    );
-  }
-  state.root.className = mergeClasses(
-    state.root.className,
-    baseToolbarRadioStyles.root,
-    state.size === 'small' && toolbarRadioSmallStyles.root,
-  );
+  useToggleButtonStyles_unstable(state);
+  const toggleButtonStyles = useBaseStyles();
+
+  state.root.className = mergeClasses(state.root.className, state.checked && toggleButtonStyles.selected);
 };
diff --git a/packages/react-components/react-toolbar/src/components/ToolbarRadioGroup/ToolbarRadioGroup.test.tsx b/packages/react-components/react-toolbar/src/components/ToolbarRadioGroup/ToolbarRadioGroup.test.tsx
deleted file mode 100644
index 12a76373dc9008..00000000000000
--- a/packages/react-components/react-toolbar/src/components/ToolbarRadioGroup/ToolbarRadioGroup.test.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import * as React from 'react';
-import { render } from '@testing-library/react';
-import { ToolbarRadioGroup } from './ToolbarRadioGroup';
-import { isConformant } from '../../common/isConformant';
-
-describe('ToolbarRadioGroup', () => {
-  isConformant({
-    Component: ToolbarRadioGroup,
-    displayName: 'ToolbarRadioGroup',
-    disabledTests: ['component-has-static-classnames-object'],
-  });
-
-  // TODO add more tests here, and create visual regression tests in /apps/vr-tests
-
-  it('renders a default state', () => {
-    const result = render(<ToolbarRadioGroup>Default ToolbarRadioGroup</ToolbarRadioGroup>);
-    expect(result.container).toMatchSnapshot();
-  });
-});
diff --git a/packages/react-components/react-toolbar/src/components/ToolbarRadioGroup/ToolbarRadioGroup.tsx b/packages/react-components/react-toolbar/src/components/ToolbarRadioGroup/ToolbarRadioGroup.tsx
deleted file mode 100644
index 8af8d9bb52f8a7..00000000000000
--- a/packages/react-components/react-toolbar/src/components/ToolbarRadioGroup/ToolbarRadioGroup.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import * as React from 'react';
-import type { ToolbarRadioGroupProps } from './ToolbarRadioGroup.types';
-import type { ForwardRefComponent } from '@fluentui/react-utilities';
-import { useRadioGroup_unstable, renderRadioGroup_unstable } from '@fluentui/react-radio';
-import { useToolbarRadioGroupStyles_unstable } from './useToolbarRadioGroupStyles';
-import { useRadioGroupContextValues } from './contexts/useRadioGroupContextValues';
-
-/**
- * ToolbarRadioGroup component is a RadioGroup to be used inside Toolbar
- * which will keep always horizontal layout
- */
-export const ToolbarRadioGroup: ForwardRefComponent<ToolbarRadioGroupProps> = React.forwardRef((props, ref) => {
-  const state = useRadioGroup_unstable({ layout: 'horizontal', ...props }, ref);
-  const contextValues = useRadioGroupContextValues(state);
-  useToolbarRadioGroupStyles_unstable(state);
-  return renderRadioGroup_unstable(state, contextValues);
-});
-
-ToolbarRadioGroup.displayName = 'ToolbarRadioGroup';
diff --git a/packages/react-components/react-toolbar/src/components/ToolbarRadioGroup/ToolbarRadioGroup.types.ts b/packages/react-components/react-toolbar/src/components/ToolbarRadioGroup/ToolbarRadioGroup.types.ts
deleted file mode 100644
index ea37a6e8af080c..00000000000000
--- a/packages/react-components/react-toolbar/src/components/ToolbarRadioGroup/ToolbarRadioGroup.types.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { RadioGroupProps, RadioGroupState } from '@fluentui/react-radio';
-
-/**
- * ToolbarRadioGroup Props
- */
-export type ToolbarRadioGroupProps = RadioGroupProps;
-
-/**
- * State used in rendering ToolbarRadioGroup
- */
-export type ToolbarRadioGroupState = RadioGroupState;
-
-export type RadioGroupContextValue = Pick<
-  RadioGroupProps,
-  'name' | 'value' | 'defaultValue' | 'disabled' | 'layout' | 'required'
->;
-
-export type RadioGroupContextValues = {
-  radioGroup: RadioGroupContextValue;
-};
diff --git a/packages/react-components/react-toolbar/src/components/ToolbarRadioGroup/__snapshots__/ToolbarRadioGroup.test.tsx.snap b/packages/react-components/react-toolbar/src/components/ToolbarRadioGroup/__snapshots__/ToolbarRadioGroup.test.tsx.snap
deleted file mode 100644
index 8155e6e59b06c0..00000000000000
--- a/packages/react-components/react-toolbar/src/components/ToolbarRadioGroup/__snapshots__/ToolbarRadioGroup.test.tsx.snap
+++ /dev/null
@@ -1,12 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ToolbarRadioGroup renders a default state 1`] = `
-<div>
-  <div
-    class="fui-RadioGroup"
-    role="radiogroup"
-  >
-    Default ToolbarRadioGroup
-  </div>
-</div>
-`;
diff --git a/packages/react-components/react-toolbar/src/components/ToolbarRadioGroup/contexts/useRadioGroupContextValues.ts b/packages/react-components/react-toolbar/src/components/ToolbarRadioGroup/contexts/useRadioGroupContextValues.ts
deleted file mode 100644
index f8bb4cb451032b..00000000000000
--- a/packages/react-components/react-toolbar/src/components/ToolbarRadioGroup/contexts/useRadioGroupContextValues.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import type {
-  RadioGroupContextValue,
-  RadioGroupContextValues,
-  ToolbarRadioGroupState,
-} from '../ToolbarRadioGroup.types';
-
-export const useRadioGroupContextValues = (state: ToolbarRadioGroupState): RadioGroupContextValues => {
-  const { name, value, defaultValue, disabled, layout, required } = state;
-
-  const radioGroup: RadioGroupContextValue = {
-    name,
-    value,
-    defaultValue,
-    disabled,
-    layout,
-    required,
-  };
-
-  return { radioGroup };
-};
diff --git a/packages/react-components/react-toolbar/src/components/ToolbarRadioGroup/index.ts b/packages/react-components/react-toolbar/src/components/ToolbarRadioGroup/index.ts
deleted file mode 100644
index fb331a3a89ff35..00000000000000
--- a/packages/react-components/react-toolbar/src/components/ToolbarRadioGroup/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './ToolbarRadioGroup';
-export * from './ToolbarRadioGroup.types';
diff --git a/packages/react-components/react-toolbar/src/components/ToolbarRadioGroup/useToolbarRadioGroupStyles.ts b/packages/react-components/react-toolbar/src/components/ToolbarRadioGroup/useToolbarRadioGroupStyles.ts
deleted file mode 100644
index 697f893b9799fc..00000000000000
--- a/packages/react-components/react-toolbar/src/components/ToolbarRadioGroup/useToolbarRadioGroupStyles.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
-import { useRadioGroupStyles_unstable } from '@fluentui/react-radio';
-import { ToolbarRadioGroupState } from './ToolbarRadioGroup.types';
-
-const useBaseStyles = makeStyles({
-  root: {
-    display: 'flex',
-    alignItems: 'center',
-    ...shorthands.gap('8px'),
-  },
-});
-
-// const useSmallStyles = makeStyles({
-//   label: {
-//     fontSize: 'var(--fontSizeBase200)',
-//   },
-// });
-
-/**
- * Apply styling to the ToolbarRadio slots based on the state
- */
-export const useToolbarRadioGroupStyles_unstable = (state: ToolbarRadioGroupState) => {
-  useRadioGroupStyles_unstable(state);
-  const baseToolbarRadioStyles = useBaseStyles();
-
-  state.root.className = mergeClasses(state.root.className, baseToolbarRadioStyles.root);
-};
diff --git a/packages/react-components/react-toolbar/src/index.ts b/packages/react-components/react-toolbar/src/index.ts
index bf1991f4e5f784..ad39d82c587738 100644
--- a/packages/react-components/react-toolbar/src/index.ts
+++ b/packages/react-components/react-toolbar/src/index.ts
@@ -14,10 +14,3 @@ export { ToolbarToggleButton } from './ToolbarToggleButton';
 export type { ToolbarToggleButtonProps, ToolbarToggleButtonState } from './ToolbarToggleButton';
 export { ToolbarRadio } from './ToolbarRadio';
 export type { ToolbarRadioProps, ToolbarRadioState } from './ToolbarRadio';
-export { ToolbarRadioGroup } from './ToolbarRadioGroup';
-export type {
-  RadioGroupContextValue,
-  RadioGroupContextValues,
-  ToolbarRadioGroupProps,
-  ToolbarRadioGroupState,
-} from './ToolbarRadioGroup';
diff --git a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarRadio.stories.tsx b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarRadio.stories.tsx
new file mode 100644
index 00000000000000..f03af6b943c629
--- /dev/null
+++ b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarRadio.stories.tsx
@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { TextBold24Regular, TextItalic24Regular, TextUnderline24Regular } from '@fluentui/react-icons';
+import { Toolbar, ToolbarRadio } from '@fluentui/react-toolbar';
+import type { ToolbarProps } from '@fluentui/react-toolbar';
+
+export const Radio = (props: Partial<ToolbarProps>) => (
+  <Toolbar {...props}>
+    <ToolbarRadio name="text-style" value="italic" icon={<TextItalic24Regular />} />
+    <ToolbarRadio name="text-style" value="bold" icon={<TextBold24Regular />} />
+    <ToolbarRadio name="text-style" value="underline" icon={<TextUnderline24Regular />} />
+  </Toolbar>
+);
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
new file mode 100644
index 00000000000000..3f55f61565f9e6
--- /dev/null
+++ b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarRadioControlled.stories.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { TextBold24Regular, TextItalic24Regular, TextUnderline24Regular } from '@fluentui/react-icons';
+import { Toolbar, ToolbarRadio, ToolbarDivider } 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[] | string>>({
+    edit: ['cut', 'paste'],
+  });
+  const onChange: ToolbarProps['onCheckedValueChange'] = (e, { name, checkedItems }) => {
+    setCheckedValues(s => {
+      return s ? { ...s, [name]: checkedItems } : { [name]: checkedItems };
+    });
+  };
+
+  return (
+    <Toolbar checkedValues={checkedValues} onCheckedValueChange={onChange}>
+      <ToolbarRadio name="text-style" value="italic" icon={<TextItalic24Regular />} />
+      <ToolbarRadio name="text-style" value="bold" icon={<TextBold24Regular />} />
+      <ToolbarRadio name="text-style" value="underline" icon={<TextUnderline24Regular />} />
+      <ToolbarDivider />
+    </Toolbar>
+  );
+};
diff --git a/packages/react-components/react-toolbar/src/stories/Toolbar/index.stories.tsx b/packages/react-components/react-toolbar/src/stories/Toolbar/index.stories.tsx
index d913547c93e9df..396038d8975651 100644
--- a/packages/react-components/react-toolbar/src/stories/Toolbar/index.stories.tsx
+++ b/packages/react-components/react-toolbar/src/stories/Toolbar/index.stories.tsx
@@ -10,6 +10,8 @@ export { WithTooltip } from './ToolbarWithTooltip.stories';
 export { WithPopover } from './ToolbarWithPopover.stories';
 export { Subtle } from './ToolbarSubtle.stories';
 export { ControlledToggleButton } from './ToolbarControlledToggleButton.stories';
+export { Radio } from './ToolbarRadio.stories';
+export { ControlledRadio } from './ToolbarRadioControlled.stories';
 
 export default {
   title: 'Preview Components/Toolbar',

From d32993faeb6d72d35ab0f30400672088deb71d1d Mon Sep 17 00:00:00 2001
From: Charles <chassunc@microsoft.com>
Date: Fri, 21 Oct 2022 18:10:45 -0300
Subject: [PATCH 02/10] chore: add changes

---
 ...react-toolbar-87c0c30d-e652-4dd1-8f2c-27bb19adcbe5.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@fluentui-react-toolbar-87c0c30d-e652-4dd1-8f2c-27bb19adcbe5.json

diff --git a/change/@fluentui-react-toolbar-87c0c30d-e652-4dd1-8f2c-27bb19adcbe5.json b/change/@fluentui-react-toolbar-87c0c30d-e652-4dd1-8f2c-27bb19adcbe5.json
new file mode 100644
index 00000000000000..1b44a287f59cd4
--- /dev/null
+++ b/change/@fluentui-react-toolbar-87c0c30d-e652-4dd1-8f2c-27bb19adcbe5.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "feat: replace ToolbarRadio implementation by usage of toggle button as radio",
+  "packageName": "@fluentui/react-toolbar",
+  "email": "chassunc@microsoft.com",
+  "dependentChangeType": "none"
+}

From c2a7475af04323c271709f553dca5df794b87f81 Mon Sep 17 00:00:00 2001
From: Charles <chassunc@microsoft.com>
Date: Fri, 21 Oct 2022 18:16:12 -0300
Subject: [PATCH 03/10] chore: remove and update api

---
 .../react-toolbar/etc/react-toolbar.api.md    | 37 +++++--------------
 .../react-toolbar/src/ToolbarRadioGroup.ts    |  1 -
 2 files changed, 9 insertions(+), 29 deletions(-)
 delete mode 100644 packages/react-components/react-toolbar/src/ToolbarRadioGroup.ts

diff --git a/packages/react-components/react-toolbar/etc/react-toolbar.api.md b/packages/react-components/react-toolbar/etc/react-toolbar.api.md
index 51c3017aa5dce1..e02cfb52824696 100644
--- a/packages/react-components/react-toolbar/etc/react-toolbar.api.md
+++ b/packages/react-components/react-toolbar/etc/react-toolbar.api.md
@@ -14,24 +14,12 @@ import type { ComponentState } from '@fluentui/react-utilities';
 import { DividerSlots } from '@fluentui/react-divider';
 import { DividerState } from '@fluentui/react-divider';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
-import { RadioGroupProps } from '@fluentui/react-radio';
-import { RadioGroupState } from '@fluentui/react-radio';
-import { RadioProps } from '@fluentui/react-radio';
-import { RadioState } from '@fluentui/react-radio';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
 import { SlotClassNames } from '@fluentui/react-utilities';
 import { ToggleButtonProps } from '@fluentui/react-button';
 import { ToggleButtonState } from '@fluentui/react-button';
 
-// @public (undocumented)
-export type RadioGroupContextValue = Pick<RadioGroupProps, 'name' | 'value' | 'defaultValue' | 'disabled' | 'layout' | 'required'>;
-
-// @public (undocumented)
-export type RadioGroupContextValues = {
-    radioGroup: RadioGroupContextValue;
-};
-
 // @public
 export const renderToolbar_unstable: (state: ToolbarState, contextValues: ToolbarContextValues) => JSX.Element;
 
@@ -55,6 +43,7 @@ export const toolbarClassNames: SlotClassNames<ToolbarSlots>;
 // @public (undocumented)
 export type ToolbarContextValue = Pick<ToolbarState, 'size' | 'vertical' | 'checkedValues'> & {
     handleToggleButton?: ToggableHandler;
+    handleRadio?: ToggableHandler;
 };
 
 // @public (undocumented)
@@ -77,8 +66,8 @@ export type ToolbarDividerState = ComponentState<Partial<DividerSlots>> & Divide
 export type ToolbarProps = ComponentProps<ToolbarSlots> & {
     size?: 'small' | 'medium';
     vertical?: boolean;
-    checkedValues?: Record<string, string[]>;
-    defaultCheckedValues?: Record<string, string[]>;
+    checkedValues?: Record<string, string[] | string>;
+    defaultCheckedValues?: Record<string, string[] | string>;
     onCheckedValueChange?: (e: ToolbarCheckedValueChangeEvent, data: ToolbarCheckedValueChangeData) => void;
 };
 
@@ -86,23 +75,14 @@ export type ToolbarProps = ComponentProps<ToolbarSlots> & {
 export const ToolbarRadio: ForwardRefComponent<ToolbarRadioProps>;
 
 // @public
-export const ToolbarRadioGroup: ForwardRefComponent<ToolbarRadioGroupProps>;
-
-// @public
-export type ToolbarRadioGroupProps = RadioGroupProps;
-
-// @public
-export type ToolbarRadioGroupState = RadioGroupState;
-
-// @public
-export type ToolbarRadioProps = RadioProps & {
-    size?: 'small' | 'medium';
+export type ToolbarRadioProps = ComponentProps<ButtonSlots> & Partial<Pick<ToggleButtonProps, 'disabled' | 'disabledFocusable' | 'size'>> & {
+    appearance?: 'primary' | 'subtle';
+    name: string;
+    value: string;
 };
 
 // @public
-export type ToolbarRadioState = RadioState & {
-    size?: 'small' | 'medium';
-};
+export type ToolbarRadioState = ComponentState<Partial<ButtonSlots>> & ToggleButtonState & Required<Pick<ToggleButtonProps, 'checked'>> & Pick<ToolbarRadioProps, 'name' | 'value'>;
 
 // @public (undocumented)
 export type ToolbarSlots = {
@@ -112,6 +92,7 @@ export type ToolbarSlots = {
 // @public
 export type ToolbarState = ComponentState<ToolbarSlots> & Required<Pick<ToolbarProps, 'size' | 'checkedValues' | 'vertical'>> & Pick<ToolbarProps, 'defaultCheckedValues' | 'onCheckedValueChange'> & {
     handleToggleButton: ToggableHandler;
+    handleRadio: ToggableHandler;
 };
 
 // @public
diff --git a/packages/react-components/react-toolbar/src/ToolbarRadioGroup.ts b/packages/react-components/react-toolbar/src/ToolbarRadioGroup.ts
deleted file mode 100644
index f88bc1454546d9..00000000000000
--- a/packages/react-components/react-toolbar/src/ToolbarRadioGroup.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/ToolbarRadioGroup/index';

From 49066edae68c01207a0140973e93892b468b2c5e Mon Sep 17 00:00:00 2001
From: Charles <chassunc@microsoft.com>
Date: Mon, 24 Oct 2022 10:16:42 -0300
Subject: [PATCH 04/10] chore: update handler types

---
 .../react-toolbar/src/components/Toolbar/Toolbar.types.ts     | 4 ++--
 .../react-toolbar/src/components/Toolbar/useToolbar.ts        | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/react-components/react-toolbar/src/components/Toolbar/Toolbar.types.ts b/packages/react-components/react-toolbar/src/components/Toolbar/Toolbar.types.ts
index 2fba77e187e27c..87683f9c2cc7df 100644
--- a/packages/react-components/react-toolbar/src/components/Toolbar/Toolbar.types.ts
+++ b/packages/react-components/react-toolbar/src/components/Toolbar/Toolbar.types.ts
@@ -80,7 +80,7 @@ export type UninitializedToolbarState = Omit<ToolbarState, 'checkedValues' | 'ha
 
 export type ToggableHandler = (
   e: React.MouseEvent | React.KeyboardEvent,
-  name?: string,
-  value?: string,
+  name: string,
+  value: string,
   checked?: boolean,
 ) => void;
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 15dce699728b4c..27e854405a734e 100644
--- a/packages/react-components/react-toolbar/src/components/Toolbar/useToolbar.ts
+++ b/packages/react-components/react-toolbar/src/components/Toolbar/useToolbar.ts
@@ -48,7 +48,7 @@ export const useToolbar_unstable = (props: ToolbarProps, ref: React.Ref<HTMLElem
   const { onCheckedValueChange } = initialState;
 
   const handleToggleButton: ToggableHandler = useEventCallback(
-    (e: React.MouseEvent | React.KeyboardEvent, name?: string, value?: string, checked?: boolean) => {
+    (e: React.MouseEvent | React.KeyboardEvent, name: string, value: string, checked?: boolean) => {
       if (name && value) {
         const checkedItems = checkedValues?.[name] || [];
         const newCheckedItems = [...checkedItems];
@@ -65,7 +65,7 @@ export const useToolbar_unstable = (props: ToolbarProps, ref: React.Ref<HTMLElem
   );
 
   const handleRadio: ToggableHandler = useEventCallback(
-    (e: React.MouseEvent | React.KeyboardEvent, name?: string, value?: string, checked?: boolean) => {
+    (e: React.MouseEvent | React.KeyboardEvent, name: string, value: string, checked?: boolean) => {
       if (name && value) {
         checkedValues?.[name];
         onCheckedValueChange?.(e, {

From 577c64ae04977f288913393f35eb6c3c917c7d04 Mon Sep 17 00:00:00 2001
From: Charles <chassunc@microsoft.com>
Date: Mon, 24 Oct 2022 10:18:21 -0300
Subject: [PATCH 05/10] chore: delete line

---
 .../react-toolbar/src/components/Toolbar/useToolbar.ts           | 1 -
 1 file changed, 1 deletion(-)

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 27e854405a734e..129ec413ca48a9 100644
--- a/packages/react-components/react-toolbar/src/components/Toolbar/useToolbar.ts
+++ b/packages/react-components/react-toolbar/src/components/Toolbar/useToolbar.ts
@@ -67,7 +67,6 @@ export const useToolbar_unstable = (props: ToolbarProps, ref: React.Ref<HTMLElem
   const handleRadio: ToggableHandler = useEventCallback(
     (e: React.MouseEvent | React.KeyboardEvent, name: string, value: string, checked?: boolean) => {
       if (name && value) {
-        checkedValues?.[name];
         onCheckedValueChange?.(e, {
           name,
           checkedItems: checkedValues?.[name],

From cfd0b822ed8a44f7f6c6e75c60e20ef929cb9a72 Mon Sep 17 00:00:00 2001
From: Charles <chassunc@microsoft.com>
Date: Mon, 24 Oct 2022 10:22:29 -0300
Subject: [PATCH 06/10] chore: update checked items type

---
 .../react-toolbar/src/components/Toolbar/Toolbar.types.ts   | 6 +++---
 .../react-toolbar/src/components/Toolbar/useToolbar.ts      | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/react-components/react-toolbar/src/components/Toolbar/Toolbar.types.ts b/packages/react-components/react-toolbar/src/components/Toolbar/Toolbar.types.ts
index 87683f9c2cc7df..6f022ae8b7f4c4 100644
--- a/packages/react-components/react-toolbar/src/components/Toolbar/Toolbar.types.ts
+++ b/packages/react-components/react-toolbar/src/components/Toolbar/Toolbar.types.ts
@@ -7,7 +7,7 @@ export type ToolbarSlots = {
 
 export type ToolbarCheckedValueChangeData = {
   /** The items for this value that are checked */
-  checkedItems: string[] | string;
+  checkedItems: string[];
   /** The name of the value */
   name: string;
 };
@@ -34,12 +34,12 @@ export type ToolbarProps = ComponentProps<ToolbarSlots> & {
   /**
    * Map of all checked values
    */
-  checkedValues?: Record<string, string[] | string>;
+  checkedValues?: Record<string, string[]>;
 
   /**
    * Default values to be checked on mount
    */
-  defaultCheckedValues?: Record<string, string[] | string>;
+  defaultCheckedValues?: Record<string, string[]>;
 
   /**
    * Callback when checked items change for value with a name
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 129ec413ca48a9..abddbac54afccb 100644
--- a/packages/react-components/react-toolbar/src/components/Toolbar/useToolbar.ts
+++ b/packages/react-components/react-toolbar/src/components/Toolbar/useToolbar.ts
@@ -71,7 +71,7 @@ export const useToolbar_unstable = (props: ToolbarProps, ref: React.Ref<HTMLElem
           name,
           checkedItems: checkedValues?.[name],
         });
-        setCheckedValues(s => ({ ...s, [name]: value }));
+        setCheckedValues(s => ({ ...s, [name]: [value] }));
       }
     },
   );

From 886d59ea883d7ea23d458de463ae92a54a745f2e Mon Sep 17 00:00:00 2001
From: Charles <chassunc@microsoft.com>
Date: Mon, 24 Oct 2022 10:30:26 -0300
Subject: [PATCH 07/10] chore: rename

---
 .../react-toolbar/src/ToolbarRadio.ts          |  1 -
 .../react-toolbar/src/ToolbarRadioButton.ts    |  1 +
 .../components/ToolbarRadio/ToolbarRadio.tsx   | 18 ------------------
 .../src/components/ToolbarRadio/index.ts       |  2 --
 .../ToolbarRadioButton.test.tsx}               | 12 ++++++------
 .../ToolbarRadioButton/ToolbarRadioButton.tsx  | 18 ++++++++++++++++++
 .../ToolbarRadioButton.types.ts}               | 10 +++++-----
 .../src/components/ToolbarRadioButton/index.ts |  2 ++
 .../useToolbarRadioButton.ts}                  | 16 ++++++++--------
 .../useToolbarRadioButtonStyles.ts}            |  6 +++---
 .../react-toolbar/src/index.ts                 |  4 ++--
 11 files changed, 45 insertions(+), 45 deletions(-)
 delete mode 100644 packages/react-components/react-toolbar/src/ToolbarRadio.ts
 create mode 100644 packages/react-components/react-toolbar/src/ToolbarRadioButton.ts
 delete mode 100644 packages/react-components/react-toolbar/src/components/ToolbarRadio/ToolbarRadio.tsx
 delete mode 100644 packages/react-components/react-toolbar/src/components/ToolbarRadio/index.ts
 rename packages/react-components/react-toolbar/src/components/{ToolbarRadio/ToolbarRadio.test.tsx => ToolbarRadioButton/ToolbarRadioButton.test.tsx} (63%)
 create mode 100644 packages/react-components/react-toolbar/src/components/ToolbarRadioButton/ToolbarRadioButton.tsx
 rename packages/react-components/react-toolbar/src/components/{ToolbarRadio/ToolbarRadio.types.ts => ToolbarRadioButton/ToolbarRadioButton.types.ts} (61%)
 create mode 100644 packages/react-components/react-toolbar/src/components/ToolbarRadioButton/index.ts
 rename packages/react-components/react-toolbar/src/components/{ToolbarRadio/useToolbarRadio.ts => ToolbarRadioButton/useToolbarRadioButton.ts} (68%)
 rename packages/react-components/react-toolbar/src/components/{ToolbarRadio/useToolbarRadioStyles.ts => ToolbarRadioButton/useToolbarRadioButtonStyles.ts} (68%)

diff --git a/packages/react-components/react-toolbar/src/ToolbarRadio.ts b/packages/react-components/react-toolbar/src/ToolbarRadio.ts
deleted file mode 100644
index 8195a1bb6c3edc..00000000000000
--- a/packages/react-components/react-toolbar/src/ToolbarRadio.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/ToolbarRadio/index';
diff --git a/packages/react-components/react-toolbar/src/ToolbarRadioButton.ts b/packages/react-components/react-toolbar/src/ToolbarRadioButton.ts
new file mode 100644
index 00000000000000..2f5842a8c450c3
--- /dev/null
+++ b/packages/react-components/react-toolbar/src/ToolbarRadioButton.ts
@@ -0,0 +1 @@
+export * from './components/ToolbarRadioButton/index';
diff --git a/packages/react-components/react-toolbar/src/components/ToolbarRadio/ToolbarRadio.tsx b/packages/react-components/react-toolbar/src/components/ToolbarRadio/ToolbarRadio.tsx
deleted file mode 100644
index c06922a1e585d6..00000000000000
--- a/packages/react-components/react-toolbar/src/components/ToolbarRadio/ToolbarRadio.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import * as React from 'react';
-import type { ToolbarRadioProps } from './ToolbarRadio.types';
-import type { ForwardRefComponent } from '@fluentui/react-utilities';
-import { renderToggleButton_unstable } from '@fluentui/react-button';
-import { useToolbarRadio_unstable } from './useToolbarRadio';
-import { useToolbarRadioStyles_unstable } from './useToolbarRadioStyles';
-
-/**
- * ToolbarToggleButton component
- */
-export const ToolbarRadio: ForwardRefComponent<ToolbarRadioProps> = React.forwardRef((props, ref) => {
-  const state = useToolbarRadio_unstable(props, ref);
-
-  useToolbarRadioStyles_unstable(state);
-  return renderToggleButton_unstable(state);
-}) as ForwardRefComponent<ToolbarRadioProps>;
-
-ToolbarRadio.displayName = 'ToolbarRadio';
diff --git a/packages/react-components/react-toolbar/src/components/ToolbarRadio/index.ts b/packages/react-components/react-toolbar/src/components/ToolbarRadio/index.ts
deleted file mode 100644
index 261669c8e5b5f5..00000000000000
--- a/packages/react-components/react-toolbar/src/components/ToolbarRadio/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './ToolbarRadio';
-export * from './ToolbarRadio.types';
diff --git a/packages/react-components/react-toolbar/src/components/ToolbarRadio/ToolbarRadio.test.tsx b/packages/react-components/react-toolbar/src/components/ToolbarRadioButton/ToolbarRadioButton.test.tsx
similarity index 63%
rename from packages/react-components/react-toolbar/src/components/ToolbarRadio/ToolbarRadio.test.tsx
rename to packages/react-components/react-toolbar/src/components/ToolbarRadioButton/ToolbarRadioButton.test.tsx
index 03cf16fee26ead..2d8d20a585023f 100644
--- a/packages/react-components/react-toolbar/src/components/ToolbarRadio/ToolbarRadio.test.tsx
+++ b/packages/react-components/react-toolbar/src/components/ToolbarRadioButton/ToolbarRadioButton.test.tsx
@@ -1,13 +1,13 @@
 import * as React from 'react';
 import { render } from '@testing-library/react';
-import { ToolbarRadio } from './ToolbarRadio';
+import { ToolbarRadioButton } from './ToolbarRadioButton';
 import { isConformant } from '../../common/isConformant';
 import { ToggleButtonProps } from '@fluentui/react-button';
 
-describe('ToolbarRadio', () => {
+describe('ToolbarRadioButton', () => {
   isConformant({
-    Component: ToolbarRadio as React.FunctionComponent<ToggleButtonProps>,
-    displayName: 'ToolbarRadio',
+    Component: ToolbarRadioButton as React.FunctionComponent<ToggleButtonProps>,
+    displayName: 'ToolbarRadioButton',
     disabledTests: ['component-has-static-classnames-object'],
   });
 
@@ -15,9 +15,9 @@ describe('ToolbarRadio', () => {
 
   it('renders a default state', () => {
     const result = render(
-      <ToolbarRadio name="name" value="value">
+      <ToolbarRadioButton name="name" value="value">
         Default ToolbarRadio
-      </ToolbarRadio>,
+      </ToolbarRadioButton>,
     );
     expect(result.container).toMatchSnapshot();
   });
diff --git a/packages/react-components/react-toolbar/src/components/ToolbarRadioButton/ToolbarRadioButton.tsx b/packages/react-components/react-toolbar/src/components/ToolbarRadioButton/ToolbarRadioButton.tsx
new file mode 100644
index 00000000000000..92b1ee2952f822
--- /dev/null
+++ b/packages/react-components/react-toolbar/src/components/ToolbarRadioButton/ToolbarRadioButton.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react';
+import type { ToolbarRadioButtonProps } from './ToolbarRadioButton.types';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import { renderToggleButton_unstable } from '@fluentui/react-button';
+import { useToolbarRadioButton_unstable } from './useToolbarRadioButton';
+import { useToolbarRadioButtonStyles_unstable } from './useToolbarRadioButtonStyles';
+
+/**
+ * ToolbarRadioButton component
+ */
+export const ToolbarRadioButton: ForwardRefComponent<ToolbarRadioButtonProps> = React.forwardRef((props, ref) => {
+  const state = useToolbarRadioButton_unstable(props, ref);
+
+  useToolbarRadioButtonStyles_unstable(state);
+  return renderToggleButton_unstable(state);
+}) as ForwardRefComponent<ToolbarRadioButtonProps>;
+
+ToolbarRadioButton.displayName = 'ToolbarRadioButton';
diff --git a/packages/react-components/react-toolbar/src/components/ToolbarRadio/ToolbarRadio.types.ts b/packages/react-components/react-toolbar/src/components/ToolbarRadioButton/ToolbarRadioButton.types.ts
similarity index 61%
rename from packages/react-components/react-toolbar/src/components/ToolbarRadio/ToolbarRadio.types.ts
rename to packages/react-components/react-toolbar/src/components/ToolbarRadioButton/ToolbarRadioButton.types.ts
index 59d0e831df1f4f..a9e86e9b6e805f 100644
--- a/packages/react-components/react-toolbar/src/components/ToolbarRadio/ToolbarRadio.types.ts
+++ b/packages/react-components/react-toolbar/src/components/ToolbarRadioButton/ToolbarRadioButton.types.ts
@@ -2,9 +2,9 @@ import type { ComponentProps, ComponentState } from '@fluentui/react-utilities';
 import { ToggleButtonProps, ButtonSlots, ToggleButtonState } from '@fluentui/react-button';
 
 /**
- * ToolbarToggleButton Props
+ * ToolbarRadioButton Props
  */
-export type ToolbarRadioProps = ComponentProps<ButtonSlots> &
+export type ToolbarRadioButtonProps = ComponentProps<ButtonSlots> &
   Partial<Pick<ToggleButtonProps, 'disabled' | 'disabledFocusable' | 'size'>> & {
     appearance?: 'primary' | 'subtle';
     name: string;
@@ -12,9 +12,9 @@ export type ToolbarRadioProps = ComponentProps<ButtonSlots> &
   };
 
 /**
- * State used in rendering ToolbarToggleButton
+ * State used in rendering ToolbarRadioButton
  */
-export type ToolbarRadioState = ComponentState<Partial<ButtonSlots>> &
+export type ToolbarRadioButtonState = ComponentState<Partial<ButtonSlots>> &
   ToggleButtonState &
   Required<Pick<ToggleButtonProps, 'checked'>> &
-  Pick<ToolbarRadioProps, 'name' | 'value'>;
+  Pick<ToolbarRadioButtonProps, 'name' | 'value'>;
diff --git a/packages/react-components/react-toolbar/src/components/ToolbarRadioButton/index.ts b/packages/react-components/react-toolbar/src/components/ToolbarRadioButton/index.ts
new file mode 100644
index 00000000000000..85b739021a57c1
--- /dev/null
+++ b/packages/react-components/react-toolbar/src/components/ToolbarRadioButton/index.ts
@@ -0,0 +1,2 @@
+export * from './ToolbarRadioButton';
+export * from './ToolbarRadioButton.types';
diff --git a/packages/react-components/react-toolbar/src/components/ToolbarRadio/useToolbarRadio.ts b/packages/react-components/react-toolbar/src/components/ToolbarRadioButton/useToolbarRadioButton.ts
similarity index 68%
rename from packages/react-components/react-toolbar/src/components/ToolbarRadio/useToolbarRadio.ts
rename to packages/react-components/react-toolbar/src/components/ToolbarRadioButton/useToolbarRadioButton.ts
index fda8920429280b..f6efa0b03ab642 100644
--- a/packages/react-components/react-toolbar/src/components/ToolbarRadio/useToolbarRadio.ts
+++ b/packages/react-components/react-toolbar/src/components/ToolbarRadioButton/useToolbarRadioButton.ts
@@ -1,25 +1,25 @@
 import * as React from 'react';
 import { useToggleButton_unstable } from '@fluentui/react-button';
 import { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';
-import { ToolbarRadioProps, ToolbarRadioState } from './ToolbarRadio.types';
+import { ToolbarRadioButtonProps, ToolbarRadioButtonState } from './ToolbarRadioButton.types';
 
 /**
- * Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns
+ * Given user props, defines default props for the RadioButton, calls useButtonState and useChecked, and returns
  * processed state.
- * @param props - User provided props to the ToggleButton component.
- * @param ref - User provided ref to be passed to the ToggleButton component.
+ * @param props - User provided props to the RadioButton component.
+ * @param ref - User provided ref to be passed to the RadioButton component.
  */
-export const useToolbarRadio_unstable = (
-  props: ToolbarRadioProps,
+export const useToolbarRadioButton_unstable = (
+  props: ToolbarRadioButtonProps,
   ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,
-): ToolbarRadioState => {
+): ToolbarRadioButtonState => {
   const handleRadio = useToolbarContext_unstable(ctx => ctx.handleRadio);
   const checked = useToolbarContext_unstable(ctx => !!ctx.checkedValues[props.name]?.includes(props.value));
   const size = useToolbarContext_unstable(ctx => ctx.size);
 
   const { onClick: onClickOriginal } = props;
   const toggleButtonState = useToggleButton_unstable({ size, checked, ...props }, ref);
-  const state: ToolbarRadioState = {
+  const state: ToolbarRadioButtonState = {
     ...toggleButtonState,
     name: props.name,
     value: props.value,
diff --git a/packages/react-components/react-toolbar/src/components/ToolbarRadio/useToolbarRadioStyles.ts b/packages/react-components/react-toolbar/src/components/ToolbarRadioButton/useToolbarRadioButtonStyles.ts
similarity index 68%
rename from packages/react-components/react-toolbar/src/components/ToolbarRadio/useToolbarRadioStyles.ts
rename to packages/react-components/react-toolbar/src/components/ToolbarRadioButton/useToolbarRadioButtonStyles.ts
index 791bc7ed8770df..915158bab51b0b 100644
--- a/packages/react-components/react-toolbar/src/components/ToolbarRadio/useToolbarRadioStyles.ts
+++ b/packages/react-components/react-toolbar/src/components/ToolbarRadioButton/useToolbarRadioButtonStyles.ts
@@ -1,7 +1,7 @@
 import { tokens } from '@fluentui/react-theme';
 import { makeStyles, mergeClasses } from '@griffel/react';
 import { useToggleButtonStyles_unstable } from '@fluentui/react-button';
-import { ToolbarRadioState } from './ToolbarRadio.types';
+import { ToolbarRadioButtonState } from './ToolbarRadioButton.types';
 
 const useBaseStyles = makeStyles({
   selected: {
@@ -10,9 +10,9 @@ const useBaseStyles = makeStyles({
 });
 
 /**
- * Apply styling to the ToolbarToggleButton slots based on the state
+ * Apply styling to the ToolbarRadioButton slots based on the state
  */
-export const useToolbarRadioStyles_unstable = (state: ToolbarRadioState) => {
+export const useToolbarRadioButtonStyles_unstable = (state: ToolbarRadioButtonState) => {
   useToggleButtonStyles_unstable(state);
   const toggleButtonStyles = useBaseStyles();
 
diff --git a/packages/react-components/react-toolbar/src/index.ts b/packages/react-components/react-toolbar/src/index.ts
index ad39d82c587738..85f4bdd56b2744 100644
--- a/packages/react-components/react-toolbar/src/index.ts
+++ b/packages/react-components/react-toolbar/src/index.ts
@@ -12,5 +12,5 @@ export { ToolbarDivider, useToolbarDividerStyles_unstable } from './ToolbarDivid
 export type { ToolbarDividerProps, ToolbarDividerState } from './ToolbarDivider';
 export { ToolbarToggleButton } from './ToolbarToggleButton';
 export type { ToolbarToggleButtonProps, ToolbarToggleButtonState } from './ToolbarToggleButton';
-export { ToolbarRadio } from './ToolbarRadio';
-export type { ToolbarRadioProps, ToolbarRadioState } from './ToolbarRadio';
+export { ToolbarRadioButton } from './ToolbarRadioButton';
+export type { ToolbarRadioButtonProps, ToolbarRadioButtonState } from './ToolbarRadioButton';

From c868f4a11c58fb88ef392bfa3915fde9cad0f988 Mon Sep 17 00:00:00 2001
From: Charles <chassunc@microsoft.com>
Date: Mon, 24 Oct 2022 13:31:27 -0300
Subject: [PATCH 08/10] chore: update api and remove disable flag from handle
 radio

---
 .../react-toolbar/etc/react-toolbar.api.md        | 10 +++++-----
 .../react-components/react-toolbar/package.json   |  1 +
 .../ToolbarRadioButton/useToolbarRadioButton.ts   | 15 +++++++--------
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/react-components/react-toolbar/etc/react-toolbar.api.md b/packages/react-components/react-toolbar/etc/react-toolbar.api.md
index e02cfb52824696..327a369fd9d794 100644
--- a/packages/react-components/react-toolbar/etc/react-toolbar.api.md
+++ b/packages/react-components/react-toolbar/etc/react-toolbar.api.md
@@ -66,23 +66,23 @@ export type ToolbarDividerState = ComponentState<Partial<DividerSlots>> & Divide
 export type ToolbarProps = ComponentProps<ToolbarSlots> & {
     size?: 'small' | 'medium';
     vertical?: boolean;
-    checkedValues?: Record<string, string[] | string>;
-    defaultCheckedValues?: Record<string, string[] | string>;
+    checkedValues?: Record<string, string[]>;
+    defaultCheckedValues?: Record<string, string[]>;
     onCheckedValueChange?: (e: ToolbarCheckedValueChangeEvent, data: ToolbarCheckedValueChangeData) => void;
 };
 
 // @public
-export const ToolbarRadio: ForwardRefComponent<ToolbarRadioProps>;
+export const ToolbarRadioButton: ForwardRefComponent<ToolbarRadioButtonProps>;
 
 // @public
-export type ToolbarRadioProps = ComponentProps<ButtonSlots> & Partial<Pick<ToggleButtonProps, 'disabled' | 'disabledFocusable' | 'size'>> & {
+export type ToolbarRadioButtonProps = ComponentProps<ButtonSlots> & Partial<Pick<ToggleButtonProps, 'disabled' | 'disabledFocusable' | 'size'>> & {
     appearance?: 'primary' | 'subtle';
     name: string;
     value: string;
 };
 
 // @public
-export type ToolbarRadioState = ComponentState<Partial<ButtonSlots>> & ToggleButtonState & Required<Pick<ToggleButtonProps, 'checked'>> & Pick<ToolbarRadioProps, 'name' | 'value'>;
+export type ToolbarRadioButtonState = ComponentState<Partial<ButtonSlots>> & ToggleButtonState & Required<Pick<ToggleButtonProps, 'checked'>> & Pick<ToolbarRadioButtonProps, 'name' | 'value'>;
 
 // @public (undocumented)
 export type ToolbarSlots = {
diff --git a/packages/react-components/react-toolbar/package.json b/packages/react-components/react-toolbar/package.json
index c98929c5b8dee0..77ed6b8ebe60fe 100644
--- a/packages/react-components/react-toolbar/package.json
+++ b/packages/react-components/react-toolbar/package.json
@@ -38,6 +38,7 @@
     "@fluentui/react-theme": "^9.1.1",
     "@fluentui/react-utilities": "^9.1.2",
     "@fluentui/react-context-selector": "^9.0.5",
+    "@fluentui/react-hooks": "^8.6.12",
     "@fluentui/react-radio": "^9.0.9",
     "@fluentui/react-tabster": "^9.2.0",
     "@griffel/react": "^1.4.1",
diff --git a/packages/react-components/react-toolbar/src/components/ToolbarRadioButton/useToolbarRadioButton.ts b/packages/react-components/react-toolbar/src/components/ToolbarRadioButton/useToolbarRadioButton.ts
index f6efa0b03ab642..f907b74bb6c987 100644
--- a/packages/react-components/react-toolbar/src/components/ToolbarRadioButton/useToolbarRadioButton.ts
+++ b/packages/react-components/react-toolbar/src/components/ToolbarRadioButton/useToolbarRadioButton.ts
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useEventCallback } from '@fluentui/react-hooks';
 import { useToggleButton_unstable } from '@fluentui/react-button';
 import { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';
 import { ToolbarRadioButtonProps, ToolbarRadioButtonState } from './ToolbarRadioButton.types';
@@ -25,18 +26,16 @@ export const useToolbarRadioButton_unstable = (
     value: props.value,
   };
 
-  const handleOnClick = (
-    e: React.MouseEvent<HTMLButtonElement, MouseEvent> & React.MouseEvent<HTMLAnchorElement, MouseEvent>,
-  ) => {
-    if (state.disabled) {
+  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);
-  };
+      handleRadio?.(e, state.name, state.value, state.checked);
+      onClickOriginal?.(e);
+    },
+  );
 
   state.root.onClick = handleOnClick;
   return state;

From c17285176e250b6f527f0110e3fe1cf8c26adc1f Mon Sep 17 00:00:00 2001
From: Charles <chassunc@microsoft.com>
Date: Mon, 24 Oct 2022 21:35:06 -0300
Subject: [PATCH 09/10] chore: update snapshot

---
 .../ToolbarRadioButton.test.tsx.snap              | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100644 packages/react-components/react-toolbar/src/components/ToolbarRadioButton/__snapshots__/ToolbarRadioButton.test.tsx.snap

diff --git a/packages/react-components/react-toolbar/src/components/ToolbarRadioButton/__snapshots__/ToolbarRadioButton.test.tsx.snap b/packages/react-components/react-toolbar/src/components/ToolbarRadioButton/__snapshots__/ToolbarRadioButton.test.tsx.snap
new file mode 100644
index 00000000000000..84fb76d27bc4b9
--- /dev/null
+++ b/packages/react-components/react-toolbar/src/components/ToolbarRadioButton/__snapshots__/ToolbarRadioButton.test.tsx.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ToolbarRadioButton renders a default state 1`] = `
+<div>
+  <button
+    aria-pressed="false"
+    class="fui-Button fui-ToggleButton"
+    name="name"
+    type="button"
+    value="value"
+  >
+    Default ToolbarRadio
+  </button>
+</div>
+`;

From baa788e36c07550e1ee961e93bc821aa5bfa1455 Mon Sep 17 00:00:00 2001
From: Charles <chassunc@microsoft.com>
Date: Tue, 25 Oct 2022 09:35:32 -0300
Subject: [PATCH 10/10] chore: update stories

---
 .../src/stories/Toolbar/ToolbarRadio.stories.tsx       |  8 ++++----
 .../stories/Toolbar/ToolbarRadioControlled.stories.tsx | 10 +++++-----
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarRadio.stories.tsx b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarRadio.stories.tsx
index f03af6b943c629..bed44cfc6e0740 100644
--- a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarRadio.stories.tsx
+++ b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarRadio.stories.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { TextBold24Regular, TextItalic24Regular, TextUnderline24Regular } from '@fluentui/react-icons';
-import { Toolbar, ToolbarRadio } from '@fluentui/react-toolbar';
+import { Toolbar, ToolbarRadioButton } from '@fluentui/react-toolbar';
 import type { ToolbarProps } from '@fluentui/react-toolbar';
 
 export const Radio = (props: Partial<ToolbarProps>) => (
   <Toolbar {...props}>
-    <ToolbarRadio name="text-style" value="italic" icon={<TextItalic24Regular />} />
-    <ToolbarRadio name="text-style" value="bold" icon={<TextBold24Regular />} />
-    <ToolbarRadio name="text-style" value="underline" icon={<TextUnderline24Regular />} />
+    <ToolbarRadioButton name="text-style" value="italic" icon={<TextItalic24Regular />} />
+    <ToolbarRadioButton name="text-style" value="bold" icon={<TextBold24Regular />} />
+    <ToolbarRadioButton name="text-style" value="underline" icon={<TextUnderline24Regular />} />
   </Toolbar>
 );
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 3f55f61565f9e6..61dbfa07e7dbc3 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,10 +1,10 @@
 import * as React from 'react';
 import { TextBold24Regular, TextItalic24Regular, TextUnderline24Regular } from '@fluentui/react-icons';
-import { Toolbar, ToolbarRadio, ToolbarDivider } from '@fluentui/react-toolbar';
+import { Toolbar, ToolbarRadioButton, ToolbarDivider } 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[] | string>>({
+  const [checkedValues, setCheckedValues] = React.useState<Record<string, string[]>>({
     edit: ['cut', 'paste'],
   });
   const onChange: ToolbarProps['onCheckedValueChange'] = (e, { name, checkedItems }) => {
@@ -15,9 +15,9 @@ export const ControlledRadio = (props: Partial<ToolbarProps>) => {
 
   return (
     <Toolbar checkedValues={checkedValues} onCheckedValueChange={onChange}>
-      <ToolbarRadio name="text-style" value="italic" icon={<TextItalic24Regular />} />
-      <ToolbarRadio name="text-style" value="bold" icon={<TextBold24Regular />} />
-      <ToolbarRadio name="text-style" value="underline" icon={<TextUnderline24Regular />} />
+      <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>
   );