Allow create zone without icon + add icon picker (#10447)

src/components/ha-icon-picker.ts

@@ -60,6 +60,8 @@ export class HaIconPicker extends LitElement {
 
   @property({ type: Boolean }) public disabled = false;
 
+  @property({ type: Boolean }) public invalid = false;
+
   @state() private _opened = false;
 
   @query("vaadin-combo-box-light", true) private comboBox!: HTMLElement;
@@ -86,6 +88,8 @@ export class HaIconPicker extends LitElement {
           autocomplete="off"
           autocorrect="off"
           spellcheck="false"
+          .errorMessage=${this.errorMessage}
+          .invalid=${this.invalid}
         >
           ${this._value || this.placeholder
             ? html`

src/data/zone.ts

@@ -12,7 +12,7 @@ export interface Zone {
 }
 
 export interface ZoneMutableParams {
-  icon: string;
+  icon?: string;
   latitude: number;
   longitude: number;
   name: string;

src/panels/config/zone/dialog-zone-detail.ts

@@ -8,6 +8,7 @@ import { addDistanceToCoord } from "../../../common/location/add_distance_to_coo
 import { computeRTLDirection } from "../../../common/util/compute_rtl";
 import { createCloseHeading } from "../../../components/ha-dialog";
 import "../../../components/ha-formfield";
+import "../../../components/ha-icon-picker";
 import "../../../components/ha-switch";
 import "../../../components/map/ha-locations-editor";
 import type { MarkerLocation } from "../../../components/map/ha-locations-editor";
@@ -77,14 +78,18 @@ class DialogZoneDetail extends LitElement {
     if (!this._params) {
       return html``;
     }
-    const nameValid = this._name.trim() === "";
-    const iconValid = !this._icon.trim().includes(":");
-    const latValid = String(this._latitude) === "";
-    const lngValid = String(this._longitude) === "";
-    const radiusValid = String(this._radius) === "";
+    const nameInvalid = this._name.trim() === "";
+    const iconInvalid = Boolean(this._icon && !this._icon.trim().includes(":"));
+    const latInvalid = String(this._latitude) === "";
+    const lngInvalid = String(this._longitude) === "";
+    const radiusInvalid = String(this._radius) === "";
 
     const valid =
-      !nameValid && !iconValid && !latValid && !lngValid && !radiusValid;
+      !nameInvalid &&
+      !iconInvalid &&
+      !latInvalid &&
+      !lngInvalid &&
+      !radiusInvalid;
 
     return html`
       <ha-dialog
@@ -114,7 +119,7 @@ class DialogZoneDetail extends LitElement {
               required
               auto-validate
             ></paper-input>
-            <paper-input
+            <ha-icon-picker
               .value=${this._icon}
               .configValue=${"icon"}
               @value-changed=${this._valueChanged}
@@ -122,8 +127,8 @@ class DialogZoneDetail extends LitElement {
               .errorMessage=${this.hass!.localize(
                 "ui.panel.config.zone.detail.icon_error_msg"
               )}
-              .invalid=${iconValid}
-            ></paper-input>
+              .invalid=${iconInvalid}
+            ></ha-icon-picker>
             <ha-locations-editor
               class="flex"
               .hass=${this.hass}
@@ -148,7 +153,7 @@ class DialogZoneDetail extends LitElement {
                 .errorMessage=${this.hass!.localize(
                   "ui.panel.config.zone.detail.required_error_msg"
                 )}
-                .invalid=${latValid}
+                .invalid=${latInvalid}
               ></paper-input>
               <paper-input
                 .value=${this._longitude}
@@ -160,7 +165,7 @@ class DialogZoneDetail extends LitElement {
                 .errorMessage=${this.hass!.localize(
                   "ui.panel.config.zone.detail.required_error_msg"
                 )}
-                .invalid=${lngValid}
+                .invalid=${lngInvalid}
               ></paper-input>
             </div>
             <paper-input
@@ -173,7 +178,7 @@ class DialogZoneDetail extends LitElement {
               .errorMessage=${this.hass!.localize(
                 "ui.panel.config.zone.detail.required_error_msg"
               )}
-              .invalid=${radiusValid}
+              .invalid=${radiusInvalid}
             ></paper-input>
             <p>
               ${this.hass!.localize("ui.panel.config.zone.detail.passive_note")}
@@ -268,12 +273,14 @@ class DialogZoneDetail extends LitElement {
     try {
       const values: ZoneMutableParams = {
         name: this._name.trim(),
-        icon: this._icon.trim(),
         latitude: this._latitude,
         longitude: this._longitude,
         passive: this._passive,
         radius: this._radius,
       };
+      if (this._icon) {
+        values.icon = this._icon.trim();
+      }
       if (this._params!.entry) {
         await this._params!.updateEntry!(values);
       } else {