display validation on save + use uui-color-invalid

src/Umbraco.Web.UI.Client/src/packages/core/content/workspace/content-detail-workspace-base.ts

@@ -59,6 +59,7 @@ export interface UmbContentDetailWorkspaceContextArgs<
 	contentTypeDetailRepository: UmbDetailRepositoryConstructor<ContentTypeDetailModelType>;
 	contentValidationRepository?: ClassConstructor<UmbContentValidationRepository<DetailModelType>>;
 	skipValidationOnSubmit?: boolean;
+	ignorerValidationOnSubmit?: boolean;
 	contentVariantScaffold: VariantModelType;
 	saveModalToken?: UmbModalToken<UmbContentVariantPickerData<VariantOptionModelType>, UmbContentVariantPickerValue>;
 }
@@ -140,6 +141,7 @@ export abstract class UmbContentDetailWorkspaceContextBase<
 	public readonly variantOptions;
 
 	#validateOnSubmit: boolean;
+	#ignorerValidationOnSubmit: boolean;
 	#serverValidation = new UmbServerModelValidatorContext(this);
 	#validationRepositoryClass?: ClassConstructor<UmbContentValidationRepository<DetailModelType>>;
 	#validationRepository?: UmbContentValidationRepository<DetailModelType>;
@@ -163,6 +165,7 @@ export abstract class UmbContentDetailWorkspaceContextBase<
 		const contentTypeDetailRepository = new args.contentTypeDetailRepository(this);
 		this.#validationRepositoryClass = args.contentValidationRepository;
 		this.#validateOnSubmit = args.skipValidationOnSubmit ? !args.skipValidationOnSubmit : true;
+		this.#ignorerValidationOnSubmit = args.ignorerValidationOnSubmit ? !args.ignorerValidationOnSubmit : true;
 		this.structure = new UmbContentTypeStructureManager<ContentTypeDetailModelType>(this, contentTypeDetailRepository);
 		this.variesByCulture = this.structure.ownerContentTypeObservablePart((x) => x?.variesByCulture);
 		this.variesBySegment = this.structure.ownerContentTypeObservablePart((x) => x?.variesBySegment);
