Merge branch 'main' into dependabot/npm_and_yarn/tinymce-i18n-23.6.19

src/Umbraco.Web.UI.Client/package.json

@@ -122,8 +122,8 @@
 	},
 	"dependencies": {
 		"@openid/appauth": "^1.3.1",
-		"@umbraco-ui/uui": "1.3.0-rc.1",
-		"@umbraco-ui/uui-css": "1.3.0-rc.1",
+		"@umbraco-ui/uui": "1.3.0",
+		"@umbraco-ui/uui-css": "1.3.0",
 		"element-internals-polyfill": "^1.1.19",
 		"lit": "^2.7.4",
 		"lodash-es": "4.17.21",

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

@@ -25,7 +25,7 @@ export const data: Array<DocumentTypeResponseModel> = [
 				containerId: 'all-properties-group-key',
 				alias: 'richTextEditor',
 				name: 'Rich Text editor',
-				description: '',
+				description: 'Some description to test with a long description.',
 				dataTypeId: 'dt-richTextEditor',
 				variesByCulture: false,
 				variesBySegment: false,
@@ -38,7 +38,8 @@ export const data: Array<DocumentTypeResponseModel> = [
 				appearance: {
 					labelOnTop: false,
 				},
-			},			{
+			},
+			{
 				id: '2',
 				containerId: 'all-properties-group-id',
 				alias: 'colorPicker',

src/Umbraco.Web.UI.Client/src/packages/core/components/input-tiny-mce/input-tiny-mce.element.ts

@@ -294,6 +294,11 @@ export class UmbInputTinyMceElement extends FormControlMixin(UmbLitElement) {
 				min-height: 100px;
 			}
 
+			.tox-tinymce {
+				border-radius: 0;
+				border: var(--uui-input-border-width, 1px) solid var(--uui-input-border-color, var(--uui-color-border, #d8d7d9));
+			}
+
 			.tox-tinymce-aux {
 				z-index: 9000;
 			}

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

@@ -50,13 +50,13 @@ export class UmbWorkspacePropertyLayoutElement extends LitElement {
 	render() {
 		// TODO: Only show alias on label if user has access to DocumentType within settings:
 		return html`
-			<div id="header">
+			<div id="headerColumn">
 				<uui-label title=${this.alias}>${this.label}</uui-label>
 				<slot name="property-action-menu"></slot>
 				<div id="description">${this.description}</div>
 				<slot name="description"></slot>
 			</div>
-			<div>
+			<div id="editorColumn">
 				<uui-form-validation-message>
 					<slot name="editor"></slot>
 				</uui-form-validation-message>
@@ -76,33 +76,42 @@ export class UmbWorkspacePropertyLayoutElement extends LitElement {
 				container-type: inline-size;
 			}
 
+			:host(:last-of-type) {
+				border-bottom: none;
+			}
+
 			:host > div {
 				grid-column: span 2;
 			}
-
 			@container (width > 600px) {
 				:host(:not([orientation='vertical'])) > div {
 					grid-column: span 1;
 				}
 			}
 
-			:host(:last-of-type) {
-				border-bottom: none;
+			#headerColumn {
+				position: relative;
+				height: min-content;
+				z-index: 2;
 			}
-
-			:host-context(umb-variantable-property:first-of-type) {
-				padding-top: 0;
+			@container (width > 600px) {
+				#headerColumn {
+					position: sticky;
+					top: calc(var(--uui-size-space-2) * -1);
+				}
 			}
 
 			#description {
 				color: var(--uui-color-text-alt);
 			}
 
-			#header {
-				position: sticky;
-				top: var(--uui-size-space-4);
-				height: min-content;
-				z-index: 2;
+			#editorColumn {
+				margin-top: var(--uui-size-space-3);
+			}
+			@container (width > 600px) {
+				#editorColumn {
+					margin-top: 0;
+				}
 			}
 		`,
 	];

src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/edit/document-workspace-view-edit-tab.element.ts

@@ -70,6 +70,7 @@ export class UmbDocumentWorkspaceViewEditTabElement extends UmbLitElement {
 				? html`
 						<uui-box>
 							<umb-document-workspace-view-edit-properties
+								class="properties"
 								container-type="Tab"
 								container-name=${this.tabName || ''}></umb-document-workspace-view-edit-properties>
 						</uui-box>
@@ -80,6 +81,7 @@ export class UmbDocumentWorkspaceViewEditTabElement extends UmbLitElement {
 				(group) => group.name,
 				(group) => html`<uui-box .headline=${group.name || ''}>
 					<umb-document-workspace-view-edit-properties
+						class="properties"
 						container-type="Group"
 						container-name=${group.name || ''}></umb-document-workspace-view-edit-properties>
 				</uui-box>`
@@ -90,6 +92,9 @@ export class UmbDocumentWorkspaceViewEditTabElement extends UmbLitElement {
 	static styles = [
 		UUITextStyles,
 		css`
+			uui-box {
+				--uui-box-default-padding: 0 var(--uui-size-space-5);
+			}
 			uui-box:not(:first-child) {
 				margin-top: var(--uui-size-layout-1);
 			}