From 6f317ea8744a1bac19fb01ac2df5170222106937 Mon Sep 17 00:00:00 2001 From: Pasang Tamang <45009265+pasangtamang@users.noreply.github.com> Date: Thu, 19 Feb 2026 15:31:35 +0545 Subject: [PATCH 1/4] Changed the modal size to medium data type picker modals. --- ...property-editor-ui-picker-modal.element.ts | 72 ++++++++++++++----- .../property-editor-ui-picker-modal.token.ts | 2 +- ...ker-flow-data-type-picker-modal.element.ts | 9 ++- ...icker-flow-data-type-picker-modal.token.ts | 2 +- .../data-type-picker-flow-modal.element.ts | 13 +++- 5 files changed, 73 insertions(+), 25 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/ui-picker-modal/property-editor-ui-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/ui-picker-modal/property-editor-ui-picker-modal.element.ts index 176107a44bb4..8dcc543a624c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/ui-picker-modal/property-editor-ui-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/ui-picker-modal/property-editor-ui-picker-modal.element.ts @@ -49,9 +49,9 @@ export class UmbPropertyEditorUIPickerModalElement extends UmbModalBaseElement< const result = !query ? this._propertyEditorUIs : this._propertyEditorUIs.filter( - (propertyEditorUI) => - propertyEditorUI.name.toLowerCase().includes(query) || propertyEditorUI.alias.toLowerCase().includes(query), - ); + (propertyEditorUI) => + propertyEditorUI.name.toLowerCase().includes(query) || propertyEditorUI.alias.toLowerCase().includes(query), + ); this.#groupPropertyEditorUIs(result); } @@ -96,13 +96,13 @@ export class UmbPropertyEditorUIPickerModalElement extends UmbModalBaseElement< #renderGrid() { return html` ${repeat( - this._groupedPropertyEditorUIs, - (group) => group.key, - (group) => html` + this._groupedPropertyEditorUIs, + (group) => group.key, + (group) => html`

${group.key}

