Badge: Make badge go on top (#20196)

* umb badge and implementation

* only show variant selector hint if hint on none active variant

src/Umbraco.Web.UI.Client/src/packages/content/content/workspace/views/edit/content-editor.element.ts

@@ -236,8 +236,8 @@ export class UmbContentWorkspaceViewEditElement extends UmbLitElement implements
 			href=${fullPath}
 			data-mark="content-tab:${path ?? 'root'}"
 			>${hint && !active
-				? html`<uui-badge slot="extra" .color=${hint.color ?? 'default'} ?attention=${hint.color === 'invalid'}
-						>${hint.text}</uui-badge
+				? html`<umb-badge slot="extra" .color=${hint.color ?? 'default'} ?attention=${hint.color === 'invalid'}
+						>${hint.text}</umb-badge
 					>`
 				: nothing}</uui-tab
 		>`;

src/Umbraco.Web.UI.Client/src/packages/core/components/badge/badge.element.ts

@@ -0,0 +1,72 @@
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+import { html, customElement, property, css, LitElement, ifDefined } from '@umbraco-cms/backoffice/external/lit';
+import type { UUIInterfaceColor, UUIInterfaceLook } from '@umbraco-cms/backoffice/external/uui';
+
+/**
+ * @element umb-badge
+ * @description A wrapper for the uui-badge component with position fixed support to go on top of other elements.
+ * @augments {LitElement}
+ */
+@customElement('umb-badge')
+export class UmbBadgeElement extends LitElement {
+	/**
+	 * Changes the look of the button to one of the predefined, symbolic looks.
+	 * @type {"default" | "positive" | "warning" | "danger"}
+	 * @attr
+	 * @default "default"
+	 */
+	@property({ type: String })
+	color?: UUIInterfaceColor;
+
+	/**
+	 * Changes the look of the button to one of the predefined, symbolic looks.
+	 * @type {"default" | "primary" | "secondary" | "outline" | "placeholder"}
+	 * @attr
+	 * @default "default"
+	 */
+	@property({ type: String })
+	look?: UUIInterfaceLook;
+
+	/**
+	 * Bring attention to this badge by applying a bounce animation.
+	 * @type boolean
+	 * @attr
+	 * @default false
+	 */
+	@property({ type: Boolean })
+	attention?: boolean;
+
+	override render() {
+		return html`<uui-badge color=${ifDefined(this.color)} look=${ifDefined(this.look)} ?attention=${this.attention}
+			><slot></slot
+		></uui-badge>`;
+	}
+
+	static override styles = [
+		UmbTextStyles,
+		css`
+			:host {
+				position: absolute;
+				anchor-name: --umb-badge-anchor;
+				/** because inset has no effect on uui-badge in this case, we then apply it here: */
+				inset: var(--uui-badge-inset, -8px -8px auto auto);
+			}
+
+			@supports (position-anchor: --my-name) {
+				uui-badge {
+					position: fixed;
+					position-anchor: --umb-badge-anchor;
+					z-index: 1;
+					top: anchor(top);
+					right: anchor(right);
+				}
+			}
+		`,
+	];
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-badge': UmbBadgeElement;
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/core/components/badge/index.ts

@@ -0,0 +1 @@
+export * from './badge.element.js';

src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts

@@ -2,6 +2,7 @@
 // TODO: we need to move these files into their respective folders/silos. We then need a way for a silo to globally register a component
 export * from './backoffice-modal-container/backoffice-modal-container.element.js';
 export * from './backoffice-notification-container/backoffice-notification-container.element.js';
+export * from './badge/index.js';
 export * from './body-layout/body-layout.element.js';
 export * from './code-block/index.js';
 export * from './dropdown/index.js';
@@ -25,6 +26,6 @@ export * from './multiple-color-picker-input/index.js';
 export * from './multiple-text-string-input/index.js';
 export * from './popover-layout/index.js';
 export * from './ref-item/index.js';
-export * from './stack/index.js';
 export * from './split-panel/index.js';
+export * from './stack/index.js';
 export * from './table/index.js';

src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-editor/workspace-editor.element.ts

@@ -193,8 +193,8 @@ export class UmbWorkspaceEditorElement extends UmbLitElement {
 											data-mark="workspace:view-link:${manifest.alias}">
 											<div slot="icon">
 												<umb-icon name=${manifest.meta.icon}></umb-icon> ${hint && !active
-													? html`<uui-badge .color=${hint.color ?? 'default'} ?attention=${hint.color === 'invalid'}
-															>${hint.text}</uui-badge
+													? html`<umb-badge .color=${hint.color ?? 'default'} ?attention=${hint.color === 'invalid'}
+															>${hint.text}</umb-badge
 														>`
 													: nothing}
 											</div>
@@ -275,12 +275,9 @@ export class UmbWorkspaceEditorElement extends UmbLitElement {
 				position: relative;
 			}
 
-			uui-badge {
-				position: absolute;
+			umb-badge {
 				font-size: var(--uui-type-small-size);
-				top: -0.5em;
-				right: auto;
-				left: calc(50% + 0.8em);
+				right: -1.5em;
 			}
 
 			umb-extension-slot[slot='actions'] {

src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-split-view/workspace-split-view-variant-selector.element.ts

@@ -337,7 +337,7 @@ export class UmbWorkspaceSplitViewVariantSelectorElement<
 			const hintsOrderedByWeight = Array.from(this._hintMap.values()).sort((a, b) => (b.weight || 0) - (a.weight || 0));
 			firstHintOnInactiveVariant = hintsOrderedByWeight.find((hint) => {
 				if (!hint.variantId) return false;
-				return !hint.variantId.isInvariant() && hint.variantId.compare(this._activeVariant!) === false;
+				return !hint.variantId.isInvariant() && this.#isVariantActive(hint.variantId) === false;
 			});
 		}
 
@@ -369,8 +369,8 @@ export class UmbWorkspaceSplitViewVariantSelectorElement<
 								${this.#getVariantSpecInfo(this._activeVariant)}
 								${this.#renderReadOnlyTag(this._activeVariant?.culture)}
 								<uui-symbol-expand .open=${this._variantSelectorOpen}></uui-symbol-expand>
-								${this.#renderHintBadge(firstHintOnInactiveVariant)}
 							</uui-button>
+							${!this._variantSelectorOpen ? this.#renderHintBadge(firstHintOnInactiveVariant) : nothing}
 							${this._activeVariants.length > 1
 								? html`
 										<uui-button slot="append" compact id="variant-close" @click=${this.#closeSplitView}>
@@ -424,9 +424,8 @@ export class UmbWorkspaceSplitViewVariantSelectorElement<
 						</div>
 					</div>
 					<div class="specs-info">${this.#getVariantSpecInfo(variantOption)}</div>
-					${this.#renderHintBadge(!active ? hint : undefined)}
 				</button>
-				${this.#renderSplitViewButton(variantOption)}
+				${this.#renderHintBadge(!active ? hint : undefined)} ${this.#renderSplitViewButton(variantOption)}
 			</div>
 			${this.#isVariantExpanded(variantId)
 				? html` ${subVariantOptions.map((option) => this.#renderSegmentVariantOption(option))} `
@@ -436,9 +435,9 @@ export class UmbWorkspaceSplitViewVariantSelectorElement<
 
 	#renderHintBadge(hint?: UmbVariantHint) {
 		if (!hint) return nothing;
-		return html`<div class="hint">
-			<uui-badge .color=${hint.color ?? 'default'} ?attention=${hint.color === 'invalid'}>${hint.text}</uui-badge>
-		</div>`;
+		return html` <umb-badge slot="append" .color=${hint.color ?? 'default'} ?attention=${hint.color === 'invalid'}
+			>${hint.text}</umb-badge
+		>`;
 	}
 
 	#isCreated(variantOption: VariantOptionModelType) {