docs: Adding example of how to pass on click to primaryActionButton s…

…lot in the Default story for SplitButton (#29334)

* docs: Adding example of how to pass on click to primaryActionButton slot in the Default story for SplitButton.

* Adding change file.

change/@fluentui-react-button-81475034-8645-4083-8fc7-79fcd40a45df.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "docs: Adding example of how to pass on click to primaryActionButton slot in the Default story for SplitButton.",
+  "packageName": "@fluentui/react-button",
+  "email": "Humberto.Morimoto@microsoft.com",
+  "dependentChangeType": "none"
+}

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

@@ -55,8 +55,10 @@ export const useSplitButton_unstable = (
     },
     renderByDefault: true,
     elementType: Button,
-  }); // Resolve menu button's aria-labelledby to be labelled by the primary action button if not a label was not provided
-  // by the user.
+  });
+
+  // Resolve menu button's aria-labelledby to be labelled by the primary action button if no label was provided by the
+  // user.
   if (
     menuButtonShorthand &&
     primaryActionButtonShorthand &&
@@ -65,6 +67,7 @@ export const useSplitButton_unstable = (
   ) {
     menuButtonShorthand['aria-labelledby'] = primaryActionButtonShorthand.id;
   }
+
   return {
     // Props passed at the top-level
     appearance,

packages/react-components/react-button/stories/SplitButton/SplitButtonDefault.stories.tsx

@@ -2,10 +2,20 @@ import * as React from 'react';
 import { Menu, MenuItem, MenuList, MenuPopover, MenuTrigger, SplitButton } from '@fluentui/react-components';
 import type { MenuButtonProps } from '@fluentui/react-components';
 
+const onClick = () => alert('Primary action button clicked.');
+
+const primaryActionButtonProps = {
+  onClick,
+};
+
 export const Default = () => (
   <Menu positioning="below-end">
     <MenuTrigger disableButtonEnhancement>
-      {(triggerProps: MenuButtonProps) => <SplitButton menuButton={triggerProps}>Example</SplitButton>}
+      {(triggerProps: MenuButtonProps) => (
+        <SplitButton menuButton={triggerProps} primaryActionButton={primaryActionButtonProps}>
+          Example
+        </SplitButton>
+      )}
     </MenuTrigger>
 
     <MenuPopover>