refactor(react-button): streamline button component base hook and remove unused base hooks

change/@fluentui-react-button-e83c949c-d849-4636-b94e-c16be2c6079b.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: prevent custom props from leaking to the DOM ",
+  "packageName": "@fluentui/react-button",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-carousel-a96cffaf-5ba5-4437-9832-432901335262.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: prevent custom props from leaking to the DOM",
+  "packageName": "@fluentui/react-carousel",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-button/library/src/CompoundButton.ts

@@ -1,15 +1,8 @@
-export type {
-  CompoundButtonBaseProps,
-  CompoundButtonProps,
-  CompoundButtonSlots,
-  CompoundButtonBaseState,
-  CompoundButtonState,
-} from './components/CompoundButton/index';
+export type { CompoundButtonProps, CompoundButtonSlots, CompoundButtonState } from './components/CompoundButton/index';
 export {
   CompoundButton,
   compoundButtonClassNames,
   renderCompoundButton_unstable,
   useCompoundButtonStyles_unstable,
   useCompoundButton_unstable,
-  useCompoundButtonBase_unstable,
 } from './components/CompoundButton/index';

packages/react-components/react-button/library/src/MenuButton.ts

@@ -1,15 +1,8 @@
-export type {
-  MenuButtonBaseProps,
-  MenuButtonProps,
-  MenuButtonSlots,
-  MenuButtonBaseState,
-  MenuButtonState,
-} from './components/MenuButton/index';
+export type { MenuButtonProps, MenuButtonSlots, MenuButtonState } from './components/MenuButton/index';
 export {
   MenuButton,
   menuButtonClassNames,
   renderMenuButton_unstable,
   useMenuButtonStyles_unstable,
   useMenuButton_unstable,
-  useMenuButtonBase_unstable,
 } from './components/MenuButton/index';

packages/react-components/react-button/library/src/SplitButton.ts

@@ -1,15 +1,8 @@
-export type {
-  SplitButtonBaseProps,
-  SplitButtonProps,
-  SplitButtonSlots,
-  SplitButtonBaseState,
-  SplitButtonState,
-} from './components/SplitButton/index';
+export type { SplitButtonProps, SplitButtonSlots, SplitButtonState } from './components/SplitButton/index';
 export {
   SplitButton,
   renderSplitButton_unstable,
   splitButtonClassNames,
   useSplitButtonStyles_unstable,
   useSplitButton_unstable,
-  useSplitButtonBase_unstable,
 } from './components/SplitButton/index';

packages/react-components/react-button/library/src/ToggleButton.ts

