Feature: minor UI updates (#17475)

* use auto-heigth and auto-width * adjust sidebar menu h3
umbraco · Nov 11, 2024 · 5f1cb0e · 5f1cb0e
1 parent 1d936d2
commit 5f1cb0e
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 6 deletions.
diff --git a/...ages/core/content-type/workspace/views/design/content-type-design-editor-group.element.ts b/...ages/core/content-type/workspace/views/design/content-type-design-editor-group.element.ts
@@ -172,7 +172,8 @@ export class UmbContentTypeWorkspaceViewEditGroupElement extends UmbLitElement {
 						?disabled=${!this._hasOwnerContainer}
 						@blur=${this.#blurGroup}
 						@change=${this.#renameGroup}
-						${this._group!.name === '' ? umbFocus() : nothing}></uui-input>
+						${this._group!.name === '' ? umbFocus() : nothing}
+						auto-width></uui-input>
 				</div>
 			</div>
 			<div slot="header-actions">
@@ -208,10 +209,10 @@ export class UmbContentTypeWorkspaceViewEditGroupElement extends UmbLitElement {
 						<uui-input
 							type="number"
 							label=${this.localize.term('sort_sortOrder')}
-							.value=${this.group!.sortOrder ?? 0}
+							.value=${this.group!.sortOrder.toString()}
 							?disabled=${!this._hasOwnerContainer}
 							@change=${(e: UUIInputEvent) =>
-								this._singleValueUpdate('sortOrder', parseInt(e.target.value as string) || 0)}></uui-input>
+								this._singleValueUpdate('sortOrder', parseInt(e.target.value as string) ?? 0)}></uui-input>
 					`,
 				)}
 			</div>
@@ -245,7 +246,7 @@ export class UmbContentTypeWorkspaceViewEditGroupElement extends UmbLitElement {
 
 			#group-name {
 				--uui-input-border-color: transparent;
-				width: 100%;
+				min-width: 200px;
 			}
 
 			uui-input[type='number'] {

diff --git a/...s/core/content-type/workspace/views/design/content-type-design-editor-property.element.ts b/...s/core/content-type/workspace/views/design/content-type-design-editor-property.element.ts
@@ -235,7 +235,8 @@ export class UmbContentTypeDesignEditorPropertyElement extends UmbLitElement {
 							.value=${this.property.description}
 							@input=${(e: CustomEvent) => {
 								if (e.target) this.#singleValueUpdate('description', (e.target as HTMLInputElement).value);
-							}}></uui-textarea>
+							}}
+							auto-height></uui-textarea>
 					</p>
 				</div>
 				<uui-button

diff --git a/...Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts b/...Web.UI.Client/src/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.ts
@@ -27,6 +27,10 @@ export class UmbSectionSidebarMenuElement<
 	manifest?: ManifestType;
 
 	renderHeader() {
+		/*
+		Notice we are not using the UUI-H3 here, we would need to wrap it into uui-text for this to take action,
+		but it does look odd so lets return to this later. I have made a few corrections especially for this component. [NL]
+		*/
 		return html`<h3>${this.localize.string(this.manifest?.meta?.label ?? '')}</h3>`;
 	}
 
@@ -44,7 +48,9 @@ export class UmbSectionSidebarMenuElement<
 		UmbTextStyles,
 		css`
 			h3 {
+				margin: var(--uui-size-5) 0;
 				padding: var(--uui-size-4) var(--uui-size-8);
+				font-size: 15px;
 			}
 		`,
 	];

diff --git a/...s/core/property-type/workspace/views/settings/property-workspace-view-settings.element.ts b/...s/core/property-type/workspace/views/settings/property-workspace-view-settings.element.ts
@@ -247,7 +247,8 @@ export class UmbPropertyTypeWorkspaceViewSettingsElement extends UmbLitElement i
 						@input=${this.#onDescriptionChange}
 						label=${this.localize.term('placeholders_enterDescription')}
 						placeholder=${this.localize.term('placeholders_enterDescription')}
-						.value=${this._data?.description}></uui-textarea>
+						.value=${this._data?.description}
+						auto-height></uui-textarea>
 				</div>
 				<umb-form-validation-message>
 					<umb-data-type-flow-input