From f4a88c3b3a73b561095777c225bee7b667858ac6 Mon Sep 17 00:00:00 2001 From: Lea Verou Date: Tue, 7 Jan 2025 16:53:08 -0500 Subject: [PATCH] Harmonize `updated()` definitions - Use proper type - Use same argument name - Ensure `super.updated()` is called --- src/components/button-group/button-group.ts | 7 +++++-- src/components/popup/popup.ts | 9 +++++---- src/components/progress-ring/progress-ring.ts | 7 ++++--- src/components/textarea/textarea.ts | 5 +++-- src/components/viewport-demo/viewport-demo.ts | 7 ++++--- 5 files changed, 21 insertions(+), 14 deletions(-) diff --git a/src/components/button-group/button-group.ts b/src/components/button-group/button-group.ts index 2c91cdcf1..3a7dba9a0 100644 --- a/src/components/button-group/button-group.ts +++ b/src/components/button-group/button-group.ts @@ -1,3 +1,4 @@ +import type { PropertyValues } from 'lit'; import { html } from 'lit'; import { customElement, property, query, state } from 'lit/decorators.js'; import WebAwesomeElement from '../../internal/webawesome-element.js'; @@ -32,8 +33,10 @@ export default class WaButtonGroup extends WebAwesomeElement { /** The button group's orientation. */ @property({ reflect: true }) orientation: 'horizontal' | 'vertical' = 'horizontal'; - updated(changedProps: Map) { - if (changedProps.has('orientation')) { + updated(changedProperties: PropertyValues) { + super.updated(changedProperties); + + if (changedProperties.has('orientation')) { this.setAttribute('aria-orientation', this.orientation); this.updateClassNames(); } diff --git a/src/components/popup/popup.ts b/src/components/popup/popup.ts index 87f384f99..f24642735 100644 --- a/src/components/popup/popup.ts +++ b/src/components/popup/popup.ts @@ -1,5 +1,6 @@ import { arrow, autoUpdate, computePosition, flip, offset, platform, shift, size } from '@floating-ui/dom'; import { offsetParent } from 'composed-offset-position'; +import type { PropertyValues } from 'lit'; import { html } from 'lit'; import { customElement, property, query } from 'lit/decorators.js'; import { classMap } from 'lit/directives/class-map.js'; @@ -222,11 +223,11 @@ export default class WaPopup extends WebAwesomeElement { this.stop(); } - async updated(changedProps: Map) { - super.updated(changedProps); + async updated(changedProperties: PropertyValues) { + super.updated(changedProperties); // Start or stop the positioner when active changes - if (changedProps.has('active')) { + if (changedProperties.has('active')) { if (this.active) { this.start(); } else { @@ -235,7 +236,7 @@ export default class WaPopup extends WebAwesomeElement { } // Update the anchor when anchor changes - if (changedProps.has('anchor')) { + if (changedProperties.has('anchor')) { this.handleAnchorChange(); } diff --git a/src/components/progress-ring/progress-ring.ts b/src/components/progress-ring/progress-ring.ts index 4be0449fe..456f96398 100644 --- a/src/components/progress-ring/progress-ring.ts +++ b/src/components/progress-ring/progress-ring.ts @@ -1,3 +1,4 @@ +import type { PropertyValues } from 'lit'; import { html } from 'lit'; import { customElement, property, query, state } from 'lit/decorators.js'; import WebAwesomeElement from '../../internal/webawesome-element.js'; @@ -38,15 +39,15 @@ export default class WaProgressRing extends WebAwesomeElement { /** A custom label for assistive devices. */ @property() label = ''; - updated(changedProps: Map) { - super.updated(changedProps); + updated(changedProperties: PropertyValues) { + super.updated(changedProperties); // // This block is only required for Safari because it doesn't transition the circle when the custom properties // change, possibly because of a mix of pixel + unit-less values in the calc() function. It seems like a Safari bug, // but I couldn't pinpoint it so this works around the problem. // - if (changedProps.has('value')) { + if (changedProperties.has('value')) { const radius = parseFloat(getComputedStyle(this.indicator).getPropertyValue('r')); const circumference = 2 * Math.PI * radius; const offset = circumference - (this.value / 100) * circumference; diff --git a/src/components/textarea/textarea.ts b/src/components/textarea/textarea.ts index e483c5f42..34c5b4094 100644 --- a/src/components/textarea/textarea.ts +++ b/src/components/textarea/textarea.ts @@ -1,4 +1,5 @@ -import { html, type PropertyValues } from 'lit'; +import type { PropertyValues } from 'lit'; +import { html } from 'lit'; import { customElement, property, query, state } from 'lit/decorators.js'; import { classMap } from 'lit/directives/class-map.js'; import { ifDefined } from 'lit/directives/if-defined.js'; @@ -272,7 +273,7 @@ export default class WaTextarea extends WebAwesomeFormAssociatedElement { this.setTextareaDimensions(); } - protected updated(changedProperties: PropertyValues) { + updated(changedProperties: PropertyValues) { if (changedProperties.has('resize')) { this.setTextareaDimensions(); } diff --git a/src/components/viewport-demo/viewport-demo.ts b/src/components/viewport-demo/viewport-demo.ts index 4dd4dbaf8..0e1a016db 100644 --- a/src/components/viewport-demo/viewport-demo.ts +++ b/src/components/viewport-demo/viewport-demo.ts @@ -1,3 +1,4 @@ +import type { PropertyValues } from 'lit'; import { html } from 'lit'; import { customElement, property, query, state } from 'lit/decorators.js'; import { classMap } from 'lit/directives/class-map.js'; @@ -281,14 +282,14 @@ export default class WaViewportDemo extends WebAwesomeElement { } } - updated(changedProperties: Map) { + updated(changedProperties: PropertyValues) { super.updated(changedProperties); - if (changedProperties.has('iframe')) { + if (changedProperties.has('iframe' as keyof WaViewportDemo)) { this.observeResize(); } - if (['zoomLevel', 'availableWidth', 'viewport'].some(p => changedProperties.has(p))) { + if (['zoomLevel', 'availableWidth', 'viewport'].some(p => changedProperties.has(p as keyof WaViewportDemo))) { this.updateZoom(); }