Hotfix: Reintroduce deprecated UUI components

[nielslyngsoe]

Implementing and exporting deprecated components from UUI v.1

[claude]

Claude finished @nielslyngsoe's task in 3m 22s —— View job

---

PR Review

Target: origin/release/17.6.1 · Based on commit: ad72e8aa
· Skipped: 0 noise files out of 4 total

Re-implements two removed UUI v1 components (uui-popover and uui-caret) locally under src/external/uui/ and exports them as deprecated shims so third-party extensions that relied on UUI v1 continue to work.

• Other changes: PopoverPlacement, UUIPopoverElement, UUICaretElement, and UUIPopoverEvent are newly added to the public export surface of the external/uui wrapper.

---

Important

• uui-caret.element.ts:47–52: CSS nesting bug — the svg {} block is never closed before :host([open]) svg {} opens. In CSS nesting (Level 4), the :host([open]) svg rule is treated as nested inside svg, producing a selector that can't match anything meaningful in Shadow DOM. The transform: rotate(180deg) will not be applied when open is true, so the caret's rotation animation is silently broken. Fix: close the svg block before the host rule.

  svg {
    transform-origin: 50% 50%;
    transition: transform 100ms cubic-bezier(0.1, 0, 0.9, 1);
  }
  
  :host([open]) svg {
    transform: rotate(180deg);
  }

  Fix this →

Suggestions

• uui-popover.element.ts:40: No runtime deprecation warning — UUIPopoverElement has the @deprecated JSDoc tag but nothing fires when the component is instantiated. Per docs/deprecation.md, every deprecation requires both a JSDoc tag and a runtime warning. UUICaretElement uses console.error() in its constructor; consider adding the same for UUIPopoverElement (or using UmbDeprecation if importable without circularity).

• uui-popover.element.ts (end of file): Missing HTMLElementTagNameMap declaration for 'uui-popover'. uui-caret.element.ts correctly declares the element in the global map; the popover should do the same for TypeScript auto-completion and type safety:

  declare global {
    interface HTMLElementTagNameMap {
      'uui-popover': UUIPopoverElement;
    }
  }

• uui-popover.element.ts:43: scrollEventHandler = this._updatePlacement.bind(this) — the style guide prefers arrow function class properties over .bind(this) to make the intent explicit. Since the reference is stored correctly it doesn't cause a bug, but the arrow form is consistent with the rest of the codebase: private _scrollEventHandler = () => this._updatePlacement();.

---

Request Changes

The CSS nesting bug in uui-caret.element.ts means the rotation animation won't work when open is true — the component's primary visual behaviour is silently broken. Please fix this before merging.

[Copilot]

Pull request overview

This PR reintroduces several deprecated Umbraco UI (UUI v1) components into the backoffice’s external/uui compatibility layer, so older consumers can continue to compile and run while the codebase transitions to newer replacements.

Changes:

• Adds deprecated uui-popover custom element implementation and its close event.
• Adds deprecated uui-caret custom element implementation.
• Re-exports the deprecated components from src/external/uui/index.ts behind “remove in v18” TODO notes.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 9 comments.

File	Description
src/Umbraco.Web.UI.Client/src/external/uui/UUIPopoverEvent.ts	Introduces deprecated popover close event type for compatibility.
src/Umbraco.Web.UI.Client/src/external/uui/uui-popover.element.ts	Reintroduces deprecated uui-popover element implementation and behavior.
src/Umbraco.Web.UI.Client/src/external/uui/uui-caret.element.ts	Reintroduces deprecated uui-caret element implementation.
src/Umbraco.Web.UI.Client/src/external/uui/index.ts	Exposes the deprecated components via the external UUI barrel exports.

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud