From 19715a94127556d1bd2bc569bc0499211590c049 Mon Sep 17 00:00:00 2001 From: Boyan Bratvanov <6027160+bratvanov@users.noreply.github.com> Date: Wed, 29 Oct 2025 14:08:20 +0200 Subject: [PATCH] expose field admin main position typing --- docs/fields/overview.mdx | 2 +- packages/payload/src/fields/config/types.ts | 6 ++++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/docs/fields/overview.mdx b/docs/fields/overview.mdx index 3a81ab5b9ad..5c0a4cefedf 100644 --- a/docs/fields/overview.mdx +++ b/docs/fields/overview.mdx @@ -609,7 +609,7 @@ The following options are available: | **`condition`** | Programmatically show / hide fields based on other fields. [More details](#conditional-logic). | | **`components`** | All Field Components can be swapped out for [Custom Components](../custom-components/overview) that you define. | | **`description`** | Helper text to display alongside the field to provide more information for the editor. [More details](#description). | -| **`position`** | Specify if the field should be rendered in the sidebar by defining `position: 'sidebar'`. | +| **`position`** | Use `'sidebar'` to render the field in the sidebar or `'main'` (default) to keep it in the main area. | | **`width`** | Restrict the width of a field. You can pass any string-based value here, be it pixels, percentages, etc. This property is especially useful when fields are nested within a `Row` type where they can be organized horizontally. | | **`style`** | [CSS Properties](https://developer.mozilla.org/en-US/docs/Web/CSS) to inject into the root element of the field. | | **`className`** | Attach a [CSS class attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors) to the root DOM element of a field. | diff --git a/packages/payload/src/fields/config/types.ts b/packages/payload/src/fields/config/types.ts index 425f8a99726..db3dd13482e 100644 --- a/packages/payload/src/fields/config/types.ts +++ b/packages/payload/src/fields/config/types.ts @@ -340,6 +340,8 @@ export type BlocksFilterOptions = ) => BlockSlugOrString | Promise | true) | BlockSlugOrString +export type FieldPosition = 'main' | 'sidebar' + export type FieldAdmin = { className?: string components?: { @@ -382,7 +384,7 @@ export type FieldAdmin = { */ disableListFilter?: boolean hidden?: boolean - position?: 'sidebar' + position?: FieldPosition readOnly?: boolean style?: CSSProperties width?: CSSProperties['width'] @@ -411,7 +413,7 @@ export type AdminClient = { */ disableListFilter?: boolean hidden?: boolean - position?: 'sidebar' + position?: FieldPosition readOnly?: boolean style?: { '--field-width'?: CSSProperties['width'] } & CSSProperties width?: CSSProperties['width']