[PageActions] Add ReactNode as an accepted primaryAction prop value f…

…or customizability (#5946)

.changeset/four-doors-cheer.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Added support for setting a `ReactNode` on the `PageActions` `primaryAction` prop

polaris-react/src/components/PageActions/PageActions.tsx

@@ -15,7 +15,7 @@ import styles from './PageActions.scss';
 
 export interface PageActionsProps {
   /** The primary action for the page */
-  primaryAction?: DisableableAction & LoadableAction;
+  primaryAction?: (DisableableAction & LoadableAction) | React.ReactNode;
   /** The secondary actions for the page */
   secondaryActions?: ComplexAction[] | React.ReactNode;
 }
@@ -26,9 +26,12 @@ export function PageActions({
   primaryAction,
   secondaryActions,
 }: PageActionsProps) {
-  const primaryActionMarkup = primaryAction
-    ? buttonsFrom(primaryAction, {primary: true})
-    : null;
+  let primaryActionMarkup: MaybeJSX = null;
+  if (isReactElement(primaryAction)) {
+    primaryActionMarkup = <>{primaryAction}</>;
+  } else if (primaryAction) {
+    primaryActionMarkup = buttonsFrom(primaryAction, {primary: true});
+  }
 
   let secondaryActionsMarkup: MaybeJSX = null;
   if (isInterface(secondaryActions) && secondaryActions.length > 0) {

polaris-react/src/components/PageActions/README.md

@@ -114,6 +114,32 @@ Not all page actions require a secondary action.
 />
 ```
 
+### Page actions with custom primary action
+
+Use to create a custom primary action.
+
+```jsx
+<PageActions
+  primaryAction={
+    <Button
+      primary
+      connectedDisclosure={{
+        accessibilityLabel: 'Other save actions',
+        actions: [{content: 'Save as draft'}],
+      }}
+    >
+      Save
+    </Button>
+  }
+  secondaryActions={[
+    {
+      content: 'Delete',
+      destructive: true,
+    },
+  ]}
+/>
+```
+
 ### Page actions with custom secondary action
 
 Use to create a custom secondary action.

polaris-react/src/components/PageActions/tests/PageActions.test.tsx

@@ -54,6 +54,15 @@ describe('<PageActions />', () => {
       mountWithApp(<PageActions primaryAction={mockAction} />);
       expect(buttonsFrom).toHaveBeenCalledWith(mockAction, {primary: true});
     });
+
+    it('renders a `ReactNode`', () => {
+      const CustomPrimaryAction = () => null;
+      const pageActions = mountWithApp(
+        <PageActions primaryAction={<CustomPrimaryAction />} />,
+      );
+
+      expect(pageActions).toContainReactComponent(CustomPrimaryAction);
+    });
   });
 
   describe('secondaryActions', () => {