diff --git a/change/@fluentui-react-button-05c79b7f-0d9a-4431-9a44-72fc2e726d1a.json b/change/@fluentui-react-button-05c79b7f-0d9a-4431-9a44-72fc2e726d1a.json new file mode 100644 index 0000000000000..5f5039d8cba69 --- /dev/null +++ b/change/@fluentui-react-button-05c79b7f-0d9a-4431-9a44-72fc2e726d1a.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "feat: expose useSplitButtonBase_unstable hook", + "packageName": "@fluentui/react-button", + "email": "vgenaev@gmail.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-button/library/etc/react-button.api.md b/packages/react-components/react-button/library/etc/react-button.api.md index 1c87fa8d4de09..2d6c8e1fe9d12 100644 --- a/packages/react-components/react-button/library/etc/react-button.api.md +++ b/packages/react-components/react-button/library/etc/react-button.api.md @@ -120,6 +120,25 @@ export const renderSplitButton_unstable: (state: SplitButtonState) => JSXElement // @public export const SplitButton: ForwardRefComponent; +// @public +export type SplitButtonBaseProps = ComponentProps & Omit & Omit; + +// @public (undocumented) +export type SplitButtonBaseSlots = { + root: NonNullable>; + menuButton?: Slot; + primaryActionButton?: Slot; +}; + +// @public +export type SplitButtonBaseState = Omit, 'components' | 'menuButton' | 'primaryActionButton'> & Required> & { + components: { + root: 'div'; + }; + menuButton: MenuButtonBaseProps; + primaryActionButton: ButtonBaseProps; +}; + // @public (undocumented) export const splitButtonClassNames: SlotClassNames; @@ -189,7 +208,10 @@ export const useMenuButtonBase_unstable: (props: MenuButtonBaseProps, ref: React export const useMenuButtonStyles_unstable: (state: MenuButtonState) => MenuButtonState; // @public -export const useSplitButton_unstable: (props: SplitButtonProps, ref: React_2.Ref) => SplitButtonState; +export const useSplitButton_unstable: (props: SplitButtonProps, ref: React_2.Ref) => SplitButtonState; + +// @public +export const useSplitButtonBase_unstable: (props: SplitButtonBaseProps, ref: React_2.Ref) => SplitButtonBaseState; // @public (undocumented) export const useSplitButtonStyles_unstable: (state: SplitButtonState) => SplitButtonState; diff --git a/packages/react-components/react-button/library/src/SplitButton.ts b/packages/react-components/react-button/library/src/SplitButton.ts index 4b3dc83adc8d5..c62e06d0553d9 100644 --- a/packages/react-components/react-button/library/src/SplitButton.ts +++ b/packages/react-components/react-button/library/src/SplitButton.ts @@ -1,8 +1,16 @@ -export type { SplitButtonProps, SplitButtonSlots, SplitButtonState } from './components/SplitButton/index'; +export type { + SplitButtonBaseProps, + SplitButtonBaseSlots, + SplitButtonBaseState, + SplitButtonProps, + SplitButtonSlots, + SplitButtonState, +} from './components/SplitButton/index'; export { SplitButton, renderSplitButton_unstable, splitButtonClassNames, useSplitButtonStyles_unstable, useSplitButton_unstable, + useSplitButtonBase_unstable, } from './components/SplitButton/index'; diff --git a/packages/react-components/react-button/library/src/components/SplitButton/SplitButton.test.tsx b/packages/react-components/react-button/library/src/components/SplitButton/SplitButton.test.tsx index 641b1502cb376..801b7d59e0def 100644 --- a/packages/react-components/react-button/library/src/components/SplitButton/SplitButton.test.tsx +++ b/packages/react-components/react-button/library/src/components/SplitButton/SplitButton.test.tsx @@ -3,11 +3,14 @@ import { render } from '@testing-library/react'; import { renderHook } from '@testing-library/react-hooks'; import userEvent from '@testing-library/user-event'; import { isSlot, SLOT_ELEMENT_TYPE_SYMBOL } from '@fluentui/react-utilities'; +import type { SlotRenderFunction } from '@fluentui/react-utilities'; import { isConformant } from '../../testing/isConformant'; import { SplitButton } from './SplitButton'; import { Button } from '../Button/Button'; +import type { ButtonProps } from '../Button/Button.types'; import { MenuButton } from '../MenuButton/MenuButton'; -import { useSplitButton_unstable } from './useSplitButton'; +import type { MenuButtonProps } from '../MenuButton/MenuButton.types'; +import { useSplitButtonBase_unstable, useSplitButton_unstable } from './useSplitButton'; import type { SplitButtonProps } from './SplitButton.types'; describe('SplitButton', () => { @@ -34,6 +37,27 @@ describe('SplitButton', () => { expect(menuButton).toBeTruthy(); }); + it('preserves default children for a primary action button render function', () => { + const renderPrimaryActionButton: SlotRenderFunction = (_Component, slotProps) => slotProps.children; + const { getByText } = render( + This is a button, + ); + + expect(getByText('This is a button')).toBeTruthy(); + }); + + it('preserves undefined children for a menu button render function', () => { + const renderMenuButton: SlotRenderFunction = (_Component, slotProps) => { + expect(slotProps.children).toBeUndefined(); + return