feat: make the header apps inherit from the default header app button so we can define the style in one place

Author: iOvergaard

src/packages/core/components/header-app/header-app-button.element.ts

@@ -1,11 +1,12 @@
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import type { CSSResultGroup } from '@umbraco-cms/backoffice/external/lit';
-import { css, html, LitElement, customElement, ifDefined } from '@umbraco-cms/backoffice/external/lit';
+import { css, html, customElement, ifDefined } from '@umbraco-cms/backoffice/external/lit';
 import type {
 	ManifestHeaderAppButtonKind,
 	UmbBackofficeManifestKind,
 } from '@umbraco-cms/backoffice/extension-registry';
 import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 
 const manifest: UmbBackofficeManifestKind = {
 	type: 'kind',
@@ -21,7 +22,7 @@ const manifest: UmbBackofficeManifestKind = {
 umbExtensionsRegistry.register(manifest);
 
 @customElement('umb-header-app-button')
-export class UmbHeaderAppButtonElement extends LitElement {
+export class UmbHeaderAppButtonElement extends UmbLitElement {
 	public manifest?: ManifestHeaderAppButtonKind;
 
 	render() {
@@ -41,7 +42,11 @@ export class UmbHeaderAppButtonElement extends LitElement {
 		css`
 			uui-button {
 				font-size: 18px;
-				--uui-button-background-color: transparent;
+				--uui-button-background-color: var(--umb-header-app-button-background-color, transparent);
+				--uui-button-background-color-hover: var(
+					--umb-header-app-button-background-color-hover,
+					var(--uui-color-emphasis)
+				);
 			}
 		`,
 	];

src/packages/search/umb-search-header-app.element.ts

@@ -1,25 +1,13 @@
 import { UMB_SEARCH_MODAL } from './search-modal/search-modal.token.js';
-import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import type { CSSResultGroup } from '@umbraco-cms/backoffice/external/lit';
-import { css, html, customElement } from '@umbraco-cms/backoffice/external/lit';
-import type { UmbModalManagerContext } from '@umbraco-cms/backoffice/modal';
+import { html, customElement } from '@umbraco-cms/backoffice/external/lit';
 import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';
-import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UmbHeaderAppButtonElement } from '@umbraco-cms/backoffice/components';
 
 @customElement('umb-search-header-app')
-export class UmbSearchHeaderAppElement extends UmbLitElement {
-	private _modalContext?: UmbModalManagerContext;
-
-	constructor() {
-		super();
-
-		this.consumeContext(UMB_MODAL_MANAGER_CONTEXT, (_instance) => {
-			this._modalContext = _instance;
-		});
-	}
-
-	#onSearchClick() {
-		this._modalContext?.open(this, UMB_SEARCH_MODAL);
+export class UmbSearchHeaderAppElement extends UmbHeaderAppButtonElement {
+	async #onSearchClick() {
+		const context = await this.getContext(UMB_MODAL_MANAGER_CONTEXT);
+		context.open(this, UMB_SEARCH_MODAL);
 	}
 
 	render() {
@@ -30,15 +18,7 @@ export class UmbSearchHeaderAppElement extends UmbLitElement {
 		`;
 	}
 
-	static styles: CSSResultGroup = [
-		UmbTextStyles,
-		css`
-			uui-button {
-				font-size: 18px;
-				--uui-button-background-color: transparent;
-			}
-		`,
-	];
+	static styles = UmbHeaderAppButtonElement.styles;
 }
 
 export default UmbSearchHeaderAppElement;

src/packages/user/current-user/current-user-header-app.element.ts

@@ -1,13 +1,12 @@
 import { UMB_CURRENT_USER_MODAL } from './modals/current-user/current-user-modal.token.js';
-import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import type { CSSResultGroup } from '@umbraco-cms/backoffice/external/lit';
 import { css, html, customElement, state, ifDefined } from '@umbraco-cms/backoffice/external/lit';
 import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';
-import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UMB_CURRENT_USER_CONTEXT, type UmbCurrentUserModel } from '@umbraco-cms/backoffice/current-user';
+import { UmbHeaderAppButtonElement } from '@umbraco-cms/backoffice/components';
 
 @customElement('umb-current-user-header-app')
-export class UmbCurrentUserHeaderAppElement extends UmbLitElement {
+export class UmbCurrentUserHeaderAppElement extends UmbHeaderAppButtonElement {
 	@state()
 	private _currentUser?: UmbCurrentUserModel;
 
@@ -96,11 +95,10 @@ export class UmbCurrentUserHeaderAppElement extends UmbLitElement {
 	}
 
 	static styles: CSSResultGroup = [
-		UmbTextStyles,
+		UmbHeaderAppButtonElement.styles,
 		css`
 			uui-button {
 				font-size: 14px;
-				--uui-button-background-color: transparent;
 			}
 		`,
 	];