Skip to content

Commit a1c2dbe

Browse files
snootchedsnootched
committed
fix: ha-dialog fixes for HA 2026.3 (wa-dialog)
1 parent 0e30d67 commit a1c2dbe

23 files changed

+295
-301
lines changed

‎src/editor/cards/lcards-alert-overlay-editor.js‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -594,9 +594,7 @@ export class LCARdSAlertOverlayEditor extends LCARdSBaseEditor {
594594
this._activePickerCondition = condKey;
595595

596596
const dialog = document.createElement('ha-dialog');
597-
dialog.heading = 'Select Content Card Type';
598-
dialog.scrimClickAction = 'close';
599-
dialog.escapeKeyAction = 'close';
597+
dialog.headerTitle = 'Select Content Card Type';
600598

601599
this._cardPickerDialogRef = dialog;
602600
document.body.appendChild(dialog);
@@ -622,7 +620,7 @@ export class LCARdSAlertOverlayEditor extends LCARdSBaseEditor {
622620
detail: { condKey, config: selected }
623621
}));
624622

625-
dialog.close();
623+
dialog.open = false;
626624
});
627625

628626
dialog.addEventListener('closed', () => {
@@ -663,9 +661,8 @@ export class LCARdSAlertOverlayEditor extends LCARdSBaseEditor {
663661
this._activeEditorCondition = condKey;
664662

665663
const dialog = document.createElement('ha-dialog');
666-
dialog.heading = `Edit: ${currentCard.type}`;
667-
dialog.scrimClickAction = '';
668-
dialog.escapeKeyAction = 'close';
664+
dialog.headerTitle = `Edit: ${currentCard.type}`;
665+
dialog.setAttribute('prevent-scrim-close', '');
669666
this._cardEditorDialogRef = dialog;
670667

671668
const container = document.createElement('div');
@@ -688,12 +685,12 @@ export class LCARdSAlertOverlayEditor extends LCARdSBaseEditor {
688685
dialog.appendChild(container);
689686

690687
const actionsDiv = document.createElement('div');
691-
actionsDiv.slot = 'primaryAction';
688+
actionsDiv.slot = 'footer';
692689
actionsDiv.style.cssText = 'display:flex; gap:8px;';
693690

694691
const cancelBtn = document.createElement('ha-button');
695-
cancelBtn.setAttribute('dialogAction', 'cancel');
696692
cancelBtn.textContent = 'Cancel';
693+
cancelBtn.addEventListener('click', () => { dialog.open = false; });
697694

698695
const saveBtn = document.createElement('ha-button');
699696
saveBtn.textContent = 'Save';
@@ -702,7 +699,7 @@ export class LCARdSAlertOverlayEditor extends LCARdSBaseEditor {
702699
this._setConditionProp(condKey, 'content', JSON.parse(JSON.stringify(tempConfig)));
703700
lcardsLog.debug('[AlertOverlayEditor] Content card saved from editor:', tempConfig.type);
704701
}
705-
dialog.close();
702+
dialog.open = false;
706703
});
707704

708705
actionsDiv.appendChild(cancelBtn);

‎src/editor/cards/lcards-elbow-editor.js‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -243,9 +243,7 @@ export class LCARdSElbowEditor extends LCARdSBaseEditor {
243243
}
244244

245245
const dialog = document.createElement('ha-dialog');
246-
dialog.heading = 'Select Symbiont Card Type';
247-
dialog.scrimClickAction = 'close';
248-
dialog.escapeKeyAction = 'close';
246+
dialog.headerTitle = 'Select Symbiont Card Type';
249247

250248
this._symbioCardPickerDialogRef = dialog;
251249
document.body.appendChild(dialog);
@@ -272,7 +270,7 @@ export class LCARdSElbowEditor extends LCARdSBaseEditor {
272270
detail: { config: selectedConfig }
273271
}));
274272

275-
dialog.close();
273+
dialog.open = false;
276274
});
277275

