Migrate favorite color picker to wa (more info) (#29373)

* Migrate favorite color picker to wa (more info)

* Remove cancel

src/dialogs/more-info/components/lights/dialog-light-color-favorite.ts

@@ -1,17 +1,12 @@
-import { mdiClose } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-button";
-import "../../../../components/ha-dialog-header";
+import "../../../../components/ha-dialog-footer";
 import "../../../../components/ha-icon-button-toggle";
-import type { HaMdDialog } from "../../../../components/ha-md-dialog";
-import {
-  getMobileCloseToBottomAnimation,
-  getMobileOpenFromBottomAnimation,
-} from "../../../../components/ha-md-dialog";
+import "../../../../components/ha-wa-dialog";
 import type { EntityRegistryEntry } from "../../../../data/entity/entity_registry";
 import type { LightColor, LightEntity } from "../../../../data/light";
 import {
@@ -41,7 +36,7 @@ class DialogLightColorFavorite extends LitElement {
 
   @state() private _modes: LightPickerMode[] = [];
 
-  @query("ha-md-dialog") private _dialog?: HaMdDialog;
+  @state() private _open = false;
 
   public async showDialog(
     dialogParams: LightColorFavoriteDialogParams
@@ -50,10 +45,11 @@ class DialogLightColorFavorite extends LitElement {
     this._dialogParams = dialogParams;
     this._color = dialogParams.initialColor ?? this._computeCurrentColor();
     this._updateModes();
+    this._open = true;
   }
 
   public closeDialog(): void {
-    this._dialog?.close();
+    this._open = false;
   }
 
   private _updateModes() {
@@ -120,16 +116,8 @@ class DialogLightColorFavorite extends LitElement {
     );
   }
 
-  private async _cancel() {
-    this._dialogParams?.cancel?.();
-  }
-
-  private _cancelDialog() {
-    this._cancel();
-    this.closeDialog();
-  }
-
   private _dialogClosed(): void {
+    this._open = false;
     this._dialogParams = undefined;
     this._entry = undefined;
     this._color = undefined;
@@ -138,7 +126,7 @@ class DialogLightColorFavorite extends LitElement {
 
   private async _save() {
     if (!this._color) {
-      this._cancel();
+      this.closeDialog();
       return;
     }
     this._dialogParams?.submit?.(this._color);
@@ -159,83 +147,76 @@ class DialogLightColorFavorite extends LitElement {
     }
 
     return html`
-      <ha-md-dialog
-        open
-        @cancel=${this._cancel}
+      <ha-wa-dialog
+        .hass=${this.hass}
+        .open=${this._open}
+        .headerTitle=${this._dialogParams?.title}
         @closed=${this._dialogClosed}
-        aria-labelledby="dialog-light-color-favorite-title"
-        .getOpenAnimation=${getMobileOpenFromBottomAnimation}
-        .getCloseAnimation=${getMobileCloseToBottomAnimation}
       >
-        <ha-dialog-header slot="headline">
-          <ha-icon-button
-            slot="navigationIcon"
-            @click=${this.closeDialog}
-            .label=${this.hass.localize("ui.common.close")}
-            .path=${mdiClose}
-          ></ha-icon-button>
-          <span slot="title" id="dialog-light-color-favorite-title"
-            >${this._dialogParams?.title}</span
-          >
-        </ha-dialog-header>
-        <div slot="content">
-          <div class="header">
-            ${this._modes.length > 1
-              ? html`
-                  <div class="modes">
-                    ${this._modes.map(
-                      (value) => html`
-                        <ha-icon-button-toggle
-                          border-only
-                          .selected=${value === this._mode}
-                          .label=${this.hass.localize(
-                            `ui.dialogs.more_info_control.light.color_picker.mode.${value}`
-                          )}
-                          .mode=${value}
-                          @click=${this._modeChanged}
-                        >
-                          <span
-                            class="wheel ${classMap({ [value]: true })}"
-                          ></span>
-                        </ha-icon-button-toggle>
-                      `
-                    )}
-                  </div>
-                `
-              : nothing}
-          </div>
-          <div class="content">
-            ${this._mode === "color_temp"
-              ? html`
-                  <light-color-temp-picker
-                    .hass=${this.hass}
-                    .stateObj=${this.stateObj}
-                    @color-changed=${this._colorChanged}
-                  >
-                  </light-color-temp-picker>
-                `
-              : nothing}
-            ${this._mode === "color"
-              ? html`
-                  <light-color-rgb-picker
-                    .hass=${this.hass}
-                    .stateObj=${this.stateObj}
-                    @color-changed=${this._colorChanged}
-                  >
-                  </light-color-rgb-picker>
-                `
-              : nothing}
-          </div>
+        <div class="header">
+          ${this._modes.length > 1
+            ? html`
+                <div class="modes">
+                  ${this._modes.map(
+                    (value) => html`
+                      <ha-icon-button-toggle
+                        border-only
+                        .selected=${value === this._mode}
+                        .label=${this.hass.localize(
+                          `ui.dialogs.more_info_control.light.color_picker.mode.${value}`
+                        )}
+                        .mode=${value}
+                        @click=${this._modeChanged}
+                      >
+                        <span
+                          class="wheel ${classMap({ [value]: true })}"
+                        ></span>
+                      </ha-icon-button-toggle>
+                    `
+                  )}
+                </div>
+              `
+            : nothing}
         </div>
-        <div slot="actions">
-          <ha-button appearance="plain" @click=${this._cancelDialog}>
+        <div class="content">
+          ${this._mode === "color_temp"
+            ? html`
+                <light-color-temp-picker
+                  .hass=${this.hass}
+                  .stateObj=${this.stateObj}
+                  @color-changed=${this._colorChanged}
+                >
+                </light-color-temp-picker>
+              `
+            : nothing}
+          ${this._mode === "color"
+            ? html`
+                <light-color-rgb-picker
+                  .hass=${this.hass}
+                  .stateObj=${this.stateObj}
+                  @color-changed=${this._colorChanged}
+                >
+                </light-color-rgb-picker>
+              `
+            : nothing}
+        </div>
+        <ha-dialog-footer slot="footer">
+          <ha-button
+            slot="secondaryAction"
+            appearance="plain"
+            @click=${this.closeDialog}
+          >
             ${this.hass.localize("ui.common.cancel")}
           </ha-button>
-          <ha-button @click=${this._save} .disabled=${!this._color}
-            >${this.hass.localize("ui.common.save")}</ha-button
+          <ha-button
+            slot="primaryAction"
+            @click=${this._save}
+            .disabled=${!this._color}
           >
-        </div>
-      </ha-md-dialog>
+            ${this.hass.localize("ui.common.save")}
+          </ha-button>
+        </ha-dialog-footer>
+      </ha-wa-dialog>
     `;
   }
 
@@ -243,23 +224,18 @@ class DialogLightColorFavorite extends LitElement {
     return [
       haStyleDialog,
       css`
-        ha-md-dialog {
-          min-width: 420px; /* prevent width jumps when switching modes */
-          max-height: min(
+        ha-wa-dialog {
+          --ha-dialog-width-md: 420px; /* prevent width jumps when switching modes */
+          --ha-dialog-max-height: min(
             600px,
             100% - 48px
           ); /* prevent scrolling on desktop */
         }
 
         @media all and (max-width: 450px), all and (max-height: 500px) {
-          ha-md-dialog {
-            min-width: 100%;
-            min-height: auto;
-            max-height: calc(100% - 100px);
-            margin-bottom: 0;
-
-            --md-dialog-container-shape-start-start: 28px;
-            --md-dialog-container-shape-start-end: 28px;
+          ha-wa-dialog {
+            --ha-dialog-width-md: 100vw;
+            --ha-dialog-max-height: calc(100% - 100px);
           }
         }
 

src/dialogs/more-info/components/lights/show-dialog-light-color-favorite.ts

@@ -7,7 +7,6 @@ export interface LightColorFavoriteDialogParams {
   title: string;
   initialColor?: LightColor;
   submit?: (color?: LightColor) => void;
-  cancel?: () => void;
 }
 
 export const loadLightColorFavoriteDialog = () =>
@@ -18,7 +17,6 @@ export const showLightColorFavoriteDialog = (
   dialogParams: LightColorFavoriteDialogParams
 ) =>
   new Promise<LightColor | null>((resolve) => {
-    const origCancel = dialogParams.cancel;
     const origSubmit = dialogParams.submit;
 
     fireEvent(element, "show-dialog", {
@@ -26,12 +24,6 @@ export const showLightColorFavoriteDialog = (
       dialogImport: loadLightColorFavoriteDialog,
       dialogParams: {
         ...dialogParams,
-        cancel: () => {
-          resolve(null);
-          if (origCancel) {
-            origCancel();
-          }
-        },
         submit: (color: LightColor) => {
           resolve(color);
           if (origSubmit) {