Lovelace: Add a label entity row (#1779)

* Add a label entity row

* Style fixes

* Allow blank label text

* Rename to section

gallery/src/demos/demo-hui-entities-card.js

@@ -149,10 +149,6 @@ const CONFIGS = [
     config: `
 - type: entities
   entities:
-    - type: weblink
-      url: http://google.com/
-      icon: mdi:google
-      name: Google
     - type: call-service
       icon: mdi:power
       name: Bed light
@@ -160,6 +156,12 @@ const CONFIGS = [
       service: light.toggle
       service_data:
         entity_id: light.bed_light
+    - type: section
+      label: Links
+    - type: weblink
+      url: http://google.com/
+      icon: mdi:google
+      name: Google
     - type: divider
     - type: divider
       style:

src/panels/lovelace/common/create-row-element.js

@@ -16,12 +16,18 @@ import "../entity-rows/hui-toggle-entity-row.js";
 
 import "../special-rows/hui-call-service-row.js";
 import "../special-rows/hui-divider-row.js";
+import "../special-rows/hui-section-row.js";
 import "../special-rows/hui-weblink-row.js";
 
 import createErrorCardConfig from "./create-error-card-config.js";
 
 const CUSTOM_TYPE_PREFIX = "custom:";
-const SPECIAL_TYPES = new Set(["call-service", "divider", "weblink"]);
+const SPECIAL_TYPES = new Set([
+  "call-service",
+  "divider",
+  "section",
+  "weblink",
+]);
 const DOMAIN_TO_ELEMENT_TYPE = {
   automation: "toggle",
   climate: "climate",

src/panels/lovelace/special-rows/hui-section-row.js

@@ -0,0 +1,53 @@
+import { html } from "@polymer/polymer/lib/utils/html-tag.js";
+import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+
+import "../../../components/ha-icon.js";
+
+class HuiSectionRow extends PolymerElement {
+  static get template() {
+    return html`
+      ${this.styleTemplate}
+      <div class=divider></div>
+      <template is="dom-if" if="[[_config.label]]">
+        <div class=label>
+          [[_config.label]]
+        </div>
+      </template>
+    `;
+  }
+
+  static get styleTemplate() {
+    return html`
+      <style>
+        .label {
+          color: var(--primary-color);
+          margin-left: 8px;
+          margin-bottom: 16px;
+          margin-top: 16px;
+        }
+        .divider {
+          height: 1px;
+          background-color: var(--secondary-text-color);
+          opacity: 0.25;
+          margin-left: -16px;
+          margin-right: -16px;
+          margin-top: 8px;
+        }
+      </style>
+    `;
+  }
+
+  static get properties() {
+    return {
+      _config: Object,
+    };
+  }
+
+  setConfig(config) {
+    if (!config) {
+      throw new Error("Error in card configuration.");
+    }
+    this._config = config;
+  }
+}
+customElements.define("hui-section-row", HuiSectionRow);