Add page layout tab icon picker (#19818)

Adds the ability to change the icon of a record page layout tab from the
side panel in tab edit mode, and sets a default icon for newly-created
record page tabs (no default for dashboards).

<img width="916" height="312" alt="Screenshot 2026-04-17 at 19 55 51"
src="https://github.com/user-attachments/assets/d9f57e89-d40d-483e-b508-5d7318df1ef5"
/>
This commit is contained in:
Weiko
2026-04-17 20:19:46 +02:00
committed by GitHub
parent 4a5702328a
commit 13b32a22b6
6 changed files with 179 additions and 13 deletions
@@ -34,6 +34,7 @@ const makeTab = (
id: string,
widgets: PageLayoutWidget[],
layoutMode?: PageLayoutTabLayoutMode,
overrides?: Partial<DraftPageLayout['tabs'][number]>,
): DraftPageLayout['tabs'][number] =>
({
id,
@@ -44,6 +45,7 @@ const makeTab = (
isActive: true,
layoutMode,
widgets,
...overrides,
}) as DraftPageLayout['tabs'][number];
describe('convertPageLayoutDraftToUpdateInput', () => {
@@ -109,6 +111,26 @@ describe('convertPageLayoutDraftToUpdateInput', () => {
expect(result.objectMetadataId).toBeNull();
});
it('should propagate tab icon to the update input', () => {
const draft = makeDraft([
makeTab('tab-1', [], PageLayoutTabLayoutMode.GRID, {
icon: 'IconHome',
}),
]);
const result = convertPageLayoutDraftToUpdateInput(draft);
expect(result.tabs[0].icon).toBe('IconHome');
});
it('should send null icon when tab icon is undefined', () => {
const draft = makeDraft([makeTab('tab-1', [])]);
const result = convertPageLayoutDraftToUpdateInput(draft);
expect(result.tabs[0].icon).toBeNull();
});
it('should handle multiple tabs', () => {
const draft = makeDraft([
makeTab('tab-1', [makeWidget({ id: 'w1' })]),
@@ -59,6 +59,7 @@ export const convertPageLayoutDraftToUpdateInput = (
id: tab.id,
title: tab.title,
position: tab.position,
icon: tab.icon ?? null,
layoutMode: tab.layoutMode,
widgets: widgets.map((widget, widgetIndex) => ({
id: widget.id,