Tree: Minimalistic styles for load more (#20376)

* make tree load more minimalistic

* set type and expand inherited styles

* also set title

Author: nielslyngsoe

src/Umbraco.Web.UI.Client/src/assets/lang/da.ts

@@ -74,6 +74,7 @@ export default {
 		readOnly: 'Skrivebeskyttet',
 		trash: 'Papirkurv',
 		loadMore: 'Indlæs flere',
+		showMore: 'Vis flere',
 	},
 	actionCategories: {
 		content: 'Indhold',

src/Umbraco.Web.UI.Client/src/assets/lang/en.ts

@@ -74,6 +74,7 @@ export default {
 		wasMovedTo: 'was moved to',
 		viewActionsFor: (name) => (name ? `View actions for '${name}'` : 'View actions'),
 		loadMore: 'Load more',
+		showMore: 'Show more',
 	},
 	actionCategories: {
 		content: 'Content',

src/Umbraco.Web.UI.Client/src/packages/core/tree/components/tree-load-more-button.element.ts

@@ -7,32 +7,41 @@ export class UmbTreeLoadMoreButtonElement extends UmbLitElement {
 	@property({ type: Boolean })
 	loading: boolean = false;
 
+	protected _dataMark: string = 'tree:load-more';
+
 	override render() {
 		const state: UUIButtonState = this.loading ? 'waiting' : undefined;
+		const label = this.localize.term('actions_showMore');
 
 		return html`<uui-button
 			state=${ifDefined(state)}
-			data-mark="tree:load-more"
+			data-mark=${this._dataMark}
 			id="load-more"
-			look="secondary"
-			.label=${this.localize.term('actions_loadMore')}></uui-button>`;
+			.label=${label}
+			.title=${label}
+			>…</uui-button
+		>`;
 	}
 
-	static override readonly styles = css`
-		:host {
-			position: relative;
-			display: block;
-			padding-left: var(--uui-size-space-3);
-			margin-right: var(--uui-size-space-2);
-			margin-bottom: var(--uui-size-layout-2);
-			margin-left: calc(var(--uui-menu-item-indent, 0) * var(--uui-size-4));
-		}
-		uui-button {
-			width: 100%;
-			height: var(--uui-size---uui-size-layout-3);
-			--uui-box-border-radius: calc(var(--uui-border-radius) * 2);
-		}
-	`;
+	static override readonly styles = [
+		css`
+			:host {
+				position: relative;
+				display: block;
+				padding-left: var(--uui-size-space-3);
+				margin-right: var(--uui-size-space-2);
+				margin-left: calc(var(--uui-menu-item-indent, 0) * var(--uui-size-4));
+				margin-bottom: var(--uui-size-layout-2);
+			}
+
+			uui-button {
+				width: 100%;
+				height: var(--uui-size---uui-size-layout-3);
+				--uui-box-border-radius: calc(var(--uui-border-radius) * 2);
+				--uui-button-content-align: start;
+			}
+		`,
+	];
 }
 
 declare global {

src/Umbraco.Web.UI.Client/src/packages/core/tree/components/tree-load-prev-button.element.ts

@@ -1,37 +1,18 @@
-import { css, customElement, html, ifDefined, property } from '@umbraco-cms/backoffice/external/lit';
-import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import type { UUIButtonState } from '@umbraco-cms/backoffice/external/uui';
+import { css, customElement } from '@umbraco-cms/backoffice/external/lit';
+import { UmbTreeLoadMoreButtonElement } from './tree-load-more-button.element.js';
 
 @customElement('umb-tree-load-prev-button')
-export class UmbTreeLoadPrevButtonElement extends UmbLitElement {
-	@property({ type: Boolean })
-	loading: boolean = false;
+export class UmbTreeLoadPrevButtonElement extends UmbTreeLoadMoreButtonElement {
+	protected override _dataMark = 'tree:load-prev';
 
-	override render() {
-		const state: UUIButtonState = this.loading ? 'waiting' : undefined;
-		return html`<uui-button
-			state=${ifDefined(state)}
-			data-mark="tree:load-prev"
-			id="load-prev"
-			look="secondary"
-			label=${this.localize.term('actions_loadMore')}></uui-button>`;
-	}
-
-	static override readonly styles = css`
-		:host {
-			position: relative;
-			display: block;
-			padding-left: var(--uui-size-space-3);
-			margin-right: var(--uui-size-space-2);
-			margin-left: calc(var(--uui-menu-item-indent, 0) * var(--uui-size-4));
-		}
-
-		uui-button {
-			width: 100%;
-			height: var(--uui-size---uui-size-layout-3);
-			--uui-box-border-radius: calc(var(--uui-border-radius) * 2);
-		}
-	`;
+	static override readonly styles = [
+		...UmbTreeLoadMoreButtonElement.styles,
+		css`
+			:host {
+				margin-bottom: 0;
+			}
+		`,
+	];
 }
 
 declare global {