From 7e225ed8a72d4d37d660c7964be26ba67edbc2f2 Mon Sep 17 00:00:00 2001 From: Aidan Timson Date: Thu, 12 Feb 2026 14:35:32 +0000 Subject: [PATCH] Migrate onboarding dialogs to wa (#29601) * Migrate onboarding dialog(s) to wa * Remove hass * Allow hass to be uninitialised in wa dialog * Use standard width for overflowing text --- src/components/ha-wa-dialog.ts | 6 ++-- src/onboarding/dialogs/app-dialog.ts | 35 +++++++++++----------- src/onboarding/dialogs/community-dialog.ts | 30 +++++++++++-------- src/onboarding/onboarding-welcome-links.ts | 9 +----- 4 files changed, 39 insertions(+), 41 deletions(-) diff --git a/src/components/ha-wa-dialog.ts b/src/components/ha-wa-dialog.ts index ae094f6246..da7bcd7f02 100644 --- a/src/components/ha-wa-dialog.ts +++ b/src/components/ha-wa-dialog.ts @@ -75,7 +75,7 @@ export type DialogWidth = "small" | "medium" | "large" | "full"; */ @customElement("ha-wa-dialog") export class HaWaDialog extends ScrollableFadeMixin(LitElement) { - @property({ attribute: false }) public hass!: HomeAssistant; + @property({ attribute: false }) public hass?: HomeAssistant; @property({ attribute: "aria-labelledby" }) public ariaLabelledBy?: string; @@ -198,13 +198,13 @@ export class HaWaDialog extends ScrollableFadeMixin(LitElement) { await this.updateComplete; requestAnimationFrame(() => { - if (isIosApp(this.hass)) { + if (this.hass && isIosApp(this.hass)) { const element = this.querySelector("[autofocus]"); if (element !== null) { if (!element.id) { element.id = "ha-wa-dialog-autofocus"; } - this.hass.auth.external!.fireMessage({ + this.hass?.auth.external?.fireMessage({ type: "focus_element", payload: { element_id: element.id, diff --git a/src/onboarding/dialogs/app-dialog.ts b/src/onboarding/dialogs/app-dialog.ts index 5be88e0486..25c61b34e9 100644 --- a/src/onboarding/dialogs/app-dialog.ts +++ b/src/onboarding/dialogs/app-dialog.ts @@ -1,18 +1,25 @@ import { LitElement, css, html, nothing } from "lit"; -import { customElement, property } from "lit/decorators"; +import { customElement, property, state } from "lit/decorators"; import type { LocalizeFunc } from "../../common/translations/localize"; import { fireEvent } from "../../common/dom/fire_event"; -import { createCloseHeading } from "../../components/ha-dialog"; +import "../../components/ha-wa-dialog"; @customElement("app-dialog") class DialogApp extends LitElement { @property({ attribute: false }) public localize?: LocalizeFunc; - public async showDialog(params): Promise { + @state() private _open = false; + + public async showDialog(params: { localize: LocalizeFunc }): Promise { this.localize = params.localize; + this._open = true; } - public async closeDialog(): Promise { + public closeDialog(): void { + this._open = false; + } + + private _dialogClosed(): void { this.localize = undefined; fireEvent(this, "dialog-closed", { dialog: this.localName }); } @@ -21,15 +28,12 @@ class DialogApp extends LitElement { if (!this.localize) { return nothing; } - return html`
@@ -69,13 +73,10 @@ class DialogApp extends LitElement {
- `; + `; } static styles = css` - ha-dialog { - --mdc-dialog-min-width: min(500px, 90vw); - } .app-qr { display: flex; justify-content: space-between; diff --git a/src/onboarding/dialogs/community-dialog.ts b/src/onboarding/dialogs/community-dialog.ts index 1d6c864c79..bb00d14f9b 100644 --- a/src/onboarding/dialogs/community-dialog.ts +++ b/src/onboarding/dialogs/community-dialog.ts @@ -1,9 +1,9 @@ import { mdiOpenInNew } from "@mdi/js"; import { LitElement, css, html, nothing } from "lit"; -import { customElement, property } from "lit/decorators"; +import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../common/dom/fire_event"; import type { LocalizeFunc } from "../../common/translations/localize"; -import { createCloseHeading } from "../../components/ha-dialog"; +import "../../components/ha-wa-dialog"; import "../../components/ha-list"; import "../../components/ha-list-item"; @@ -11,11 +11,18 @@ import "../../components/ha-list-item"; class DialogCommunity extends LitElement { @property({ attribute: false }) public localize?: LocalizeFunc; + @state() private _open = false; + public async showDialog(params): Promise { this.localize = params.localize; + this._open = true; } - public async closeDialog(): Promise { + public closeDialog(): void { + this._open = false; + } + + private _dialogClosed(): void { this.localize = undefined; fireEvent(this, "dialog-closed", { dialog: this.localName }); } @@ -24,14 +31,12 @@ class DialogCommunity extends LitElement { if (!this.localize) { return nothing; } - return html` - `; + `; } static styles = css` - ha-dialog { - --mdc-dialog-min-width: min(400px, 90vw); + ha-wa-dialog { --dialog-content-padding: 0; } ha-list-item { diff --git a/src/onboarding/onboarding-welcome-links.ts b/src/onboarding/onboarding-welcome-links.ts index 8c32d09cf5..ca2d9c6bd7 100644 --- a/src/onboarding/onboarding-welcome-links.ts +++ b/src/onboarding/onboarding-welcome-links.ts @@ -4,16 +4,12 @@ import { LitElement, css, html, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import type { LocalizeFunc } from "../common/translations/localize"; import "../components/ha-card"; -import { documentationUrl } from "../util/documentation-url"; -import type { HomeAssistant } from "../types"; import { showAppDialog } from "./dialogs/show-app-dialog"; import { showCommunityDialog } from "./dialogs/show-community-dialog"; import "./onboarding-welcome-link"; @customElement("onboarding-welcome-links") class OnboardingWelcomeLinks extends LitElement { - @property({ attribute: false }) public hass!: HomeAssistant; - @property({ attribute: false }) public localize!: LocalizeFunc; @property({ attribute: "mobile-app", type: Boolean }) @@ -23,10 +19,7 @@ class OnboardingWelcomeLinks extends LitElement { return html`