feat: add support for custom UnpublishButton component (#15400)

### What
Adds the ability to customize the `UnpublishButton` component in
collection and global configs, following the same pattern as
`PublishButton`.
### Why
`UnpublishButton` was hardcoded while other document control buttons
(`PublishButton`, `SaveButton`, etc.) could be customized.
### How
Added type definitions, config options, component resolution in
renderDocumentSlots, and updated DocumentControls to use the
RenderCustomComponent pattern.
---------
Co-authored-by: Alessio Gravili <github@gravili.net>

Author: PatrikKozak

docs/configuration/collections.mdx

@@ -242,6 +242,7 @@ The following options are available:
 |`SaveDraftButton`| Replace the default Save Draft Button within the Edit View. [Drafts](../versions/drafts) must be enabled and autosave must be disabled. [More details](../custom-components/edit-view#savedraftbutton). |
 |`Status`| Replace the default Status component within the Edit View. [Drafts](../versions/drafts) must be enabled. [More details](../custom-components/edit-view#status). |
 |`PublishButton`| Replace the default Publish Button within the Edit View. [Drafts](../versions/drafts) must be enabled. [More details](../custom-components/edit-view#publishbutton). |
+|`UnpublishButton`| Replace the default Unpublish Button within the Edit View. [Drafts](../versions/drafts) must be enabled. [More details](../custom-components/edit-view#unpublishbutton). |
 |`PreviewButton`| Replace the default Preview Button within the Edit View. [Preview](../admin/preview) must be enabled. [More details](../custom-components/edit-view#previewbutton). |
 |`Upload`| Replace the default Upload component within the Edit View. [Upload](../upload/overview) must be enabled. [More details](../custom-components/edit-view#upload). |
 

docs/configuration/globals.mdx

@@ -186,6 +186,7 @@ The following options are available:
 |`SaveButton`| Replace the default Save Button with a Custom Component. [Drafts](../versions/drafts) must be disabled. [More details](../custom-components/edit-view#savebutton). |
 |`SaveDraftButton`| Replace the default Save Draft Button with a Custom Component. [Drafts](../versions/drafts) must be enabled and autosave must be disabled. [More details](../custom-components/edit-view#savedraftbutton). |
 |`PublishButton`| Replace the default Publish Button with a Custom Component. [Drafts](../versions/drafts) must be enabled. [More details](../custom-components/edit-view#publishbutton). |
+|`UnpublishButton`| Replace the default Unpublish Button with a Custom Component. [Drafts](../versions/drafts) must be enabled. [More details](../custom-components/edit-view#unpublishbutton). |
 |`PreviewButton`| Replace the default Preview Button with a Custom Component. [Preview](../admin/preview) must be enabled. [More details](../custom-components/edit-view#previewbutton). |
 |`Status`| Replace the default Status component with a Custom Component. [Drafts](../versions/drafts) must be enabled. [More details](../custom-components/edit-view#status). |
 

docs/custom-components/edit-view.mdx

@@ -108,6 +108,7 @@ The following options are available:
 |`SaveButton`| A button that saves the current document. [More details](#savebutton). |
 |`SaveDraftButton`| A button that saves the current document as a draft. [More details](#savedraftbutton). |
 |`PublishButton`| A button that publishes the current document. [More details](#publishbutton). |
+|`UnpublishButton`| A button that unpublishes the current document. [More details](#unpublishbutton). |
 |`PreviewButton`| A button that previews the current document. [More details](#previewbutton). |
 |`Description`| A description of the Collection. [More details](#description). |
 |`Status`| A component that represents the status of the current document. [More details](#status). |
@@ -143,6 +144,7 @@ The following options are available:
 |`SaveButton`| A button that saves the current document. [More details](#savebutton). |
 |`SaveDraftButton`| A button that saves the current document as a draft. [More details](#savedraftbutton). |
 |`PublishButton`| A button that publishes the current document. [More details](#publishbutton). |
+|`UnpublishButton`| A button that unpublishes the current document. [More details](#unpublishbutton). |
 |`PreviewButton`| A button that previews the current document. [More details](#previewbutton). |
 |`Description`| A description of the Global. [More details](#description). |
 |`Status`| A component that represents the status of the global. [More details](#status). |
@@ -429,7 +431,7 @@ Here's an example of a custom `PublishButton` component:
 ```tsx
 importReactfrom'react'
 import { PublishButton } from'@payloadcms/ui'
-importtype { PublishButtonClientProps } from'payload'
+importtype { PublishButtonServerProps } from'payload'
 
 exportfunction MyPublishButton(props:PublishButtonServerProps) {
 return <PublishButtonlabel="Publish" />
@@ -442,13 +444,61 @@ export function MyPublishButton(props: PublishButtonServerProps) {
 'use client'
 importReactfrom'react'
 import { PublishButton } from'@payloadcms/ui'
-importtype { PublishButtonClientProps } from'payload'
 
-exportfunction MyPublishButton(props:PublishButtonClientProps) {
+exportfunction MyPublishButton() {
 return <PublishButtonlabel="Publish" />
 }
 ```
 
+### UnpublishButton
+
+The `UnpublishButton` property allows you to render a custom Unpublish Button in the Edit View.
+
+To add an `UnpublishButton` component, use the `components.edit.UnpublishButton` property in your [Collection Config](../configuration/collections) or `components.elements.UnpublishButton` in your [Global Config](../configuration/globals):
+
+```ts
+importtype { CollectionConfig } from'payload'
+
+exportconst MyCollection:CollectionConfig= {
+// ...
+ admin: {
+ components: {
+ edit: {
+// highlight-start
+ UnpublishButton: '/path/to/MyUnpublishButton',
+// highlight-end
+ },
+ },
+ },
+}
+```
+
+Here's an example of a custom `UnpublishButton` component:
+
+#### Server Component
+
+```tsx
+importReactfrom'react'
+import { UnpublishButton } from'@payloadcms/ui'
+importtype { UnpublishButtonServerProps } from'payload'
+
+exportfunction MyUnpublishButton(props:UnpublishButtonServerProps) {
+return <UnpublishButtonlabel="Unpublish" />
+}
+```
+
+#### Client Component
+
+```tsx
+'use client'
+importReactfrom'react'
+import { UnpublishButton } from'@payloadcms/ui'
+
+exportfunction MyUnpublishButton() {
+return <UnpublishButtonlabel="Unpublish" />
+}
+```
+
 ### PreviewButton
 
 The `PreviewButton` property allows you to render a custom Preview Button in the Edit View.

packages/next/src/views/Document/renderDocumentSlots.tsx

@@ -13,6 +13,7 @@ import type {
 ServerFunction,
 ServerProps,
 StaticDescription,
+UnpublishButtonServerPropsOnly,
 ViewDescriptionClientProps,
 ViewDescriptionServerPropsOnly,
 }from'payload'
@@ -148,6 +149,18 @@ export const renderDocumentSlots: (args: {
 })
 }
 
+constCustomUnpublishButton=
+collectionConfig?.admin?.components?.edit?.UnpublishButton||
+globalConfig?.admin?.components?.elements?.UnpublishButton
+
+if(CustomUnpublishButton){
+components.UnpublishButton=RenderServerComponent({
+Component: CustomUnpublishButton,
+importMap: req.payload.importMap,
+serverProps: serverPropssatisfiesUnpublishButtonServerPropsOnly,
+})
+}
+
 constCustomSaveDraftButton=
 collectionConfig?.admin?.components?.edit?.SaveDraftButton||
 globalConfig?.admin?.components?.elements?.SaveDraftButton

packages/payload/src/admin/elements/PublishButton.ts

@@ -1,9 +1,7 @@
 importtype{ServerProps}from'../../config/types.js'
 
-exporttypePublishButtonClientProps={
-label?: string
-}
+exporttypePublishButtonClientProps={}
 
 exporttypePublishButtonServerPropsOnly={}&ServerProps
 
-exporttypePublishButtonServerProps=PublishButtonClientProps&PublishButtonServerPropsOnly
+exporttypePublishButtonServerProps=PublishButtonServerPropsOnly

packages/payload/src/admin/elements/UnpublishButton.ts

@@ -0,0 +1,7 @@
+importtype{ServerProps}from'../../config/types.js'
+
+exporttypeUnpublishButtonClientProps={}
+
+exporttypeUnpublishButtonServerPropsOnly={}&ServerProps
+
+exporttypeUnpublishButtonServerProps=UnpublishButtonServerPropsOnly

packages/payload/src/admin/types.ts

@@ -80,11 +80,16 @@ export type {
 SaveDraftButtonServerProps,
 SaveDraftButtonServerPropsOnly,
 }from'./elements/SaveDraftButton.js'
-
 exporttype{CustomStatus}from'./elements/Status.js'
 
 exporttype{Column}from'./elements/Table.js'
 
+exporttype{
+UnpublishButtonClientProps,
+UnpublishButtonServerProps,
+UnpublishButtonServerPropsOnly,
+}from'./elements/UnpublishButton.js'
+
 exporttype{CustomUpload}from'./elements/Upload.js'
 
 exporttype{
@@ -570,6 +575,7 @@ export type DocumentSlots = {
 SaveButton?: React.ReactNode
 SaveDraftButton?: React.ReactNode
 Status?: React.ReactNode
+UnpublishButton?: React.ReactNode
 Upload?: React.ReactNode
 UploadControls?: React.ReactNode
 }

packages/payload/src/bin/generateImportMap/iterateCollections.ts

@@ -43,6 +43,7 @@ export function iterateCollections({
 addToImportMap(collection.admin?.components?.edit?.SaveButton)
 addToImportMap(collection.admin?.components?.edit?.SaveDraftButton)
 addToImportMap(collection.admin?.components?.edit?.Status)
+addToImportMap(collection.admin?.components?.edit?.UnpublishButton)
 addToImportMap(collection.admin?.components?.edit?.Upload)
 
 if(collection.upload?.admin?.components?.controls){

packages/payload/src/bin/generateImportMap/iterateGlobals.ts

@@ -36,6 +36,7 @@ export function iterateGlobals({
 addToImportMap(global.admin?.components?.elements?.SaveButton)
 addToImportMap(global.admin?.components?.elements?.SaveDraftButton)
 addToImportMap(global.admin?.components?.elements?.Status)
+addToImportMap(global.admin?.components?.elements?.UnpublishButton)
 
 if(global.admin?.components?.views?.edit){
 for(consteditViewConfigofObject.values(global.admin?.components?.views?.edit)){

packages/payload/src/collections/config/types.ts

@@ -2,7 +2,15 @@
 importtype{GraphQLInputObjectType,GraphQLNonNull,GraphQLObjectType}from'graphql'
 importtype{DeepRequired,IsAny,MarkOptional}from'ts-essentials'
 
-importtype{CustomStatus,CustomUpload,ViewTypes}from'../../admin/types.js'
+importtype{
+CustomStatus,
+CustomUpload,
+PublishButtonClientProps,
+PublishButtonServerProps,
+UnpublishButtonClientProps,
+UnpublishButtonServerProps,
+ViewTypes,
+}from'../../admin/types.js'
 importtype{ArgumentsasMeArguments}from'../../auth/operations/me.js'
 importtype{
 ArgumentsasRefreshArguments,
@@ -358,7 +366,7 @@ export type CollectionAdminOptions = {
  * Replaces the "Publish" button
  * + drafts must be enabled
  */
-PublishButton?: CustomComponent
+PublishButton?: PayloadComponent<PublishButtonServerProps,PublishButtonClientProps>
 /**
  * Replaces the "Save" button
  * + drafts must be disabled
@@ -374,6 +382,11 @@ export type CollectionAdminOptions = {
  * Replaces the "Status" section
  */
 Status?: CustomStatus
+/**
+ * Replaces the "Unpublish" button
+ * + drafts must be enabled
+ */
+UnpublishButton?: PayloadComponent<UnpublishButtonServerProps,UnpublishButtonClientProps>
 /**
  * Replaces the "Upload" section
  * + upload must be enabled