Merge branch 'main' into feature/entity-actions

src/Umbraco.Web.UI.Client/.github/workflows/build_test.yml

@@ -34,7 +34,7 @@ jobs:
     - run: sudo npx playwright install-deps
     - run: npm test
     - name: Upload Code Coverage reports
-      uses: actions/upload-artifact@v2
+      uses: actions/upload-artifact@v3
       if: always()
       with:
         name: code-coverage

src/Umbraco.Web.UI.Client/.storybook/preview.js

@@ -29,6 +29,7 @@ import '../src/backoffice/shared/components/backoffice-frame/backoffice-notifica
 import '../libs/element/context-provider.element';
 import '../src/backoffice/shared/components/backoffice-frame/backoffice-modal-container.element';
 import '../src/backoffice/shared/components/code-block/code-block.element';
+import '../src/backoffice/shared/components/workspace/workspace-layout/workspace-layout.element';
 
 class UmbStoryBookElement extends LitElement {
 	_umbIconStore = new UmbIconStore();

src/Umbraco.Web.UI.Client/package.json

@@ -57,10 +57,8 @@
 		"npm": ">=8.0.0 < 9"
 	},
 	"dependencies": {
-		"@umbraco-ui/uui": "^1.1.0",
-		"@umbraco-ui/uui-color-swatch": "file:umbraco-ui-uui-color-swatch-0.0.0.tgz",
-		"@umbraco-ui/uui-color-swatches": "file:umbraco-ui-uui-color-swatches-2.0.0.tgz",
-		"@umbraco-ui/uui-css": "^1.0.0",
+		"@umbraco-ui/uui": "^1.2.0-rc.0",
+		"@umbraco-ui/uui-css": "^1.2.0-rc.0",
 		"@umbraco-ui/uui-modal": "file:umbraco-ui-uui-modal-0.0.0.tgz",
 		"@umbraco-ui/uui-modal-container": "file:umbraco-ui-uui-modal-container-0.0.0.tgz",
 		"@umbraco-ui/uui-modal-dialog": "file:umbraco-ui-uui-modal-dialog-0.0.0.tgz",
@@ -81,7 +79,7 @@
 		"@storybook/addon-actions": "^6.5.14",
 		"@storybook/addon-essentials": "^6.5.15",
 		"@storybook/addon-links": "^6.5.15",
-		"@storybook/builder-vite": "^0.2.7",
+		"@storybook/builder-vite": "^0.3.0",
 		"@storybook/mdx2-csf": "^0.0.3",
 		"@storybook/web-components": "^6.5.15",
 		"@types/chai": "^4.3.4",
@@ -89,7 +87,7 @@
 		"@types/mocha": "^10.0.0",
 		"@types/uuid": "^9.0.0",
 		"@typescript-eslint/eslint-plugin": "^5.50.0",
-		"@typescript-eslint/parser": "^5.48.1",
+		"@typescript-eslint/parser": "^5.50.0",
 		"@web/dev-server-esbuild": "^0.3.3",
 		"@web/dev-server-import-maps": "^0.0.7",
 		"@web/test-runner": "^0.15.0",

src/Umbraco.Web.UI.Client/src/app.ts

@@ -2,8 +2,6 @@ import '@umbraco-ui/uui-css/dist/uui-css.css';
 import '@umbraco-cms/css';
 
 // TODO: remove these imports when they are part of UUI
-import '@umbraco-ui/uui-color-swatch';
-import '@umbraco-ui/uui-color-swatches';
 import '@umbraco-ui/uui-modal';
 import '@umbraco-ui/uui-modal-container';
 import '@umbraco-ui/uui-modal-dialog';
@@ -17,7 +15,6 @@ import { UUIIconRegistryEssential } from '@umbraco-ui/uui';
 import { css, html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 
-
 import { UmbLitElement } from '@umbraco-cms/element';
 import { tryExecuteAndNotify } from '@umbraco-cms/resources';
 import { OpenAPI, RuntimeLevel, ServerResource } from '@umbraco-cms/backend-api';

src/Umbraco.Web.UI.Client/src/backoffice/shared/components/empty-state/empty-state.element.ts

@@ -0,0 +1,66 @@
+import { UUITextStyles } from '@umbraco-ui/uui-css';
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+@customElement('umb-empty-state')
+export class UmbEmptyStateElement extends LitElement {
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				text-align: center;
+				padding: var(--uui-size-space-4);
+			}
+
+			:host([position='center']) {
+				position: absolute;
+				top: 50%;
+				left: 50%;
+				max-width: 400px;
+				width: 80%;
+				transform: translate(-50%, -50%);
+			}
+
+			:host(:not([position='center'])) {
+				margin: auto;
+			}
+
+			:host(:not([size='small'])) {
+				font-size: var(--uui-size-6);
+			}
+
+			:host([size='small']) {
+				font-size: var(--uui-size-5);
+			}
+
+			slot {
+				margin: auto;
+			}
+		`,
+	];
+
+	/**
+	 * Set the text size
+	 */
+	@property({ type: String })
+	size: 'small' | 'large' = 'large';
+
+	/**
+	 * Set the element position
+	 * 'center' => element is absolutely centered
+	 * undefined => element has auto margin, to center in parent
+	 */
+	@property({ type: String })
+	position: 'center' | undefined;
+
+	render() {
+		return html`<slot></slot>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-empty-state': UmbEmptyStateElement;
+	}
+}