@@ -616,7 +619,11 @@ export abstract class UmbContentDetailWorkspaceContextBase<
 					return this.performCreateOrUpdate(variantIds, saveData);
 				},
 				async () => {
-					return this.invalidSubmit();
+					if (this.#ignorerValidationOnSubmit) {
+						return this.performCreateOrUpdate(variantIds, saveData);
+					} else {
+						return this.invalidSubmit();
+					}
 				},
 			);
 		} else {

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

@@ -74,7 +74,7 @@ export class UmbPropertyLayoutElement extends UmbLitElement {
 			<div id="headerColumn">
 				<uui-label id="label" title=${this.alias} ?required=${this.mandatory}>
 					${this.localize.string(this.label)}
-					${when(this.invalid, () => html`<uui-badge color="danger" attention>!</uui-badge>`)}
+					${when(this.invalid, () => html`<uui-badge color="invalid" attention>!</uui-badge>`)}
 				</uui-label>
 				<slot name="action-menu"></slot>
 				${this.#renderDescription()}
@@ -134,10 +134,17 @@ export class UmbPropertyLayoutElement extends UmbLitElement {
 				word-break: break-word;
 			}
 			:host([invalid]) #label {
-				color: var(--uui-color-danger);
+				color: var(--umb-validation-look-danger, var(--uui-color-danger))
+					var(--umb-validation-look-warning, var(--uui-color-warning-standalone));
 			}
 			uui-badge {
 				right: -30px;
+
+				background-color: var(--umb-validation-look-danger, var(--uui-color-danger))
+					var(--umb-validation-look-warning, var(--uui-color-warning));
+
+				color: var(--umb-validation-look-danger, var(--uui-color-danger-contrast))
+					var(--umb-validation-look-warning, var(--uui-color-warning-contrast));
 			}
 
 			#description {

src/Umbraco.Web.UI.Client/src/packages/core/validation/components/form-validation-message.element.ts

@@ -85,7 +85,7 @@ export class UmbFormValidationMessageElement extends UmbLitElement {
 	static override styles = [
 		css`
 			#messages {
-				color: var(--uui-color-danger-standalone);
+				color: var(--uui-color-invalid-standalone);
 			}
 		`,
 	];

src/Umbraco.Web.UI.Client/src/packages/core/workspace/modals/workspace-modal.element.ts

@@ -7,7 +7,22 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 @customElement('umb-workspace-modal')
 export class UmbWorkspaceModalElement extends UmbLitElement {
 	@property({ attribute: false })
-	data?: UmbWorkspaceModalData;
+	public get data(): UmbWorkspaceModalData | undefined {
+		return this._data;
+	}
+	public set data(value: UmbWorkspaceModalData | undefined) {
+		this._data = value;
+		if (value?.inheritValidationLook) {
+			// Do nothing.
+		} else {
+			const elementStyle = this.style;
+			elementStyle.setProperty('--uui-color-invalid', 'var(--uui-color-danger)');
+			elementStyle.setProperty('--uui-color-invalid-emphasis', 'var(--uui-color-danger-emphasis)');
+			elementStyle.setProperty('--uui-color-invalid-standalone', 'var(--uui-color-danger-standalone)');
+			elementStyle.setProperty('--uui-color-invalid-contrast', 'var(--uui-color-danger-contrast)');
+		}
+	}
+	private _data?: UmbWorkspaceModalData | undefined;
 
 	/**
 	 * TODO: Consider if this binding and events integration is the right for communicating back the modal handler. Or if we should go with some Context API. like a Modal Context API.

src/Umbraco.Web.UI.Client/src/packages/core/workspace/modals/workspace-modal.token.ts

@@ -3,6 +3,7 @@ export interface UmbWorkspaceModalData<DataModelType = unknown> {
 	entityType: string;
 	preset: Partial<DataModelType>;
 	baseDataPath?: string;
+	inheritValidationLook?: boolean;
 }
 
 export type UmbWorkspaceModalValue =

src/Umbraco.Web.UI.Client/src/packages/documents/documents/publishing/workspace-context/document-publishing.workspace-context.ts

@@ -65,6 +65,11 @@ export class UmbDocumentPublishingWorkspaceContext extends UmbContextBase<UmbDoc
 	 * @memberof UmbDocumentPublishingWorkspaceContext
 	 */
 	public async saveAndPublish(): Promise<void> {
+		const elementStyle = (this.getHostElement() as HTMLElement).style;
+		elementStyle.removeProperty('--uui-color-invalid');
+		elementStyle.removeProperty('--uui-color-invalid-emphasis');
+		elementStyle.removeProperty('--uui-color-invalid-standalone');
+		elementStyle.removeProperty('--uui-color-invalid-contrast');
 		return this.#handleSaveAndPublish();
 	}
 

src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace.context.ts

@@ -80,7 +80,8 @@ export class UmbDocumentWorkspaceContext
 			detailRepositoryAlias: UMB_DOCUMENT_DETAIL_REPOSITORY_ALIAS,
 			contentTypeDetailRepository: UmbDocumentTypeDetailRepository,
 			contentValidationRepository: UmbDocumentValidationRepository,
-			skipValidationOnSubmit: true,
+			skipValidationOnSubmit: false,
+			ignorerValidationOnSubmit: true,
 			contentVariantScaffold: UMB_DOCUMENT_DETAIL_MODEL_VARIANT_SCAFFOLD,
 			saveModalToken: UMB_DOCUMENT_SAVE_MODAL,
 		});
@@ -250,11 +251,11 @@ export class UmbDocumentWorkspaceContext
 	 * @returns {Promise<void>} a promise which resolves once it has been completed.
 	 */
 	public override requestSubmit() {
-		return this._handleSubmit();
-	}
-
-	// Because we do not make validation prevent submission this also submits the workspace. [NL]
-	public override invalidSubmit() {
+		const elementStyle = (this.getHostElement() as HTMLElement).style;
+		elementStyle.setProperty('--uui-color-invalid', 'var(--uui-color-warning)');
+		elementStyle.setProperty('--uui-color-invalid-emphasis', 'var(--uui-color-warning-emphasis)');
+		elementStyle.setProperty('--uui-color-invalid-standalone', 'var(--uui-color-warning-standalone)');
+		elementStyle.setProperty('--uui-color-invalid-contrast', 'var(--uui-color-warning-contrast)');
 		return this._handleSubmit();
 	}