feat: replace ToolbarRadio implementation by usage of toggle button a…

…s Radio (microsoft#25343)

* feat: replace ToolbarRadio implementation by usage of toggle button as radio

* chore: add changes

* chore: remove and update api

* chore: update handler types

* chore: delete line

* chore: update checked items type

* chore: rename

* chore: update api and remove disable flag from handle radio

* chore: update snapshot

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"
+}

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)
@@ -83,26 +72,17 @@ export type ToolbarProps = ComponentProps<ToolbarSlots> & {
 };
 
 // @public
-export const ToolbarRadio: ForwardRefComponent<ToolbarRadioProps>;
-
-// @public
-export const ToolbarRadioGroup: ForwardRefComponent<ToolbarRadioGroupProps>;
-
-// @public
-export type ToolbarRadioGroupProps = RadioGroupProps;
+export const ToolbarRadioButton: ForwardRefComponent<ToolbarRadioButtonProps>;
 
 // @public
-export type ToolbarRadioGroupState = RadioGroupState;
-
-// @public
-export type ToolbarRadioProps = RadioProps & {
- size?: 'small' | 'medium';
+export type ToolbarRadioButtonProps = 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 ToolbarRadioButtonState = ComponentState<Partial<ButtonSlots>> & ToggleButtonState & Required<Pick<ToggleButtonProps, 'checked'>> & Pick<ToolbarRadioButtonProps, '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

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",

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

@@ -0,0 +1 @@
+export * from './components/ToolbarRadioButton/index';

packages/react-components/react-toolbar/src/components/Toolbar/Toolbar.types.ts

@@ -60,22 +60,27 @@ 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 = (
  e: React.MouseEvent | React.KeyboardEvent,
- name?: string,
- value?: string,
+ name: string,
+ value: string,
  checked?: boolean,
 ) => void;

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: {},
 };

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];
@@ -64,9 +64,22 @@ 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) {
+ onCheckedValueChange?.(e, {
+ name,
+ checkedItems: checkedValues?.[name],
+ });
+ setCheckedValues(s => ({ ...s, [name]: [value] }));
+ }
+ },
+ );
+
  return {
  ...initialState,
  handleToggleButton,
+ handleRadio,
  checkedValues: checkedValues ?? {},
  };
 };

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,
  };
 

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

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { ToolbarRadioButton } from './ToolbarRadioButton';
+import { isConformant } from '../../common/isConformant';
+import { ToggleButtonProps } from '@fluentui/react-button';
+
+describe('ToolbarRadioButton', () => {
+ isConformant({
+ Component: ToolbarRadioButton as React.FunctionComponent<ToggleButtonProps>,
+ displayName: 'ToolbarRadioButton',
+ 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(
+ <ToolbarRadioButton name="name" value="value">
+ Default ToolbarRadio
+ </ToolbarRadioButton>,
+ );
+ expect(result.container).toMatchSnapshot();
+ });
+});

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';

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

@@ -0,0 +1,20 @@
+import type { ComponentProps, ComponentState } from '@fluentui/react-utilities';
+import { ToggleButtonProps, ButtonSlots, ToggleButtonState } from '@fluentui/react-button';
+
+/**
+ * ToolbarRadioButton Props
+ */
+export type ToolbarRadioButtonProps = ComponentProps<ButtonSlots> &
+ Partial<Pick<ToggleButtonProps, 'disabled' | 'disabledFocusable' | 'size'>> & {
+ appearance?: 'primary' | 'subtle';
+ name: string;
+ value: string;
+ };
+
+/**
+ * State used in rendering ToolbarRadioButton
+ */
+export type ToolbarRadioButtonState = ComponentState<Partial<ButtonSlots>> &
+ ToggleButtonState &
+ Required<Pick<ToggleButtonProps, 'checked'>> &
+ Pick<ToolbarRadioButtonProps, 'name' | 'value'>;

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>
+`;

packages/react-components/react-toolbar/src/components/ToolbarRadioButton/index.ts

@@ -0,0 +1,2 @@
+export * from './ToolbarRadioButton';
+export * from './ToolbarRadioButton.types';