From c3fd87587cb234b34aca186f017e38466ec882de Mon Sep 17 00:00:00 2001 From: Xander Marjoram Date: Tue, 16 Jul 2024 16:48:09 +0100 Subject: [PATCH 1/5] fix(pie-modal): DSW-2208 add logging --- .changeset/nice-steaks-train.md | 5 +++++ packages/components/pie-modal/src/index.ts | 3 +++ 2 files changed, 8 insertions(+) create mode 100644 .changeset/nice-steaks-train.md diff --git a/.changeset/nice-steaks-train.md b/.changeset/nice-steaks-train.md new file mode 100644 index 0000000000..7348b8e20b --- /dev/null +++ b/.changeset/nice-steaks-train.md @@ -0,0 +1,5 @@ +--- +"@justeattakeaway/pie-modal": minor +--- + +[Changed] - SSR testing diff --git a/packages/components/pie-modal/src/index.ts b/packages/components/pie-modal/src/index.ts index 7494042a05..fa5ef63994 100644 --- a/packages/components/pie-modal/src/index.ts +++ b/packages/components/pie-modal/src/index.ts @@ -127,6 +127,7 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps { } async firstUpdated (changedProperties: PropertyValues) : Promise { + console.log('initial open state in firstUpdated', this.isOpen); super.firstUpdated(changedProperties); if (this._dialog) { @@ -206,8 +207,10 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps { private _handleModalOpenStateOnFirstRender (changedProperties: PropertyValues) : void { // This ensures if the modal is open on first render, the scroll lock and backdrop are applied const previousValue = changedProperties.get('isOpen'); + console.log('previous value in firstUpdated', previousValue); if (previousValue === undefined && this.isOpen) { + console.log('Dispatching open event on first render'); dispatchCustomEvent(this, ON_MODAL_OPEN_EVENT, { targetModal: this }); } } From 40cc84715216926fe9225907c49d9545ad90237f Mon Sep 17 00:00:00 2001 From: Xander Marjoram Date: Tue, 16 Jul 2024 17:12:04 +0100 Subject: [PATCH 2/5] Add constructor log --- packages/components/pie-modal/src/index.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/components/pie-modal/src/index.ts b/packages/components/pie-modal/src/index.ts index fa5ef63994..0e1086c57c 100644 --- a/packages/components/pie-modal/src/index.ts +++ b/packages/components/pie-modal/src/index.ts @@ -111,6 +111,11 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps { // Renders a `CSSResult` generated from SCSS by Vite static styles = unsafeCSS(styles); + constructor () { + super(); + console.log('leadingAction in constructor', this.leadingAction); + } + connectedCallback () : void { super.connectedCallback(); this.addEventListener('click', (event) => this._handleDialogLightDismiss(event)); From d36a792b1bc3999c3e4a43ea1c0efbba641e9d42 Mon Sep 17 00:00:00 2001 From: Xander Marjoram Date: Wed, 17 Jul 2024 09:40:30 +0100 Subject: [PATCH 3/5] Add more logging --- packages/components/pie-modal/src/index.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/components/pie-modal/src/index.ts b/packages/components/pie-modal/src/index.ts index 0e1086c57c..eedc6393e1 100644 --- a/packages/components/pie-modal/src/index.ts +++ b/packages/components/pie-modal/src/index.ts @@ -114,6 +114,8 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps { constructor () { super(); console.log('leadingAction in constructor', this.leadingAction); + console.log('position in constructor', this.position); + console.log('size in constructor', this.size); } connectedCallback () : void { @@ -133,6 +135,9 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps { async firstUpdated (changedProperties: PropertyValues) : Promise { console.log('initial open state in firstUpdated', this.isOpen); + console.log('leadingAction in firstUpdated', this.leadingAction); + console.log('position in firstUpdated', this.position); + console.log('size in firstUpdated', this.size); super.firstUpdated(changedProperties); if (this._dialog) { From b875a06af6c1f6f5cfb88e5fcf36b8a069369d63 Mon Sep 17 00:00:00 2001 From: Xander Marjoram Date: Wed, 17 Jul 2024 13:49:01 +0100 Subject: [PATCH 4/5] Allow undefined leadingAction --- packages/components/pie-modal/src/index.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/components/pie-modal/src/index.ts b/packages/components/pie-modal/src/index.ts index eedc6393e1..03b0dd21ef 100644 --- a/packages/components/pie-modal/src/index.ts +++ b/packages/components/pie-modal/src/index.ts @@ -87,7 +87,7 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps { public isOpen = defaultProps.isOpen; @property({ type: Object }) - public leadingAction!: ActionProps; + public leadingAction: ModalProps['leadingAction']; @property() @validPropertyValues(componentSelector, positions, defaultProps.position) @@ -313,6 +313,10 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps { * @private */ private renderLeadingAction () : TemplateResult | typeof nothing { + if (!this.leadingAction) { + return nothing; + } + const { text, variant = 'primary', ariaLabel } = this.leadingAction; if (!text) { From accd23f09b65e91ed3b5d0abd9dbe23fcbecf34b Mon Sep 17 00:00:00 2001 From: Xander Marjoram Date: Wed, 17 Jul 2024 14:36:16 +0100 Subject: [PATCH 5/5] Update logging --- packages/components/pie-modal/src/index.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/components/pie-modal/src/index.ts b/packages/components/pie-modal/src/index.ts index 03b0dd21ef..25a9a1763f 100644 --- a/packages/components/pie-modal/src/index.ts +++ b/packages/components/pie-modal/src/index.ts @@ -113,6 +113,7 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps { constructor () { super(); + console.log('isOpen in constructor', this.isOpen); console.log('leadingAction in constructor', this.leadingAction); console.log('position in constructor', this.position); console.log('size in constructor', this.size); @@ -134,7 +135,7 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps { } async firstUpdated (changedProperties: PropertyValues) : Promise { - console.log('initial open state in firstUpdated', this.isOpen); + console.log('isOpen in firstUpdated', this.isOpen); console.log('leadingAction in firstUpdated', this.leadingAction); console.log('position in firstUpdated', this.position); console.log('size in firstUpdated', this.size); @@ -217,10 +218,8 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps { private _handleModalOpenStateOnFirstRender (changedProperties: PropertyValues) : void { // This ensures if the modal is open on first render, the scroll lock and backdrop are applied const previousValue = changedProperties.get('isOpen'); - console.log('previous value in firstUpdated', previousValue); if (previousValue === undefined && this.isOpen) { - console.log('Dispatching open event on first render'); dispatchCustomEvent(this, ON_MODAL_OPEN_EVENT, { targetModal: this }); } }