From 6033f8b31a3ae8e5c12ac003bd4f4c80306d8cab Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Thu, 8 Feb 2024 14:38:08 +0100
Subject: [PATCH] Add QR and constant selector to gallery (#19730)

* Add QR and constant selector to gallery

* Update ha-selector.ts
---
 gallery/src/components/demo-black-white-row.ts |  8 +++++---
 gallery/src/pages/components/ha-selector.ts    | 14 +++++++++++---
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/gallery/src/components/demo-black-white-row.ts b/gallery/src/components/demo-black-white-row.ts
index 30b2c533b7..851cb5bb71 100644
--- a/gallery/src/components/demo-black-white-row.ts
+++ b/gallery/src/components/demo-black-white-row.ts
@@ -1,5 +1,5 @@
 import { Button } from "@material/mwc-button";
-import { html, LitElement, css, TemplateResult } from "lit";
+import { html, LitElement, css, TemplateResult, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
 import { fireEvent } from "../../../src/common/dom/fire_event";
@@ -9,7 +9,7 @@ import "../../../src/components/ha-card";
 class DemoBlackWhiteRow extends LitElement {
   @property() title!: string;
 
-  @property() value!: any;
+  @property() value?: any;
 
   @property({ type: Boolean }) public disabled = false;
 
@@ -45,7 +45,9 @@ class DemoBlackWhiteRow extends LitElement {
               </mwc-button>
             </div>
           </ha-card>
-          <pre>${JSON.stringify(this.value, undefined, 2)}</pre>
+          ${this.value
+            ? html`<pre>${JSON.stringify(this.value, undefined, 2)}</pre>`
+            : nothing}
         </div>
       </div>
     `;
diff --git a/gallery/src/pages/components/ha-selector.ts b/gallery/src/pages/components/ha-selector.ts
index 78dbe681bb..fceab71c29 100644
--- a/gallery/src/pages/components/ha-selector.ts
+++ b/gallery/src/pages/components/ha-selector.ts
@@ -275,6 +275,14 @@ const SCHEMAS: {
         selector: { color_temp: {} },
       },
       color_rgb: { name: "Color", selector: { color_rgb: {} } },
+      qr_code: {
+        name: "QR Code",
+        selector: { qr_code: { data: "https://home-assistant.io" } },
+      },
+      constant: {
+        name: "Constant",
+        selector: { constant: { value: true, label: "Yes!" } },
+      },
     },
   },
   {
@@ -501,7 +509,7 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
           this.requestUpdate();
         };
         return html`
-          <demo-black-white-row .title=${info.name} .value=${this.data[idx]}>
+          <demo-black-white-row .title=${info.name}>
             ${["light", "dark"].map((slot) =>
               Object.entries(info.input).map(
                 ([key, value]) => html`
@@ -534,8 +542,8 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
   }
 
   static styles = css`
-    ha-selector {
-      width: 60;
+    ha-settings-row {
+      --paper-item-body-two-line-min-height: 0;
     }
     .options {
       max-width: 800px;