From cb52acb03043ca706037b9d5930babad229cd7c0 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Tue, 27 Sep 2022 10:33:46 +0200
Subject: [PATCH] move label and description styling to layout element for
 easier reuse

---
 .../entity-property.element.ts                | 27 +++++++++----------
 .../editor-property-layout.element.ts         | 19 ++++++++++---
 2 files changed, 28 insertions(+), 18 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/components/entity-property/entity-property.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/entity-property/entity-property.element.ts
index baa3ed4997..569e265dc1 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/components/entity-property/entity-property.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/components/entity-property/entity-property.element.ts
@@ -149,28 +149,25 @@ export class UmbEntityPropertyElement extends UmbContextConsumerMixin(LitElement
 		this._propertyEditorUISubscription?.unsubscribe();
 	}
 
-	private _renderPropertyActionMenu() {
-		return html`${this.propertyEditorUIAlias
-			? html`<umb-property-action-menu
-					id="property-action-menu"
-					.propertyEditorUIAlias="${this.propertyEditorUIAlias}"
-					.value="${this.value}"></umb-property-action-menu>`
-			: ''}`;
-	}
-
 	render() {
 		return html`
-			<umb-editor-property-layout id="layout">
-				<div slot="header">
-					<uui-label>${this.label}</uui-label>
-					${this._renderPropertyActionMenu()}
-					<p>${this.description}</p>
-				</div>
+			<umb-editor-property-layout id="layout" label="${this.label}" description="${this.description}">
+				${this._renderPropertyActionMenu()}
 				<div slot="editor">${this._element}</div>
 			</umb-editor-property-layout>
 			<hr />
 		`;
 	}
+
+	private _renderPropertyActionMenu() {
+		return html`${this.propertyEditorUIAlias
+			? html`<umb-property-action-menu
+					slot="property-action-menu"
+					id="property-action-menu"
+					.propertyEditorUIAlias="${this.propertyEditorUIAlias}"
+					.value="${this.value}"></umb-property-action-menu>`
+			: ''}`;
+	}
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/editor-property-layout/editor-property-layout.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/editor-property-layout/editor-property-layout.element.ts
index 83e8bd4a27..1423b5243f 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/editor-property-layout/editor-property-layout.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/editor-property-layout/editor-property-layout.element.ts
@@ -1,6 +1,6 @@
 import { css, html, LitElement } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
-import { customElement } from 'lit/decorators.js';
+import { customElement, property } from 'lit/decorators.js';
 
 @customElement('umb-editor-property-layout')
 export class UmbEditorPropertyLayoutElement extends LitElement {
@@ -15,10 +15,23 @@ export class UmbEditorPropertyLayoutElement extends LitElement {
 		`,
 	];
 
+	@property({ type: String })
+	public label = '';
+
+	@property({ type: String })
+	public description = '';
+
 	render() {
 		return html`
-			<slot name="header" class="header"></slot>
-			<slot name="editor" class="editor"></slot>
+			<div>
+				<uui-label>${this.label}</uui-label>
+				<slot name="property-action-menu"></slot>
+				<p>${this.description}</p>
+				<slot name="header"></slot>
+			</div>
+			<div>
+				<slot name="editor"></slot>
+			</div>
 		`;
 	}
 }