Add entity search tip to dev-tools set state (#12355)

gallery/src/pages/components/ha-alert.ts

@@ -159,13 +159,19 @@ export class DemoHaAlert extends LitElement {
 
   firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
-    applyThemesOnElement(this.shadowRoot!.querySelector(".dark"), {
+    applyThemesOnElement(
-      default_theme: "default",
+      this.shadowRoot!.querySelector(".dark"),
-      default_dark_theme: "default",
+      {
-      themes: {},
+        default_theme: "default",
-      darkMode: true,
+        default_dark_theme: "default",
-      theme: "default",
+        themes: {},
-    });
+        darkMode: true,
+        theme: "default",
+      },
+      undefined,
+      undefined,
+      true
+    );
   }
 
   static get styles() {

gallery/src/pages/components/ha-tip.markdown

@@ -0,0 +1,3 @@
+---
+title: Tips
+---

gallery/src/pages/components/ha-tip.ts

@@ -0,0 +1,73 @@
+import { html, css, LitElement, TemplateResult } from "lit";
+import { customElement } from "lit/decorators";
+import "../../../../src/components/ha-tip";
+import "../../../../src/components/ha-card";
+import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
+
+const tips: (string | TemplateResult)[] = [
+  "Test tip",
+  "Bigger test tip, with some random text just to fill up as much space as possible without it looking like I'm really trying to to that",
+  html`<i>Tip</i> <b>with</b> <sub>HTML</sub>`,
+];
+
+@customElement("demo-components-ha-tip")
+export class DemoHaTip extends LitElement {
+  protected render(): TemplateResult {
+    return html` ${["light", "dark"].map(
+      (mode) => html`
+        <div class=${mode}>
+          <ha-card header="ha-tip ${mode} demo">
+            <div class="card-content">
+              ${tips.map((tip) => html`<ha-tip>${tip}</ha-tip>`)}
+            </div>
+          </ha-card>
+        </div>
+      `
+    )}`;
+  }
+
+  firstUpdated(changedProps) {
+    super.firstUpdated(changedProps);
+    applyThemesOnElement(
+      this.shadowRoot!.querySelector(".dark"),
+      {
+        default_theme: "default",
+        default_dark_theme: "default",
+        themes: {},
+        darkMode: true,
+        theme: "default",
+      },
+      undefined,
+      undefined,
+      true
+    );
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+      }
+      .dark,
+      .light {
+        display: block;
+        background-color: var(--primary-background-color);
+        padding: 0 50px;
+      }
+      ha-tip {
+        margin-bottom: 14px;
+      }
+      ha-card {
+        margin: 24px auto;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-components-ha-tip": DemoHaTip;
+  }
+}

src/components/ha-tip.ts

@@ -0,0 +1,38 @@
+import { mdiLightbulbOutline } from "@mdi/js";
+import { css, html, LitElement } from "lit";
+import { customElement } from "lit/decorators";
+
+import "./ha-svg-icon";
+
+@customElement("ha-tip")
+class HaTip extends LitElement {
+  public render() {
+    return html`
+      <ha-svg-icon .path=${mdiLightbulbOutline}></ha-svg-icon>
+      <span class="prefix">Tip!</span>
+      <span class="text"><slot></slot></span>
+    `;
+  }
+
+  static styles = css`
+    :host {
+      display: block;
+      text-align: center;
+    }
+
+    .text {
+      margin-left: 2px;
+      color: var(--secondary-text-color);
+    }
+
+    .prefix {
+      font-weight: 500;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-tip": HaTip;
+  }
+}

src/dialogs/quick-bar/ha-quick-bar.ts

@@ -240,7 +240,7 @@ export class QuickBar extends LitElement {
                   : ""}
               </mwc-list>
             `}
-        ${this._hint ? html`<div class="hint">${this._hint}</div>` : ""}
+        ${this._hint ? html`<ha-tip>${this._hint}</ha-tip>` : ""}
       </ha-dialog>
     `;
   }
@@ -782,10 +782,8 @@ export class QuickBar extends LitElement {
           text-transform: capitalize;
         }
 
-        .hint {
+        ha-tip {
           padding: 20px;
-          font-style: italic;
-          text-align: center;
         }
 
         .nothing-found {

src/panels/config/dashboard/ha-config-dashboard.ts

@@ -1,12 +1,6 @@
 import type { ActionDetail } from "@material/mwc-list";
 import "@material/mwc-list/mwc-list-item";
-import {
+import { mdiCloudLock, mdiDotsVertical, mdiMagnify, mdiNewBox } from "@mdi/js";
-  mdiCloudLock,
-  mdiDotsVertical,
-  mdiLightbulbOutline,
-  mdiMagnify,
-  mdiNewBox,
-} from "@mdi/js";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
 import type { HassEntities } from "home-assistant-js-websocket";
@@ -29,6 +23,7 @@ import "../../../components/ha-icon-button";
 import "../../../components/ha-icon-next";
 import "../../../components/ha-menu-button";
 import "../../../components/ha-svg-icon";
+import "../../../components/ha-tip";
 import { CloudStatus } from "../../../data/cloud";
 import { updateCanInstall, UpdateEntity } from "../../../data/update";
 import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
@@ -91,7 +86,7 @@ const randomTip = (hass: HomeAssistant) => {
       ),
       weight: 2,
     },
-    { content: hass.localize("ui.dialogs.quick-bar.key_c_hint"), weight: 1 },
+    { content: hass.localize("ui.tips.key_c_hint"), weight: 1 },
   ];
 
   tips.forEach((tip) => {
@@ -202,11 +197,7 @@ class HaConfigDashboard extends LitElement {
               )}
             ></ha-config-navigation>
           </ha-card>
-          <div class="tips">
+          <ha-tip>${this._tip}</ha-tip>
-            <ha-svg-icon .path=${mdiLightbulbOutline}></ha-svg-icon>
-            <span class="tip-word">Tip!</span>
-            <span class="text">${this._tip}</span>
-          </div>
         </ha-config-section>
       </ha-app-layout>
     `;
@@ -343,19 +334,10 @@ class HaConfigDashboard extends LitElement {
           margin-top: -42px;
         }
 
-        .tips {
+        ha-tip {
-          text-align: center;
           margin-bottom: max(env(safe-area-inset-bottom), 8px);
         }
 
-        .tips .text {
-          color: var(--secondary-text-color);
-        }
-
-        .tip-word {
-          font-weight: 500;
-        }
-
         .new {
           color: var(--primary-color);
         }

src/panels/developer-tools/state/developer-tools-state.js

@@ -18,6 +18,7 @@ import "../../../components/ha-code-editor";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-svg-icon";
 import "../../../components/ha-checkbox";
+import "../../../components/ha-tip";
 import "../../../components/search-input";
 import "../../../components/ha-expansion-panel";
 import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
@@ -90,6 +91,10 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
           display: block;
           --mdc-text-field-fill-color: transparent;
         }
+        ha-tip {
+          display: flex;
+          padding: 8px 0;
+        }
 
         th.attributes {
           position: relative;
@@ -181,6 +186,7 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
               on-change="entityIdChanged"
               allow-custom-entity
             ></ha-entity-picker>
+            <ha-tip>[[localize('ui.tips.key_e_hint')]]</ha-tip>
             <ha-textfield
               label="[[localize('ui.panel.developer-tools.tabs.states.state')]]"
               required

src/translations/en.json

@@ -4166,6 +4166,10 @@
           "energy_devices_graph_title": "Monitor individual devices"
         }
       }
+    },
+    "tips": {
+      "key_c_hint": "Press 'c' on any page to open the command dialog",
+      "key_e_hint": "Press 'e' on any page to open the entity search dialog"
     }
   },
   "supervisor": {