${this.#renderGroupItems(group.items)} `, - )} + )} `; } @@ -110,23 +110,31 @@ export class UmbPropertyEditorUIPickerModalElement extends UmbModalBaseElement< return html` `; } static override styles = [ css` + :host { + display: block; + container-type: inline-size; + } + #filter { width: 100%; margin-bottom: var(--uui-size-space-4); @@ -141,12 +149,30 @@ export class UmbPropertyEditorUIPickerModalElement extends UmbModalBaseElement< #item-grid { display: grid; - grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); + grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; grid-gap: var(--uui-size-space-4); } + @container (min-width: 560px) { + #item-grid { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + } + + @container (min-width: 740px) { + #item-grid { + grid-template-columns: repeat(5, minmax(0, 1fr)); + } + } + + @container (min-width: 920px) { + #item-grid { + grid-template-columns: repeat(6, minmax(0, 1fr)); + } + } + #item-grid .item { display: flex; align-items: flex-start; @@ -188,6 +214,14 @@ export class UmbPropertyEditorUIPickerModalElement extends UmbModalBaseElement< font-size: 2em; margin-bottom: var(--uui-size-space-2); } + + #item-grid .item .label { + max-width: 100%; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + } `, ]; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/ui-picker-modal/property-editor-ui-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/ui-picker-modal/property-editor-ui-picker-modal.token.ts index 9ffc832a142a..2f045b48e9d4 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/ui-picker-modal/property-editor-ui-picker-modal.token.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/ui-picker-modal/property-editor-ui-picker-modal.token.ts @@ -12,6 +12,6 @@ export const UMB_PROPERTY_EDITOR_UI_PICKER_MODAL = new UmbModalToken< >('Umb.Modal.PropertyEditorUiPicker', { modal: { type: 'sidebar', - size: 'small', + size: 'medium', }, }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/data-type/modals/data-type-picker-flow/data-type-picker-flow-data-type-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/data-type/modals/data-type-picker-flow/data-type-picker-flow-data-type-picker-modal.element.ts index c9c5d9076743..3517f48bafd6 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/data-type/modals/data-type-picker-flow/data-type-picker-flow-data-type-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/data-type/modals/data-type-picker-flow/data-type-picker-flow-data-type-picker-modal.element.ts @@ -83,7 +83,7 @@ export class UmbDataTypePickerFlowDataTypePickerModalElement extends UmbModalBas this.#handleClick(dataType)}>
- ${dataType.name} + ${dataType.name}
@@ -199,6 +199,13 @@ export class UmbDataTypePickerFlowDataTypePickerModalElement extends UmbModalBas #create-button:not(:first-child) { margin-top: var(--uui-size-layout-1); } + #item-grid .item .label { + max-width: 100%; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + } `, ]; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/data-type/modals/data-type-picker-flow/data-type-picker-flow-data-type-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/data-type/modals/data-type-picker-flow/data-type-picker-flow-data-type-picker-modal.token.ts index d9712ad265e3..2fc329b5a303 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/data-type/modals/data-type-picker-flow/data-type-picker-flow-data-type-picker-modal.token.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/data-type/modals/data-type-picker-flow/data-type-picker-flow-data-type-picker-modal.token.ts @@ -17,6 +17,6 @@ export const UMB_DATA_TYPE_PICKER_FLOW_DATA_TYPE_PICKER_MODAL = new UmbModalToke >('Umb.Modal.DataTypePickerFlowDataTypePicker', { modal: { type: 'sidebar', - size: 'small', + size: 'medium', }, }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/data-type/modals/data-type-picker-flow/data-type-picker-flow-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/data-type/modals/data-type-picker-flow/data-type-picker-flow-modal.element.ts index 62d6903ad71d..dcbbf58538fb 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/data-type/modals/data-type-picker-flow/data-type-picker-flow-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/data-type/modals/data-type-picker-flow/data-type-picker-flow-modal.element.ts @@ -382,7 +382,7 @@ export class UmbDataTypePickerFlowModalElement extends UmbModalBaseElement< return html`
- ${label} + ${label}
`; } @@ -398,7 +398,7 @@ export class UmbDataTypePickerFlowModalElement extends UmbModalBaseElement< this.#handleDataTypeClick(dataType)}>
- ${dataType.name} + ${dataType.name}
@@ -478,7 +478,14 @@ export class UmbDataTypePickerFlowModalElement extends UmbModalBaseElement< font-size: 2em; margin: auto; } - + #item-grid .item .label { + max-width: 100%; + min-width: 0; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + } .category-name { text-transform: capitalize; } From 4c529c195e2fa0020ddc358c8288c80c5838e293 Mon Sep 17 00:00:00 2001 From: Pasang Tamang <45009265+pasangtamang@users.noreply.github.com> Date: Thu, 19 Feb 2026 18:19:37 +0545 Subject: [PATCH 2/4] Updated the icon and label alignment so that icon always align vertically top and label in each starts from same position. --- .../property-editor-ui-picker-modal.element.ts | 2 +- ...ata-type-picker-flow-data-type-picker-modal.element.ts | 8 +++++--- .../data-type-picker-flow-modal.element.ts | 8 +++++--- 3 files changed, 11 insertions(+), 7 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/ui-picker-modal/property-editor-ui-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/ui-picker-modal/property-editor-ui-picker-modal.element.ts index 8dcc543a624c..d1f88886c42a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/ui-picker-modal/property-editor-ui-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/ui-picker-modal/property-editor-ui-picker-modal.element.ts @@ -202,7 +202,7 @@ export class UmbPropertyEditorUIPickerModalElement extends UmbModalBaseElement< display: flex; align-items: center; flex-direction: column; - justify-content: center; + justify-content: flex-start; font-size: 0.8rem; height: 100%; width: 100%; diff --git a/src/Umbraco.Web.UI.Client/src/packages/data-type/modals/data-type-picker-flow/data-type-picker-flow-data-type-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/data-type/modals/data-type-picker-flow/data-type-picker-flow-data-type-picker-modal.element.ts index 3517f48bafd6..dfefc4924337 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/data-type/modals/data-type-picker-flow/data-type-picker-flow-data-type-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/data-type/modals/data-type-picker-flow/data-type-picker-flow-data-type-picker-modal.element.ts @@ -165,15 +165,17 @@ export class UmbDataTypePickerFlowDataTypePickerModalElement extends UmbModalBas padding: var(--uui-size-space-2); - display: grid; - grid-template-rows: 40px 1fr; + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; height: 100%; width: 100%; word-break: break-word; } .icon { font-size: 2em; - margin: auto; + margin-bottom: var(--uui-size-space-2); } #create-button { diff --git a/src/Umbraco.Web.UI.Client/src/packages/data-type/modals/data-type-picker-flow/data-type-picker-flow-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/data-type/modals/data-type-picker-flow/data-type-picker-flow-modal.element.ts index dcbbf58538fb..cecd65b159c5 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/data-type/modals/data-type-picker-flow/data-type-picker-flow-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/data-type/modals/data-type-picker-flow/data-type-picker-flow-modal.element.ts @@ -467,8 +467,10 @@ export class UmbDataTypePickerFlowModalElement extends UmbModalBaseElement< padding: var(--uui-size-space-2); - display: grid; - grid-template-rows: 40px 1fr; + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; height: 100%; width: 100%; word-break: break-word; @@ -476,7 +478,7 @@ export class UmbDataTypePickerFlowModalElement extends UmbModalBaseElement< #item-grid .item .icon { font-size: 2em; - margin: auto; + margin-bottom: var(--uui-size-space-2); } #item-grid .item .label { max-width: 100%; From 1fa2e9782ac04f76f3b0020323485d67bb0921f1 Mon Sep 17 00:00:00 2001 From: leekelleher Date: Thu, 26 Feb 2026 16:43:38 +0000 Subject: [PATCH 3/4] Linting --- ...property-editor-ui-picker-modal.element.ts | 30 +++++++++---------- ...ker-flow-data-type-picker-modal.element.ts | 7 ++++- .../data-type-picker-flow-modal.element.ts | 2 ++ 3 files changed, 23 insertions(+), 16 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/ui-picker-modal/property-editor-ui-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/ui-picker-modal/property-editor-ui-picker-modal.element.ts index d1f88886c42a..9641ab87267a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/ui-picker-modal/property-editor-ui-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/ui-picker-modal/property-editor-ui-picker-modal.element.ts @@ -49,9 +49,9 @@ export class UmbPropertyEditorUIPickerModalElement extends UmbModalBaseElement< const result = !query ? this._propertyEditorUIs : this._propertyEditorUIs.filter( - (propertyEditorUI) => - propertyEditorUI.name.toLowerCase().includes(query) || propertyEditorUI.alias.toLowerCase().includes(query), - ); + (propertyEditorUI) => + propertyEditorUI.name.toLowerCase().includes(query) || propertyEditorUI.alias.toLowerCase().includes(query), + ); this.#groupPropertyEditorUIs(result); } @@ -96,13 +96,13 @@ export class UmbPropertyEditorUIPickerModalElement extends UmbModalBaseElement< #renderGrid() { return html` ${repeat( - this._groupedPropertyEditorUIs, - (group) => group.key, - (group) => html` + this._groupedPropertyEditorUIs, + (group) => group.key, + (group) => html`

${group.key}

${this.#renderGroupItems(group.items)} `, - )} + )} `; } @@ -110,11 +110,11 @@ export class UmbPropertyEditorUIPickerModalElement extends UmbModalBaseElement< return html` `; } @@ -219,7 +219,7 @@ export class UmbPropertyEditorUIPickerModalElement extends UmbModalBaseElement< max-width: 100%; display: -webkit-box; -webkit-line-clamp: 2; - -webkit-box-orient: vertical; + -webkit-box-orient: vertical; overflow: hidden; } `, diff --git a/src/Umbraco.Web.UI.Client/src/packages/data-type/modals/data-type-picker-flow/data-type-picker-flow-data-type-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/data-type/modals/data-type-picker-flow/data-type-picker-flow-data-type-picker-modal.element.ts index dfefc4924337..b826fe25cf2f 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/data-type/modals/data-type-picker-flow/data-type-picker-flow-data-type-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/data-type/modals/data-type-picker-flow/data-type-picker-flow-data-type-picker-modal.element.ts @@ -173,6 +173,7 @@ export class UmbDataTypePickerFlowDataTypePickerModalElement extends UmbModalBas width: 100%; word-break: break-word; } + .icon { font-size: 2em; margin-bottom: var(--uui-size-space-2); @@ -187,6 +188,7 @@ export class UmbDataTypePickerFlowDataTypePickerModalElement extends UmbModalBas width: 100%; height: 100%; } + #create-button .content { text-align: center; box-sizing: border-box; @@ -195,17 +197,20 @@ export class UmbDataTypePickerFlowDataTypePickerModalElement extends UmbModalBas display: grid; grid-template-rows: 40px 1fr; + height: 100%; width: 100%; } + #create-button:not(:first-child) { margin-top: var(--uui-size-layout-1); } + #item-grid .item .label { max-width: 100%; display: -webkit-box; -webkit-line-clamp: 2; - -webkit-box-orient: vertical; + -webkit-box-orient: vertical; overflow: hidden; } `, diff --git a/src/Umbraco.Web.UI.Client/src/packages/data-type/modals/data-type-picker-flow/data-type-picker-flow-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/data-type/modals/data-type-picker-flow/data-type-picker-flow-modal.element.ts index cecd65b159c5..d5d3d42f415b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/data-type/modals/data-type-picker-flow/data-type-picker-flow-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/data-type/modals/data-type-picker-flow/data-type-picker-flow-modal.element.ts @@ -480,6 +480,7 @@ export class UmbDataTypePickerFlowModalElement extends UmbModalBaseElement< font-size: 2em; margin-bottom: var(--uui-size-space-2); } + #item-grid .item .label { max-width: 100%; min-width: 0; @@ -488,6 +489,7 @@ export class UmbDataTypePickerFlowModalElement extends UmbModalBaseElement< -webkit-box-orient: vertical; overflow: hidden; } + .category-name { text-transform: capitalize; } From 28ce4be165b2f23dd59cfcb35005c63d5b0ae044 Mon Sep 17 00:00:00 2001 From: leekelleher Date: Thu, 26 Feb 2026 16:44:00 +0000 Subject: [PATCH 4/4] Adds `justify-items: center` for "Create new" button icon --- .../data-type-picker-flow-data-type-picker-modal.element.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/data-type/modals/data-type-picker-flow/data-type-picker-flow-data-type-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/data-type/modals/data-type-picker-flow/data-type-picker-flow-data-type-picker-modal.element.ts index b826fe25cf2f..419e6ed0e3ee 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/data-type/modals/data-type-picker-flow/data-type-picker-flow-data-type-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/data-type/modals/data-type-picker-flow/data-type-picker-flow-data-type-picker-modal.element.ts @@ -196,6 +196,7 @@ export class UmbDataTypePickerFlowDataTypePickerModalElement extends UmbModalBas padding: var(--uui-size-space-2); display: grid; + justify-items: center; grid-template-rows: 40px 1fr; height: 100%;