rename data interface

src/Umbraco.Web.UI.Client/libs/modal/modal.context.ts

@@ -15,7 +15,7 @@ import { BehaviorSubject } from 'rxjs';
 import type { UUIModalDialogElement } from '@umbraco-ui/uui-modal-dialog';
 import type { UmbModalDocumentPickerData } from '../../src/backoffice/documents/documents/modals/document-picker';
 import { UmbModalChangePasswordData } from './layouts/modal-layout-change-password.element';
-import type { UmbModalIconPickerData } from '../../src/backoffice/shared/modals/icon-picker/icon-picker-modal.element';
+import type { UmbIconPickerModalData } from '../../src/backoffice/shared/modals/icon-picker/icon-picker-modal.element';
 import type { UmbModalConfirmData } from './layouts/confirm/modal-layout-confirm.element';
 import type { UmbModalPropertyEditorUIPickerData } from './layouts/property-editor-ui-picker/modal-layout-property-editor-ui-picker.element';
 import type { UmbModalMediaPickerData } from './layouts/media-picker/modal-layout-media-picker.element';
@@ -94,11 +94,11 @@ export class UmbModalContext {
 	/**
 	 * Opens an Icon Picker sidebar modal
 	 * @public
-	 * @param {UmbModalIconPickerData} [data]
+	 * @param {UmbIconPickerModalData} [data]
 	 * @return {*}  {UmbModalHandler}
 	 * @memberof UmbModalContext
 	 */
-	public iconPicker(data?: UmbModalIconPickerData): UmbModalHandler {
+	public iconPicker(data?: UmbIconPickerModalData): UmbModalHandler {
 		return this.open('umb-modal-layout-icon-picker', { data, type: 'sidebar', size: 'small' });
 	}
 

src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/icon-picker/icon-picker-modal.element.ts

@@ -8,15 +8,15 @@ import { UmbModalLayoutElement } from '../../../../../libs/modal/layouts/modal-l
 
 import icons from '../../../../../public-assets/icons/icons.json';
 
-export interface UmbModalIconPickerData {
+export interface UmbIconPickerModalData {
 	multiple: boolean;
 	selection: string[];
 }
 
 // TODO: Make use of UmbPickerLayoutBase
 // TODO: to prevent element extension we need to move the Picker logic into a separate class we can reuse across all pickers
-@customElement('umb-modal-layout-icon-picker')
-export class UmbModalLayoutIconPickerElement extends UmbModalLayoutElement<UmbModalIconPickerData> {
+@customElement('umb-icon-picker-modal')
+export class UmbIconPickerModalElement extends UmbModalLayoutElement<UmbIconPickerModalData> {
 	static styles = [
 		UUITextStyles,
 		css`
@@ -211,10 +211,10 @@ export class UmbModalLayoutIconPickerElement extends UmbModalLayoutElement<UmbMo
 	}
 }
 
-export default UmbModalLayoutIconPickerElement;
+export default UmbIconPickerModalElement;
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-modal-layout-icon-picker': UmbModalLayoutIconPickerElement;
+		'umb-icon-picker-modal': UmbIconPickerModalElement;
 	}
 }

src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/icon-picker/icon-picker-modal.stories.ts

@@ -4,22 +4,22 @@ import './icon-picker-modal.element';
 import { Meta, Story } from '@storybook/web-components';
 import { html } from 'lit';
 
-import type { UmbModalLayoutIconPickerElement, UmbModalIconPickerData } from './icon-picker-modal.element';
+import type { UmbIconPickerModalElement, UmbIconPickerModalData } from './icon-picker-modal.element';
 
 export default {
 	title: 'API/Modals/Layouts/Icon Picker',
-	component: 'umb-modal-layout-icon-picker',
-	id: 'modal-layout-icon-picker',
+	component: 'umb-icon-picker-modal',
+	id: 'umb-icon-picker-modal',
 } as Meta;
 
-const data: UmbModalIconPickerData = {
+const data: UmbIconPickerModalData = {
 	multiple: true,
 	selection: [],
 };
 
-export const Overview: Story<UmbModalLayoutIconPickerElement> = () => html`
+export const Overview: Story<UmbIconPickerModalElement> = () => html`
 	<!-- TODO: figure out if generics are allowed for properties:
 	https://github.com/runem/lit-analyzer/issues/149
 	https://github.com/runem/lit-analyzer/issues/163 -->
-	<umb-modal-layout-icon-picker .data=${data as any}></umb-modal-layout-icon-picker>
+	<umb-icon-picker-modal .data=${data as any}></umb-icon-picker-modal>
 `;

src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/icon-picker/icon-picker-modal.test.ts

@@ -1,16 +1,16 @@
 import { expect, fixture, html } from '@open-wc/testing';
-import { UmbModalLayoutIconPickerElement } from './icon-picker-modal.element';
+import { UmbIconPickerModalElement } from './icon-picker-modal.element';
 import { defaultA11yConfig } from '@umbraco-cms/test-utils';
 
-describe('umb-modal-layout-icon-picker', () => {
-	let element: UmbModalLayoutIconPickerElement;
+describe('umb-icon-picker-modal', () => {
+	let element: UmbIconPickerModalElement;
 
 	beforeEach(async () => {
-		element = await fixture(html` <umb-modal-layout-icon-picker></umb-modal-layout-icon-picker> `);
+		element = await fixture(html` <umb-icon-picker-modal></umb-icon-picker-modal> `);
 	});
 
 	it('is defined with its own instance', () => {
-		expect(element).to.be.instanceOf(UmbModalLayoutIconPickerElement);
+		expect(element).to.be.instanceOf(UmbIconPickerModalElement);
 	});
 
 	// TODO: Reinstate this test when the a11y audit is fixed on uui-color-picker

src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/icon-picker/index.ts

@@ -0,0 +1,18 @@
+import { UmbModalToken } from 'libs/modal';
+
+export interface UmbModalDocumentPickerData {
+	multiple?: boolean;
+	selection?: Array<string>;
+}
+
+export interface UmbModalDocumentPickerResponse {
+	selection: Array<string>;
+}
+
+export const UMB_DOCUMENT_PICKER_MODAL_TOKEN = new UmbModalToken<UmbModalDocumentPickerData>(
+	'Umb.Modal.DocumentPicker',
+	{
+		type: 'sidebar',
+		size: 'small',
+	}
+);

src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/icon-picker/property-editor-ui-icon-picker.stories.ts

@@ -3,7 +3,7 @@ import { html } from 'lit-html';
 
 import type { UmbPropertyEditorUIIconPickerElement } from './property-editor-ui-icon-picker.element';
 import './property-editor-ui-icon-picker.element';
-import type { UmbModalLayoutIconPickerElement } from 'src/backoffice/shared/modals/icon-picker/icon-picker-modal.element';
+import type { UmbIconPickerModalElement } from 'src/backoffice/shared/modals/icon-picker/icon-picker-modal.element';
 
 export default {
 	title: 'Property Editor UIs/Icon Picker',
@@ -11,8 +11,8 @@ export default {
 	id: 'umb-property-editor-ui-icon-picker',
 } as Meta;
 
-export const AAAOverview: Story<UmbModalLayoutIconPickerElement> = () =>
-	html`<umb-modal-layout-icon-picker></umb-modal-layout-icon-picker>`;
+export const AAAOverview: Story<UmbIconPickerModalElement> = () =>
+	html`<umb-icon-picker-modal></umb-icon-picker-modal>`;
 AAAOverview.storyName = 'Overview';
 AAAOverview.decorators = [
 	(story) =>