Generic picker: show a label for area, category, language (#28236)

Co-authored-by: Aidan Timson <aidan@timmo.dev>

src/components/ha-area-picker.ts

@@ -51,6 +51,9 @@ export class HaAreaPicker extends LitElement {
   @property({ type: Boolean, attribute: "no-add" })
   public noAdd = false;
 
+  @property({ type: Boolean, attribute: "show-label" })
+  public showLabel = false;
+
   /**
    * Show only areas with entities from specific domains.
    * @type {Array}
@@ -365,9 +368,17 @@ export class HaAreaPicker extends LitElement {
   protected render(): TemplateResult {
     const placeholder =
       this.placeholder ?? this.hass.localize("ui.components.area-picker.area");
-
     const valueRenderer = this._computeValueRenderer(this.hass.areas);
 
+    let showLabel = this.showLabel;
+    if (this.value) {
+      const area = this.hass.areas[this.value];
+      if (area) {
+        const { floor } = getAreaContext(area, this.hass.floors);
+        showLabel = !floor && this.showLabel;
+      }
+    }
+
     return html`
       <ha-generic-picker
         .hass=${this.hass}
@@ -379,6 +390,7 @@ export class HaAreaPicker extends LitElement {
         .disabled=${this.disabled}
         .required=${this.required}
         .placeholder=${placeholder}
+        .showLabel=${showLabel}
         .value=${this.value}
         .getItems=${this._getItems}
         .getAdditionalItems=${this._getAdditionalItems}

src/components/ha-combo-box-item.ts

@@ -20,6 +20,17 @@ export class HaComboBoxItem extends HaMdListItem {
       [slot="start"] {
         --state-icon-color: var(--secondary-text-color);
       }
+      [slot="overline"] {
+        /* mimicing a floating label of mdc-select */
+        line-height: 1.15rem;
+        font-size: calc(var(--mdc-typography-subtitle1-font-size, 1rem) * 0.75);
+        font-weight: var(--mdc-typography-subtitle1-font-weight, 400);
+        font-family: var(
+          --mdc-typography-subtitle1-font-family,
+          var(--mdc-typography-font-family)
+        );
+        color: var(--mdc-select-label-ink-color, rgba(0, 0, 0, 0.6));
+      }
       [slot="headline"] {
         line-height: var(--ha-line-height-normal);
         font-size: var(--ha-font-size-m);

src/components/ha-generic-picker.ts

@@ -48,6 +48,9 @@ export class HaGenericPicker extends LitElement {
   @property({ attribute: "hide-clear-icon", type: Boolean })
   public hideClearIcon = false;
 
+  @property({ attribute: "show-label", type: Boolean })
+  public showLabel = false;
+
   /** To prevent lags, getItems needs to be memoized */
   @property({ attribute: false })
   public getItems!: (
@@ -170,6 +173,7 @@ export class HaGenericPicker extends LitElement {
                   @click=${this.open}
                   @clear=${this._clear}
                   .placeholder=${this.placeholder}
+                  .showLabel=${this.showLabel}
                   .value=${this.value}
                   .required=${this.required}
                   .disabled=${this.disabled}

src/components/ha-language-picker.ts

@@ -132,6 +132,7 @@ export class HaLanguagePicker extends LitElement {
         .placeholder=${this.label ??
         (this.hass?.localize("ui.components.language-picker.language") ||
           "Language")}
+        show-label
         .value=${value}
         .valueRenderer=${this._valueRenderer}
         .disabled=${this.disabled}

src/components/ha-picker-field.ts

@@ -43,6 +43,9 @@ export class HaPickerField extends LitElement {
   @property({ attribute: "hide-clear-icon", type: Boolean })
   public hideClearIcon = false;
 
+  @property({ attribute: "show-label", type: Boolean })
+  public showLabel = false;
+
   @property({ attribute: false })
   public valueRenderer?: PickerValueRenderer;
 
@@ -60,13 +63,16 @@ export class HaPickerField extends LitElement {
   protected render() {
     const showClearIcon =
       !!this.value && !this.required && !this.disabled && !this.hideClearIcon;
+    const placeholder = this.showLabel
+      ? html`<span slot="overline">${this.placeholder}</span>`
+      : nothing;
 
     return html`
       <ha-combo-box-item .disabled=${this.disabled} type="button" compact>
         ${this.value
           ? this.valueRenderer
-            ? this.valueRenderer(this.value)
-            : html`<slot name="headline">${this.value}</slot>`
+            ? html`${placeholder}${this.valueRenderer(this.value)}`
+            : html`${placeholder}<span slot="headline">${this.value}</span>`
           : html`
               <span slot="headline" class="placeholder">
                 ${this.placeholder}

src/panels/config/automation/automation-save-dialog/dialog-automation-save.ts

@@ -177,6 +177,7 @@ class DialogAutomationSave extends LitElement implements HassDialog {
             .hass=${this.hass}
             .scope=${this._params.domain}
             .value=${this._entryUpdates.category}
+            show-label
             @value-changed=${this._registryEntryChanged}
           ></ha-category-picker>`
         : nothing}
@@ -193,6 +194,7 @@ class DialogAutomationSave extends LitElement implements HassDialog {
             id="area"
             .hass=${this.hass}
             .value=${this._entryUpdates.area}
+            show-label
             @value-changed=${this._registryEntryChanged}
           ></ha-area-picker>`
         : nothing}

src/panels/config/category/ha-category-picker.ts

@@ -39,6 +39,9 @@ export class HaCategoryPicker extends SubscribeMixin(LitElement) {
   @property({ type: Boolean, attribute: "no-add" })
   public noAdd = false;
 
+  @property({ type: Boolean, attribute: "show-label" })
+  public showLabel = false;
+
   @property({ type: Boolean }) public disabled = false;
 
   @property({ type: Boolean }) public required = false;
@@ -196,6 +199,7 @@ export class HaCategoryPicker extends SubscribeMixin(LitElement) {
           "ui.components.category-picker.no_categories"
         )}
         .placeholder=${placeholder}
+        .showLabel=${this.showLabel}
         .value=${this.value}
         .getItems=${this._getItems}
         .getAdditionalItems=${this._getAdditionalItems}

src/panels/config/devices/device-registry-detail/dialog-device-registry-detail.ts

@@ -80,6 +80,7 @@ class DialogDeviceRegistryDetail extends LitElement {
             <ha-area-picker
               .hass=${this.hass}
               .value=${this._areaId}
+              show-label
               @value-changed=${this._areaPicked}
             ></ha-area-picker>
             <ha-labels-picker

src/panels/config/entities/entity-registry-settings-editor.ts

@@ -778,6 +778,7 @@ export class EntityRegistrySettingsEditor extends LitElement {
             .hass=${this.hass}
             .value=${this._areaId}
             .disabled=${this.disabled}
+            show-label
             @value-changed=${this._areaPicked}
           ></ha-area-picker>`
         : ""}
@@ -1012,6 +1013,7 @@ export class EntityRegistrySettingsEditor extends LitElement {
               ? html`<ha-area-picker
                   .hass=${this.hass}
                   .value=${this._areaId}
+                  show-label
                   .disabled=${this.disabled}
                   @value-changed=${this._areaPicked}
                 ></ha-area-picker>`