Use new select component for effect for more info light (#17542)

src/dialogs/more-info/controls/more-info-fan.ts

@@ -11,7 +11,6 @@ import { customElement, property, state } from "lit/decorators";
 import { stopPropagation } from "../../../common/dom/stop_propagation";
 import { stateActive } from "../../../common/entity/state_active";
 import { supportsFeature } from "../../../common/entity/supports-feature";
-import "../../../components/ha-attributes";
 import "../../../components/ha-control-select-menu";
 import "../../../components/ha-list-item";
 import "../../../components/ha-outlined-icon-button";

src/dialogs/more-info/controls/more-info-light.ts

@@ -8,35 +8,30 @@ import {
   mdiPower,
 } from "@mdi/js";
 import {
-  css,
   CSSResultGroup,
-  html,
   LitElement,
-  nothing,
   PropertyValues,
+  css,
+  html,
+  nothing,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { stopPropagation } from "../../../common/dom/stop_propagation";
-import {
-  computeAttributeNameDisplay,
-  computeAttributeValueDisplay,
-} from "../../../common/entity/compute_attribute_display";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import { blankBeforePercent } from "../../../common/translations/blank_before_percent";
 import "../../../components/ha-attributes";
-import "../../../components/ha-button-menu";
+import "../../../components/ha-control-select-menu";
 import "../../../components/ha-icon-button-group";
 import "../../../components/ha-icon-button-toggle";
-import "../../../components/ha-outlined-button";
+import "../../../components/ha-list-item";
-import "../../../components/ha-select";
 import { UNAVAILABLE } from "../../../data/entity";
 import { ExtEntityRegistryEntry } from "../../../data/entity_registry";
 import { forwardHaptic } from "../../../data/haptics";
 import {
-  formatTempColor,
   LightColorMode,
   LightEntity,
   LightEntityFeature,
+  formatTempColor,
   lightSupportsBrightness,
   lightSupportsColor,
   lightSupportsColorMode,
@@ -287,64 +282,46 @@ class MoreInfoLight extends LitElement {
                 : nothing}
             `
           : nothing}
+      </div>
+      <div>
+        <div class="secondary-controls">
+          <div class="secondary-controls-scroll">
             ${supportsEffects && this.stateObj.attributes.effect_list
               ? html`
-              <ha-button-menu
+                  <ha-control-select-menu
-                @action=${this._handleEffectButton}
+                    .label=${this.hass.formatEntityAttributeName(
-                @closed=${stopPropagation}
-                fixed
-                .disabled=${this.stateObj.state === UNAVAILABLE}
-              >
-                <ha-outlined-button
-                  slot="trigger"
-                  .disabled=${this.stateObj.state === UNAVAILABLE}
-                >
-                  <ha-svg-icon slot="icon" path=${mdiCreation}></ha-svg-icon>
-                  ${this._effect
-                    ? computeAttributeValueDisplay(
-                        this.hass.localize,
-                        this.stateObj!,
-                        this.hass.locale,
-                        this.hass.config,
-                        this.hass.entities,
-                        "effect",
-                        this._effect
-                      )
-                    : computeAttributeNameDisplay(
-                        this.hass.localize,
                       this.stateObj,
-                        this.hass.entities,
                       "effect"
                     )}
-                </ha-outlined-button>
+                    .value=${this.stateObj.attributes.effect}
-                ${this.stateObj.attributes.effect_list.map(
+                    fixedMenuPosition
-                  (effect: string) => html`
+                    naturalMenuWidth
-                    <ha-list-item
+                    @selected=${this._handleEffect}
-                      .value=${effect}
+                    @closed=${stopPropagation}
-                      .activated=${this.stateObj!.attributes.effect === effect}
                   >
-                      ${computeAttributeValueDisplay(
+                    <ha-svg-icon slot="icon" .path=${mdiCreation}></ha-svg-icon>
-                        this.hass.localize,
+                    ${this.stateObj.attributes.effect_list?.map(
+                      (mode) => html`
+                        <ha-list-item .value=${mode}>
+                          ${this.hass.formatEntityAttributeValue(
                             this.stateObj!,
-                        this.hass.locale,
-                        this.hass.config,
-                        this.hass.entities,
                             "effect",
-                        effect
+                            mode
                           )}
                         </ha-list-item>
                       `
                     )}
-              </ha-button-menu>
+                  </ha-control-select-menu>
                 `
               : nothing}
           </div>
-
+        </div>
         <ha-attributes
           .hass=${this.hass}
           .stateObj=${this.stateObj}
           extra-filters="brightness,color_temp,color_temp_kelvin,white_value,effect_list,effect,hs_color,rgb_color,rgbw_color,rgbww_color,xy_color,min_mireds,max_mireds,min_color_temp_kelvin,max_color_temp_kelvin,entity_id,supported_color_modes,color_mode"
         ></ha-attributes>
+      </div>
     `;
   }
 
@@ -363,12 +340,8 @@ class MoreInfoLight extends LitElement {
     });
   };
 
-  private _handleEffectButton(ev) {
+  private _handleEffect(ev) {
-    ev.stopPropagation();
+    const newVal = ev.target.value;
-    ev.preventDefault();
-
-    const index = ev.detail.index;
-    const newVal = this.stateObj!.attributes.effect_list![index];
     const oldVal = this._effect;
 
     if (!newVal || oldVal === newVal) return;