Skip to content

feat(validation): lifecycle placement of dev warnings #6561

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
miwha-adobe wants to merge 9 commits into from
Open

feat(validation): lifecycle placement of dev warnings #6561

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
5b6600a
feat(validation): warn on invalid enum values instead of overriding
miwha-adobe Jul 24, 2026
2603a2a
refactor(alert-banner): return `nothing` instead of empty templates i…
miwha-adobe Jul 24, 2026
3dbd430
Merge branch 'ruben/feat-dev-warning-validation-components' of https:…
miwha-adobe Jul 29, 2026
3c78374
refactor(dev-validation): move enum warnings to the pre-render phase
miwha-adobe Jul 30, 2026
369a189
refactor(dev-validation): defer enum fallback removal to a POC branch
miwha-adobe Jul 30, 2026
9069214
refactor(alert-banner): drop out-of-scope 1st-gen renderIcon change
miwha-adobe Jul 30, 2026
e34c64b
Merge branch 'ruben/feat-dev-warning-validation-components' of https:…
miwha-adobe Aug 3, 2026
8b98b90
feat(dev-warning): revalidate aria-based warnings via AttributeObserv…
miwha-adobe Aug 3, 2026
c4cdbce
Merge branch 'ruben/feat-dev-warning-validation-components' of https:…
miwha-adobe Aug 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions 2nd-gen/packages/core/components/asset/Asset.base.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,8 +52,7 @@ export abstract class AssetBase extends SpectrumElement {
// IMPLEMENTATION
// ──────────────────────

protected override updated(changes: PropertyValues): void {
super.updated(changes);
protected override update(changes: PropertyValues): void {
if (typeof this.variant !== 'undefined') {
const constructor = this.constructor as typeof AssetBase;
validateEnum(this, {
Expand All @@ -63,5 +62,6 @@ export abstract class AssetBase extends SpectrumElement {
url: 'https://spectrum-web-components.adobe.com/?path=/docs/components-asset--docs',
});
}
super.update(changes);
}
}
30 changes: 17 additions & 13 deletions 2nd-gen/packages/core/components/card/Card.base.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -181,19 +181,7 @@ export abstract class CardBase extends SizedMixin(SpectrumElement, {
?.addEventListener('slotchange', this.handleActionsSlotChange);
}

protected override updated(changedProperties: PropertyValues): void {
super.updated(changedProperties);

if (changedProperties.has('selectable')) {
if (this.selectable) {
this.setAttribute('tabindex', '0');
this.addEventListener('keydown', this.handleSelectableKeydown);
} else {
this.removeAttribute('tabindex');
this.removeEventListener('keydown', this.handleSelectableKeydown);
}
}

protected override update(changedProperties: PropertyValues): void {
const { VARIANTS, DENSITIES } = this.constructor as typeof CardBase;

if (changedProperties.has('variant')) {
Expand All @@ -215,6 +203,22 @@ export abstract class CardBase extends SizedMixin(SpectrumElement, {
});
}

super.update(changedProperties);
}

protected override updated(changedProperties: PropertyValues): void {
super.updated(changedProperties);

if (changedProperties.has('selectable')) {
if (this.selectable) {
this.setAttribute('tabindex', '0');
this.addEventListener('keydown', this.handleSelectableKeydown);
} else {
this.removeAttribute('tabindex');
this.removeEventListener('keydown', this.handleSelectableKeydown);
}
}

warnIf(
this,
changedProperties.has('titleAsLink') &&
Expand Down
6 changes: 3 additions & 3 deletions 2nd-gen/packages/core/components/illustrated-message/IllustratedMessage.base.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,9 +108,7 @@ export abstract class IllustratedMessageBase extends SpectrumElement {
return this.slotText.hasContent;
}

protected override updated(changedProperties: PropertyValues): void {
super.updated(changedProperties);

protected override update(changedProperties: PropertyValues): void {
if (changedProperties.has('size')) {
validateEnum(this, {
prop: 'size',
Expand All @@ -128,6 +126,8 @@ export abstract class IllustratedMessageBase extends SpectrumElement {
url: 'https://spectrum-web-components.adobe.com/?path=/docs/components-illustrated-message--docs',
});
}

super.update(changedProperties);
}

protected handleActionsSlotChange(): void {
Expand Down
21 changes: 11 additions & 10 deletions 2nd-gen/packages/core/components/progress-circle/ProgressCircle.base.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,6 +167,17 @@ export abstract class ProgressCircleBase extends SizedMixin(SpectrumElement, {
this.progress = clamped;
}
}

if (changes.has('staticColor') && this.staticColor !== undefined) {

@rubencarvalho rubencarvalho Aug 6, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe this is duplicating what is below (lines 241-248)

https://github.com/adobe/spectrum-web-components/pull/6561/changes#diff-2194b94b4d869a61170a29cb27f1ce8c70cad533d6e1f21ea90d8be4687cb2b9R241-R248

const constructor = this.constructor as typeof ProgressCircleBase;
validateEnum(this, {
prop: 'static-color',
value: this.staticColor,
valid: constructor.STATIC_COLORS,
url: 'https://spectrum-web-components.adobe.com/?path=/docs/components-progress-circle--docs',
});
}

super.willUpdate(changes);
}

Expand Down Expand Up @@ -223,16 +234,6 @@ export abstract class ProgressCircleBase extends SizedMixin(SpectrumElement, {
);
}

if (changes.has('staticColor') && this.staticColor !== undefined) {
const constructor = this.constructor as typeof ProgressCircleBase;
validateEnum(this, {
prop: 'static-color',
value: this.staticColor,
valid: constructor.STATIC_COLORS,
url: 'https://spectrum-web-components.adobe.com/?path=/docs/components-progress-circle--docs',
});
}

this.warnDeprecatedLightDomChildren();
}
}
5 changes: 3 additions & 2 deletions 2nd-gen/packages/core/components/status-light/StatusLight.base.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,8 +98,7 @@ export abstract class StatusLightBase extends SizedMixin(SpectrumElement, {
// IMPLEMENTATION
// ──────────────────────

protected override updated(changes: PropertyValues): void {
super.updated(changes);
protected override update(changes: PropertyValues): void {
const constructor = this.constructor as typeof StatusLightBase;
// @ts-expect-error -- intentional runtime guard: 1st-gen consumers may pass 'accent'
if (this.variant === 'accent') {
Expand All @@ -125,5 +124,7 @@ export abstract class StatusLightBase extends SizedMixin(SpectrumElement, {
'https://spectrum-web-components.adobe.com/?path=/docs/status-light-migration-guide--docs',
{ level: 'deprecation' }
);

super.update(changes);
}
}
7 changes: 4 additions & 3 deletions 2nd-gen/packages/core/components/tooltip/Tooltip.base.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -471,10 +471,7 @@ export abstract class TooltipBase
if (this.disabled && this.open) {
this.open = false;
}
}

protected override updated(changedProperties: PropertyValues): void {
super.updated(changedProperties);
if (changedProperties.has('variant')) {
const constructor = this.constructor as typeof TooltipBase;
validateEnum(this, {

@Rajdeepc Rajdeepc Aug 6, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not a bug: I see Tooltip and ProgressCircle fold the validateEnum check in willUpdate while others do in update. Again, functionally both is running pre-render but its an inconsistency where we are trying to create a pattern.

Expand All @@ -493,6 +490,10 @@ export abstract class TooltipBase
url: 'https://spectrum-web-components.adobe.com/?path=/docs/components-tooltip--docs',
});
}
}

protected override updated(changedProperties: PropertyValues): void {
super.updated(changedProperties);
if (changedProperties.has('offset')) {
this.style.setProperty(
'--_swc-tooltip-animation-distance',
Expand Down
4 changes: 2 additions & 2 deletions 2nd-gen/packages/swc/components/action-button/ActionButton.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,8 +164,7 @@ export class ActionButton extends PendingMixin(ButtonBase) {
// state we just set.
private _ariaForwardingInProgress = false;

protected override updated(changedProperties: PropertyValues): void {
super.updated(changedProperties);
protected override update(changedProperties: PropertyValues): void {
if (
changedProperties.has('staticColor') &&
this.staticColor !== undefined
Expand All @@ -177,6 +176,7 @@ export class ActionButton extends PendingMixin(ButtonBase) {
url: 'https://spectrum-web-components.adobe.com/?path=/docs/components-action-button--docs',
});
}
super.update(changedProperties);
}

// ──────────────────────────────
Expand Down
Loading