From 87f7f4a4ee0672b83f630a91887b14927c4b2c83 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Fri, 8 Nov 2024 22:09:59 +0100 Subject: [PATCH 1/4] set to flex grow --- packages/uui-input/lib/uui-input.element.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/uui-input/lib/uui-input.element.ts b/packages/uui-input/lib/uui-input.element.ts index 124036f97..72470bdf0 100644 --- a/packages/uui-input/lib/uui-input.element.ts +++ b/packages/uui-input/lib/uui-input.element.ts @@ -360,6 +360,7 @@ export class UUIInputElement extends UUIFormControlMixin( flex-direction: column; align-items: stretch; justify-content: center; + flex-grow: 1; } #auto { From 45fc1d8a51d648b4fa94bd01107d43fc545e4169 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Tue, 12 Nov 2024 20:55:48 +0100 Subject: [PATCH 2/4] ability to prevent close + docs + tests --- .../lib/uui-modal-sidebar.element.ts | 13 +---- packages/uui-modal/lib/uui-modal.element.ts | 14 ++++- packages/uui-modal/lib/uui-modal.mdx | 6 +- packages/uui-modal/lib/uui-modal.test.ts | 55 ++++++++++++++++++- 4 files changed, 72 insertions(+), 16 deletions(-) diff --git a/packages/uui-modal/lib/uui-modal-sidebar.element.ts b/packages/uui-modal/lib/uui-modal-sidebar.element.ts index 238197a7d..f37be360a 100644 --- a/packages/uui-modal/lib/uui-modal-sidebar.element.ts +++ b/packages/uui-modal/lib/uui-modal-sidebar.element.ts @@ -1,6 +1,6 @@ import { css, html, PropertyValueMap } from 'lit'; import { property } from 'lit/decorators.js'; -import { UUIModalCloseEvent, UUIModalElement } from './uui-modal.element'; +import { UUIModalElement } from './uui-modal.element'; import { defineElement } from '@umbraco-ui/uui-base/lib/registration'; export type UUIModalSidebarSize = 'small' | 'medium' | 'large' | 'full'; @@ -13,11 +13,6 @@ export class UUIModalSidebarElement extends UUIModalElement { @property({ reflect: true }) size: UUIModalSidebarSize = 'full'; - constructor() { - super(); - this.addEventListener(UUIModalCloseEvent, this.#onClose.bind(this)); - } - protected firstUpdated( _changedProperties: Map, ): void { @@ -44,16 +39,14 @@ export class UUIModalSidebarElement extends UUIModalElement { return this._dialogElement?.getBoundingClientRect().width ?? 0; } - #onClose(event: Event) { - event.preventDefault(); - + _closeModal() { if (this.isClosing) return; this.isClosing = true; this.style.setProperty('--uui-modal-offset', -this.#getWidth + 'px'); setTimeout(() => { - this._closeModal(); + super._closeModal(); }, this.transitionDuration); } diff --git a/packages/uui-modal/lib/uui-modal.element.ts b/packages/uui-modal/lib/uui-modal.element.ts index 9f570e4fb..498add0d5 100644 --- a/packages/uui-modal/lib/uui-modal.element.ts +++ b/packages/uui-modal/lib/uui-modal.element.ts @@ -1,7 +1,10 @@ import { LitElement, css } from 'lit'; import { property, query } from 'lit/decorators.js'; +export const UUIModalOpenEvent = 'uui:modal-open'; export const UUIModalCloseEvent = 'uui:modal-close'; +export const UUIModalCloseEndEvent = 'uui:modal-close-end'; + export class UUIModalElement extends LitElement { @query('dialog') protected _dialogElement?: HTMLDialogElement; @@ -46,12 +49,17 @@ export class UUIModalElement extends LitElement { event?.preventDefault(); event?.stopImmediatePropagation(); - const openEvent = new CustomEvent('open', { + const openEvent = new CustomEvent(UUIModalOpenEvent, { + cancelable: true, + }); + // TODO: get rid of 'open'-event sometime in the future. [NL] + const legacyOpenEvent = new CustomEvent('open', { cancelable: true, }); this.dispatchEvent(openEvent); - if (openEvent.defaultPrevented) return; + this.dispatchEvent(legacyOpenEvent); + if (openEvent.defaultPrevented || legacyOpenEvent.defaultPrevented) return; this._openModal(); }; @@ -81,7 +89,9 @@ export class UUIModalElement extends LitElement { this.isOpen = false; this._dialogElement?.close(); + // TODO: get rid of 'close-end'-event sometime in the future. [NL] this.dispatchEvent(new CustomEvent('close-end')); + this.dispatchEvent(new CustomEvent(UUIModalCloseEndEvent)); this.remove(); } diff --git a/packages/uui-modal/lib/uui-modal.mdx b/packages/uui-modal/lib/uui-modal.mdx index 2ee4a822a..908972908 100644 --- a/packages/uui-modal/lib/uui-modal.mdx +++ b/packages/uui-modal/lib/uui-modal.mdx @@ -82,16 +82,16 @@ Example from the sidebar: All events from the modal base can be cancelled, thus preventing them from executing code, which enables you to customize the behavior. -#### `open` +#### `uui:modal-open` Dispatched on first render. This will set open to true and show the modal. Can be cancelled if you want to prevent the modal from opening. But then you'll have to manually call `_openModal()` when you want to open the modal. -#### `close` +#### `uui:modal-close` Dispatched when the modal is closed. Can be cancelled if you want to prevent the modal from closing. But then you'll have to manually call `_closeModal()` when you want to close the modal. This is used in the `uui-modal-sidebar` to wait for the animation to finish before removing the modal from the DOM. -#### `close-end` +#### `uui:modal-close-end` This event is triggered before removing the component from the DOM, either after animations or delays or when `_closeModal()` is manually invoked. diff --git a/packages/uui-modal/lib/uui-modal.test.ts b/packages/uui-modal/lib/uui-modal.test.ts index 7daeb994d..c8284e635 100644 --- a/packages/uui-modal/lib/uui-modal.test.ts +++ b/packages/uui-modal/lib/uui-modal.test.ts @@ -1,8 +1,10 @@ -import { html, fixture, expect } from '@open-wc/testing'; +import { html, fixture, expect, oneEvent } from '@open-wc/testing'; import { UUIModalDialogElement, UUIModalSidebarElement, UUIModalContainerElement, + UUIModalCloseEvent, + UUIModalCloseEndEvent, } from '.'; describe('UUIModalContainerElement', () => { @@ -53,4 +55,55 @@ describe('UUIModalSidebarElement', () => { it('passes the a11y audit', async () => { await expect(element).shadowDom.to.be.accessible(); }); + + describe('properties', () => { + it('has a size property', () => { + expect(element).to.have.property('size'); + }); + + it('has a index property', () => { + expect(element).to.have.property('index'); + }); + + it('has a uniqueIndex property', () => { + expect(element).to.have.property('uniqueIndex'); + }); + + it('has a transitionDuration property', () => { + expect(element).to.have.property('transitionDuration'); + }); + }); + + it('can close', async () => { + expect(element.isOpen).to.be.true; + + const listener = oneEvent(element, UUIModalCloseEvent); + + element.close(); + + const event = await listener; + expect(event).to.exist; + + const endListener = oneEvent(element, UUIModalCloseEndEvent); + + const endEvent = await endListener; + expect(endEvent).to.exist; + + expect(element.isOpen).to.be.false; + }); + + it('can have a prevented close', async () => { + expect(element.isOpen).to.be.true; + + expect(element.isClosing).to.be.false; + element.addEventListener(UUIModalCloseEvent, e => e.preventDefault()); + const closeListener = oneEvent(element, UUIModalCloseEvent); + element.close(); + + const closeEvent = await closeListener; + expect(closeEvent).to.exist; + + expect(element.isClosing).to.be.false; + expect(element.isOpen).to.be.true; + }); }); From 5d821bec90767d4203eebe78fc19683c176eb06d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Tue, 12 Nov 2024 20:58:28 +0100 Subject: [PATCH 3/4] rename to forceClose --- packages/uui-modal/lib/uui-modal-sidebar.element.ts | 4 ++-- packages/uui-modal/lib/uui-modal.element.ts | 4 ++-- packages/uui-modal/lib/uui-modal.mdx | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/uui-modal/lib/uui-modal-sidebar.element.ts b/packages/uui-modal/lib/uui-modal-sidebar.element.ts index f37be360a..3391058d8 100644 --- a/packages/uui-modal/lib/uui-modal-sidebar.element.ts +++ b/packages/uui-modal/lib/uui-modal-sidebar.element.ts @@ -39,14 +39,14 @@ export class UUIModalSidebarElement extends UUIModalElement { return this._dialogElement?.getBoundingClientRect().width ?? 0; } - _closeModal() { + forceClose() { if (this.isClosing) return; this.isClosing = true; this.style.setProperty('--uui-modal-offset', -this.#getWidth + 'px'); setTimeout(() => { - super._closeModal(); + super.forceClose(); }, this.transitionDuration); } diff --git a/packages/uui-modal/lib/uui-modal.element.ts b/packages/uui-modal/lib/uui-modal.element.ts index 498add0d5..04417552e 100644 --- a/packages/uui-modal/lib/uui-modal.element.ts +++ b/packages/uui-modal/lib/uui-modal.element.ts @@ -75,7 +75,7 @@ export class UUIModalElement extends LitElement { if (closeEvent.defaultPrevented) return; - this._closeModal(); + this.forceClose(); }; protected _openModal() { @@ -84,7 +84,7 @@ export class UUIModalElement extends LitElement { this._dialogElement?.addEventListener('cancel', this.close); } - protected _closeModal() { + public forceClose() { this.isClosing = true; this.isOpen = false; this._dialogElement?.close(); diff --git a/packages/uui-modal/lib/uui-modal.mdx b/packages/uui-modal/lib/uui-modal.mdx index 908972908..1415aefec 100644 --- a/packages/uui-modal/lib/uui-modal.mdx +++ b/packages/uui-modal/lib/uui-modal.mdx @@ -88,12 +88,12 @@ Dispatched on first render. This will set open to true and show the modal. Can b #### `uui:modal-close` -Dispatched when the modal is closed. Can be cancelled if you want to prevent the modal from closing. But then you'll have to manually call `_closeModal()` when you want to close the modal. +Dispatched when the modal is closed. Can be cancelled if you want to prevent the modal from closing. But then you'll have to manually call `forceClose()` when you want to close the modal. This is used in the `uui-modal-sidebar` to wait for the animation to finish before removing the modal from the DOM. #### `uui:modal-close-end` -This event is triggered before removing the component from the DOM, either after animations or delays or when `_closeModal()` is manually invoked. +This event is triggered before removing the component from the DOM, either after animations or delays or when `forceClose()` is manually invoked. ### CSS Variables From 76dc5634a9e25cf148b969446753679a9266dab7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Tue, 12 Nov 2024 20:59:32 +0100 Subject: [PATCH 4/4] correct comment --- packages/uui-modal/lib/uui-modal.element.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/uui-modal/lib/uui-modal.element.ts b/packages/uui-modal/lib/uui-modal.element.ts index 04417552e..a5fcea1d4 100644 --- a/packages/uui-modal/lib/uui-modal.element.ts +++ b/packages/uui-modal/lib/uui-modal.element.ts @@ -52,7 +52,7 @@ export class UUIModalElement extends LitElement { const openEvent = new CustomEvent(UUIModalOpenEvent, { cancelable: true, }); - // TODO: get rid of 'open'-event sometime in the future. [NL] + // TODO: get rid of legacy 'open'-event sometime in the future. [NL] const legacyOpenEvent = new CustomEvent('open', { cancelable: true, }); @@ -89,7 +89,7 @@ export class UUIModalElement extends LitElement { this.isOpen = false; this._dialogElement?.close(); - // TODO: get rid of 'close-end'-event sometime in the future. [NL] + // TODO: get rid of legacy 'close-end'-event sometime in the future. [NL] this.dispatchEvent(new CustomEvent('close-end')); this.dispatchEvent(new CustomEvent(UUIModalCloseEndEvent));