more flexible name slot in entity editor

src/Umbraco.Web.UI.Client/src/backoffice/editors/data-type/editor-data-type.element.ts

@@ -2,7 +2,6 @@ import { UUIButtonState, UUIInputElement, UUIInputEvent } from '@umbraco-ui/uui'
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { Subscription, distinctUntilChanged } from 'rxjs';
 import { UmbContextProviderMixin, UmbContextConsumerMixin } from '../../../core/context';
 import { UmbNotificationService } from '../../../core/services/notification.service';
@@ -26,6 +25,10 @@ export class UmbEditorDataTypeElement extends UmbContextProviderMixin(UmbContext
 				width: 100%;
 				height: 100%;
 			}
+
+			#name {
+				width: 100%;
+			}
 		`,
 	];
 
@@ -119,10 +122,8 @@ export class UmbEditorDataTypeElement extends UmbContextProviderMixin(UmbContext
 		return html`
 			${this._dataType
 				? html`
-						<umb-editor-entity
-							alias="Umb.Editor.DataType"
-							name="${ifDefined(this._dataType?.name)}"
-							@input="${this._handleInput}">
+						<umb-editor-entity alias="Umb.Editor.DataType">
+							<uui-input id="name" slot="name" .value=${this._dataType?.name} @input="${this._handleInput}"></uui-input>
 							<!-- TODO: these could be extensions points too -->
 							<div slot="actions">
 								<uui-button

src/Umbraco.Web.UI.Client/src/backoffice/editors/document-type/editor-document-type.element.ts

@@ -1,7 +1,6 @@
 import { UUIButtonState, UUIInputElement, UUIInputEvent } from '@umbraco-ui/uui';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, html, LitElement } from 'lit';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { customElement, property, state } from 'lit/decorators.js';
 import { distinctUntilChanged, Subscription } from 'rxjs';
 import { UmbContextConsumerMixin, UmbContextProviderMixin } from '../../../core/context';
@@ -26,6 +25,14 @@ export class UmbEditorDocumentTypeElement extends UmbContextProviderMixin(UmbCon
 				width: 100%;
 				height: 100%;
 			}
+
+			#name {
+				width: 100%;
+			}
+
+			#alias {
+				padding: 0 var(--uui-size-space-3);
+			}
 		`,
 	];
 
@@ -115,12 +122,15 @@ export class UmbEditorDocumentTypeElement extends UmbContextProviderMixin(UmbCon
 
 	render() {
 		return html`
-			<umb-editor-entity
-				alias="Umb.Editor.DocumentType"
-				name="${ifDefined(this._documentType?.name)}"
-				@input="${this._handleInput}">
+			<umb-editor-entity alias="Umb.Editor.DocumentType">
 				<div slot="icon">Icon</div>
 
+				<div slot="name">
+					<uui-input id="name" .value=${this._documentType?.name} @input="${this._handleInput}">
+						<div id="alias" slot="append">${this._documentType?.alias}</div>
+					</uui-input>
+				</div>
+
 				<div slot="footer">Keyboard Shortcuts</div>
 
 				<!-- TODO: these could be extensions points too -->

src/Umbraco.Web.UI.Client/src/backoffice/editors/node/editor-node.element.ts

@@ -2,7 +2,6 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, html, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { UUIInputElement, UUIInputEvent } from '@umbraco-ui/uui';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { UmbContextConsumerMixin, UmbContextProviderMixin } from '../../../core/context';
 import { UmbNodeStore } from '../../../core/stores/node.store';
 import { distinctUntilChanged, Subscription } from 'rxjs';
@@ -30,22 +29,6 @@ export class UmbEditorNodeElement extends UmbContextProviderMixin(UmbContextCons
 
 			uui-input {
 				width: 100%;
-				margin-left: 16px;
-			}
-
-			uui-tab-group {
-				--uui-tab-divider: var(--uui-color-border);
-				border-left: 1px solid var(--uui-color-border);
-				flex-wrap: nowrap;
-				height: 60px;
-			}
-
-			uui-tab {
-				font-size: 0.8rem;
-			}
-
-			uui-box hr {
-				margin-bottom: var(--uui-size-6);
 			}
 		`,
 	];
@@ -157,7 +140,12 @@ export class UmbEditorNodeElement extends UmbContextProviderMixin(UmbContextCons
 
 	render() {
 		return html`
-			<umb-editor-entity alias="Umb.Editor.Node" name="${ifDefined(this._node?.name)}" @input="${this._handleInput}">
+			<umb-editor-entity alias="Umb.Editor.Node">
+				<div slot="name">
+					<uui-input .value=${this._node?.name} @input="${this._handleInput}"></uui-input>
+					<!-- TODO: Implement variant selector -->
+				</div>
+
 				<div slot="footer">Breadcrumbs</div>
 
 				<div slot="actions">

src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/editor-entity.element.ts

@@ -25,6 +25,11 @@ class UmbEditorEntity extends UmbContextConsumerMixin(LitElement) {
 				min-height: 60px;
 			}
 
+			#name {
+				display: block;
+				flex: 1 1 auto;
+			}
+
 			#footer {
 				display: flex;
 				height: 100%;
@@ -166,7 +171,7 @@ class UmbEditorEntity extends UmbContextConsumerMixin(LitElement) {
 			<umb-editor-layout>
 				<div id="header" slot="header">
 					<slot id="icon" name="icon"></slot>
-					<uui-input .value="${this.name}"></uui-input>
+					<slot id="name" name="name"></slot>
 					${this._renderViews()}
 				</div>
 

src/Umbraco.Web.UI.Client/src/mocks/data/document-type.data.ts

@@ -4,6 +4,7 @@ export interface DocumentTypeEntity {
 	id: number;
 	key: string;
 	name: string;
+	alias: string;
 	properties: [];
 }
 
@@ -12,12 +13,14 @@ export const data: Array<DocumentTypeEntity> = [
 		id: 99,
 		key: 'd81c7957-153c-4b5a-aa6f-b434a4964624',
 		name: 'Document Type 1',
+		alias: 'documentType1',
 		properties: [],
 	},
 	{
 		id: 100,
 		key: 'a99e4018-3ffc-486b-aa76-eecea9593d17',
 		name: 'Document Type 2',
+		alias: 'documentType2',
 		properties: [],
 	},
 ];