src/Umbraco.Web.UI.Client/src/backoffice/shared/components/index.ts

@@ -24,3 +24,4 @@ import './workspace/workspace-action-menu/workspace-action-menu.element';
 
 import '../entity-actions/entity-action.element';
 import '../entity-actions/entity-action-list.element';
+import './empty-state/empty-state.element';

src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-dashboards/section-dashboards.element.ts

@@ -28,7 +28,8 @@ export class UmbSectionDashboardsElement extends UmbLitElement {
 			}
 
 			#scroll-container {
-				flex: 1;
+				flex:1;
+				position:relative;
 			}
 
 			#router-slot {

src/Umbraco.Web.UI.Client/src/core/modal/layouts/icon-picker/modal-layout-icon-picker.element.ts

@@ -1,15 +1,13 @@
-import type { UUIColorSwatchesEvent } from '@umbraco-ui/uui-color-swatches';
+import type { UUIColorSwatchesEvent } from '@umbraco-ui/uui';
 
 import { css, html } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, property, state } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
 import { UmbModalLayoutElement } from '../modal-layout.element';
 
 import icons from '../../../../../public-assets/icons/icons.json';
 
-import '@umbraco-ui/uui-color-swatch';
-import '@umbraco-ui/uui-color-swatches';
-
 export interface UmbModalIconPickerData {
 	multiple: boolean;
 	selection: string[];
@@ -56,6 +54,7 @@ export class UmbModalLayoutIconPickerElement extends UmbModalLayoutElement<UmbMo
 				overflow-y: scroll;
 				max-height: 100%;
 				min-height: 0;
+				padding: 2px;
 			}
 
 			#icon-selection .icon {
@@ -74,7 +73,7 @@ export class UmbModalLayoutIconPickerElement extends UmbModalLayoutElement<UmbMo
 			#icon-selection .icon:focus,
 			#icon-selection .icon:hover,
 			#icon-selection .icon.selected {
-				background-color: var(--uui-color-selected);
+				outline: 2px solid var(--uui-color-selected);
 			}
 
 			uui-button {
@@ -91,7 +90,7 @@ export class UmbModalLayoutIconPickerElement extends UmbModalLayoutElement<UmbMo
 	iconlist = icons.map((icon) => icon.name);
 
 	@property({ type: Array })
-	iconlistFiltered: Array<string>;
+	iconlistFiltered: Array<string> = [];
 
 	@property({ type: Array })
 	colorlist = [
@@ -118,10 +117,10 @@ export class UmbModalLayoutIconPickerElement extends UmbModalLayoutElement<UmbMo
 	];
 
 	@state()
-	private _currentColor: string;
+	private _currentColor?: string;
 
 	@state()
-	private _currentIcon: string;
+	private _currentIcon?: string;
 
 	private _changeIcon(e: { target: HTMLInputElement; type: any; key: unknown }) {
 		if (e.type == 'click' || (e.type == 'keyup' && e.key == 'Enter')) {
@@ -137,10 +136,6 @@ export class UmbModalLayoutIconPickerElement extends UmbModalLayoutElement<UmbMo
 		}
 	}
 
-	private _setColor(color: string) {
-		return 'color: ' + color;
-	}
-
 	private _close() {
 		this.modalHandler?.close();
 	}
@@ -149,11 +144,8 @@ export class UmbModalLayoutIconPickerElement extends UmbModalLayoutElement<UmbMo
 		this.modalHandler?.close({ color: this._currentColor, icon: this._currentIcon });
 	}
 
-	constructor() {
-		super();
-		this._currentColor = '';
-		this._currentIcon = '';
-		this.iconlistFiltered = [];
+	private _onColorChange(e: UUIColorSwatchesEvent) {
+		this._currentColor = e.target.value;
 	}
 
 	connectedCallback(): void {
@@ -170,8 +162,14 @@ export class UmbModalLayoutIconPickerElement extends UmbModalLayoutElement<UmbMo
 					${this.renderSearchbar()}
 					<hr />
 					<uui-color-swatches
-						.swatches="${this.colorlist}"
-						@change="${(e: UUIColorSwatchesEvent) => (this._currentColor = e.target.value)}"></uui-color-swatches>
+						.value="${this._currentColor || ''}"
+						label="Color switcher for icons"
+						@change="${this._onColorChange}">
+						${this.colorlist.map(
+							(color) =>
+								html` <uui-color-swatch label="${color}" title="${color}" value="${color}"></uui-color-swatch> `
+						)}
+					</uui-color-swatches>
 
 					<hr />
 					<uui-scroll-container id="icon-selection">${this.renderIconSelection()}</uui-scroll-container>
@@ -199,8 +197,9 @@ export class UmbModalLayoutIconPickerElement extends UmbModalLayoutElement<UmbMo
 			return html`
 				<uui-icon
 					tabindex="0"
-					.style="${this._setColor(this._currentColor)}"
+					style=${styleMap({ color: this._currentColor })}
 					class="icon ${icon === this._currentIcon ? 'selected' : ''}"
+					title="${icon}"
 					name="${icon}"
 					label="${icon}"
 					id="${icon}"