Merge pull request #1893 from umbraco/bugfix/appearance-label-on-top

Bugfix: Property label does not appear on top

src/Umbraco.Web.UI.Client/src/packages/core/content-type/components/property-type-based-property/property-type-based-property.element.ts

@@ -79,6 +79,7 @@ export class UmbPropertyTypeBasedPropertyElement extends UmbLitElement {
 					.alias=${this._property.alias}
 					.label=${this._property.name}
 					.description=${this._property.description ?? undefined}
+					.appearance=${this._property.appearance}
 					property-editor-ui-alias=${ifDefined(this._propertyEditorUiAlias)}
 					.config=${this._dataTypeData}></umb-property>`
 			: '';

src/Umbraco.Web.UI.Client/src/packages/core/property/property-layout/property-layout.element.ts

@@ -37,7 +37,7 @@ export class UmbPropertyLayoutElement extends UmbLitElement {
 	 * @attr
 	 * @default ''
 	 */
-	@property({ type: String })
+	@property({ type: String, reflect: true })
 	public orientation: 'horizontal' | 'vertical' = 'horizontal';
 
 	/**

src/Umbraco.Web.UI.Client/src/packages/core/property/property/property.context.ts

@@ -7,12 +7,14 @@ import {
 	UmbBasicState,
 	UmbClassState,
 	UmbDeepState,
+	UmbObjectState,
 	UmbStringState,
 } from '@umbraco-cms/backoffice/observable-api';
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 import type { UmbPropertyEditorConfigProperty } from '@umbraco-cms/backoffice/property-editor';
 import { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
 import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
+import type { UmbPropertyTypeAppearanceModel } from '@umbraco-cms/backoffice/content-type';
 
 export class UmbPropertyContext<ValueType = any> extends UmbContextBase<UmbPropertyContext<ValueType>> {
 	#alias = new UmbStringState(undefined);
@@ -21,6 +23,8 @@ export class UmbPropertyContext<ValueType = any> extends UmbContextBase<UmbPrope
 	public readonly label = this.#label.asObservable();
 	#description = new UmbStringState(undefined);
 	public readonly description = this.#description.asObservable();
+	#appearance = new UmbObjectState<UmbPropertyTypeAppearanceModel | undefined>(undefined);
+	public readonly appearance = this.#appearance.asObservable();
 	#value = new UmbDeepState<ValueType | undefined>(undefined);
 	public readonly value = this.#value.asObservable();
 	#configValues = new UmbArrayState<UmbPropertyEditorConfigProperty>([], (x) => x.alias);
@@ -116,6 +120,12 @@ export class UmbPropertyContext<ValueType = any> extends UmbContextBase<UmbPrope
 	public getDescription(): string | undefined {
 		return this.#description.getValue();
 	}
+	public setAppearance(appearance: UmbPropertyTypeAppearanceModel | undefined): void {
+		this.#appearance.setValue(appearance);
+	}
+	public getAppearance(): UmbPropertyTypeAppearanceModel | undefined {
+		return this.#appearance.getValue();
+	}
 	/**
 	 * Set the value of this property.
 	 * @param value {ValueType} the whole value to be set
@@ -158,6 +168,7 @@ export class UmbPropertyContext<ValueType = any> extends UmbContextBase<UmbPrope
 		this.#alias.destroy();
 		this.#label.destroy();
 		this.#description.destroy();
+		this.#appearance.destroy();
 		this.#configValues.destroy();
 		this.#value.destroy();
 		this.#config.destroy();

src/Umbraco.Web.UI.Client/src/packages/core/property/property/property.element.ts

@@ -2,7 +2,7 @@ import { UmbPropertyContext } from './property.context.js';
 import type { ManifestPropertyEditorUi } from '@umbraco-cms/backoffice/extension-registry';
 import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import { css, html, customElement, property, state, ifDefined, nothing } from '@umbraco-cms/backoffice/external/lit';
+import { css, html, customElement, property, state, nothing } from '@umbraco-cms/backoffice/external/lit';
 import { createExtensionElement } from '@umbraco-cms/backoffice/extension-api';
 import type { UmbObserverController } from '@umbraco-cms/backoffice/observable-api';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
@@ -15,6 +15,7 @@ import {
 	UmbFormControlValidator,
 	UmbObserveValidationStateController,
 } from '@umbraco-cms/backoffice/validation';
+import type { UmbPropertyTypeAppearanceModel } from '@umbraco-cms/backoffice/content-type';
 
 /**
  *  @element umb-property
@@ -53,6 +54,17 @@ export class UmbPropertyElement extends UmbLitElement {
 		return this.#propertyContext.getDescription();
 	}
 
+	/**
+	 * Appearance: Appearance settings for the property.
+	 */
+	@property({ type: Object, attribute: false })
+	public set appearance(appearance: UmbPropertyTypeAppearanceModel | undefined) {
+		this.#propertyContext.setAppearance(appearance);
+	}
+	public get appearance() {
+		return this.#propertyContext.getAppearance();
+	}
+
 	/**
 	 * Alias
 	 * @public
@@ -137,6 +149,9 @@ export class UmbPropertyElement extends UmbLitElement {
 	@state()
 	private _description?: string;
 
+	@state()
+	private _orientation: 'horizontal' | 'vertical' = 'horizontal';
+
 	#propertyContext = new UmbPropertyContext(this);
 
 	#controlValidator?: UmbFormControlValidator;
@@ -175,6 +190,13 @@ export class UmbPropertyElement extends UmbLitElement {
 			},
 			null,
 		);
+		this.observe(
+			this.#propertyContext.appearance,
+			(appearance) => {
+				this._orientation = appearance?.labelOnTop ? 'vertical' : 'horizontal';
+			},
+			null,
+		);
 	}
 
 	private _onPropertyEditorChange = (e: CustomEvent): void => {
@@ -275,9 +297,10 @@ export class UmbPropertyElement extends UmbLitElement {
 		return html`
 			<umb-property-layout
 				id="layout"
-				alias="${ifDefined(this._alias)}"
-				label="${ifDefined(this._label)}"
-				description="${ifDefined(this._description)}"
+				.alias=${this._alias}
+				.label=${this._label}
+				.description=${this._description}
+				.orientation=${this._orientation ?? 'horizontal'}
 				?invalid=${this._invalid}>
 				${this._renderPropertyActionMenu()}
 				${this._variantDifference