278276
dialog.addEventListener('closed', () => {
@@ -316,9 +314,8 @@ export class LCARdSElbowEditor extends LCARdSBaseEditor {
316314
}
317315

318316
const dialog = document.createElement('ha-dialog');
319-
dialog.heading = `Edit: ${currentCard.type}`;
320-
dialog.scrimClickAction = '';
321-
dialog.escapeKeyAction = 'close';
317+
dialog.headerTitle = `Edit: ${currentCard.type}`;
318+
dialog.setAttribute('prevent-scrim-close', '');
322319
this._symbioCardEditorDialogRef = dialog;
323320

324321
const container = document.createElement('div');
@@ -346,12 +343,12 @@ export class LCARdSElbowEditor extends LCARdSBaseEditor {
346343
dialog.appendChild(container);
347344

348345
const actionsDiv = document.createElement('div');
349-
actionsDiv.slot = 'primaryAction';
346+
actionsDiv.slot = 'footer';
350347
actionsDiv.style.cssText = 'display:flex; gap:8px;';
351348

352349
const cancelButton = document.createElement('ha-button');
353-
cancelButton.setAttribute('dialogAction', 'cancel');
354350
cancelButton.textContent = 'Cancel';
351+
cancelButton.addEventListener('click', () => { dialog.open = false; });
355352

356353
const saveButton = document.createElement('ha-button');
357354
saveButton.textContent = 'Save';
@@ -360,7 +357,7 @@ export class LCARdSElbowEditor extends LCARdSBaseEditor {
360357
this._setConfigValue('symbiont.card', JSON.parse(JSON.stringify(tempConfig)));
361358
lcardsLog.debug('[ElbowEditor] Symbiont card config saved from editor:', tempConfig.type);
362359
}
363-
dialog.close();
360+
dialog.open = false;
364361
});
365362

366363
actionsDiv.appendChild(cancelButton);

‎src/editor/cards/lcards-msd-editor.js‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -149,9 +149,7 @@ export class LCARdSMSDEditor extends LCARdSBaseEditor {
149149

150150
// Create ha-dialog (runs in editor context - simple DOM)
151151
const dialog = document.createElement('ha-dialog');
152-
dialog.heading = 'Select Card Type';
153-
dialog.scrimClickAction = 'close';
154-
dialog.escapeKeyAction = 'close';
152+
dialog.headerTitle = 'Select Card Type';
155153

156154
// Build lovelace object for hui-card-picker
157155
const lovelace = this._getLovelace();
@@ -211,7 +209,7 @@ export class LCARdSMSDEditor extends LCARdSBaseEditor {
211209
document.dispatchEvent(resultEvent);
212210

213211
// Close picker dialog
214-
dialog.close();
212+
dialog.open = false;
215213
});
216214
} else {
217215
lcardsLog.error('[MSDEditor] Failed to create hui-card-picker');

‎src/editor/components/dashboard/lcards-rule-editor-dialog.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -54,8 +54,7 @@ export class LCARdSRuleEditorDialog extends LitElement {
5454
:host { display: block; }
5555
5656
lcards-dialog {
57-
--mdc-dialog-min-width: 680px;
58-
--mdc-dialog-max-width: 900px;
57+
--ha-dialog-width-md: 900px;
5958
}
6059
6160
.form-content {
@@ -98,7 +97,7 @@ export class LCARdSRuleEditorDialog extends LitElement {
9897
9998
@media (max-width: 600px) {
10099
lcards-dialog {
101-
--mdc-dialog-min-width: 95vw;
100+
--ha-dialog-width-md: 95vw;
102101
}
103102
.identity-grid {
104103
grid-template-columns: 1fr;

‎src/editor/components/dashboard/lcards-rules-dashboard.js‎

Lines changed: 27 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1080,8 +1080,8 @@ export class LCARdSRulesDashboard extends LitElement {
10801080
return html`
10811081
<ha-dialog
10821082
.open=${this._previewDialogOpen}
1083-
@closed=${this._closePreviewDialog}
1084-
.heading=${'Rule Details'}>
1083+
@closed=${(e) => { e.stopPropagation(); this._closePreviewDialog(); }}
1084+
header-title="Rule Details">
10851085
<div class="rule-preview-dialog">
10861086
<h3>${rule.id || 'Unnamed Rule'}</h3>
10871087
@@ -1120,14 +1120,15 @@ export class LCARdSRulesDashboard extends LitElement {
11201120
<div class="detail-value">${actions} action${actions !== 1 ? 's' : ''}</div>
11211121
</div>
11221122
</div>
1123-
<ha-button
1124-
slot="primaryAction"
1125-
variant="brand"
1126-
appearance="accent"
1127-
@click=${this._closePreviewDialog}
1128-
dialogAction="close">
1129-
Close
1130-
</ha-button>
1123+
<div slot="footer">
1124+
<ha-button
1125+
variant="brand"
1126+
appearance="accent"
1127+
@click=${this._closePreviewDialog}
1128+
data-dialog="close">
1129+
Close
1130+
</ha-button>
1131+
</div>
11311132
</ha-dialog>
11321133
`;
11331134
}
@@ -1302,26 +1303,26 @@ rules:
13021303
return html`
13031304
<ha-dialog
13041305
.open=${true}
1305-
@closed=${this._cancelDelete}
1306-
.heading=${'Delete Rule?'}>
1306+
@closed=${(e) => { e.stopPropagation(); this._cancelDelete(); }}
1307+
header-title="Delete Rule?">
13071308
<div style="padding: 8px 0;">
13081309
<p>Are you sure you want to delete rule <strong>${rule.id}</strong>?</p>
13091310
<p style="color: var(--secondary-text-color, #666); font-size: 13px;">This action cannot be undone.</p>
13101311
</div>
1311-
<ha-button
1312-
slot="secondaryAction"
1313-
appearance="plain"
1314-
@click=${this._cancelDelete}>
1315-
Cancel
1316-
</ha-button>
1317-
<ha-button
1318-
slot="primaryAction"
1319-
variant="brand"
1320-
appearance="accent"
1321-
style="--mdc-theme-primary: var(--error-color, #f44336);"
1322-
@click=${this._confirmDelete}>
1323-
Delete
1324-
</ha-button>
1312+
<div slot="footer">
1313+
<ha-button
1314+
appearance="plain"
1315+
@click=${this._cancelDelete}>
1316+
Cancel
1317+
</ha-button>
1318+
<ha-button
1319+
variant="brand"
1320+
appearance="accent"
1321+
style="--mdc-theme-primary: var(--error-color, #f44336);"
1322+
@click=${this._confirmDelete}>
1323+
Delete
1324+
</ha-button>
1325+
</div>
13251326
</ha-dialog>
13261327
`;
13271328
}

‎src/editor/components/datasources/lcards-datasource-browser.js‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -869,9 +869,8 @@ export class LCARdSDataSourceBrowser extends LitElement {
869869
870870
/* Dialog styles matching Provenance Inspector */
871871
ha-dialog {
872-
--mdc-dialog-min-width: 90vw;
873-
--mdc-dialog-max-width: 90vw;
874-
--mdc-dialog-min-height: 600px;
872+
--ha-dialog-width-md: 90vw;
873+
--ha-dialog-min-height: 600px;
875874
}
876875
877876
.dialog-content {
@@ -1244,8 +1243,8 @@ export class LCARdSDataSourceBrowser extends LitElement {
12441243
return html`
12451244
<ha-dialog
12461245
open
1247-
@closed=${this._handleClose}
1248-
.heading=${'DataSource Browser'}>
1246+
@closed=${(e) => { e.stopPropagation(); this._handleClose(); }}
1247+
header-title="DataSource Browser">
12491248
<div class="dialog-content">
12501249
<div class="dialog-header">
12511250
<h2>🔍 DataSource Browser</h2>
@@ -1273,14 +1272,15 @@ export class LCARdSDataSourceBrowser extends LitElement {
12731272
</div>
12741273
</div>
12751274
1276-
<ha-button
1277-
slot="primaryAction"
1278-
variant="brand"
1279-
appearance="accent"
1280-
@click=${this._handleClose}
1281-
dialogAction="close">
1282-
Close
1283-
</ha-button>
1275+
<div slot="footer">
1276+
<ha-button
1277+
variant="brand"
1278+
appearance="accent"
1279+
@click=${this._handleClose}
1280+
data-dialog="close">
1281+
Close
1282+
</ha-button>
1283+
</div>
12841284
</ha-dialog>
12851285
`;
12861286
}

‎src/editor/components/datasources/lcards-datasource-dialog.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,8 +52,7 @@ export class LCARdSDataSourceDialog extends LitElement {
5252
}
5353
5454
lcards-dialog {
55-
--mdc-dialog-min-width: 600px;
56-
--mdc-dialog-max-width: 800px;
55+
--ha-dialog-width-md: 800px;
5756
}
5857
5958
.form-content {

‎src/editor/components/datasources/lcards-datasource-editor-tab.js‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -385,9 +385,8 @@ export class LCARdSDataSourceEditorTab extends LitElement {
385385
_showDependencyWarningDialog(sourceName, dependents) {
386386
return new Promise((resolve) => {
387387
const dialog = document.createElement('ha-dialog');
388-
dialog.heading = 'Destructive Action';
389-
dialog.scrimClickAction = '';
390-
dialog.escapeKeyAction = '';
388+
dialog.headerTitle = 'Destructive Action';
389+
dialog.setAttribute('prevent-scrim-close', '');
391390

392391
// Create content div (light DOM, no slot)
393392
const content = document.createElement('div');
@@ -418,10 +417,9 @@ export class LCARdSDataSourceEditorTab extends LitElement {
418417

419418
// Cancel button (secondary action - plain appearance)
420419
const cancelButton = document.createElement('ha-button');
421-
cancelButton.setAttribute('slot', 'secondaryAction');
420+
cancelButton.setAttribute('slot', 'footer');
422421
cancelButton.setAttribute('appearance', 'plain');
423422
cancelButton.textContent = 'Cancel';
424-
cancelButton.setAttribute('dialogAction', 'cancel');
425423
cancelButton.addEventListener('click', () => {
426424
lcardsLog.trace('[LCARdS] Delete dialog: Cancel clicked');
427425
dialog.close();
@@ -430,11 +428,10 @@ export class LCARdSDataSourceEditorTab extends LitElement {
430428

431429
// Delete button (primary action - warning/destructive style)
432430
const deleteButton = document.createElement('ha-button');
433-
deleteButton.setAttribute('slot', 'primaryAction');
431+
deleteButton.setAttribute('slot', 'footer');
434432
deleteButton.setAttribute('variant', 'warning');
435433
deleteButton.setAttribute('appearance', 'accent');
436434
deleteButton.textContent = 'Delete and Break Dependencies';
437-
deleteButton.setAttribute('dialogAction', 'ok');
438435
deleteButton.addEventListener('click', () => {
439436
lcardsLog.trace('[LCARdS] Delete dialog: Delete clicked');
440437
dialog.close();

‎src/editor/components/datasources/lcards-processor-editor.js‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -68,8 +68,7 @@ export class LCARdSProcessorEditor extends LitElement {
6868
}
6969
7070
lcards-dialog {
71-
--mdc-dialog-min-width: 700px;
72-
--mdc-dialog-max-width: 900px;
71+
--ha-dialog-width-md: 900px;
7372
}
7473
7574
.form-content {
@@ -191,14 +190,13 @@ export class LCARdSProcessorEditor extends LitElement {
191190
<lcards-dialog
192191
.heading="${this.mode === 'add' ? 'Add Processor' : 'Edit Processor'}"
193192
.open="${this.open}"
194-
@closed="${this._handleCancel}"
193+
@closed="${(e) => { e.stopPropagation(); this._handleCancel(); }}"
195194
>
196195
${this._renderForm()}
197196
<div slot="primaryAction">
198197
<ha-button
199198
appearance="plain"
200199
@click="${this._handleCancel}"
201-
dialogAction="close"
202200
>
203201
Cancel
204202
</ha-button>
@@ -207,7 +205,6 @@ export class LCARdSProcessorEditor extends LitElement {
207205
variant="brand"
208206
@click="${this._handleSave}"
209207
.disabled="${!this._isValid()}"
210-
dialogAction="close"
211208
>
212209
${this.mode === 'add' ? 'Add' : 'Save'}
213210
</ha-button>

0 commit comments

Comments
 (0)