Skip to content

Commit 9941097

Browse files
Zayooo00Zayooo00
committed
feat: allow overriding default English labels in admin bar
Adds an optional `labels` prop to `PayloadAdminBar` that lets consumers swap any of the hardcoded English strings rendered inside the bar: - `edit`: text on the Edit link (default `Edit <singular>` / `Edit page`) - `create`: text on the Create link (default `New <singular>` / `New page`) - `exitPreview`: text on the preview-exit button (default `Exit preview mode`) - `logout`: text on the Logout link (default `Logout`) - `profile`: fallback shown when the user has no email (default `Profile`) `edit` and `create` accept either a string or a function `(args: { singular?: string }) => string`, so consumers using a localized `collectionLabels.singular` can interpolate it into the translated label. Defaults are unchanged, so existing consumers see no behavior change. Adds a Customizing labels section to the README with a Polish example.
1 parent 94cc0f4 commit 9941097

3 files changed

Lines changed: 81 additions & 29 deletions

File tree

‎packages/admin-bar/README.md‎

Lines changed: 45 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -93,27 +93,48 @@ export const App = (appProps) => {
9393

9494
### Props
9595

96-
| Property | Type | Required | Default | Description |
97-
| ------------------ | ------------------------------------------------------------------------------------------------------------------------ | -------- | ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
98-
| cmsURL | `string` | true | `http://localhost:8000` | `serverURL` as defined in your [Payload config](https://payloadcms.com/docs/configuration/overview#options) |
99-
| adminPath | `string` | false | /admin | `routes` as defined in your [Payload config](https://payloadcms.com/docs/configuration/overview#options) |
100-
| apiPath | `string` | false | /api | `routes` as defined in your [Payload config](https://payloadcms.com/docs/configuration/overview#options) |
101-
| authCollectionSlug | `string` | false | 'users' | Slug of your [auth collection](https://payloadcms.com/docs/configuration/collections) |
102-
| collectionSlug | `string` | true | undefined | Slug of your [collection](https://payloadcms.com/docs/configuration/collections) |
103-
| collectionLabels | `{ singular?: string, plural?: string }` | false | undefined | Labels of your [collection](https://payloadcms.com/docs/configuration/collections) |
104-
| id | `string` | true | undefined | id of the document |
105-
| logo | `ReactElement` | false | undefined | Custom logo |
106-
| classNames | `{ logo?: string, user?: string, controls?: string, create?: string, logout?: string, edit?: string, preview?: string }` | false | undefined | Custom class names, one for each rendered element |
107-
| logoProps | `{[key: string]?: unknown}` | false | undefined | Custom props |
108-
| userProps | `{[key: string]?: unknown}` | false | undefined | Custom props |
109-
| divProps | `{[key: string]?: unknown}` | false | undefined | Custom props |
110-
| createProps | `{[key: string]?: unknown}` | false | undefined | Custom props |
111-
| logoutProps | `{[key: string]?: unknown}` | false | undefined | Custom props |
112-
| editProps | `{[key: string]?: unknown}` | false | undefined | Custom props |
113-
| previewProps | `{[key: string]?: unknown}` | false | undefined | Custom props |
114-
| style | `CSSProperties` | false | undefined | Custom inline style |
115-
| unstyled | `boolean` | false | undefined | If true, renders no inline style |
116-
| onAuthChange | `(user: PayloadMeUser) => void` | false | undefined | Fired on each auth change |
117-
| devMode | `boolean` | false | undefined | If true, fakes authentication (useful when dealing with [SameSite cookies](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie/SameSite)) |
118-
| preview | `boolean` | false | undefined | If true, renders an exit button with your `onPreviewExit` handler) |
119-
| onPreviewExit | `function` | false | undefined | Callback for the preview button `onClick` event) |
96+
| Property | Type | Required | Default | Description |
97+
| ------------------ | ------------------------------------------------------------------------------------------------------------------------ | -------- | ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
98+
| cmsURL | `string` | true | `http://localhost:8000` | `serverURL` as defined in your [Payload config](https://payloadcms.com/docs/configuration/overview#options) |
99+
| adminPath | `string` | false | /admin | `routes` as defined in your [Payload config](https://payloadcms.com/docs/configuration/overview#options) |
100+
| apiPath | `string` | false | /api | `routes` as defined in your [Payload config](https://payloadcms.com/docs/configuration/overview#options) |
101+
| authCollectionSlug | `string` | false | 'users' | Slug of your [auth collection](https://payloadcms.com/docs/configuration/collections) |
102+
| collectionSlug | `string` | true | undefined | Slug of your [collection](https://payloadcms.com/docs/configuration/collections) |
103+
| collectionLabels | `{ singular?: string, plural?: string }` | false | undefined | Labels of your [collection](https://payloadcms.com/docs/configuration/collections) |
104+
| id | `string` | true | undefined | id of the document |
105+
| logo | `ReactElement` | false | undefined | Custom logo |
106+
| classNames | `{ logo?: string, user?: string, controls?: string, create?: string, logout?: string, edit?: string, preview?: string }` | false | undefined | Custom class names, one for each rendered element |
107+
| logoProps | `{[key: string]?: unknown}` | false | undefined | Custom props |
108+
| userProps | `{[key: string]?: unknown}` | false | undefined | Custom props |
109+
| divProps | `{[key: string]?: unknown}` | false | undefined | Custom props |
110+
| createProps | `{[key: string]?: unknown}` | false | undefined | Custom props |
111+
| logoutProps | `{[key: string]?: unknown}` | false | undefined | Custom props |
112+
| editProps | `{[key: string]?: unknown}` | false | undefined | Custom props |
113+
| previewProps | `{[key: string]?: unknown}` | false | undefined | Custom props |
114+
| style | `CSSProperties` | false | undefined | Custom inline style |
115+
| unstyled | `boolean` | false | undefined | If true, renders no inline style |
116+
| onAuthChange | `(user: PayloadMeUser) => void` | false | undefined | Fired on each auth change |
117+
| devMode | `boolean` | false | undefined | If true, fakes authentication (useful when dealing with [SameSite cookies](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie/SameSite)) |
118+
| preview | `boolean` | false | undefined | If true, renders an exit button with your `onPreviewExit` handler) |
119+
| onPreviewExit | `function` | false | undefined | Callback for the preview button `onClick` event) |
120+
| labels | `{ edit?, create?, exitPreview?, logout?, profile? }` | false | undefined | Override the default English labels on each link. `edit` and `create` accept either a string or a function `(args: { singular?: string }) => string`. Omitted entries fall back to the built-in English string. |
121+
122+
### Customizing labels
123+
124+
The admin bar ships with English labels by default. Pass `labels` to localize or rename any of them:
125+
126+
```jsx
127+
<PayloadAdminBar
128+
cmsURL="https://cms.website.com"
129+
collectionSlug="pages"
130+
collectionLabels={{ singular: 'strona', plural: 'strony' }}
131+
id="12345"
132+
labels={{
133+
edit: ({ singular }) => `Edytuj ${singular ?? 'stronę'}`,
134+
create: ({ singular }) => `Nowa ${singular ?? 'strona'}`,
135+
exitPreview: 'Wyjdź z podglądu',
136+
logout: 'Wyloguj',
137+
profile: 'Profil',
138+
}}
139+
/>
140+
```

0 commit comments

Comments
 (0)