Merge branch 'main' into feature/isolate-auth-flow

src/Umbraco.Web.UI.Client/src/packages/core/modal/common/icon-picker/icon-picker-modal.element.ts

@@ -94,7 +94,6 @@ export class UmbIconPickerModalElement extends UmbModalBaseElement<UmbIconPicker
 							`,
 						)}
 					</uui-color-swatches>
-
 					<hr />
 					<uui-scroll-container id="icon-selection">${this.renderIconSelection()}</uui-scroll-container>
 				</div>
@@ -128,7 +127,8 @@ export class UmbIconPickerModalElement extends UmbModalBaseElement<UmbIconPicker
 					label="${icon}"
 					id="${icon}"
 					@click="${this._changeIcon}"
-					@keyup="${this._changeIcon}"></uui-icon>
+					@keyup="${this._changeIcon}">
+				</uui-icon>
 			`;
 		})}`;
 	}
@@ -167,7 +167,8 @@ export class UmbIconPickerModalElement extends UmbModalBaseElement<UmbIconPicker
 			#icon-selection {
 				line-height: 0;
 				display: grid;
-				grid-template-columns: repeat(auto-fit, minmax(40px, calc(100% / 8)));
+				grid-template-columns: repeat(auto-fit, minmax(40px, calc((100% / 12) - 10px)));
+				gap: 10px;
 				overflow-y: scroll;
 				max-height: 100%;
 				min-height: 0;
@@ -181,6 +182,7 @@ export class UmbIconPickerModalElement extends UmbModalBaseElement<UmbIconPicker
 				height: 100%;
 				padding: var(--uui-size-space-3);
 				box-sizing: border-box;
+				cursor: pointer;
 			}
 
 			#icon-selection .icon-container {
@@ -198,7 +200,7 @@ export class UmbIconPickerModalElement extends UmbModalBaseElement<UmbIconPicker
 			}
 
 			uui-color-swatches {
-				margin: -0.75rem;
+				margin: 0;
 			}
 		`,
 	];

src/Umbraco.Web.UI.Client/src/packages/core/modal/token/icon-picker-modal.token.ts

@@ -14,6 +14,6 @@ export const UMB_ICON_PICKER_MODAL = new UmbModalToken<UmbIconPickerModalData, U
 	'Umb.Modal.IconPicker',
 	{
 		type: 'sidebar',
-		size: 'small',
+		size: 'medium',
 	},
 );

src/Umbraco.Web.UI.Client/src/shared/resources/apiTypeValidators.function.ts

@@ -0,0 +1,13 @@
+import type { ApiError, CancelError, CancelablePromise } from '@umbraco-cms/backoffice/backend-api';
+
+export function isApiError(error: unknown): error is ApiError {
+	return (error as ApiError).name === 'ApiError';
+}
+
+export function isCancelError(error: unknown): error is CancelError {
+	return (error as CancelError).name === 'CancelError';
+}
+
+export function isCancelablePromise<T>(promise: unknown): promise is CancelablePromise<T> {
+	return (promise as CancelablePromise<T>).cancel !== undefined;
+}

src/Umbraco.Web.UI.Client/src/shared/resources/resource.controller.ts

@@ -1,10 +1,10 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+import { isApiError, isCancelError, isCancelablePromise } from './apiTypeValidators.function.js';
 import {
 	UmbNotificationContext,
 	UMB_NOTIFICATION_CONTEXT_TOKEN,
 	UmbNotificationOptions,
 } from '@umbraco-cms/backoffice/notification';
-import { ApiError, CancelError, CancelablePromise } from '@umbraco-cms/backoffice/backend-api';
 import { UmbBaseController, UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
 import type { DataSourceResponse } from '@umbraco-cms/backoffice/repository';
@@ -39,7 +39,7 @@ export class UmbResourceController extends UmbBaseController {
 		try {
 			return { data: await promise };
 		} catch (error) {
-			if (error instanceof ApiError || error instanceof CancelError) {
+			if (isApiError(error) || isCancelError(error)) {
 				return { error };
 			}
 
@@ -61,7 +61,7 @@ export class UmbResourceController extends UmbBaseController {
 			 * If the error is not a recognizable system error (i.e. a HttpError), then we will show a notification
 			 * with the error details using the default notification options.
 			 */
-			if (error instanceof CancelError) {
+			if (isCancelError(error)) {
 				// Cancelled - do nothing
 				return {};
 			} else {
@@ -125,7 +125,7 @@ export class UmbResourceController extends UmbBaseController {
 	 * @see https://developer.mozilla.org/en-US/docs/Web/API/AbortController
 	 */
 	cancel() {
-		if (this.#promise instanceof CancelablePromise) {
+		if (isCancelablePromise(this.#promise)) {
 			this.#promise.cancel();
 		}
 	}