feat: add descriptions to member types

src/Umbraco.Web.UI.Client/src/packages/members/member-type/workspace/member-type-workspace-editor.element.ts

@@ -1,6 +1,7 @@
 import { UMB_MEMBER_TYPE_WORKSPACE_CONTEXT } from './member-type-workspace.context-token.js';
 import type { UmbInputWithAliasElement } from '@umbraco-cms/backoffice/components';
 import { css, html, customElement, state, ifDefined } from '@umbraco-cms/backoffice/external/lit';
+import type { UUITextareaElement } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement, umbFocus } from '@umbraco-cms/backoffice/lit-element';
 import { UMB_ICON_PICKER_MODAL, UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';
 
@@ -9,6 +10,9 @@ export class UmbMemberTypeWorkspaceEditorElement extends UmbLitElement {
 	@state()
 	private _name?: string;
 
+	@state()
+	private _description?: string;
+
 	@state()
 	private _alias?: string;
 
@@ -36,6 +40,11 @@ export class UmbMemberTypeWorkspaceEditorElement extends UmbLitElement {
 	#observeMemberType() {
 		if (!this.#workspaceContext) return;
 		this.observe(this.#workspaceContext.name, (name) => (this._name = name), '_observeName');
+		this.observe(
+			this.#workspaceContext.description,
+			(description) => (this._description = description),
+			'_observeDescription',
+		);
 		this.observe(this.#workspaceContext.alias, (alias) => (this._alias = alias), '_observeAlias');
 		this.observe(this.#workspaceContext.icon, (icon) => (this._icon = icon), '_observeIcon');
 		this.observe(this.#workspaceContext.isNew, (isNew) => (this._isNew = isNew), '_observeIsNew');
@@ -65,6 +74,10 @@ export class UmbMemberTypeWorkspaceEditorElement extends UmbLitElement {
 		this.#workspaceContext?.setAlias(event.target.alias ?? '');
 	}
 
+	#onDescriptionChange(event: InputEvent & { target: UUITextareaElement }) {
+		this.#workspaceContext?.setDescription(event.target.value.toString() ?? '');
+	}
+
 	render() {
 		return html`
 			<umb-workspace-editor alias="Umb.Workspace.MemberType">
@@ -73,15 +86,24 @@ export class UmbMemberTypeWorkspaceEditorElement extends UmbLitElement {
 						<uui-icon name="${ifDefined(this._icon)}" style="color: ${this._iconColorAlias}"></uui-icon>
 					</uui-button>
 
-					<umb-input-with-alias
-						id="name"
-						label="name"
-						value=${this._name}
-						alias=${this._alias}
-						?auto-generate-alias=${this._isNew}
-						@change="${this.#onNameAndAliasChange}"
-						${umbFocus()}>
-					</umb-input-with-alias>
+					<div id="editors">
+						<umb-input-with-alias
+							id="name"
+							label="name"
+							value=${this._name}
+							alias=${this._alias}
+							?auto-generate-alias=${this._isNew}
+							@change="${this.#onNameAndAliasChange}"
+							${umbFocus()}>
+						</umb-input-with-alias>
+
+						<uui-input
+							id="description"
+							.label=${this.localize.term('placeholders_enterDescription')}
+							.value=${this._description}
+							.placeholder=${this.localize.term('placeholders_enterDescription')}
+							@input=${this.#onDescriptionChange}></uui-input>
+					</div>
 				</div>
 			</umb-workspace-editor>
 		`;
@@ -100,12 +122,29 @@ export class UmbMemberTypeWorkspaceEditorElement extends UmbLitElement {
 				flex: 1 1 auto;
 			}
 
+			#editors {
+				display: flex;
+				flex: 1 1 auto;
+				flex-direction: column;
+				gap: var(--uui-size-space-1);
+			}
+
 			#name {
 				width: 100%;
 				flex: 1 1 auto;
 				align-items: center;
 			}
 
+			#description {
+				width: 100%;
+				--uui-input-height: var(--uui-size-8);
+				--uui-input-border-color: transparent;
+			}
+
+			#description:hover {
+				--uui-input-border-color: var(--uui-color-border);
+			}
+
 			#alias-lock {
 				display: flex;
 				align-items: center;