From 13b864e2618a9bee475839794a291190a7ea3241 Mon Sep 17 00:00:00 2001
From: Paul Bottein <paul.bottein@gmail.com>
Date: Tue, 20 Jun 2023 16:45:45 +0200
Subject: [PATCH] Use ha-icon-button-group in more info cover (#16911)

---
 .../more-info/controls/more-info-cover.ts     | 39 ++++++++++++-------
 1 file changed, 25 insertions(+), 14 deletions(-)

diff --git a/src/dialogs/more-info/controls/more-info-cover.ts b/src/dialogs/more-info/controls/more-info-cover.ts
index 7fd9d9a8ac..3ea0907245 100644
--- a/src/dialogs/more-info/controls/more-info-cover.ts
+++ b/src/dialogs/more-info/controls/more-info-cover.ts
@@ -11,6 +11,8 @@ import { customElement, property, state } from "lit/decorators";
 import { computeStateDisplay } from "../../../common/entity/compute_state_display";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import "../../../components/ha-attributes";
+import "../../../components/ha-icon-button-group";
+import "../../../components/ha-icon-button-toggle";
 import {
   computeCoverPositionStateDisplay,
   CoverEntity,
@@ -24,6 +26,8 @@ import "../components/cover/ha-more-info-cover-toggle";
 import { moreInfoControlStyle } from "../components/ha-more-info-control-style";
 import "../components/ha-more-info-state-header";
 
+type Mode = "position" | "button";
+
 @customElement("more-info-cover")
 class MoreInfoCover extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -34,10 +38,10 @@ class MoreInfoCover extends LitElement {
 
   @state() private _liveTilt?: number;
 
-  @state() private _mode?: "position" | "button";
+  @state() private _mode?: Mode;
 
-  private _toggleMode() {
-    this._mode = this._mode === "position" ? "button" : "position";
+  private _setMode(ev) {
+    this._mode = ev.currentTarget.mode;
   }
 
   private _positionSliderMoved(ev) {
@@ -192,19 +196,26 @@ class MoreInfoCover extends LitElement {
             (supportsPosition || supportsTiltPosition) &&
             (supportsOpenClose || supportsTilt)
               ? html`
-                  <div class="actions">
-                    <ha-icon-button
+                  <ha-icon-button-group>
+                    <ha-icon-button-toggle
                       .label=${this.hass.localize(
-                        `ui.dialogs.more_info_control.cover.switch_mode.${
-                          this._mode === "position" ? "button" : "position"
-                        }`
+                        `ui.dialogs.more_info_control.cover.switch_mode.position`
                       )}
-                      .path=${this._mode === "position"
-                        ? mdiSwapVertical
-                        : mdiMenu}
-                      @click=${this._toggleMode}
-                    ></ha-icon-button>
-                  </div>
+                      .selected=${this._mode === "position"}
+                      .path=${mdiMenu}
+                      .mode=${"position"}
+                      @click=${this._setMode}
+                    ></ha-icon-button-toggle>
+                    <ha-icon-button-toggle
+                      .label=${this.hass.localize(
+                        `ui.dialogs.more_info_control.cover.switch_mode.button`
+                      )}
+                      .selected=${this._mode === "button"}
+                      .path=${mdiSwapVertical}
+                      .mode=${"button"}
+                      @click=${this._setMode}
+                    ></ha-icon-button-toggle>
+                  </ha-icon-button-group>
                 `
               : nothing
           }