From ea38ce318d1de736afe0449e1714280ff8d50f70 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?=
 <26099018+JesmoDev@users.noreply.github.com>
Date: Fri, 9 Jun 2023 20:10:36 +1200
Subject: [PATCH] property styling

---
 ...pe-workspace-view-edit-property.element.ts | 35 +++++++++++++++++--
 1 file changed, 32 insertions(+), 3 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-property.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-property.element.ts
index f3e855c3e3..f5859a7110 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-property.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-property.element.ts
@@ -97,7 +97,6 @@ export class UmbDocumentTypeWorkspacePropertyElement extends UmbLitElement {
 			const target = event.composedPath()[0] as UUIInputElement;
 
 			if (typeof target?.value === 'string') {
-
 				const oldName = this.property?.name ?? '';
 				const oldAlias = this.property?.alias ?? '';
 				const newName = event.target.value.toString();
@@ -118,17 +117,21 @@ export class UmbDocumentTypeWorkspacePropertyElement extends UmbLitElement {
 			? html`
 					<div id="header">
 						<uui-input
+							name="label"
+							id="label-input"
+							placeholder="Label..."
 							.value=${this.property.name}
 							@input=${this.#onNameChange}></uui-input>
 						<!-- TODO: should use UUI-LOCK-INPUT, but that does not fire an event when its locked/unlocked -->
 						<uui-input
 							name="alias"
+							id="alias-input"
+							placeholder="Alias..."
 							.value=${this.property.alias}
 							?disabled=${this._aliasLocked}
 							@input=${(e: CustomEvent) => {
 								if (e.target) this._singleValueUpdate('alias', (e.target as HTMLInputElement).value);
-							}}
-							>
+							}}>
 							<!-- TODO: validation for bad characters -->
 							<div @click=${this.#onToggleAliasLock} @keydown=${() => ''} id="alias-lock" slot="prepend">
 								<uui-icon name=${this._aliasLocked ? 'umb:lock' : 'umb:unlocked'}></uui-icon>
@@ -137,6 +140,9 @@ export class UmbDocumentTypeWorkspacePropertyElement extends UmbLitElement {
 						<slot name="property-action-menu"></slot>
 						<p>
 							<uui-textarea
+								name="description"
+								id="description-input"
+								placeholder="Enter a description..."
 								.value=${this.property.description}
 								@input=${(e: CustomEvent) => {
 									if (e.target) this._singleValueUpdate('description', (e.target as HTMLInputElement).value);
@@ -216,7 +222,25 @@ export class UmbDocumentTypeWorkspacePropertyElement extends UmbLitElement {
 			#editor {
 				background-color: var(--uui-color-background);
 			}
+			#alias-input,
+			#label-input,
+			#description-input {
+				width: 100%;
+			}
 
+			#alias-input {
+				border-color: transparent;
+				background: var(--uui-color-surface);
+			}
+
+			#label-input {
+				font-weight: bold; /* TODO: UUI Input does not support bold text yet */
+				--uui-input-border-color: transparent;
+			}
+			#label-input input {
+				font-weight: bold;
+				--uui-input-border-color: transparent;
+			}
 
 			#alias-lock {
 				display: flex;
@@ -226,6 +250,11 @@ export class UmbDocumentTypeWorkspacePropertyElement extends UmbLitElement {
 			}
 			#alias-lock uui-icon {
 				margin-bottom: 2px;
+				/* margin: 0; */
+			}
+			#description-input {
+				--uui-textarea-border-color: transparent;
+				font-weight: 0.5rem; /* TODO: Cant change font size of UUI textarea yet */
 			}
 		`,
 	];