Add white mode to more info light (#15774)

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

@@ -2,6 +2,7 @@ import "@material/mwc-list/mwc-list-item";
 import "@material/web/iconbutton/outlined-icon-button";
 import {
   mdiCreation,
+  mdiFileWordBox,
   mdiLightbulb,
   mdiLightbulbOff,
   mdiPalette,
@@ -73,6 +74,11 @@ class MoreInfoLight extends LitElement {
 
     const supportsColor = lightSupportsColor(this.stateObj);
 
+    const supportsWhite = lightSupportsColorMode(
+      this.stateObj,
+      LightColorMode.WHITE
+    );
+
     const supportsBrightness = lightSupportsBrightness(this.stateObj);
 
     const supportsEffects = supportsFeature(
@@ -148,6 +154,22 @@ class MoreInfoLight extends LitElement {
                       </md-outlined-icon-button>
                     `
                   : null}
+                ${supportsWhite
+                  ? html`
+                      <md-outlined-icon-button
+                        .disabled=${this.stateObj.state === UNAVAILABLE}
+                        .title=${this.hass.localize(
+                          "ui.dialogs.more_info_control.light.set_white"
+                        )}
+                        .ariaLabel=${this.hass.localize(
+                          "ui.dialogs.more_info_control.light.set_white"
+                        )}
+                        @click=${this._setWhiteColor}
+                      >
+                        <ha-svg-icon .path=${mdiFileWordBox}></ha-svg-icon>
+                      </md-outlined-icon-button>
+                    `
+                  : null}
                 ${supportsEffects && this.stateObj.attributes.effect_list
                   ? html`
                       <ha-button-menu
@@ -216,6 +238,13 @@ class MoreInfoLight extends LitElement {
     );
   };
 
+  private _setWhiteColor = () => {
+    this.hass.callService("light", "turn_on", {
+      entity_id: this.stateObj!.entity_id,
+      white: true,
+    });
+  };
+
   private _handleEffectButton(ev) {
     ev.stopPropagation();
     ev.preventDefault();

src/translations/en.json

@@ -899,6 +899,7 @@
         "light": {
           "toggle": "Toggle",
           "change_color": "Change color",
+          "set_white": "Set white",
           "select_effect": "Select effect",
           "brightness": "Brightness",
           "color_picker": {