From dbf0e740d8ce43af323e82dc506bc81ad2eaa910 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Thu, 27 Mar 2025 11:34:40 +0100
Subject: [PATCH] render label based on how to document varies

---
 ...ace-split-view-variant-selector.element.ts | 35 +++++++++++++++++--
 1 file changed, 33 insertions(+), 2 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-split-view/workspace-split-view-variant-selector.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-split-view/workspace-split-view-variant-selector.element.ts
index 2c322fa8df..df10d0c66c 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-split-view/workspace-split-view-variant-selector.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-split-view/workspace-split-view-variant-selector.element.ts
@@ -46,6 +46,15 @@ export class UmbWorkspaceSplitViewVariantSelectorElement<
 	@state()
 	private _readOnlyCultures: Array<string | null> = [];
 
+	@state()
+	private _variesByCulture = false;
+
+	@state()
+	private _variesBySegment = false;
+
+	@state()
+	private _labelDefault = '';
+
 	// eslint-disable-next-line @typescript-eslint/no-unused-vars
 	protected _variantSorter = (a: VariantOptionModelType, b: VariantOptionModelType) => {
 		return 0;
@@ -54,6 +63,8 @@ export class UmbWorkspaceSplitViewVariantSelectorElement<
 	constructor() {
 		super();
 
+		this._labelDefault = this.localize.term('general_default');
+
 		this.consumeContext(UMB_WORKSPACE_SPLIT_VIEW_CONTEXT, (instance) => {
 			this.#splitViewContext = instance;
 
@@ -64,6 +75,18 @@ export class UmbWorkspaceSplitViewVariantSelectorElement<
 			this.#observeActiveVariants(workspaceContext);
 			this.#observeReadOnlyStates(workspaceContext);
 			this.#observeCurrentVariant();
+
+			this.observe(
+				workspaceContext.variesBySegment,
+				(value) => (this._variesBySegment = value),
+				'umbObserveVariesBySegment',
+			);
+
+			this.observe(
+				workspaceContext.variesByCulture,
+				(value) => (this._variesByCulture = value),
+				'umbObserveVariesByCulture',
+			);
 		});
 
 		this.consumeContext(UMB_PROPERTY_DATASET_CONTEXT, (instance) => {
@@ -317,8 +340,16 @@ export class UmbWorkspaceSplitViewVariantSelectorElement<
 			return '';
 		}
 
-		if (variantOption.segmentInfo) {
-			return `${variantOption.language.name} - ${variantOption.segmentInfo.name}`;
+		// If we vary by culture and segment, we show both
+		if (this._variesByCulture && this._variesBySegment) {
+			return variantOption.segmentInfo
+				? `${variantOption.language.name} - ${variantOption.segmentInfo.name}`
+				: this._labelDefault;
+		}
+
+		// If we vary by segment only, we only show the segment and show "Default" for the language
+		if (!this._variesByCulture && this._variesBySegment) {
+			return variantOption.segmentInfo ? `${variantOption.segmentInfo.name}` : this._labelDefault;
 		}
 
 		return variantOption.language.name;