add token and register basic modal

src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.element.ts

@@ -1,6 +1,7 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, html, nothing, TemplateResult } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
+import { UMB_BASIC_MODAL_TOKEN } from '../../modals/basic';
 import { UmbContextDebugRequest } from '@umbraco-cms/context-api';
 import { UmbLitElement } from '@umbraco-cms/element';
 import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from 'libs/modal';
@@ -102,11 +103,16 @@ export class UmbDebug extends UmbLitElement {
 	}
 
 	private _openDialog() {
-		this._modalContext?.openBasic({
-			header: html`<uui-icon name="umb:bug"></uui-icon> Debug: Contexts`,
-			content: this._htmlContent(),
-			overlaySize: 'small',
-		});
+		this._modalContext?.open(
+			UMB_BASIC_MODAL_TOKEN,
+			{
+				headline: 'Debug: Contexts:',
+				content: this._htmlContent(),
+			},
+			{
+				type: 'sidebar',
+			}
+		);
 	}
 
 	private _renderDialog() {

src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/basic/basic-modal.element.ts

@@ -29,7 +29,7 @@ export class UmbBasicModalElement extends UmbModalLayoutElement<UmbBasicModalDat
 
 	render() {
 		return html`
-			<umb-workspace-layout headline=${ifDefined(this.data?.header)}>
+			<umb-workspace-layout headline=${ifDefined(this.data?.headline)}>
 				<uui-scroll-container>${this.data?.content}</uui-scroll-container>
 				<uui-button slot="actions" look="secondary" label="Close sidebar" @click="${this._close}">Close</uui-button>
 			</umb-workspace-layout>

src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/basic/index.ts

@@ -1,6 +1,11 @@
-import { TemplateResult } from 'lit';
+import type { TemplateResult } from 'lit';
+import { UmbModalToken } from '@umbraco-cms/modal';
 
 export interface UmbBasicModalData {
-	header: string;
+	headline: string;
 	content: TemplateResult | string;
 }
+
+export const UMB_BASIC_MODAL_TOKEN = new UmbModalToken<UmbBasicModalData>('Umb.Modal.Basic', {
+	type: 'dialog',
+});

src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/manifests.ts

@@ -13,6 +13,12 @@ const modals: Array<ManifestModal> = [
 		name: 'Link Picker Modal',
 		loader: () => import('./link-picker/link-picker-modal.element'),
 	},
+	{
+		type: 'modal',
+		alias: 'Umb.Modal.Basic',
+		name: 'Basic Modal',
+		loader: () => import('./basic/basic-modal.element'),
+	},
 ];
 
 export const manifests = [...modals];