@@ -1,8 +1,8 @@
 export type {
   ToggleButtonBaseProps,
   ToggleButtonProps,
-  ToggleButtonBaseState,
   ToggleButtonState,
+  ToggleButtonBaseState,
 } from './components/ToggleButton/index';
 export {
   ToggleButton,

packages/react-components/react-button/library/src/components/Button/Button.types.ts

@@ -69,14 +69,7 @@ export type ButtonProps = ComponentProps<ButtonSlots> & {
   size?: ButtonSize;
 };
 
-/**
- * Internal use only: lists prop names related to Button design for use within Button components.
- *
- * @internal
- */
-export type ButtonDesignPropNames = 'appearance' | 'size' | 'shape';
-
-export type ButtonBaseProps = DistributiveOmit<ButtonProps, ButtonDesignPropNames>;
+export type ButtonBaseProps = DistributiveOmit<ButtonProps, 'appearance' | 'size' | 'shape'>;
 
 export type ButtonState = ComponentState<ButtonSlots> &
   Required<Pick<ButtonProps, 'appearance' | 'disabledFocusable' | 'disabled' | 'iconPosition' | 'shape' | 'size'>> & {
@@ -88,4 +81,4 @@ export type ButtonState = ComponentState<ButtonSlots> &
     iconOnly: boolean;
   };
 
-export type ButtonBaseState = DistributiveOmit<ButtonState, ButtonDesignPropNames>;
+export type ButtonBaseState = DistributiveOmit<ButtonState, 'appearance' | 'size' | 'shape'>;

packages/react-components/react-button/library/src/components/Button/index.ts

@@ -2,6 +2,5 @@ export { Button } from './Button';
 // Explicit exports to omit ButtonCommons
 export type { ButtonBaseProps, ButtonProps, ButtonSlots, ButtonBaseState, ButtonState } from './Button.types';
 export { renderButton_unstable } from './renderButton';
-export { useButton_unstable } from './useButton';
-export { useButtonBase_unstable } from './useButtonBase';
+export { useButton_unstable, useButtonBase_unstable } from './useButton';
 export { buttonClassNames, useButtonStyles_unstable } from './useButtonStyles.styles';

packages/react-components/react-button/library/src/components/Button/useButton.test.tsx

@@ -0,0 +1,86 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { renderHook } from '@testing-library/react-hooks';
+import '@testing-library/jest-dom';
+import { useButtonBase_unstable } from './useButton';
+import { renderButton_unstable } from './renderButton';
+import type { ButtonState, ButtonBaseProps } from './Button.types';
+import { mergeClasses } from '@griffel/react';
+
+describe('useButtonBase_unstable', () => {
+  it('returns default state when no props are provided', () => {
+    const { result } = renderHook(() => useButtonBase_unstable({}, React.createRef()));
+    expect(result.current).toEqual(
+      expect.objectContaining({
+        disabled: false,
+        disabledFocusable: false,
+        iconPosition: 'before',
+        iconOnly: false,
+        components: { root: 'button', icon: 'span' },
+      }),
+    );
+  });
+
+  it('sets disabled and disabledFocusable correctly', () => {
+    const { result } = renderHook(() =>
+      useButtonBase_unstable({ disabled: true, disabledFocusable: true }, React.createRef()),
+    );
+    expect(result.current.disabled).toBe(true);
+    expect(result.current.disabledFocusable).toBe(true);
+  });
+
+  it('sets iconPosition and iconOnly correctly', () => {
+    const { result } = renderHook(() =>
+      useButtonBase_unstable({ iconPosition: 'after', icon: 'icon' }, React.createRef()),
+    );
+    expect(result.current.iconPosition).toBe('after');
+    expect(result.current.iconOnly).toBe(true);
+  });
+
+  it('handles absence of icon and children correctly', () => {
+    const { result } = renderHook(() => useButtonBase_unstable({}, React.createRef()));
+    expect(result.current.iconOnly).toBe(false);
+  });
+
+  describe('Recomposition', () => {
+    type CustomButtonProps = ButtonBaseProps & { appearance?: '1' | '2' | '3' };
+
+    const CustomButton = React.forwardRef<HTMLButtonElement, CustomButtonProps>(
+      ({ appearance = '1', ...props }, ref) => {
+        const state = useButtonBase_unstable(props, ref);
+
+        state.root.className = mergeClasses('custom-button', `appearance-${appearance}`, state.root.className);
+
+        return renderButton_unstable(state as ButtonState);
+      },
+    );
+
+    it('renders as a button element', () => {
+      const { getByRole } = render(<CustomButton>Button</CustomButton>);
+      expect(getByRole('button')).toMatchInlineSnapshot(`
+        <button
+          class="custom-button appearance-1"
+          type="button"
+        >
+          Button
+        </button>
+      `);
+    });
+
+    it('renders as an anchor element', () => {
+      const { getByRole } = render(
+        <CustomButton as="a" href="#">
+          Link
+        </CustomButton>,
+      );
+      expect(getByRole('link')).toMatchInlineSnapshot(`
+        <a
+          class="custom-button appearance-1"
+          href="#"
+        >
+          Link
+        </a>
+      `);
+    });
+  });
+});

packages/react-components/react-button/library/src/components/Button/useButton.ts

@@ -2,8 +2,9 @@
 
 import * as React from 'react';
 import { useButtonContext } from '../../contexts/ButtonContext';
-import type { ButtonProps, ButtonState } from './Button.types';
-import { useButtonBase_unstable } from './useButtonBase';
+import { ARIAButtonSlotProps, useARIAButtonProps } from '@fluentui/react-aria';
+import { slot } from '@fluentui/react-utilities';
+import type { ButtonBaseProps, ButtonBaseState, ButtonProps, ButtonState } from './Button.types';
 
 /**
  * Given user props, defines default props for the Button, calls useButtonState, and returns processed state.
@@ -15,14 +16,43 @@ export const useButton_unstable = (
   ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,
 ): ButtonState => {
   const { size: contextSize } = useButtonContext();
-  const { appearance = 'secondary', shape = 'rounded', size = contextSize ?? 'medium' } = props;
-  const state = useButtonBase_unstable(props, ref);
+  const { appearance = 'secondary', shape = 'rounded', size = contextSize ?? 'medium', ...buttonProps } = props;
+  const state = useButtonBase_unstable(buttonProps, ref);
 
   return {
-    // Props passed at the top-level
     appearance,
     shape,
     size,
     ...state,
   };
 };
+
+/**
+ * Base hook for Button component, which manages state related to slots structure and ARIA attributes.
+ *
+ * @param props - User provided props to the Button component.
+ * @param ref - User provided ref to be passed to the Button component.
+ */
+export const useButtonBase_unstable = (
+  props: ButtonBaseProps,
+  ref?: React.Ref<HTMLButtonElement | HTMLAnchorElement>,
+): ButtonBaseState => {
+  const { icon, iconPosition = 'before', ...buttonProps } = props;
+  const iconShorthand = slot.optional(icon, { elementType: 'span' });
+
+  return {
+    disabled: props.disabled ?? false,
+    disabledFocusable: props.disabledFocusable ?? false,
+    iconPosition,
+    iconOnly: Boolean(iconShorthand?.children && !props.children),
+    components: { root: 'button', icon: 'span' },
+    root: slot.always<ARIAButtonSlotProps<'a'>>(useARIAButtonProps(buttonProps.as, buttonProps), {
+      elementType: 'button',
+      defaultProps: {
+        ref: ref as React.Ref<HTMLButtonElement & HTMLAnchorElement>,
+        type: props.as !== 'a' ? 'button' : undefined,
+      },
+    }),
+    icon: iconShorthand,
+  };
+};

packages/react-components/react-button/library/src/components/CompoundButton/CompoundButton.types.ts

@@ -1,5 +1,5 @@
-import type { ComponentProps, ComponentState, DistributiveOmit, Slot } from '@fluentui/react-utilities';
-import type { ButtonDesignPropNames, ButtonProps, ButtonSlots, ButtonState } from '../Button/Button.types';
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+import type { ButtonProps, ButtonSlots, ButtonState } from '../Button/Button.types';
 
 export type CompoundButtonSlots = ButtonSlots & {
   /**
@@ -16,9 +16,5 @@ export type CompoundButtonSlots = ButtonSlots & {
 export type CompoundButtonProps = ComponentProps<Partial<CompoundButtonSlots>> &
   Pick<ButtonProps, 'appearance' | 'disabledFocusable' | 'disabled' | 'iconPosition' | 'shape' | 'size'>;
 
-export type CompoundButtonBaseProps = DistributiveOmit<CompoundButtonProps, ButtonDesignPropNames>;
-
 export type CompoundButtonState = ComponentState<CompoundButtonSlots> &
   Omit<ButtonState, keyof ButtonSlots | 'components'>;
-
-export type CompoundButtonBaseState = DistributiveOmit<CompoundButtonState, ButtonDesignPropNames>;

packages/react-components/react-button/library/src/components/CompoundButton/index.ts

@@ -1,12 +1,5 @@
 export { CompoundButton } from './CompoundButton';
-export type {
-  CompoundButtonBaseProps,
-  CompoundButtonProps,
-  CompoundButtonSlots,
-  CompoundButtonBaseState,
-  CompoundButtonState,
-} from './CompoundButton.types';
+export type { CompoundButtonProps, CompoundButtonSlots, CompoundButtonState } from './CompoundButton.types';
 export { renderCompoundButton_unstable } from './renderCompoundButton';
 export { useCompoundButton_unstable } from './useCompoundButton';
-export { useCompoundButtonBase_unstable } from './useCompoundButtonBase';
 export { compoundButtonClassNames, useCompoundButtonStyles_unstable } from './useCompoundButtonStyles.styles';

packages/react-components/react-button/library/src/components/CompoundButton/useCompoundButton.ts

@@ -1,9 +1,9 @@
 'use client';
 
 import * as React from 'react';
+import { slot } from '@fluentui/react-utilities';
+import { useButton_unstable } from '../Button/index';
 import type { CompoundButtonProps, CompoundButtonState } from './CompoundButton.types';
-import { useCompoundButtonBase_unstable } from './useCompoundButtonBase';
-import { useButtonContext } from '../../contexts';
 
 /**
  * Given user props, defines default props for the CompoundButton, calls useButtonState, and returns processed state.
@@ -14,14 +14,25 @@ export const useCompoundButton_unstable = (
   props: CompoundButtonProps,
   ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,
 ): CompoundButtonState => {
-  const { size: contextSize } = useButtonContext();
-  const { appearance = 'secondary', shape = 'rounded', size = contextSize ?? 'medium' } = props;
-  const state = useCompoundButtonBase_unstable(props, ref);
+  const { contentContainer, secondaryContent, ...buttonProps } = props;
 
-  return {
-    appearance,
-    size,
-    shape,
-    ...state,
+  const state: CompoundButtonState = {
+    // Button state
+    ...useButton_unstable(buttonProps, ref),
+
+    // Slots definition
+    components: {
+      root: 'button',
+      icon: 'span',
+      contentContainer: 'span',
+      secondaryContent: 'span',
+    },
+    contentContainer: slot.always(contentContainer, { elementType: 'span' }),
+    secondaryContent: slot.optional(secondaryContent, { elementType: 'span' }),
   };
+
+  // Recalculate iconOnly to take into account secondaryContent.
+  state.iconOnly = Boolean(state.icon?.children && !props.children && !state.secondaryContent?.children);
+
+  return state;
 };